@wordup-md/nuxt-layer-shadcn-unocss 0.2.13 → 0.2.14

package/.playground/content/3.components/2.docs/icon.md

@@ -67,7 +67,7 @@ You can put iconify icons, emojis and urls in `icon`. Smart icon will render the
     <div class="space-x-2">
 
     :icon{name="/logo.svg"}
-    :icon{name="https://vueuse.org/favicon.svg" size=40}
+    :icon{name="https://img.icons8.com/color/48/vue-js.png" size=40}
 
     </div>
   ::
@@ -85,7 +85,7 @@ You can put iconify icons, emojis and urls in `icon`. Smart icon will render the
 
   **URL**
   :icon{name="/logo.svg"}
-  :icon{name="https://vueuse.org/favicon.svg" size=40}
+  :icon{name="https://img.icons8.com/color/48/vue-js.png" size=40} # Keep care of CORS origin restrictions.
   ```
 ::
 

package/.playground/content/_menu-aside.md

@@ -0,0 +1,6 @@
+# [](/getting-started)
+
+# [](/content-elements)
+
+# [](/components/)
+

package/.playground/uno.config.ts

@@ -2,6 +2,7 @@ import { mergeConfigs } from '@unocss/core'
 import config from './.nuxt/uno.config.mjs'
 
 export default mergeConfigs([config, {
+  safelist: ['rotate-x-180', 'translate-y-1'],
   // your overrides
   // presets: [
   //   presetShadcn({

package/assets/css/mdc-editor.css

@@ -9,8 +9,8 @@
   }
 
   /* & > p:not(:has(span)):not(:first-child) { */
-  & > p:not(:first-child) {
-    margin-top: 1.5rem;
+  & p:not(:first-child) {
+    --at-apply: "leading-7 [&:not(:first-child)]:mt-6";
   }
 
   & h2.prose-h2:first-child {
@@ -34,16 +34,22 @@
   }
 
   & code {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    position: relative;
-    border-radius: 0.25rem;
-    padding: 0.2rem 0.3rem;
+    --at-apply: "px-1.5 text-sm font-mono font-medium rounded-md inline-block border bg-muted/50";
+  }
+
+  & pre {
+    --at-apply: "p-3 rounded-lg border bg-muted/30! text-card-foreground shadow-sm overflow-x-auto";
 
-    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    & code {
+      --at-apply: "bg-transparent p-0 border-none";
+    }
+  }
 
-    --un-bg-opacity: 1;
-    background-color: hsl(var(--muted) / var(--un-bg-opacity)) /* hsl(var(--muted)) */;
+  [in-stack="true"] pre {
+    --at-apply: "rounded-none border-b-none border-l-none border-r-none shadow-none";
+  }
+  .FRONTMATTER pre {
+    --at-apply: "rounded-none border-none shadow-none bg-transparent";
   }
 
   & > div {

package/components/content/Icon.vue

@@ -28,6 +28,7 @@
     v-else
     :src="name"
     :style="`width: ${size}px; height: ${size}px;`"
+    class="inline-block"
     :class="$attrs.class"
   />
 </template>

package/components/content/Menu.vue

@@ -1,27 +1,61 @@
 <script lang="ts" setup>
 import type { NavItem } from '@nuxt/content'
 
-const { items, title } = defineProps<{
+const { items, title, removeCurrentPage } = defineProps<{
   title?: string
-  items: NavItem[]
+  items: NavItem[] | string[]
+  removeCurrentPage?: boolean
 }>()
 
 const { navigation } = useContent()
+const { navDirFromPath, navPageFromPath } = useContentHelpers()
+const route = useRoute()
 
-const _links = computed(() => {
-  return items?.map((link) => {
-    if (typeof link === 'string') {
-      return {
-        ...navigation.value?.find(n => n._path === link),
-        _path: link,
+const links = computed(() => {
+  const _links = []
+  for (const item of items) {
+    if (typeof item === 'string') {
+      if (item.endsWith('/')) {
+        const path = item.replace(/\/$/, '')
+        const dir = navDirFromPath(path, navigation.value || [])
+        const _dir = removeCurrentPage ? dir?.filter(d => d._path !== route.path) : dir
+        if (_dir) {
+          _links.push(..._dir)
+        }
       }
+      else {
+        _links.push(navPageFromPath(item as unknown as string, navigation.value || []))
+      }
+      // _links.push({
+      //   ...navigation.value?.find(n => item === n._path),
+      //   _path: item,
+      // })
     }
-
-    return {
-      ...link,
-      _path: link.to || link._path,
+    else {
+      _links.push({
+        ...item,
+        _path: item.to || item._path,
+      })
     }
-  })
+  }
+  return _links
+  // return items?.map((item) => {
+  //   console.log(
+  //     item, navigation.value, navigation.value?.find(n => item === n._path),
+  //     navDirFromPath(item as unknown as string, navigation.value || []),
+  //   )
+  //   if (typeof item === 'string') {
+  //     return {
+  //       ...navigation.value?.find(n => item === n._path),
+  //       _path: item,
+  //     }
+  //   }
+
+  //   return {
+  //     ...item,
+  //     _path: item.to || item._path,
+  //   }
+  // })
 })
 </script>
 
@@ -35,7 +69,7 @@ const _links = computed(() => {
     </p>
 
     <MenuItem
-      v-for="link in _links"
+      v-for="link in links"
       :key="link._path"
       :link="link"
     />

package/components/content/ProseCodeInline.vue

@@ -1,5 +1,5 @@
 <template>
-  <code class="inline-code relative rounded bg-muted px-[0.3rem] pt-[0.2rem] font-mono">
+  <code class="inline-code px-1.5 text-sm font-mono font-medium rounded-md inline-block border bg-muted/50">
     <slot />
   </code>
 </template>
@@ -14,9 +14,9 @@
   line-height: 1.25rem;
 }
 
-p .inline-code {
+/* p .inline-code {
   vertical-align: -0.05rem;
-}
+} */
 
 strong .inline-code {
   font-weight: inherit;

package/components/content/ProseSection.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
+import Slugger from 'github-slugger'
+
+const slugger = new Slugger()
 
 // Don't inherit attrs, we want to use it with cn
 defineOptions({
   inheritAttrs: false,
 })
 
-defineProps<{
+const props = defineProps<{
   title?: string
 }>()
 
+const id = computed(() => slugger.slug(props.title ?? ''))
+
 defineSlots()
 </script>
 
@@ -20,6 +25,7 @@ defineSlots()
       'relative p-6 mt-6',
       classToString($attrs.class),
     )"
+    :aria-labelledby="id"
   >
     <div>
       <div
@@ -32,7 +38,10 @@ defineSlots()
         />
       </div>
 
-      <ProseH2 v-if="title">
+      <ProseH2
+        v-if="title"
+        :id
+      >
         {{ title }}
       </ProseH2>
 

package/components/content/ReadMore.vue

@@ -4,7 +4,9 @@
     :target
     :icon
   >
-    {{ $t(prefix) }} <span class="font-semibold">{{ computedTitle }}</span>
+    <slot>
+      {{ $t(prefix) }} <span class="font-semibold">{{ computedTitle }}</span>
+    </slot>
   </Alert>
 </template>
 
@@ -13,11 +15,11 @@ const {
   prefix = 'Read more at',
   title,
   to,
-  icon = 'lucide:bookmark',
+  icon = 'lucide:info',
 } = defineProps<{
   prefix?: string
   title?: string
-  to: string
+  to?: string
   target?: Target
   icon?: string
 }>()
@@ -27,11 +29,14 @@ const computedTitle = computed<string>(
     if (title)
       return title
 
+    if (!to)
+      return ''
+
     try {
       if (to?.startsWith('http'))
         return to.replace('http://', '').replace('https://', '').replace(/\/$/, '')
 
-      return useBreadcrumb(to).filter(x => x.title !== '').map(x => x.title).join(' > ')
+      return useBreadcrumb(to).filter(x => x.title !== '').map(x => x.title.replace(/#.*$/, '')).join(' > ')
     }
     catch {
       return to

package/components/content/global/AlertEditor.vue

@@ -4,14 +4,17 @@
       v-model="mdcAttrs.type"
       chevron
       tooltip="Type"
-      placement="bottom-end"
+      placement="bottom-start"
       :items="types"
-      class="absolute right-1 top-1 z-10 opacity-25 transition-opacity group-hover:opacity-100"
+      class="absolute left-3 top--2 z-10 opacity-0 border rounded pl-2 pr-1 transition-opacity group-hover:opacity-100 bg-background"
     >
       <span class="text-xs font-mono capitalize">{{ model.type }}</span>
     </UiEditorDropdown>
 
-    <Alert v-bind="model">
+    <Alert
+      v-bind="model"
+      no-click
+    >
       <p
         :ref="props.contentRef"
         class="[&>div]:min-h-5.5"
@@ -26,7 +29,7 @@ import type { VueNodeViewProps } from 'prosekit/vue'
 const props = defineProps<VueNodeViewProps>()
 const { getComponentProps } = useMdcEditor()
 
-const types = ['default', 'info', 'success', 'warning', 'danger', 'primary']
+const types = ['default', 'info', 'success', 'warning', 'danger', 'example', 'secondary']
 
 const { model, mdcAttrs } = getComponentProps(props, {
   id: {

package/components/content/global/FieldGroupEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <FieldGroup class="[&>div>div]:divide-y">
+  <FieldGroup class="[&>div>div>span]:block [&>div>div]:divide-y [&>div>div>span:not(:first-child)]:mt-4 [&>div>div>span:not(:first-child)]:pt-4">
     <slot />
   </FieldGroup>
 </template>

package/components/content/global/ReadMoreEditor.vue

@@ -3,28 +3,32 @@
     class="group relative"
     contenteditable="false"
   >
-    <Alert
+    <ReadMore
       v-bind="{ ...model, title: undefined, noClick: true }"
       class="[&_span.w-full]:flex [&_span.w-full]:items-center"
     >
-      <!-- <input
-        v-model="model.prefix"
-        class="inline-block w-min outline-none focus-within:bg-muted"
-      > -->
-      <div
+      <input
+        ref="prefixInput"
+        v-model="mdcAttrs.prefix"
+        name="prefix"
+        class="inline-block outline-none focus-within:bg-muted py-1 my--1"
+        :style="{ width: `${inputWidth}px` }"
+        @input="updateInputWidth"
+      >
+      <!-- <div
         contenteditable="true"
         class="inline-block w-min outline-none hover:bg-muted/50 focus-within:bg-muted whitespace-nowrap mr-2"
         @input="updatePrefix"
         v-text="model.prefix"
-      />
+      /> -->
 
       <UiEditorLinkInput
-        class="inline-flex flex-1 my--2 [&>div]:w-full"
+        class="inline-flex flex-1 my--2 [&>div]:w-full ml--1"
         dropdown-classes="DROPDOWN_MENU absolute mt-8 !w-[500px]"
         :model-value="model.to"
         @update:model-value="updateLink"
       />
-    </Alert>
+    </ReadMore>
   </div>
 </template>
 
@@ -43,7 +47,7 @@ const { mdcAttrs, model } = getComponentProps(props, {
   },
   icon: {
     type: String,
-    default: 'lucide:bookmark',
+    default: 'lucide:info',
   },
   prefix: {
     type: String,
@@ -60,11 +64,38 @@ const { mdcAttrs, model } = getComponentProps(props, {
   },
 })
 
-function updatePrefix(event: Event) {
-  const target = event.target as HTMLDivElement
-  mdcAttrs.prefix = target.innerHTML
+const prefixInput = useTemplateRef<HTMLInputElement>('prefixInput')
+const inputWidth = ref(100)
+
+function updateInputWidth() {
+  if (!prefixInput.value) return
+
+  // Create a temporary span to measure text width
+  const measure = document.createElement('span')
+  measure.style.visibility = 'hidden'
+  measure.style.position = 'absolute'
+  measure.style.whiteSpace = 'pre'
+  measure.style.font = window.getComputedStyle(prefixInput.value).font
+  measure.textContent = prefixInput.value.value || prefixInput.value.placeholder || ''
+
+  document.body.appendChild(measure)
+  inputWidth.value = Math.max(measure.offsetWidth, 20) // Add padding, min 20px
+  document.body.removeChild(measure)
 }
+
 function updateLink(to: string) {
   mdcAttrs.to = to
 }
+
+watch(() => mdcAttrs.prefix, () => {
+  nextTick(() => {
+    updateInputWidth()
+  })
+})
+
+onMounted(() => {
+  nextTick(() => {
+    updateInputWidth()
+  })
+})
 </script>

package/components/content/global/TabsEditor.vue

@@ -1,18 +1,29 @@
 <template>
-  {{ model }}
-  <UiTabs v-bind="model">
-    <div :ref="props.contentRef" />
-  </UiTabs>
+  <render />
+  <!-- <Tabs v-bind="model">
+    <div
+      v-for="(slot, index) in props.node.value.children ?? []"
+      :key="index"
+      :label="slot.attrs?.attributes?.label"
+      :icon="slot.attrs?.attributes?.icon"
+    >
+      {{ slot.attrs }}
+      <component
+        :is="slot.type"
+        :label="slot.attrs.label"
+      />
+    </div>
+  </Tabs> -->
 </template>
 
 <script lang="ts" setup>
 import type { VueNodeViewProps } from 'prosekit/vue'
+import Tabs from '../Tabs.vue'
 
 // import { useMdcEditor } from '#imports'
 
 const props = defineProps<VueNodeViewProps>()
-
-const variants = ['separate', 'card']
+const variants = ['separate', 'card', 'line', 'combobox']
 
 const { getComponentProps } = useMdcEditor()
 const { model } = getComponentProps(props, {
@@ -34,5 +45,44 @@ const { model } = getComponentProps(props, {
     type: Boolean,
     default: true,
   },
+  sync: {
+    type: String,
+  },
+  disableSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Search Tab...',
+  },
+  searchEmpty: {
+    type: String,
+    default: 'No tab found.',
+  },
 })
+
+function render() {
+  // const slots = _slots?.default?.() || []
+  // console.log('slots', slots)
+  // const slotsData = slots.map((slot, index) => ({
+  //   label: slot.props?.label || slot.props?.filename || '',
+  //   index,
+  // }))
+
+  // <div
+  //     v-for="(slot, index) in props.node.value.children ?? []"
+  //     :key="index"
+  //     :label="slot.attrs?.attributes?.label"
+  //     :icon="slot.attrs?.attributes?.icon"
+  //   >
+
+  return h(
+    Tabs,
+    model,
+    () => props.node.value.children.map(child => h('div', { label: child.attrs?.attributes?.label, icon: child.attrs?.attributes?.icon })),
+
+    // () => [h('div', { label: 'Tab 1' }), h('div', { label: 'Tab 2' })],
+  )
+}
 </script>

package/components/layout/Aside.vue

@@ -4,57 +4,50 @@
     class="app__aside relative overflow-hidden text-sm mt-6 pr-6 md:pr-4 h-[calc(100vh-var(--header-height)-var(--banner-height)-7rem)]"
     type="hover"
   >
-    <LayoutHeaderNavMobile
-      v-if="isMobile"
-      class="mb-5 border-b pb-2"
-    />
-    <LayoutSearchButton v-if="config.search.inAside" />
-    <ul
-      v-if="config.aside.useLevel"
-      class="flex flex-col gap-1 border-b pb-4"
-    >
-      <li
-        v-for="link in navigation || nav"
-        :key="link.id"
+    <template v-if="!tree?.children.length">
+      <LayoutHeaderNavMobile
+        v-if="isMobile"
+        class="mb-5 border-b pb-2"
+      />
+
+      <LayoutSearchButton v-if="config.search.inAside" />
+
+      <ul
+        v-if="config.aside.useLevel"
+        class="flex flex-col gap-1 border-b pb-4"
       >
-        <NuxtLink
-          :to="link.redirect ?? link._path"
-          class="flex h-8 items-center gap-2 rounded-md p-2 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
-          :class="[path.startsWith(link._path) && 'bg-muted !text-primary']"
+        <li
+          v-for="link in navigation || nav"
+          :key="link.id"
         >
-          <Icon
-            v-if="link.icon"
-            :name="link.icon"
-            class="self-center"
-            :size="16"
-          />
-          {{ link.title }}
+          <LayoutAsideMenuItem v-bind="{ ...link, children: [] }" />
+        </li>
+      </ul>
 
-          <span
-            v-for="(badge, i) in link.navBadges"
-            :key="i"
-          >
-            <Badge
-              :variant="badge.variant"
-              :type="badge.type"
-              :size="badge.size ?? 'sm'"
-            >
-              {{ badge.value }}
-            </Badge>
-          </span>
-        </NuxtLink>
-      </li>
-    </ul>
-    <LayoutAsideTree
-      :links
-      :level="0"
-      :class="[config.aside.useLevel ? 'pt-4' : 'pt-1']"
+      <LayoutAsideTree
+        :links
+        :level="0"
+        :class="[config.aside.useLevel ? 'pt-4' : 'pt-1']"
+      />
+    </template>
+
+    <MDCRenderer
+      v-else
+      :body="tree"
+      class="min-h-10"
+      :class="{ 'flex flex-col gap-1': !!tree }"
+      :components="{
+        'aside-menu-item': AsideMenuItem,
+        'aside-tree-2': AsideTree2,
+      }"
     />
   </UiScrollArea>
 </template>
 
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content'
+import AsideMenuItem from './AsideMenuItem.vue'
+import AsideTree2 from './AsideTree2.vue'
 
 const { isMobile, navigation, level = 0 } = defineProps<{
   isMobile: boolean
@@ -79,5 +72,20 @@ const links = computed(() => {
   return navigation || nav.value
 })
 
-const path = computed(() => useRoute().path)
+// const path = computed(() => useRoute().path)
+
+const menu = '/_menu-aside'
+const { data: count } = await useAsyncData(menu + '-count', () => queryContent(menu).count())
+
+let tree = undefined
+if (count.value) {
+  const { data } = await useAsyncData(menu, () =>
+    queryContent(menu).findOne(),
+  )
+  tree = await useMdcMenu(data, {
+    menuComponentName: 'aside-menu-item',
+    submenuComponentName: 'aside-tree-2',
+  })
+  console.log('aime', tree)
+}
 </script>

package/components/layout/AsideMenuItem.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { BadgeVariants } from '@/components/ui/badge'
+import type { NavItem } from '@nuxt/content'
+
+defineProps<{
+  to?: string
+  _path?: string
+  target?: string
+  icon?: string
+  title?: string
+  navBadges?: {
+    variant: BadgeVariants['variant']
+    type: BadgeVariants['type']
+    size: BadgeVariants['size']
+    value: string
+  }[]
+  redirect?: string
+  children?: NavItem[]
+
+}>()
+
+const { path } = useRoute()
+const { folderStyle: defaultFolderStyle } = useConfig().value.aside
+// const folderStyle = computed(() => link.sidebar?.style ?? defaultFolderStyle)
+const folderStyle = computed(() => defaultFolderStyle)
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div v-if="$slots.content">
+    <template v-if="folderStyle === 'group'">
+      <div
+        class="mt-4 flex items-center gap-2 rounded-md px-2 text-base font-semibold outline-none"
+        :class="['h-8']"
+      >
+        <LayoutAsideTreeItemButton :link="{ title: title ?? '', _path: _path ?? '', icon, navBadges }" />
+      </div>
+
+      <div class="flex flex-col gap-1 py-1">
+        <slot name="content" />
+      </div>
+    </template>
+
+    <template v-else>
+      <button
+        class="flex w-full cursor-pointer items-center gap-2 rounded-md p-2 text-left text-sm font-medium text-foreground/80 hover:bg-muted hover:text-primary"
+        :class="['h-8']"
+        @click="isOpen = !isOpen"
+      >
+        <NuxtIcon
+          v-if="folderStyle === 'tree'"
+          name="lucide:chevron-down"
+          class="transition-transform"
+          :class="[!isOpen && '-rotate-90']"
+        />
+        <LayoutAsideTreeItemButton :link="{ title: title ?? '', _path: _path ?? '', icon, navBadges }" />
+        <NuxtIcon
+          v-if="folderStyle === 'default'"
+          name="lucide:chevron-down"
+          class="ml-auto transition-transform"
+          :class="[!isOpen && '-rotate-90']"
+        />
+      </button>
+      <div v-show="isOpen">
+        <ul
+          class="flex flex-col gap-1 py-1"
+          :class="['mx-3.5 border-l px-2.5']"
+        >
+          <slot name="content" />
+        </ul>
+      </div>
+    </template>
+  </div>
+
+  <NuxtLink
+    v-else
+    :to="redirect ?? _path ?? to"
+    class="flex h-8 items-center gap-2 rounded-md p-2 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+    :class="[(_path && path.startsWith(_path) || to && path.startsWith(to)) && 'bg-muted !text-primary']"
+  >
+    <Icon
+      v-if="icon"
+      :name="icon"
+      class="self-center"
+      :size="16"
+    />
+
+    {{ title }}
+
+    <span
+      v-for="(badge, i) in navBadges"
+      :key="i"
+    >
+      <Badge
+        :variant="badge.variant"
+        :type="badge.type"
+        :size="badge.size ?? 'sm'"
+      >
+        {{ badge.value }}
+      </Badge>
+    </span>
+  </NuxtLink>
+</template>

package/components/layout/AsideTree2.vue

@@ -0,0 +1,28 @@
+<template>
+  <NuxtLink
+    :to
+    class="flex items-center gap-2 rounded-md p-2 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+  >
+    <Icon
+      v-if="icon"
+      :name="icon"
+      class="self-center"
+      :size="16"
+    />
+    {{ title }}
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+defineProps<{
+  to?: string
+  target?: string
+  showLinkIcon?: boolean
+  icon?: string
+  title?: string
+  description?: string
+  tag?: string
+}>()
+</script>

package/components/layout/AsideTreeItem.vue

@@ -4,7 +4,7 @@
     <div v-if="link.children">
       <template v-if="folderStyle === 'group'">
         <div
-          class="mt-2 flex items-center gap-2 rounded-md px-2 text-xs font-semibold text-foreground/70 outline-none"
+          class="mt-4 flex items-center gap-2 rounded-md px-2 text-base font-semibold outline-none"
           :class="[link.navTruncate !== false && 'h-8']"
         >
           <LayoutAsideTreeItemButton :link />

package/components/layout/PrevNextButton.vue

@@ -2,7 +2,7 @@
   <NuxtLink
     v-if="prevNext && prevNext._path"
     :to="prevNext._path"
-    class="mb-6 space-y-2 rounded-lg border p-4 transition-all hover:bg-muted/50"
+    class="inline-block w-full mb-6 space-y-2 rounded-lg border p-4 transition-all hover:bg-muted/50"
   >
     <div class="flex flex-row gap-3">
       <div

package/components/layout/SearchButton.vue

@@ -3,7 +3,7 @@
     <UiButton
       v-if="style === 'input'"
       variant="outline"
-      class="h-8 w-full self-center rounded-md px-1.5 font-normal bg-white/50 text-muted-foreground hover:text-accent-foreground"
+      class="h-8 w-full self-center rounded-md px-1.5 font-normal bg-muted/50 text-muted-foreground hover:text-accent-foreground"
       :class="[inAside ? 'mb-4' : 'md:w-32 lg:w-40']"
       @click="isOpen = true"
     >

package/components/layout/Title.vue

@@ -16,15 +16,33 @@
 
     <div
       v-if="badges"
-      class="flex gap-2 pt-4"
+      class="flex items-center gap-2 pt-4"
     >
-      <NuxtLink
+      <template
         v-for="(badge, i) in badges"
         :key="i"
-        :to="badge.to"
-        :target="badge.target"
       >
+        <template v-if="badge.to">
+          <NuxtLink
+            :to="badge.to"
+            :target="badge.target"
+          >
+            <UiBadge
+              :variant="badge.variant || 'secondary'"
+              :type="badge.type"
+              class="gap-1 rounded-md"
+            >
+              <Icon
+                :size="12"
+                :name="badge.icon || 'lucide:external-link'"
+              />
+              {{ badge.value }}
+            </UiBadge>
+          </NuxtLink>
+        </template>
+
         <UiBadge
+          v-else
           :variant="badge.variant || 'secondary'"
           :type="badge.type"
           class="gap-1 rounded-md"
@@ -36,7 +54,7 @@
           />
           {{ badge.value }}
         </UiBadge>
-      </NuxtLink>
+      </template>
     </div>
 
     <div

package/components/layout/Toc.vue

@@ -21,10 +21,10 @@
           v-if="links"
           class="pt-5 text-muted-foreground"
         >
-          <NuxtLink
+          <NuxtLinkLocale
             v-for="(link, i) in links"
             :key="i"
-            :to="link.to"
+            :to="localePath(link.to)"
             :target="link.target"
             class="flex w-full gap-1 underline-offset-4 hover:underline [&:not(:first-child)]:pt-3"
           >
@@ -40,7 +40,7 @@
               class="ml-auto self-center text-muted-foreground"
               size="13"
             />
-          </NuxtLink>
+          </NuxtLinkLocale>
         </div>
       </div>
       <!-- <div class="flex-grow" /> -->
@@ -76,6 +76,7 @@
 defineProps<{ isSmall?: boolean }>()
 
 const { toc } = useContent()
+const { localePath } = useI18nDocs()
 const { title, links: configLinks } = useConfig().value.toc
 const { border } = useConfig().value.header
 const isOpen = ref(false)

package/components/layout/TocTree.vue

@@ -3,15 +3,25 @@
     <li
       v-for="link in links"
       :key="link.id"
-      class="pt-2"
+      class="relative pt-2"
     >
-      <NuxtLink
-        :to="`#${link.id}`"
-        class="text-muted-foreground transition-all hover:text-primary"
-        :class="[activeHeadings.includes(link.id) && 'text-primary']"
-      >
-        {{ link.text }}
-      </NuxtLink>
+      <div class="flex items-center">
+        <div
+          v-if="level === 0 && progressBar"
+          class="absolute md:ml-1.5 left-0 top-0 bottom-0 w-px transition-colors duration-300 ease-in-out"
+          :class="isActive(link) ? 'bg-primary' : 'bg-border'"
+        />
+        <NuxtLink
+          :to="`#${link.id}`"
+          class="text-muted-foreground transition-all hover:text-primary"
+          :class="{
+            'pl-4.5 md:pl-5.5': progressBar,
+            'text-primary': isActive(link),
+          }"
+        >
+          {{ link.text }}
+        </NuxtLink>
+      </div>
       <TocTree
         v-if="link.children"
         :links="(link.children || []).filter((x: any) => x.id !== 'hide-toc')"
