@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/composables/useConfig.ts

@@ -0,0 +1,227 @@
+import { createDefu } from 'defu'
+
+const customDefu = createDefu((obj, key, value) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (Array.isArray(value) && value.every((x: any) => typeof x === 'string')) {
+    obj[key] = value
+    return true
+  }
+})
+
+const defaultConfig: DefaultConfig = {
+  site: {
+    name: 'shadcn-docs',
+    description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
+    ogImage: '/hero.png',
+    ogImageComponent: 'ShadcnDocs',
+    ogImageColor: 'light',
+    umami: {
+      enable: false,
+      src: 'https://cloud.umami.is/script.js',
+      dataWebsiteId: '',
+    },
+  },
+  theme: {
+    customizable: true,
+    color: 'zinc',
+    radius: 0.5,
+  },
+  banner: {
+    enable: false,
+    showClose: true,
+    content: 'Welcome to **shadcn-docs-nuxt**',
+    to: '',
+    target: '_blank',
+    border: true,
+    height: '3rem',
+  },
+  header: {
+    showLoadingIndicator: true,
+    title: 'shadcn-docs',
+    showTitle: true,
+    logo: {
+      light: '/logo.svg',
+      dark: '/logo-dark.svg',
+    },
+    showTitleInMobile: false,
+    border: false,
+    position: null,
+    behavior: 'fixed',
+    class: '',
+    darkModeToggle: true,
+    languageSwitcher: {
+      enable: false,
+      triggerType: 'icon',
+      dropdownType: 'select',
+    },
+    nav: [],
+    links: [],
+    height: '3.5rem',
+  },
+  aside: {
+    useLevel: true,
+    collapse: false,
+    collapseLevel: 1,
+    folderStyle: 'default',
+  },
+  sidebarRight: {
+    enable: true,
+    title: 'On This Page',
+    components: [],
+  },
+  main: {
+    breadCrumb: {
+      showIcon: true,
+      iconSize: 16,
+      home: {
+        title: '',
+        href: '/',
+        icon: 'i-lucide-house',
+        iconSize: 18,
+      },
+    },
+    showTitle: true,
+    codeCopyToast: true,
+    codeCopyToastText: 'Copied to clipboard!',
+    fieldRequiredText: 'required',
+    padded: true,
+    editLink: {
+      enable: false,
+      pattern: '',
+      text: 'Edit this page',
+      icon: 'lucide:square-pen',
+      placement: ['docsFooter'],
+    },
+    pm: ['npm', 'pnpm', 'bun', 'yarn'],
+    codeIcon: {
+      'package.json': 'vscode-icons:file-type-node',
+      'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+      '.npmrc': 'vscode-icons:file-type-npm',
+      '.editorconfig': 'vscode-icons:file-type-editorconfig',
+      '.eslintrc': 'vscode-icons:file-type-eslint',
+      '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+      '.eslintignore': 'vscode-icons:file-type-eslint',
+      'eslint.config.js': 'vscode-icons:file-type-eslint',
+      'eslint.config.mjs': 'vscode-icons:file-type-eslint',
+      'eslint.config.cjs': 'vscode-icons:file-type-eslint',
+      '.gitignore': 'vscode-icons:file-type-git',
+      'yarn.lock': 'vscode-icons:file-type-yarn',
+      '.env': 'vscode-icons:file-type-dotenv',
+      '.env.example': 'vscode-icons:file-type-dotenv',
+      '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+      'nuxt': 'vscode-icons:file-type-nuxt',
+      '.nuxtrc': 'vscode-icons:file-type-nuxt',
+      '.nuxtignore': 'vscode-icons:file-type-nuxt',
+      'nuxt.config.js': 'vscode-icons:file-type-nuxt',
+      'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+      'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+      'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+      'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+      'vue': 'vscode-icons:file-type-vue',
+      'ts': 'vscode-icons:file-type-typescript',
+      'tsx': 'vscode-icons:file-type-typescript',
+      'mjs': 'vscode-icons:file-type-js',
+      'cjs': 'vscode-icons:file-type-js',
+      'js': 'vscode-icons:file-type-js',
+      'jsx': 'vscode-icons:file-type-js',
+      'md': 'vscode-icons:file-type-markdown',
+      'mdc': 'vscode-icons:file-type-markdown',
+      'py': 'vscode-icons:file-type-python',
+      'npm': 'vscode-icons:file-type-npm',
+      'pnpm': 'vscode-icons:file-type-pnpm',
+      'npx': 'vscode-icons:file-type-npm',
+      'yarn': 'vscode-icons:file-type-yarn',
+      'bun': 'vscode-icons:file-type-bun',
+      'deno': 'vscode-icons:file-type-deno',
+      'yml': 'vscode-icons:file-type-yaml',
+      'json': 'vscode-icons:file-type-json',
+      'terminal': 'lucide:terminal',
+    },
+  },
+  footer: {
+    credits: '',
+    links: [],
+    class: '',
+  },
+  toc: {
+    enable: true,
+    enableInMobile: false,
+    title: 'On This Page',
+    links: [],
+    carbonAds: {
+      enable: false,
+      disableInDev: false,
+      code: '',
+      placement: '',
+      format: 'cover',
+    },
+  },
+  search: {
+    enable: true,
+    inAside: false,
+    style: 'input',
+    placeholder: 'Search...',
+    displayShortcut: true,
+    placeholderDetailed: 'Search documentation...',
+  },
+}
+
+export function useConfig() {
+  // return computed(() => customDefu(useAppConfig()?.shadcnDocs, defaultConfig))
+  const appConfig = computed(() => useAppConfig()?.shadcnDocs || {})
+  const { navKeyFromPath } = useContentHelpers()
+  const { navigation, page } = useContent()
+  const route = useRoute()
+
+  return computed(
+    () => {
+      const processedConfig = customDefu(appConfig.value, defaultConfig)
+      const header = processedConfig.header
+      const banner = processedConfig.banner
+      const main = processedConfig.main
+      const aside = processedConfig.aside
+      const sidebarRight = processedConfig.sidebarRight
+      const toc = processedConfig.toc
+      const footer = processedConfig.footer
+
+      return {
+        ...processedConfig,
+        header: {
+          ...header,
+          ...navKeyFromPath(route.path, 'header', navigation.value || []),
+          ...page.value?.header,
+        } as (typeof header & DefaultConfig['header']),
+        banner: {
+          ...banner,
+          ...navKeyFromPath(route.path, 'banner', navigation.value || []),
+          ...page.value?.banner,
+        } as (typeof banner & DefaultConfig['banner']),
+        main: {
+          ...main,
+          ...navKeyFromPath(route.path, 'main', navigation.value || []),
+          ...page.value?.main,
+        } as (typeof main & DefaultConfig['main']),
+        aside: {
+          ...aside,
+          ...navKeyFromPath(route.path, 'aside', navigation.value || []),
+          ...page.value?.aside,
+        } as (typeof aside & DefaultConfig['aside']),
+        sidebarRight: {
+          ...sidebarRight,
+          ...navKeyFromPath(route.path, 'sidebarRight', navigation.value || []),
+          ...page.value?.sidebarRight,
+        } as (typeof toc & DefaultConfig['sidebarRight']),
+        toc: {
+          ...toc,
+          ...navKeyFromPath(route.path, 'toc', navigation.value || []),
+          ...page.value?.toc,
+        } as (typeof toc & DefaultConfig['toc']),
+        footer: {
+          ...footer,
+          ...navKeyFromPath(route.path, 'footer', navigation.value || []),
+          ...page.value?.footer,
+        } as (typeof footer & DefaultConfig['footer']),
+      }
+    },
+  )
+}

