📝 hand-made doc test

.playground/components/TitleBar.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <header class="w-full flex justify-between items-center py-2 border-b border-b-neutral-100 dark:border-b-neutral-800">
+    <div class="text-neutral-900 dark:text-neutral-100">
+      <h1 class="font-medium text-xl">RayineSoft<sup class="text-sm"> &copy;</sup></h1>
+      <h2 class="font-normal text-xs">Common Components</h2>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+</style>

.playground/components/icon/VscodeIconsFileTypeJsOfficial.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeJsOfficial'
+}
+</script>

.playground/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><rect width="28" height="28" x="2" y="2" fill="#3178c6" rx="1.312"></rect><path fill="#fff" fillRule="evenodd" d="M18.245 23.759v3.068a6.5 6.5 0 0 0 1.764.575a11.6 11.6 0 0 0 2.146.192a10 10 0 0 0 2.088-.211a5.1 5.1 0 0 0 1.735-.7a3.54 3.54 0 0 0 1.181-1.266a4.47 4.47 0 0 0 .186-3.394a3.4 3.4 0 0 0-.717-1.117a5.2 5.2 0 0 0-1.123-.877a12 12 0 0 0-1.477-.734q-.6-.249-1.08-.484a5.5 5.5 0 0 1-.813-.479a2.1 2.1 0 0 1-.516-.518a1.1 1.1 0 0 1-.181-.618a1.04 1.04 0 0 1 .162-.571a1.4 1.4 0 0 1 .459-.436a2.4 2.4 0 0 1 .726-.283a4.2 4.2 0 0 1 .956-.1a6 6 0 0 1 .808.058a6 6 0 0 1 .856.177a6 6 0 0 1 .836.3a4.7 4.7 0 0 1 .751.422V13.9a7.5 7.5 0 0 0-1.525-.4a12.4 12.4 0 0 0-1.9-.129a8.8 8.8 0 0 0-2.064.235a5.2 5.2 0 0 0-1.716.733a3.66 3.66 0 0 0-1.171 1.271a3.73 3.73 0 0 0-.431 1.845a3.6 3.6 0 0 0 .789 2.34a6 6 0 0 0 2.395 1.639q.63.26 1.175.509a6.5 6.5 0 0 1 .942.517a2.5 2.5 0 0 1 .626.585a1.2 1.2 0 0 1 .23.719a1.1 1.1 0 0 1-.144.552a1.3 1.3 0 0 1-.435.441a2.4 2.4 0 0 1-.726.292a4.4 4.4 0 0 1-1.018.105a5.8 5.8 0 0 1-1.969-.35a5.9 5.9 0 0 1-1.805-1.045m-5.154-7.638h4v-2.527H5.938v2.527H9.92v11.254h3.171Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeTypescriptOfficial'
+}
+</script>

.playground/components/icon/VscodeIconsFileTypeVue.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z"></path><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeVue'
+}
+</script>

.playground/layouts/default.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto px-4">
+    <TitleBar />
+    <main class="pt-4">
+      <slot></slot>
+    </main>
+  </div>
+</template>
+
+<style>
+body {
+  @apply bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: rgba(0, 0, 0, 0) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+</style>

.playground/nuxt.config.ts

@@ -1,4 +1,27 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+
 export default defineNuxtConfig({
-  extends: ['..'],
-  modules: ['@nuxt/eslint']
-})
+  extends: [".."],
+  modules: ["@nuxt/eslint", "@nuxt/fonts", "nuxt-shiki"],
+  tailwindcss: {
+    config: {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ["Rubik", '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
+          },
+        },
+      },
+    },
+  },
+  shiki: {
+    bundledLangs: ["js", "ts", "json", "html", "css", "yaml", "vue", "vue-html"],
+    bundledThemes: ["light-plus", "dark-plus"],
+    highlightOptions: {
+      themes: {
+        light: "light-plus",
+        dark: "dark-plus",
+      },
+    },
+  },
+});

.playground/pages/index.vue

@@ -9,11 +9,44 @@ const info = () => {
 </script>
 
 <template>
-  <div>
-    <button @click="info">info</button>
+  <div class="flex flex-col items-start gap-12">
+
+    <div class="w-full flex flex-col gap-4">
+      <div>
+        <h1 class="font-medium text-xl text-indigo-400">Message</h1>
+        <p class="text-sm">Message component like a toast</p>
+      </div>
+
+      <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg">
+        <div class="p-4 py-2 border-b border-neutral-200 dark:border-neutral-700">
+          <span class="flex items-center gap-1">
+            <IconVscodeIconsFileTypeVue class="inline" />
+            <span class="text-sm text-neutral-500 dark:text-neutral-400">app.vue</span>
+          </span>
+        </div>
+        <div class="p-4">
+          <Shiki class="text-sm" lang="vue-html" :code="`<template>
+  <RayMessageProvider>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </RayMessageProvider>
+</template>`" />
+        </div>
+      </div>
+      <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg">
+        <div class="p-4 border-b border-neutral-200 dark:border-neutral-700">
+          <button class="bg-indigo-400 text-white border border-indigo-400 px-2 py-0.5 rounded-lg"
+            @click="info">info</button>
+        </div>
+        <div class="p-4">
+          <Shiki class="text-sm" lang="ts" :code="`const message = useMessage();\n\nmessage.info('Hello Rayine');`" />
+        </div>
+      </div>
+
+    </div>
+
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

app.vue

@@ -2,9 +2,9 @@
 </script>
 
 <template>
-  <div>
-    <RayMessageProvider>
+  <RayMessageProvider>
+    <NuxtLayout>
       <NuxtPage />
-    </RayMessageProvider>
-  </div>
+    </NuxtLayout>
+  </RayMessageProvider>
 </template>

package.json

@@ -13,9 +13,11 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "latest",
+    "@nuxt/fonts": "^0.10.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
     "eslint": "^9.14.0",
     "nuxt": "^3.14.159",
+    "nuxt-shiki": "^0.3.0",
     "typescript": "^5.6.3",
     "vue": "latest"
   },