🚧 docs wip

docs/components/DocExampleBlock.vue

@@ -4,6 +4,8 @@ import FileTypeTypescript from "./icon/VscodeIconsFileTypeTypescriptOfficial.vue
 import FileTypeJavascript from "./icon/VscodeIconsFileTypeJsOfficial.vue"
 import TablerTerminal from "./icon/TablerTerminal.vue";
 
+const hightlighter = useShikiHighlighter();
+
 const slots = defineSlots<{
   default?: () => VNode[];
   code?: () => VNode[];
@@ -43,7 +45,7 @@ const codeSlotContent = computed(() => {
   return '';
 })
 
-defineProps({
+const props = defineProps({
   filename: {
     type: String,
     default: '',
@@ -52,6 +54,35 @@ defineProps({
     type: String as PropType<keyof typeof IconComponents>,
     default: '',
   },
+  code: {
+    type: String,
+    default: '',
+  }
+})
+
+const { data: ast } = await useAsyncData(`${'name'}-ast-${JSON.stringify({ slots: props.slots, code: props.code })}`, async () => {
+  let formatted = ''
+  try {
+    // @ts-ignore
+    formatted = await $prettier.format(code.value, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch {
+    formatted = props.code
+  }
+
+  return parseMarkdown(formatted, {
+    highlight: {
+      highlighter,
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
+    }
+  })
 })
 </script>
 
@@ -72,7 +103,8 @@ defineProps({
 
     <template v-if="slots.code">
       <div class="p-4 overflow-auto">
-        <LazyShiki class="text-sm" :lang="lang" :code="codeSlotContent" />
+        <!-- <LazyShiki class="text-sm" :lang="lang" :code="codeSlotContent" /> -->
+         <ContentRenderer :value="ast" v-if="ast"/>
       </div>
     </template>
   </div>

docs/composables/useShikiHighlighter.ts

@@ -0,0 +1,32 @@
+import { createShikiHighlighter } from "@nuxtjs/mdc/runtime/highlighter/shiki";
+import MaterialTheme from "shiki/themes/material-theme.mjs";
+import MaterialThemeLighter from "shiki/themes/material-theme-lighter.mjs";
+import MaterialThemePalenight from "shiki/themes/material-theme-palenight.mjs";
+import HtmlLang from "shiki/langs/html.mjs";
+import MdcLang from "shiki/langs/mdc.mjs";
+import VueLang from "shiki/langs/vue.mjs";
+import YamlLang from "shiki/langs/yaml.mjs";
+import PostcssLang from "shiki/langs/postcss.mjs";
+import type { Highlighter } from "@nuxtjs/mdc";
+
+let highlighter: Highlighter;
+export const useShikiHighlighter = () => {
+  if (!highlighter) {
+    highlighter = createShikiHighlighter({
+      bundledThemes: {
+        "material-theme": MaterialTheme,
+        "material-theme-lighter": MaterialThemeLighter,
+        "material-theme-palenight": MaterialThemePalenight,
+      },
+      bundledLangs: {
+        html: HtmlLang,
+        mdc: MdcLang,
+        vue: VueLang,
+        yml: YamlLang,
+        postcss: PostcssLang,
+      },
+    });
+  }
+
+  return highlighter;
+};

docs/content/1.installation/1.index.md

@@ -0,0 +1,3 @@
+# index
+
+index docs/content/1.installation/1.index.md test

docs/content/2.components/button.md

@@ -0,0 +1,25 @@
+# Button
+
+Buttons are used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+
+## Usage
+
+```html
+<RayButton>Click me</RayButton>
+```
+
+---
+
+::DocExampleBlock
+test
+
+#code
+console.log('Hello Rayine')
+::
+
+::RayButton
+---
+color: red
+---
+Hello Rayine
+::

docs/content/index.md

@@ -0,0 +1,18 @@
+::DocContentBlock
+---
+title: Button
+accent-title: true
+---
+::
+
+::DocContentBlock
+---
+title: Variants
+---
+::
+
+::DocExampleBlock
+---
+lang: vue
+---
+::

docs/nuxt.config.ts

@@ -4,13 +4,15 @@ import defaultTheme from "tailwindcss/defaultTheme";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
-  modules: ["@nuxt/fonts", module],
+  modules: ["@nuxt/content", "@nuxt/fonts", module],
   devtools: { enabled: true },
   rayui: {
+    globalComponents: true,
     safeColors: ["amber", "emerald", "red", "sky", "violet", "cyan"],
   },
   tailwindcss: {
     config: {
+      darkMode: "media",
       theme: {
         extend: {
           fontFamily: {
@@ -20,4 +22,18 @@ export default defineNuxtConfig({
       },
     },
   },
+  components: [
+    {
+      path: "~/components",
+      global: true,
+    },
+  ],
+  content: {
+    highlight: {
+      langs: ["postcss", "mdc", "html", "vue", "ts", "js"],
+    },
+  },
+  typescript: {
+    includeWorkspace: true,
+  },
 });

docs/package.json

@@ -9,7 +9,10 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/content": "^2.13.4",
+    "@nuxtjs/mdc": "^0.9.2",
     "nuxt": "^3.14.159",
+    "nuxt-shiki": "^0.3.0",
     "rayine-ui": "workspace:rayine-ui",
     "vue": "latest",
     "vue-router": "latest"

docs/pages/[...slug].vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404, statusMessage: 'Page not found', fatal: true
+  })
+}
+</script>
+
+<template>
+  <div>
+    <ContentRenderer v-if="page.body" :value="page" />
+  </div>
+</template>
+
+<style>
+.doc-body {
+  @apply prose dark:prose-invert max-w-none;
+
+  hr {
+    @apply my-8 border-t border-neutral-200 dark:border-neutral-700;
+  }
+
+  h1 {
+    @apply text-3xl text-primary font-bold my-4 first:mt-0;
+  }
+  
+  & > p {
+    @apply text-base text-neutral-900 dark:text-neutral-100;
+  }
+}
+</style>

tsconfig.json

@@ -1,5 +1,9 @@
 {
-  "extends": "./.nuxt/tsconfig.json",
+  
+  "extends": [
+    "./.nuxt/tsconfig.json",
+    "./docs/.nuxt/tsconfig.json",
+  ],
   "exclude": [
     "dist",
     "node_modules",