package/composables/useEditLink.ts

@@ -0,0 +1,27 @@
+export function useEditLink() {
+  const { page } = useContent()
+  const { enable, pattern, text, icon, placement } = useConfig().value.main.editLink
+
+  const url = computed(
+    () => pattern.replace(/:path/g, page.value._file ?? ''),
+  )
+
+  const enabled = computed(
+    () => enable && page.value.editLink !== false && page.value._file && url.value !== '',
+  )
+
+  const enabledToc = computed(
+    () => enabled.value && placement.includes('toc'),
+  )
+  const enabledDocsFooter = computed(
+    () => enabled.value && placement.includes('docsFooter'),
+  )
+
+  return {
+    url,
+    text,
+    icon,
+    enabledToc,
+    enabledDocsFooter,
+  }
+}

package/composables/useI18nDocs.ts

@@ -0,0 +1,114 @@
+import type { SearchResult } from 'minisearch'
+
+/**
+ * A wrapper around useI18n that provides safe internationalization utilities
+ * and handles navigation filtering based on the current locale.
+ * Falls back gracefully when i18n is not configured.
+ */
+export function useI18nDocs() {
+  // Check if i18n is enabled by verifying config exists and there are multiple locales
+  const i18nEnabled = !!useI18n() && useI18n().availableLocales?.length > 1
+
+  // Get content navigation and i18n utilities
+  const { navigation, next, prev } = useContent()
+  const { locale, locales, defaultLocale, availableLocales } = useI18n()
+
+  // Get all locales except the default one
+  const otherLocales = availableLocales.filter(l => l !== defaultLocale)
+
+  /**
+   * Filters navigation items based on the current locale
+   * - For default locale: shows only default paths (no locale prefix)
+   * - For other locales: shows only paths with matching locale prefix
+   */
+  const localizedNavigation = computed(() => {
+    if (!i18nEnabled)
+      return navigation.value
+    const filteredNav = navigation.value.filter((nav) => {
+      if (locale.value === defaultLocale) {
+        return !otherLocales.some(l => nav._path.startsWith(`/${l}`))
+      }
+      return nav._path.startsWith(`/${locale.value}`)
+    })
+    console.log(locale.value, 'aa', !!defaultLocale, 'pp', filteredNav)
+    return locale.value === defaultLocale ? filteredNav : filteredNav[0]?.children
+  })
+
+  /**
+   * Filters previous navigation item based on the current locale
+   * - For default locale: shows only prev if page exists with default paths (no locale prefix)
+   * - For other locales: shows only prev if page exists with matching locale prefix
+   */
+  const localizedPrev = computed(() => {
+    if (!i18nEnabled)
+      return prev.value
+    if (locale.value === defaultLocale) {
+      if (otherLocales.some(l => prev.value?._path.startsWith(`/${l}/`)))
+        return null
+    }
+    else {
+      if (!prev.value?._path.startsWith(`/${locale.value}`)) {
+        return null
+      }
+    }
+    return prev.value
+  })
+
+  /**
+   * Filters next navigation item based on the current locale
+   * - For default locale: shows only next if page exists with default paths (no locale prefix)
+   * - For other locales: shows only next if page exists with matching locale prefix
+   */
+  const localizedNext = computed(() => {
+    if (!i18nEnabled)
+      return next.value
+    if (locale.value === defaultLocale) {
+      if (otherLocales.some(l => next.value?._path.startsWith(`/${l}/`)))
+        return null
+    }
+    else {
+      if (!next.value?._path.startsWith(`/${locale.value}`)) {
+        return null
+      }
+    }
+    return next.value
+  })
+
+  /**
+   * Safe wrapper for useLocalePath
+   * Returns original path if i18n is not enabled
+   */
+  const localePath = i18nEnabled ? useLocalePath() : (path: string) => path
+
+  /**
+   * Filters search results based on the current locale
+   * - For default locale: shows only default results (no locale prefix)
+   * - For other locales: shows only results with matching locale prefix
+   */
+  const localizeSearchResult = i18nEnabled
+    ? (result: SearchResult[]) => result.filter((r) => {
+        if (locale.value === defaultLocale)
+          return !otherLocales.some(l => r.id.startsWith(`/${l}/`))
+
+        return r.id.startsWith(`/${locale.value}`)
+      })
+    : (result: SearchResult[]) => result
+
+  // Get the locale switcher utility
+  const switchLocalePath = useSwitchLocalePath()
+
+  return {
+    i18nEnabled, // Whether i18n is enabled and configured
+    locale, // Current locale
+    locales, // All locales
+    defaultLocale, // Default locale from config
+    availableLocales, // All available locales
+    otherLocales, // All locales except default
+    navigation: localizedNavigation, // Navigation filtered by current locale
+    prev: localizedPrev, // Previous page navigation filtered by current locale
+    next: localizedNext, // Next page navigation filtered by current locale
+    localePath, // Safe path localization function
+    localizeSearchResult, // Search results filter by locale
+    switchLocalePath, // Function to switch between locales
+  }
+}

