revise: adds breadcrumb to articles

Author: claymcleod

components/docs/LeftSidebar.vue

@@ -7,9 +7,9 @@
     </div>
     <div class="links">
       <div class="header">Get Started</div>
-      <RouterLink to="/docs/overview">Overview</RouterLink>
-      <RouterLink to="/docs/values">Values</RouterLink>
-      <RouterLink to="/docs/stack">Stack</RouterLink>
+      <RouterLink to="/docs/get-started/overview">Overview</RouterLink>
+      <RouterLink to="/docs/get-started/values">Values</RouterLink>
+      <RouterLink to="/docs/get-started/stack">Stack</RouterLink>
     </div>
   </div>
 </template>

content/docs/1.overview.md renamed to content/docs/get-started/1.overview.md

@@ -4,10 +4,12 @@ export default defineNuxtConfig({
   css: ["~/assets/css/main.css"],
   devtools: { enabled: true },
   modules: [
-    "@nuxtjs/tailwindcss",
     "nuxt-lucide-icons",
-    "@nuxtjs/color-mode",
     "@nuxt/content",
+    "@nuxt/ui",
+    "@nuxt/icon",
+    "@nuxtjs/tailwindcss",
+    "@nuxtjs/color-mode",
   ],
   content: {
     documentDriven: true,

content/docs/2.values.md renamed to content/docs/get-started/2.values.md

@@ -11,16 +11,18 @@
   },
   "dependencies": {
     "@nuxt/content": "^2.13.2",
+    "@nuxt/icon": "^1.5.4",
+    "@nuxt/ui": "^2.18.6",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "change-case": "^5.4.4",
     "nuxt": "^3.13.0",
     "nuxt-lucide-icons": "^1.0.5",
     "vue": "latest",
     "vue-router": "latest"
   },
   "packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca",
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "^3.4.13"
+    "@tailwindcss/typography": "^0.5.15"
   }
 }

content/docs/3.stack.md renamed to content/docs/get-started/3.stack.md

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import { createError, useAsyncData, useRoute } from "nuxt/app";
+import { sentenceCase } from "change-case";
 
 const route = useRoute();
 
@@ -16,16 +17,55 @@ if (!data.value) {
 }
 
 let toc = data.value.body.toc;
+let links = route.path.split("/").slice(2);
+let last = links.pop();
+
+let breadcrumbs = [
+  {
+    label: "Docs",
+    icon: "i-heroicons-book-open",
+    to: "/docs",
+  },
+];
+
+const lookup = {
+  "get-started": {
+    label: "Get Started",
+    icon: "i-heroicons-presentation-chart-line",
+  },
+};
+
+for (var link of links) {
+  let value = lookup[link];
+
+  if (value === undefined) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Unknown breadcrumb",
+      fatal: true,
+    });
+  }
+
+  breadcrumbs.push(value);
+}
+
+breadcrumbs.push({
+  label: sentenceCase(last),
+  icon: "i-heroicons-newspaper",
+});
 </script>
 
 <template>
   <div class="docs">
     <DocsLeftSidebar />
     <div class="content">
       <main>
-        <article>
-          <ContentRenderer :value="data" />
-        </article>
+        <div>
+          <UBreadcrumb :links="breadcrumbs" />
+          <article>
+            <ContentRenderer :value="data" />
+          </article>
+        </div>
       </main>
       <aside>
         <DocsRightSidebar :toc="toc" />
@@ -64,6 +104,8 @@ let toc = data.value.body.toc;
         @apply prose-slate;
         @apply dark:prose-invert;
 
+        @apply py-8;
+
         /* Prose Code */
         @apply prose-code:rounded-md;
         @apply prose-code:px-2;