Fix styling and markdown output

Author: sarahsanders-docker

hugo.yaml

@@ -74,12 +74,13 @@ outputFormats:
     isPlainText: true
     mediaType: "text/plain"
     notAlternative: true
-  # llms.txt, see layouts/single.llmstxt.txt
-  llmstxt:
-    baseName: llms
-    mediaType: "text/plain"
+  # Markdown for LLMs, see layouts/_default/single.markdown.md
+  Markdown:
+    baseName: index
+    mediaType: "text/markdown"
     isPlainText: true
-    notAlternative: true
+    isHTML: false
+    permalinkable: true
 
 # Enable custom output formats
 # (only generate the custom output files once)
@@ -91,7 +92,7 @@ outputs:
     - robots
   page:
     - html
-    - llmstxt
+    - Markdown
 
 languages:
   en:

hugo_stats.json

@@ -128,6 +128,7 @@
       "With-systemd-Highly-recommended",
       "Without-packages",
       "Without-systemd",
+      "[display:none]",
       "absolute",
       "aspect-video",
       "bake-action",
@@ -219,6 +220,7 @@
       "dark:hover:bg-blue-dark",
       "dark:hover:bg-blue-dark-500",
       "dark:hover:bg-gray-dark-200",
+      "dark:hover:bg-gray-dark-400",
       "dark:hover:bg-gray-dark-500",
       "dark:hover:text-blue-dark",
       "dark:prose-invert",
@@ -228,7 +230,6 @@
       "dark:text-amber-dark",
       "dark:text-blue-dark",
       "dark:text-divider-dark",
-      "dark:text-gray-400",
       "dark:text-gray-dark",
       "dark:text-gray-dark-300",
       "dark:text-gray-dark-500",
@@ -285,6 +286,7 @@
       "grid-cols-1",
       "group",
       "group-hover:block'",
+      "group-open:[display:block]",
       "group-open:rotate-180",
       "h-16",
       "h-2",
@@ -313,7 +315,6 @@
       "hover:dark:text-blue-dark",
       "hover:drop-shadow-lg",
       "hover:opacity-90",
-      "hover:text-blue-600",
       "hover:text-blue-light",
       "hover:text-white",
       "hover:underline",
@@ -333,7 +334,9 @@
       "justify-center",
       "justify-end",
       "justify-evenly",
+      "leading-none",
       "leading-snug",
+      "leading-tight",
       "left-0",
       "lg:block",
       "lg:flex",
@@ -388,12 +391,13 @@
       "ml-2",
       "ml-3",
       "ml-4",
+      "ml-auto",
       "mt-1",
       "mt-2",
       "mt-20",
-      "mt-3",
       "mt-4",
       "mt-8",
+      "mt-[2px]",
       "mx-auto",
       "my-0",
       "my-1",
@@ -406,6 +410,7 @@
       "open-kapa-widget",
       "openSUSE-and-SLES",
       "origin-bottom-right",
+      "origin-top-right",
       "ot-sdk-show-settings",
       "outline-none",
       "overflow-clip",
@@ -460,7 +465,6 @@
       "rounded-[6px]",
       "rounded-b-lg",
       "rounded-full",
-      "rounded-lg",
       "rounded-sm",
       "scale-50",
       "scale-75",
@@ -471,6 +475,7 @@
       "self-start",
       "shadow",
       "shadow-lg",
+      "shadow-md",
       "sm:block",
       "sm:flex",
       "sm:flex-row",
@@ -488,10 +493,8 @@
       "text-amber-light",
       "text-base",
       "text-black",
-      "text-blue-500",
       "text-blue-light",
       "text-divider-light",
-      "text-gray-500",
       "text-gray-light",
       "text-gray-light-200",
       "text-gray-light-300",
@@ -523,11 +526,13 @@
       "top-full",
       "transform",
       "transition",
+      "transition-colors",
       "transition-transform",
       "truncate",
       "underline-offset-2",
       "uppercase",
       "w-2",
+      "w-56",
       "w-8",
       "w-[1200px]",
       "w-[32px]",

layouts/_default/single.llmstxt.txt

@@ -0,0 +1,7 @@
+{{- $slug := .File.TranslationBaseName -}}
+{{- $outputPath := printf "%s.md" $slug -}}
+{{- .Page.Store.Set "RelativePermalink" (print "/" $outputPath) -}}
+
+{{ .RawContent }}
+
+{{ .RenderShortcodes }}

layouts/_default/single.markdown.md

