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

package/components/layout/Aside.vue

@@ -0,0 +1,83 @@
+<template>
+  <UiScrollArea
+    orientation="vertical"
+    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"
+      >
+        <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']"
+        >
+          <Icon
+            v-if="link.icon"
+            :name="link.icon"
+            class="self-center"
+            :size="16"
+          />
+          {{ link.title }}
+
+          <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']"
+    />
+  </UiScrollArea>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const { isMobile, navigation, level = 0 } = defineProps<{
+  isMobile: boolean
+  navigation?: NavItem[]
+  level?: number
+}>()
+
+const { navDirFromPath } = useContentHelpers()
+const { navigation: nav } = useContent()
+const config = useConfig()
+
+const links = computed(() => {
+  const route = useRoute()
+  const path = route.path.split('/')
+
+  if (config.value.aside.useLevel) {
+    const leveledPath = path.splice(0, level + 2).join('/')
+    const dir = navDirFromPath(leveledPath, navigation || nav.value)
+    return dir ?? []
+  }
+
+  return navigation || nav.value
+})
+
+const path = computed(() => useRoute().path)
+</script>

package/components/layout/AsideTree.vue

@@ -0,0 +1,25 @@
+<template>
+  <ul
+    class="flex flex-col gap-1 py-1"
+    :class="[level > 0 && 'mx-3.5 border-l px-2.5']"
+  >
+    <template
+      v-for="link in links"
+      :key="link._id"
+    >
+      <LayoutAsideTreeItem
+        :link="link"
+        :level="level"
+      />
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+defineProps<{
+  links: NavItem[]
+  level: number
+}>()
+</script>

package/components/layout/AsideTreeItem.vue

@@ -0,0 +1,86 @@
+<template>
+  <li>
+    <!-- Folder -->
+    <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="[link.navTruncate !== false && 'h-8']"
+        >
+          <LayoutAsideTreeItemButton :link />
+        </div>
+        <LayoutAsideTree
+          :links="link.children"
+          :level="level"
+        />
+      </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="[link.navTruncate !== false && 'h-8']"
+          @click="isOpen = !isOpen"
+        >
+          <NuxtIcon
+            v-if="folderStyle === 'tree'"
+            name="lucide:chevron-down"
+            class="transition-transform"
+            :class="[!isOpen && '-rotate-90']"
+          />
+          <LayoutAsideTreeItemButton :link />
+          <NuxtIcon
+            v-if="folderStyle === 'default'"
+            name="lucide:chevron-down"
+            class="ml-auto transition-transform"
+            :class="[!isOpen && '-rotate-90']"
+          />
+        </button>
+        <div v-show="isOpen">
+          <LayoutAsideTree
+            :links="link.children"
+            :level="level + 1"
+          />
+        </div>
+      </template>
+    </div>
+    <!-- Page -->
+    <NuxtLink
+      v-else
+      :to="link._path"
+      class="flex items-center gap-2 rounded-md p-2 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+      :class="[
+        isActive && 'bg-muted !text-primary',
+        !!link.navTruncate && 'h-8',
+      ]"
+    >
+      <LayoutAsideTreeItemButton :link />
+    </NuxtLink>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const { link, level } = defineProps<{
+  link: NavItem
+  level: number
+}>()
+
+const { collapse, collapseLevel, folderStyle: defaultFolderStyle } = useConfig().value.aside
+
+const collapsed = useCollapsedMap()
+const isOpen = ref(collapsed.value.get(link._path) || defaultOpen())
+
+function defaultOpen() {
+  if (link.collapse !== undefined)
+    return !link.collapse
+
+  return level < collapseLevel && !collapse
+}
+
+watch(isOpen, (v) => {
+  collapsed.value.set(link._path, v)
+})
+const isActive = computed(() => link._path === useRoute().path)
+
+const folderStyle = computed(() => link.sidebar?.style ?? defaultFolderStyle)
+</script>

package/components/layout/AsideTreeItemButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <Icon
+    v-if="link.icon"
+    :name="link.icon"
+    class="min-w-4"
+  />
+
+  <span :class="{ 'truncate text-nowrap': link.navTruncate }">
+    {{ link.title }}
+  </span>
+
+  <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>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const { link } = defineProps<{
+  link: NavItem
+}>()
+</script>

package/components/layout/Banner.vue