package/composables/useMdcMenu.ts

@@ -0,0 +1,204 @@
+import type { MDCElement, MDCRoot, MDCNode } from '@nuxtjs/mdc'
+import type { ParsedContent } from '@nuxt/content'
+
+export async function useMdcMenu(menu: Ref<ParsedContent | null>, {
+  menuComponentName = 'menu-item',
+  submenuComponentName = 'submenu-item',
+  includeElementsBeforeFirstTag = true,
+}: {
+  menuComponentName?: string
+  submenuComponentName?: string
+  includeElementsBeforeFirstTag?: boolean
+} = {}) {
+  const tree = computed<MDCRoot | undefined>(() => {
+    if (!menu?.value?.body?.children) return
+
+    // Clone the content to avoid mutating the original data
+    const content = JSON.parse(JSON.stringify(menu.value!.body!.children))
+
+    const grouped = groupElementsAfterElement(content,
+      ['h1', 'menu-item'],
+    )
+
+    const _tree = [] as MDCNode[]
+    for (const item of grouped) {
+      if (item.tag === 'h1') {
+        const convertedItem = convertH1ToMenuItem({
+          item,
+          menuComponentName,
+          submenuComponentName,
+        })
+        if (convertedItem) _tree.push(convertedItem)
+      }
+      else if (item.tag === menuComponentName) {
+        _tree.push(item)
+      }
+      else if (item.tag === 'div') {
+        _tree.push(item)
+      }
+      else if (includeElementsBeforeFirstTag) {
+        _tree.push(item)
+      }
+    }
+
+    return {
+      type: 'root',
+      children: _tree,
+    }
+  })
+
+  return tree
+}
+
+function convertH1ToMenuItem({
+  item,
+  menuComponentName,
+  submenuComponentName,
+}: {
+  item: MDCElement
+  menuComponentName: string
+  submenuComponentName: string
+}) {
+  let treeItem: MDCElement | undefined = undefined
+
+  if (item.tag === 'h1') {
+    treeItem = {
+      type: 'element',
+      tag: menuComponentName,
+      props: {},
+      children: JSON.parse(JSON.stringify(toRaw(item.children))), // break reactivity
+    }
+    const aItem = item.children[0] as MDCElement
+    treeItem.props!.className = aItem.props?.className
+    treeItem.props!.dropdownClass = aItem.props?.['dropdown-class']
+
+    if ((item.children?.[0] as MDCElement).tag === 'a') {
+      let href = aItem.props?.href
+
+      treeItem.children = JSON.parse(
+        JSON.stringify(toRaw(aItem.children) || []),
+      )
+
+      const { navDirFromPath, navPageFromPath } = useContentHelpers()
+      const { navigation } = useContent()
+
+      // Link to page or list sub-pages
+      if (href.startsWith('/') && href.endsWith('/') && navigation.value) {
+        href = href.replace(/\/$/, '')
+        const dir = navDirFromPath(href, navigation.value)
+        if (dir) {
+          const parentProps = (item.children[0] as MDCElement).props!
+          const children = dir
+            .map(child => ({
+              type: 'element',
+              tag: submenuComponentName,
+              props: {
+                to: child._path,
+                title: child.title,
+                icon: [false, 'false'].includes(parentProps.icon)
+                  ? undefined
+                  : child.icon,
+                description: [false, 'false'].includes(parentProps.description)
+                  ? undefined
+                  : child.description,
+              },
+              children: [],
+            }))
+            .slice(0, parentProps.limit || Infinity) as MDCElement[]
+
+          treeItem.children.push({
+            type: 'element',
+            tag: 'template',
+            props: {
+              'v-slot:content': '',
+            },
+            children,
+          })
+        }
+      }
+      else {
+        treeItem.props!.to = href
+
+        if (/https?:\/\//.test(href)) {
+          treeItem.props!.target = '_blank'
+          treeItem.props!.rel = 'noopener noreferrer'
+          treeItem.props!.showLinkIcon = true
+        }
+      }
+
+      // If the link has an icon, use it.
+      if (aItem.props?.[':icon'] !== 'false' && aItem.props?.icon !== 'false')
+        treeItem.props!.icon = aItem.props?.icon
+
+      // Auto-fill empty link with page data. [](/page)
+      if (!aItem.children?.length && navigation.value) {
+        const page = navPageFromPath(href, navigation.value)
+        treeItem.props!.title = page?.title || 'Not found'
+
+        // If the link has an icon, use it.
+        if (aItem.props?.[':icon'] !== 'false' && aItem.props?.icon !== 'false')
+          treeItem.props!.icon = page?.icon
+      }
+    }
+  }
+  else if (item.tag === 'div') {
+    treeItem = item
+  }
+  return treeItem
+}
+
+function groupElementsAfterElement(
+  elements: MDCElement[],
+  tags?: string | string[],
+) {
+  const _tags = typeof tags === 'string' ? [tags] : tags
+  const result = []
+  let currentTag = null
+  let currentGroup: MDCElement | null = null
+  let foundFirstTag = false
+
+  for (const element of elements) {
+    if (_tags?.includes(element.tag)) {
+      foundFirstTag = true
+
+      // Finalize the previous group (if any)
+      if (currentGroup && currentTag) {
+        currentTag.children.push(currentGroup)
+        currentGroup = null
+      }
+
+      // Track the new tag
+      currentTag = element
+      result.push(currentTag)
+    }
+    else if (element.tag === 'div') {
+      result.push(element)
+    }
+    else {
+      if (!foundFirstTag) {
+        result.push(element)
+        continue
+      }
+
+      // Create a group container if none exists
+      if (!currentGroup) {
+        currentGroup = {
+          type: 'element',
+          tag: 'template',
+          props: {
+            'v-slot:content': '',
+          },
+          children: [],
+        }
+      }
+      currentGroup.children.push(element)
+    }
+  }
+
+  // Add the last group to its tag (if any)
+  if (currentGroup && currentTag) {
+    currentTag.children.push(currentGroup)
+  }
+
+  return result
+}