@@ -12,5 +12,4 @@
     </div>
   {{- end }}
 {{- end }}
-<span>{{ partial "llms-dropdown.html" }}</span>
 </aside>

layouts/partials/aside.html

@@ -1,7 +1,12 @@
 <div class="flex gap-8 w-full">
   <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
     {{ partial "breadcrumbs.html" . }}
-    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
+    <h1 data-pagefind-weight="10" class="scroll-mt-36 flex items-center">
+      <span>{{ .Title }}</span>
+      <span class="ml-auto">
+        {{ partial "md-dropdown.html" . }}
+      </span>
+    </h1>
 
     <div class="block lg:hidden">
       {{ partialCached "pagemeta.html" . . }}

layouts/partials/content-default.html

@@ -0,0 +1,103 @@
+<details class="group relative z-50 inline-block">
+  <summary
+    class="inline-flex cursor-pointer items-center gap-2 rounded border border-gray-light-200 bg-gray-light-200 px-4 py-2 text-base font-semibold text-black transition-colors hover:bg-gray-light-300 dark:border-gray-dark-200 dark:bg-gray-dark-300 dark:text-white dark:hover:bg-gray-dark-400"
+  >
+    <span>Copy page</span>
+    <svg
+      class="h-2 w-2 transform transition-transform group-open:rotate-180"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M19 9l-7 7-7-7"
+      />
+    </svg>
+  </summary>
+
+  <!-- Dropdown menu -->
+  <div
+    class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded border border-gray-light-200 bg-gray-light-200 p-2 text-sm text-black shadow-md [display:none] group-open:[display:block] dark:border-gray-dark-200 dark:bg-gray-dark-300 dark:text-white"
+  >
+    <button
+      onclick="copyMarkdown()"
+      class="flex w-full items-start gap-2 rounded px-2 py-2 text-left transition-colors hover:bg-gray-light-300 dark:hover:bg-gray-dark-400"
+    >
+      <span class="icon-svg mt-[2px] text-base leading-none">
+        {{ partial "icon" "content_copy" }}
+      </span>
+      <div class="leading-tight">
+        <div class="text-base font-bold">Copy page</div>
+        <div class="text-sm text-gray-light-500 dark:text-gray-dark-500">
+          Copy this page as Markdown for LLMs
+        </div>
+      </div>
+    </button>
+
+    <button
+      onclick="viewPlainText()"
+      class="flex w-full items-start gap-2 rounded px-2 py-2 text-left transition-colors hover:bg-gray-light-300 dark:hover:bg-gray-dark-400"
+    >
+      <span class="icon-svg mt-[2px] text-base leading-none">
+        {{ partial "icon" "description" }}
+      </span>
+      <div class="leading-tight">
+        <div class="text-base font-bold">View as Markdown</div>
+        <div class="text-sm text-gray-light-500 dark:text-gray-dark-500">
+          View this page as plain text
+        </div>
+      </div>
+    </button>
+
+    <button
+      onclick="openInDocsAI()"
+      class="flex w-full items-start gap-2 rounded px-2 py-2 text-left transition-colors hover:bg-gray-light-300 dark:hover:bg-gray-dark-400"
+    >
+      <span class="icon-svg mt-[2px] text-base leading-none">
+        {{ partial "icon" "search" }}
+      </span>
+      <div class="leading-tight">
+        <div class="text-base font-bold">Search Docs AI</div>
+        <div class="text-sm text-gray-light-500 dark:text-gray-dark-500">
+          Ask questions with Docs AI
+        </div>
+      </div>
+    </button>
+  </div>
+</details>
+
+<script>
+  function getCurrentPlaintextUrl() {
+    const url = window.location.href.split("#")[0].replace(/\/$/, "");
+    return `${url}.md`;
+  }
+
+  function copyMarkdown() {
+    fetch(getCurrentPlaintextUrl())
+      .then((response) => response.text())
+      .then((text) => {
+        navigator.clipboard
+          .writeText(text)
+          .then(() => alert("Markdown copied to clipboard!"))
+          .catch((err) => alert("Failed to copy markdown: " + err));
+      })
+      .catch((err) => alert("Error fetching markdown: " + err));
+  }
+
+  function viewPlainText() {
+    window.open(getCurrentPlaintextUrl(), "_blank");
+  }
+
+  function openInDocsAI() {
+    const kapaButton = document.querySelector(".open-kapa-widget");
+    if (kapaButton) {
+      kapaButton.click();
+    } else {
+      alert("Couldn't find Docs AI.");
+    }
+  }
+</script>