@@ -0,0 +1,77 @@
+<template>
+  <Transition>
+    <div
+      v-if="open === true"
+      class="app__banner block transition-colors bg-primary/10"
+      :class="{
+        'hover:cursor-pointer hover:bg-primary/25': to,
+        'border-b': border,
+      }"
+    >
+      <div class="container h-10 flex items-center justify-between px-4 md:px-8">
+        <NuxtLink
+
+          :to
+          @click.prevent="navigate"
+        >
+          <div class="hidden lg:block" />
+          <div class="text-sm">
+            <MDC
+              :value="content"
+              class="flex items-center text-primary text-lg"
+            />
+          </div>
+        </NuxtLink>
+
+        <UiButton
+          v-if="showClose"
+          variant="ghost"
+          class="z-40 size-10 p-2 [--accent:var(--primary)] !bg-opacity-25 rounded-none"
+          aria-label="Close banner"
+          @click.prevent="open = Date.now()"
+        >
+          <NuxtIcon
+            name="lucide:x"
+            size="36"
+          />
+        </UiButton>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const open = useCookie<boolean | number>('banner-open', { default: () => true })
+const { showClose, content, to, target, border, height } = useConfig().value.banner
+
+function navigate() {
+  if (open.value && to) {
+    navigateTo(to, {
+      external: true,
+      open: {
+        target,
+      },
+    })
+  }
+}
+
+watch(open, () => {
+  useHead({
+    bodyAttrs: {
+      style: `--banner-height: ${open.value === true ? height : '0px'};`,
+    },
+  })
+}, { immediate: true })
+</script>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/components/layout/Breadcrumb.vue

@@ -0,0 +1,34 @@
+<template>
+  <UiBreadcrumb>
+    <UiBreadcrumbList>
+      <template
+        v-for="(breadcrumb, index) in breadcrumbs"
+        :key="breadcrumb.title"
+      >
+        <UiBreadcrumbItem>
+          <NuxtLink
+            :href="breadcrumb.href || '#'"
+            class="transition-colors hover:text-foreground flex items-center gap-2"
+            :class="index === breadcrumbs.length - 1 && 'text-foreground'"
+          >
+            <Icon
+              v-if="(breadcrumb.icon && config.main.breadCrumb.showIcon)"
+              :size="breadcrumb.iconSize || config.main.breadCrumb.iconSize || 14"
+              :name="breadcrumb.icon"
+            />
+            {{ breadcrumb.title }}
+          </NuxtLink>
+        </UiBreadcrumbItem>
+
+        <UiBreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+      </template>
+    </UiBreadcrumbList>
+  </UiBreadcrumb>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const config = useConfig()
+
+const breadcrumbs = computed(() => useBreadcrumb(route.path))
+</script>

package/components/layout/DocsFooter.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="mt-16">
+    <LayoutEditLink />
+    <LayoutPrevNext />
+  </div>
+</template>

package/components/layout/EditLink.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    v-if="enabledDocsFooter"
+    class="mb-6 w-fit"
+  >
+    <NuxtLink
+      :to="url"
+      target="_blank"
+      class="text-sm font-semibold text-primary"
+    >
+      <div class="flex items-center gap-2">
+        <Icon :name="icon" />
+        <span>
+          {{ $t(text) }}
+        </span>
+      </div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { url, enabledDocsFooter, text, icon } = useEditLink()
+</script>

package/components/layout/Footer.vue

@@ -0,0 +1,80 @@
+<template>
+  <footer
+    class="site-footer border-t mt-6"
+    :class="footer.class"
+  >
+    <div
+      v-if="!tree?.children.length"
+      class="container flex flex-col items-center justify-between gap-2 md:flex-row p-4 md:px-8"
+    >
+      <MDC
+        v-if="footer.credits"
+        :value="$t(footer.credits)"
+        class="text-sm"
+      />
+      <span class="flex-1" />
+      <NuxtLink
+        v-for="(link, i) in footer.links"
+        :key="i"
+        :to="link?.to"
+        :target="link?.target"
+      >
+        <UiButton
+          variant="ghost"
+          :size="link?.icon && !link?.title ? 'icon' : 'default'"
+          class="flex gap-2"
+        >
+          <Icon
+            v-if="link?.icon"
+            :name="link.icon"
+            :size="20"
+          />
+          <span v-if="link?.title">{{ $t(link.title) }}</span>
+        </UiButton>
+      </NuxtLink>
+
+      <CmsAuth>
+        <template #default="{ login }">
+          <UiButton
+            variant="ghost"
+            @click="login()"
+          >
+            Admin
+          </UiButton>
+        </template>
+      </CmsAuth>
+    </div>
+
+    <MDCRenderer
+      v-else
+      :body="tree"
+      class="min-h-10"
+      :class="{ 'container grid grid-cols-3 gap-6 p-4 md:px-8': !!tree }"
+      :components="{
+        'footer-item': FooterItem,
+        'footer-submenu-item': FooterSubmenuItem,
+      }"
+    />
+  </footer>
+</template>
+
+<script setup lang="ts">
+import FooterItem from './FooterItem.vue'
+import FooterSubmenuItem from './FooterSubmenuItem.vue'
+
+const { footer } = useConfig().value
+
+const menu = '/_menu-footer'
+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: 'footer-item',
+    submenuComponentName: 'footer-submenu-item',
+  })
+}
+</script>