@@ -29,8 +39,16 @@ defineProps<{
   level: number
 }>()
 
+const config = useConfig()
+const progressBar = config.value.toc.progressBar
+
 const { activeHeadings, updateHeadings } = useScrollspy()
 
+function isActive(link: TocLink) {
+  return activeHeadings.value.includes(link.id)
+    || link.children?.some(child => activeHeadings.value.includes(child.id))
+}
+
 onMounted(() =>
   updateHeadings([
     ...document.querySelectorAll('.page-content h1'),

package/composables/useConfig.ts

@@ -152,6 +152,7 @@ const defaultConfig: DefaultConfig = {
   toc: {
     enable: true,
     enableInMobile: false,
+    progressBar: true,
     title: 'On This Page',
     links: [],
     carbonAds: {
@@ -177,10 +178,10 @@ export function useConfig() {
   const appConfig = computed(() => useAppConfig()?.shadcnDocs || {})
   const { navKeyFromPath } = useContentHelpers()
   const { navigation, page } = useContent()
-  const route = useRoute()
 
   return computed(
     () => {
+      const route = useRoute()
       const processedConfig = customDefu(appConfig.value, defaultConfig)
       const header = processedConfig.header
       const banner = processedConfig.banner

package/index.d.ts

@@ -491,6 +491,12 @@ interface DefaultConfig {
      * @default false
      */
     enableInMobile: boolean
+    /**
+     * Show progress bar in table of contents
+     *
+     * @default true
+     */
+    progressBar: boolean
     /**
      * Table of contents title
      *
@@ -595,19 +601,19 @@ interface DefaultConfig {
  *
  * @values 'zinc', 'slate', 'stone', 'gray', 'neutral', 'red', 'rose', 'orange', 'green', 'blue', 'yellow', 'violet'
  */
-type Color =
-  | 'zinc'
-  | 'slate'
-  | 'stone'
-  | 'gray'
-  | 'neutral'
-  | 'red'
-  | 'rose'
-  | 'orange'
-  | 'green'
-  | 'blue'
-  | 'yellow'
-  | 'violet'
+type Color
+  = | 'zinc'
+    | 'slate'
+    | 'stone'
+    | 'gray'
+    | 'neutral'
+    | 'red'
+    | 'rose'
+    | 'orange'
+    | 'green'
+    | 'blue'
+    | 'yellow'
+    | 'violet'
 
 /**
  * HTML anchor target attribute values

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'node:path'
+import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
@@ -14,11 +14,37 @@ export default defineNuxtConfig({
     '@nuxt/icon',
     '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
-    '@unpress/nuxt-module',
-    // '../../../unpress/packages/nuxt-module/src/module',
     // 'nuxt-og-image',
   ],
 
+  $development: {
+    modules: [
+      '../../../unpress/packages/nuxt-module/src/module',
+    ],
+    alias: {
+      '@unpress/mdc-editor': r('../../unpress/packages/mdc-editor/src/module'),
+      '@unpress/nuxt-module': r('../../unpress/packages/nuxt-module/src/module'),
+    },
+    vite: {
+      server: {
+        fs: {
+          allow: [
+            // Allow serving files from the project root
+            currentDir,
+            // Allow serving files from the monorepo root (parent directories)
+            resolve(currentDir, '../../..'),
+          ],
+        },
+      },
+    },
+  },
+
+  $production: {
+    modules: [
+      '@unpress/nuxt-module',
+    ],
+  },
+
   components: {
     dirs: [
       {
@@ -45,8 +71,8 @@ export default defineNuxtConfig({
     documentDriven: true,
     highlight: {
       theme: {
-        default: 'github-light',
-        dark: 'github-dark',
+        default: 'one-dark-pro',
+        dark: 'one-dark-pro',
       },
       preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
     },
@@ -123,3 +149,7 @@ export default defineNuxtConfig({
     componentDir: join(currentDir, './components/ui'),
   },
 })
+
+function r(p: string) {
+  return resolve(__dirname, p)
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordup-md/nuxt-layer-shadcn-unocss",
   "type": "module",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "author": "Emmanuel Salomon <emmanuel.salomon@gmail.com>",
   "main": "./nuxt.config.ts",
   "repository": {
@@ -16,19 +16,6 @@
     "wordup-md"
   ],
   "license": "MIT",
-  "scripts": {
-    "dev": "nuxi dev .playground",
-    "dev:root": "nuxi dev",
-    "prepare": "nuxt prepare .playground",
-    "build": "nuxt build .playground",
-    "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground",
-    "lint": "eslint .",
-    "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
-    "bump": "pnpm build:json-doc && bumpp --skip-install --commit --push --tag",
-    "release": "pnpm bump && npm publish",
-    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name '.nuxt' -type d -prune -exec rm -rf '{}' + && find . -name '.output' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -prune -exec rm -rf '{}' +"
-  },
   "devDependencies": {
     "@nuxt/eslint": "latest",
     "@nuxt/kit": "^3.17.2",
@@ -58,7 +45,7 @@
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.5.4",
     "@tanstack/vue-table": "^8.21.3",
-    "@unpress/nuxt-module": "0.1.13-beta.1",
+    "@unpress/nuxt-module": "0.1.13-beta.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "nuxt": "3.17.2",
@@ -67,9 +54,16 @@
     "tailwind-merge": "^3.2.0"
   },
   "packageManager": "pnpm@10.4.1",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "sharp"
-    ]
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:root": "nuxi dev",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
+    "bump": "pnpm build:json-doc && bumpp --skip-install --commit --push --tag",
+    "release": "pnpm bump && npm publish",
+    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name '.nuxt' -type d -prune -exec rm -rf '{}' + && find . -name '.output' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -prune -exec rm -rf '{}' +"
   }
-}
+}

package/pages/[...slug].vue

@@ -84,7 +84,6 @@
               <!-- <LayoutSubmenuTree
                   :level="1"
                 /> -->
-
               <div
                 v-for="component in sidebarRightComponents"
                 :key="component.name"

package/plugins/wordup.ts

@@ -37,9 +37,84 @@ export default defineNuxtPlugin((nuxtApp) => {
       transform() {
         return { type: 'containerComponent', attrs: { componentName: 'read-more' } }
       },
-      onSelect: () => editor.commands.insertContainerComponent({
-        name: 'read-more',
-      }),
+      onSelect: () => {
+        editor.commands.insertContainerComponent({
+          name: 'read-more',
+        })
+
+        // Set cursor on the input of the component after insertion
+        // Use setTimeout to wait for the DOM update
+        nextTick(() => {
+          const { view, state } = editor
+          if (!view || !state) return
+
+          // Get the current selection position
+          const { $anchor } = state.selection
+          const pos = $anchor.pos
+          // Find the inserted containerComponent node
+          // Walk backwards to find the node we just inserted
+          let node = null
+          let nodePos = -1
+
+          // Check if we're inside a containerComponent
+          for (let depth = $anchor.depth; depth > 0; depth--) {
+            const nodeAtDepth = $anchor.node(depth)
+            if (nodeAtDepth.type.name === 'containerComponent'
+              && nodeAtDepth.attrs.componentName === 'read-more') {
+              node = nodeAtDepth
+              nodePos = $anchor.before(depth)
+              break
+            }
+          }
+
+          // If not found, search forward from current position
+          if (!node) {
+            const doc = state.doc
+            for (let i = Math.max(0, pos - 50); i < Math.min(doc.content.size, pos + 50); i++) {
+              const $pos = doc.resolve(i)
+              for (let depth = $pos.depth; depth > 0; depth--) {
+                const nodeAtDepth = $pos.node(depth)
+                if (nodeAtDepth.type.name === 'containerComponent'
+                  && nodeAtDepth.attrs.componentName === 'read-more') {
+                  node = nodeAtDepth
+                  nodePos = $pos.before(depth)
+                  break
+                }
+              }
+              if (node) break
+            }
+          }
+
+          const prevNode = view.domAtPos(nodePos - 1)
+          // get next html element with js
+          setTimeout(() => {
+            prevNode.node.nextElementSibling?.querySelector('input.INLINE_MENU_LINK_INPUT')?.focus()
+          }, 100)
+          // const node = editor.state.doc.nodeAt(nodePos)
+          // if (node && node.type.name === 'read-more') {
+          //   const input = node.firstChild?.firstChild?.firstChild as HTMLInputElement
+          //   if (input) {
+          //     input.focus()
+          //   }
+          // }
+          // if (node && nodePos >= 0) {
+          //   // Set cursor inside the component (at the start of its content)
+          //   // Position is after the opening tag, typically nodePos + 1
+          //   const insidePos = nodePos + 1
+
+          //   // Import TextSelection dynamically and set selection
+          //   import('prosemirror-state').then(({ TextSelection }) => {
+          //     const tr = state.tr
+          //     const selection = TextSelection.create(tr.doc, insidePos)
+          //     tr.setSelection(selection)
+          //     view.dispatch(tr)
+
+          //     // Focus the editor
+          //     view.focus()
+          //   })
+          // }
+        })
+      },
     })
 
     config.components.push({