fix: allow extend

Signed-off-by: ZTL-UwU <[email protected]>

components/content/CodeGroup.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import CodeGroupHeader from './CodeGroupHeader.vue';
 
-const _slots = useSlots()?.default?.() || [];
+const _slots = useSlots();
 const activeTabIndex = ref(0);
 
 function isTag(slot: any, tag: string) {
@@ -20,17 +20,18 @@ function onChangeActiveTab(index: number) {
   activeTabIndex.value = index;
 }
 
-const tabs = _slots
-  .filter(slot => checkTag(slot))
-  .map((slot, index) => {
-    return {
-      label: slot?.props?.filename || slot?.props?.label || `${index}`,
-      language: slot?.props?.language || null,
-      code: slot?.props?.code || '',
-    };
-  });
-
 function render() {
+  const _slotsDefault = _slots?.default?.() || [];
+  const tabs = _slotsDefault
+    .filter(slot => checkTag(slot))
+    .map((slot, index) => {
+      return {
+        label: slot?.props?.filename || slot?.props?.label || `${index}`,
+        language: slot?.props?.language || null,
+        code: slot?.props?.code || '',
+      };
+    });
+
   return h(
     'div',
     [
@@ -44,7 +45,7 @@ function render() {
       ),
       h(
         'div',
-        _slots.map((slot, index) => {
+        _slotsDefault.map((slot, index) => {
           if (slot.props && checkTag(slot))
             slot.props.inGroup = true;
           return h(

components/layout/Aside.vue

@@ -8,7 +8,7 @@
           :to="link._path"
           class="px-3 py-2 mb-1 hover:bg-muted rounded-md w-full flex gap-2 transition-all"
           :class="[
-            path.startsWith(link._path) && 'bg-muted hover:bg-muted font-semibold',
+            path.startsWith(link._path) && 'bg-muted hover:bg-muted font-semibold text-primary',
           ]"
         >
           <Icon

components/layout/Header/Logo.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink v-if="logo.light && logo.dark" to="/" class="flex">
-    <img :src="logo.light" class="dark:hidden h-7">
-    <img :src="logo.dark" class="hidden dark:block h-7">
+    <NuxtImg :src="logo.light" class="dark:hidden h-7" />
+    <NuxtImg :src="logo.dark" class="hidden dark:block h-7" />
     <span v-if="showTitle && title" class="self-center font-bold ml-3">
       {{ title }}
     </span>

components/layout/TocTree.vue

@@ -23,7 +23,7 @@ defineProps<{
 
 const { activeHeadings, updateHeadings } = useScrollspy();
 
-onNuxtReady(() =>
+onMounted(() =>
   updateHeadings([
     ...document.querySelectorAll('.docs-content h1'),
     ...document.querySelectorAll('.docs-content h2'),

composables/useScrollspy.ts

@@ -1,7 +1,5 @@
 // Credit: nuxt-themes/docus
 
-import type { Ref } from 'vue';
-
 /**
  * Scrollspy allows you to watch visible headings in a specific page.
  * Useful for table of contents live style updates.
@@ -20,22 +18,30 @@ export function useScrollspy() {
       else visibleHeadings.value = visibleHeadings.value.filter(t => t !== id);
     });
 
-  const updateHeadings = (headings: Element[]) =>
+  const updateHeadings = (headings: Element[]) => {
+    if (observer.value)
+      observer.value.disconnect();
+    observer.value = new IntersectionObserver(observerCallback);
+
     headings.forEach((heading) => {
       observer.value.observe(heading);
     });
+  };
 
-  watch(visibleHeadings, (val, oldVal) => {
-    if (val.length === 0)
-      activeHeadings.value = oldVal;
-    else activeHeadings.value = val;
-  }, { deep: true });
-
-  // Create intersection observer
-  onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback)));
-
-  // Destroy it
-  onBeforeUnmount(() => observer.value?.disconnect());
+  watch(
+    visibleHeadings,
+    (val, oldVal) => {
+      if (val.length === 0)
+        activeHeadings.value = oldVal;
+      else
+        activeHeadings.value = val;
+    },
+    { deep: true },
+  );
+
+  onBeforeUnmount(() => {
+    observer.value?.disconnect();
+  });
 
   return {
     visibleHeadings,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Tony Zhang <[email protected]>",
   "license": "MIT",
   "homepage": "https://shadcn-docs-nuxt.vercel.app/",
@@ -15,12 +15,13 @@
     "app",
     "app.config.ts",
     "app.vue",
-    "assets",
     "components",
     "components.json",
     "composables",
     "layouts",
-    "nuxt.config.ts"
+    "lib",
+    "nuxt.config.ts",
+    "pages"
   ],
   "scripts": {
     "build": "nuxt build",
@@ -38,12 +39,14 @@
     "@nuxtjs/tailwindcss": "^6.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.379.0",
     "nuxt": "^3.11.2",
     "nuxt-icon": "^0.6.10",
     "radix-vue": "^1.8.0",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.4.5",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
@@ -54,8 +57,7 @@
     "@vueuse/core": "^10.9.0",
     "@vueuse/nuxt": "^10.9.0",
     "eslint": "9.2.0",
-    "lucide-vue-next": "^0.379.0",
     "shiki": "^1.6.0",
     "vue-tsc": "^2.0.19"
   }
-}
+}

tailwind.config.js → tailwind.config.ts

@@ -1,11 +1,11 @@
-const animate = require('tailwindcss-animate');
+import type { Config } from 'tailwindcss';
+import animate from 'tailwindcss-animate';
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
+export default {
+  darkMode: 'selector',
   safelist: ['dark'],
   prefix: '',
-
+  content: [],
   theme: {
     container: {
       center: true,
@@ -58,20 +58,20 @@ module.exports = {
       },
       keyframes: {
         'accordion-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--radix-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
         'collapsible-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--radix-collapsible-content-height)' },
         },
         'collapsible-up': {
           from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
       },
       animation: {
@@ -82,5 +82,6 @@ module.exports = {
       },
     },
   },
+
   plugins: [animate],
-};
+} satisfies Config;