package/components/layout/FooterItem.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+defineProps<{
+  to?: string
+  target?: string
+  showLinkIcon?: boolean
+  icon?: string
+  title?: string
+  description?: string
+  tag?: string
+}>()
+</script>
+
+<template>
+  <component :is="tag || 'div'">
+    <div class="text-xl font-bold pb-4 text-muted-foreground">
+      <slot />
+    </div>
+
+    <div class="flex flex-col gap-1 text-sm [&_a]:decoration-none">
+      <MDCSlot
+        name="content"
+        unwrap="p"
+      />
+    </div>
+    <!-- <NuxtLink
+      :to
+      :target
+      class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mt-1"
+      />
+
+      <div>
+        <div class="font-semibold text-base">
+          {{ title }}
+          <slot />
+        </div>
+        <div
+          v-if="description"
+          class="text-sm text-muted-foreground"
+        >
+          {{ description }}
+        </div>
+      </div>
+    </NuxtLink> -->
+  </component>
+</template>

package/components/layout/FooterSubmenuItem.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const { to, target, icon, title, description, tag } = defineProps<{
+  to?: string
+  target?: string
+  showLinkIcon?: boolean
+  icon?: string
+  title?: string
+  description?: string
+  tag?: string
+}>()
+</script>
+
+<template>
+  <component :is="tag || 'div'">
+    <NuxtLink
+      :to
+      :target
+      class="mb-1 flex w-full gap-1 group"
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mt-1"
+      />
+
+      <div>
+        <div class="group-hover:underline">
+          {{ title }}
+        </div>
+        <div
+          v-if="description"
+          class="text-sm text-muted-foreground"
+        >
+          {{ description }}
+        </div>
+      </div>
+    </NuxtLink>
+  </component>
+</template>

package/components/layout/Header/Logo.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <NuxtLink
+      v-if="logo.light && logo.dark"
+      to="/"
+      class="logo__container flex transition"
+    >
+      <Icon
+        :name="logo.light"
+        size="28"
+        class="logo logo-light h-7 dark:hidden!"
+      />
+      <Icon
+        :name="logo.dark"
+        size="28"
+        class="logo logo-dark h-7 hidden! dark:block!"
+      />
+      <div
+        v-if="showTitle && title"
+        class="ml-3 self-center font-bold whitespace-nowrap"
+      >
+        {{ $t(title) }}
+      </div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { logo, title, showTitle } = useConfig().value.header
+</script>

package/components/layout/Header/MenuItem.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+
+const { to, target, showLinkIcon, icon, title, tag, dropdownClass }
+  = defineProps<{
+    to?: string
+    target?: string
+    rel?: string
+    showLinkIcon?: boolean
+    icon?: string
+    title?: string
+    tag?: string
+    dropdownClass?: string
+  }>()
+</script>
+
+<template>
+  <UiNavigationMenuItem class="relative">
+    <NuxtLink
+      v-if="!$slots.content"
+      :to
+      :target
+      :rel
+      class="relative"
+    >
+      <NuxtIcon
+        v-if="showLinkIcon ?? false"
+        name="lucide:arrow-up-right"
+        class="absolute right-1 top-1 text-muted-foreground"
+        size="13"
+      />
+      <div
+        class="bg-transparent font-semibold whitespace-break-spaces !flex"
+        :class="[navigationMenuTriggerStyle()]"
+      >
+        <Icon
+          v-if="icon"
+          :name="icon"
+          class="min-w-5 mr-2"
+        />
+        <span v-if="title">{{ title }}</span>
+        <slot v-else-if="$slots.default" />
+      </div>
+    </NuxtLink>
+
+    <template v-else>
+      <UiNavigationMenuTrigger
+        class="bg-transparent font-semibold whitespace-break-spaces"
+      >
+        <span v-if="title">{{ title }}</span>
+        <slot v-else-if="$slots.default" />
+      </UiNavigationMenuTrigger>
+      <UiNavigationMenuContent class="dropdown-menu">
+        <component
+          :is="tag || 'div'"
+          :class="cn('w-[450px] p-2', dropdownClass)"
+        >
+          <slot name="content" />
+        </component>
+      </UiNavigationMenuContent>
+    </template>
+  </UiNavigationMenuItem>
+</template>
+
+<style scoped>
+:deep(p) {
+  margin-top: 0 !important;
+}
+:deep(ul) {
+  list-style: none;
+  margin: 0 !important;
+}
+:deep(hr) {
+  margin: 0.5rem 0 !important;
+}
+:deep(> hr),
+:deep(> div > hr) {
+  margin: 0 !important;
+  height: auto;
+  border-left-width: 1px;
+}
+</style>