feat: improve guide structure & template dynamic loading (#86)

Co-authored-by: Anthony Fu <[email protected]>

package.json

@@ -39,7 +39,7 @@
     "@antfu/eslint-config": "^2.6.0",
     "@iconify-json/logos": "^1.1.42",
     "@iconify/json": "^2.2.162",
-    "@nuxt/content": "^2.10.0",
+    "@nuxt/content": "2.9.0",
     "@nuxt/devtools": "^1.0.6",
     "@nuxt/kit": "^3.9.0",
     "@nuxtjs/color-mode": "^3.3.2",

pages/[...slug].vue

@@ -2,11 +2,24 @@
 const router = useRouter()
 const play = usePlaygroundStore()
 
+const templatesMap = Object.fromEntries(
+  Object.entries(import.meta.glob('~/content/**/.template/index.ts'))
+    .map(([key, loader]) => [
+      key
+        .replace(/^\/content/, '')
+        .replace(/\/\.template\/index\.ts$/, '')
+        .replace(/\/\d+\./g, '/'),
+      loader,
+    ]),
+)
+
+if (process.dev)
+  // eslint-disable-next-line no-console
+  console.log('templates', Object.keys(templatesMap))
+
 async function mount(path: string) {
-  if (path === '/views/app-vue')
-    play.mountGuide(await import('~/content/views/1.app-vue/index').then(m => m.meta))
-  else if (path === '/views/routing')
-    play.mountGuide(await import('~/content/views/3.routing/index').then(m => m.meta))
+  if (templatesMap[path])
+    play.mountGuide(await templatesMap[path]().then((m: any) => m.meta))
   else
     play.mountGuide() // unmount previous guide
 }