package/composables/usePm.ts

@@ -0,0 +1,58 @@
+const packageManagersCode: {
+  name: 'npm' | 'pnpm' | 'bun' | 'yarn'
+  command: string
+  install: string
+  installEmpty: string
+  run: string
+  x: string
+  saveDev: string
+}[] = [
+  {
+    name: 'npm',
+    command: 'npm ',
+    install: 'i ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'npx ',
+    saveDev: '-D ',
+  },
+  {
+    name: 'pnpm',
+    command: 'pnpm ',
+    install: 'i ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'pnpm dlx ',
+    saveDev: '-D ',
+  },
+  {
+    name: 'bun',
+    command: 'bun ',
+    install: 'add ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'bun x ',
+    saveDev: '-d ',
+  },
+  {
+    name: 'yarn',
+    command: 'yarn ',
+    install: 'add ',
+    installEmpty: 'install',
+    run: 'run ',
+    x: 'yarn dlx ',
+    saveDev: '-D ',
+  },
+]
+
+export function usePm() {
+  const { pm } = useConfig().value.main
+
+  const packageManagers = computed(
+    () => packageManagersCode.filter(x => pm.includes(x.name)),
+  )
+
+  return {
+    packageManagers,
+  }
+}

package/composables/useScrollspy.ts

@@ -0,0 +1,51 @@
+// Credit: nuxt-themes/docus
+
+/**
+ * Scrollspy allows you to watch visible headings in a specific page.
+ * Useful for table of contents live style updates.
+ */
+export function useScrollspy() {
+  const observer = ref() as Ref<IntersectionObserver>
+  const visibleHeadings = ref([]) as Ref<string[]>
+  const activeHeadings = ref([]) as Ref<string[]>
+
+  const observerCallback = (entries: IntersectionObserverEntry[]) =>
+    entries.forEach((entry) => {
+      const id = entry.target.id
+
+      if (entry.isIntersecting)
+        visibleHeadings.value.push(id)
+      else visibleHeadings.value = visibleHeadings.value.filter(t => t !== id)
+    })
+
+  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 },
+  )
+
+  onBeforeUnmount(() => {
+    observer.value?.disconnect()
+  })
+
+  return {
+    visibleHeadings,
+    activeHeadings,
+    updateHeadings,
+  }
+}