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

package/components/layout/Header/Nav.vue

@@ -0,0 +1,112 @@
+<template>
+  <UiNavigationMenu
+    v-if="!tree?.children.length"
+    class="app__header-menu"
+  >
+    <UiNavigationMenuList>
+      <UiNavigationMenuItem
+        v-for="(item, i) in nav"
+        :key="i"
+        class="relative"
+      >
+        <template v-if="item.links">
+          <UiNavigationMenuTrigger class="bg-transparent font-semibold">
+            {{ $t(item.title) }}
+          </UiNavigationMenuTrigger>
+          <UiNavigationMenuContent>
+            <ul class="w-[250px] p-2">
+              <li
+                v-for="link in item.links"
+                :key="link.title"
+              >
+                <NuxtLink
+                  :to="link.to"
+                  :target="link.target"
+                  class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
+                >
+                  <Icon
+                    v-if="link.icon"
+                    :name="link.icon"
+                    :size="16"
+                    class="mt-1 min-w-5"
+                  />
+
+                  <div>
+                    <div class="font-semibold">
+                      {{ $t(link.title) }}
+                    </div>
+                    <div class="text-sm opacity-80">
+                      {{ $t(link.description) }}
+                    </div>
+                  </div>
+                </NuxtLink>
+              </li>
+            </ul>
+          </UiNavigationMenuContent>
+        </template>
+        <NuxtLink
+          v-else
+          :to="item.to"
+          :target="item.target"
+        >
+          <NuxtIcon
+            v-if="item.showLinkIcon ?? false"
+            name="lucide:arrow-up-right"
+            class="absolute right-2 top-2 opacity-80"
+            size="13"
+          />
+          <div
+            class="bg-transparent font-semibold"
+            :class="[
+              navigationMenuTriggerStyle(),
+              (item.showLinkIcon ?? false) && 'pr-6',
+            ]"
+          >
+            {{ $t(item.title) }}
+          </div>
+        </NuxtLink>
+      </UiNavigationMenuItem>
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+
+  <UiNavigationMenu
+    v-else
+    disable-hover-trigger
+    class="header-menu"
+  >
+    <UiNavigationMenuList>
+      <MDCRenderer
+        :body="tree"
+        :tag="false"
+        :components="{
+          'header-menu-item': HeaderMenuItem,
+          'header-submenu-item': HeaderSubmenuItem,
+        }"
+      />
+    </UiNavigationMenuList>
+  </UiNavigationMenu>
+</template>
+
+<script setup lang="ts">
+import { navigationMenuTriggerStyle } from '../../ui/navigation-menu'
+import HeaderMenuItem from './MenuItem.vue'
+import HeaderSubmenuItem from './SubmenuItem.vue'
+
+const { nav } = useConfig().value.header
+
+const menu = '/_menu-header'
+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: 'header-menu-item',
+    submenuComponentName: 'header-submenu-item',
+  })
+}
+</script>

package/components/layout/Header/NavMobile.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <LayoutHeaderNavMobileItem
+      v-for="(item, i) in nav"
+      :key="i"
+      :item="item"
+      :index="i"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { nav } = useConfig().value.header
+</script>

package/components/layout/Header/NavMobileItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <template v-if="item.links">
+    <UiCollapsible v-model:open="isOpen">
+      <UiCollapsibleTrigger class="w-full p-2 text-left">
+        <div class="flex w-full gap-1">
+          {{ item.title }}
+          <NuxtIcon
+            :name="
+              isOpen ? 'lucide:chevrons-down-up' : 'lucide:chevrons-up-down'
+            "
+            size="12"
+            class="ml-auto self-center"
+          />
+        </div>
+      </UiCollapsibleTrigger>
+      <UiCollapsibleContent>
+        <ul class="pl-2">
+          <li
+            v-for="link in item.links"
+            :key="link.title"
+          >
+            <NuxtLink
+              :to="link.to"
+              :target="link.to"
+              class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
+            >
+              <Icon
+                v-if="link.icon"
+                :name="link.icon"
+                :size="16"
+                class="mt-1 min-w-5"
+              />
+
+              <div>
+                <div class="font-semibold">
+                  {{ $t(link.title) }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  {{ $t(link.description) }}
+                </div>
+              </div>
+            </NuxtLink>
+          </li>
+        </ul>
+      </UiCollapsibleContent>
+    </UiCollapsible>
+  </template>
+  <NuxtLink
+    v-else
+    :to="item.to"
+    :target="item.target"
+    class="flex w-full p-2"
+  >
+    {{ item.title }}
+    <NuxtIcon
+      v-if="item.showLinkIcon ?? true"
+      name="lucide:arrow-up-right"
+      class="ml-1 text-muted-foreground"
+      size="12"
+    />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { NuxtLink } from '#imports'
+
+const props = defineProps<{
+  item: NuxtLink
+  index: number
+}>()
+
+const collapsed = useCollapsedMap()
+const isOpen = ref(
+  collapsed.value.get(`mobile-header-nav${props.index}`) || false,
+)
+watch(isOpen, (v) => {
+  collapsed.value.set(`mobile-header-nav${props.index}`, v)
+})
+</script>

package/components/layout/Header/SubmenuItem.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-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 }}
+        </div>
+        <div
+          v-if="description"
+          class="text-sm text-muted-foreground"
+        >
+          {{ description }}
+        </div>
+      </div>
+    </NuxtLink>
+  </component>
+</template>

package/components/layout/Header.vue

@@ -0,0 +1,160 @@
+<template>
+  <header
+    class="app__header"
+    :class="[
+      cn(
+        'sticky top-0 z-40 w-full bg-background/70 backdrop-blur',
+        config.header.border && 'lg:border-b mb-[-1px]',
+        config.header.position === 'floating' && 'floating top-4 w-min mx-auto rounded-full border-none',
+        config.header.class,
+      ),
+      {
+        'hide-on-scroll': config.header.behavior === 'hide-on-scroll',
+        'scroll-up': scrollUp,
+        'scroll-down': !scrollUp,
+        'timeline-scroll-range-exceeded': timelineScrollRangeExceeded,
+      },
+    ]"
+  >
+    <LayoutBanner v-if="config.banner.enable" />
+
+    <div
+      class="flex h-14 items-center justify-between gap-2 px-4 md:px-8"
+      :class="{
+        'border-b lg:border-none': config.header.border,
+        'container': config.main.padded,
+      }"
+    >
+      <LayoutHeaderLogo class="hidden md:flex w-max mr-4" />
+
+      <LayoutMobileNav />
+
+      <LayoutHeaderLogo
+        v-if="config.header.showTitleInMobile"
+        class="flex md:hidden"
+      />
+
+      <LayoutHeaderNav class="hidden lg:flex" />
+
+      <div class="flex justify-end gap-2">
+        <LayoutSearchButton
+          v-if="!config.search.inAside && config.search.style === 'input'"
+        />
+
+        <div class="flex">
+          <LayoutSearchButton
+            v-if="!config.search.inAside && config.search.style === 'button'"
+          />
+
+          <ThemePopover v-if="config.theme.customizable" />
+          <DarkModeToggle v-if="config.header.darkModeToggle" />
+          <A11yModeToggle />
+
+          <NuxtLink
+            v-for="(link, i) in config.header.links"
+            :key="i"
+            :to="link?.to"
+            :target="link?.target"
+          >
+            <UiButton
+              variant="ghost"
+              size="icon"
+              class="flex gap-2"
+            >
+              <Icon
+                v-if="link?.icon"
+                :name="link.icon"
+                :size="18"
+              />
+            </UiButton>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="config.toc.enable && config.toc.enableInMobile"
+      class="lg:hidden"
+    >
+      <LayoutToc is-small />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const config = useConfig()
+
+const { y } = useWindowScroll()
+
+let lastScrollPosition = 0
+let startingScrollUpPosition = 0
+const timelineScrollRange = 680
+const scrollUpOffset = 300
+
+const timelineScrollRangeExceeded = computed(() => {
+  return y.value - timelineScrollRange > 0
+})
+
+const scrollUp = computed(() => {
+  let isScrollingUp = false
+
+  if (y.value > lastScrollPosition) {
+    isScrollingUp = false
+    startingScrollUpPosition = 0
+  }
+  else if (y.value < lastScrollPosition) {
+    if (startingScrollUpPosition === 0) {
+      startingScrollUpPosition = y.value
+    }
+    if (startingScrollUpPosition - y.value > scrollUpOffset) {
+      console.log(timelineScrollRangeExceeded.value, isScrollingUp)
+      if (timelineScrollRangeExceeded.value || scrollUp.value) isScrollingUp = true
+    }
+  }
+  lastScrollPosition = y.value
+  return isScrollingUp
+})
+</script>
+
+<style scoped>
+@supports(animation-timeline: view()){
+  .app__header.hide-on-scroll {
+    --header-timeline-scroll-range-min: 200px;
+    --header-animation-duration: 0.3s;
+    --header-translate-y: -100%;
+  }
+  .app__header.hide-on-scroll.floating {
+    --header-translate-y: calc(-100% - 1rem);
+  }
+  .app__header:not(.timeline-scroll-range-exceeded) {
+    animation: disappearHeader linear both;
+    animation-timeline: scroll();
+    animation-range: var(--header-timeline-scroll-range-min) calc(v-bind(timelineScrollRange) * 1px);
+  }
+  .app__header.scroll-down.timeline-scroll-range-exceeded {
+    animation: disappearHeader var(--header-animation-duration) linear both;
+  }
+  .app__header.scroll-up {
+    animation: appearHeader var(--header-animation-duration) linear both;
+    animation-range: unset;
+  }
+
+  @keyframes disappearHeader {
+    100% {
+        transform: translateY(var(--header-translate-y));
+    }
+  }
+
+  @keyframes appearHeader {
+    0% {
+        transform: translateY(var(--header-translate-y));
+    }
+    100% {
+        transform: translateY(0);
+    }
+  }
+}
+</style>

package/components/layout/LangSwitcher.vue

@@ -0,0 +1,90 @@
+<template>
+  <UseTemplate>
+    <UiButton
+      variant="ghost"
+      size="icon"
+      class="uppercase"
+    >
+      <Icon
+        v-if="triggerType === 'icon'"
+        name="lucide:languages"
+        size="18"
+      />
+      <span
+        v-else-if="triggerType === 'text'"
+        class="font-semibold"
+      >
+        {{ locale }}
+      </span>
+    </UiButton>
+  </UseTemplate>
+
+  <template v-if="enable && locales.length > 1">
+    <UiPopover v-if="dropdownType === 'popover'">
+      <UiPopoverTrigger as-child>
+        <Trigger />
+      </UiPopoverTrigger>
+      <UiPopoverContent
+        class="w-[23rem]"
+        :align="breakpoints.isGreaterOrEqual('md') ? 'end' : 'center'"
+      >
+        <div class="grid gap-6">
+          <div class="grid space-y-1">
+            <h1 class="text-foreground text-lg font-semibold">
+              {{ $t('Language') }}
+            </h1>
+            <p class="text-muted-foreground text-sm">
+              {{ $t('Choose your language') }}
+            </p>
+          </div>
+          <div class="space-y-1.5">
+            <div class="grid grid-cols-3 gap-2">
+              <template
+                v-for="l in locales"
+                :key="l.code"
+              >
+                <UiButton
+                  class="justify-start gap-2"
+                  variant="outline"
+                  :class="{ 'border-primary border-2': locale === l.code }"
+                  @click="navigateTo(switchLocalePath(l.code))"
+                >
+                  <span class="text-xs capitalize">{{ l.name }}</span>
+                </UiButton>
+              </template>
+            </div>
+          </div>
+        </div>
+      </UiPopoverContent>
+    </UiPopover>
+    <UiDropdownMenu v-else-if="dropdownType === 'select'">
+      <UiDropdownMenuTrigger as-child>
+        <Trigger />
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-20">
+        <UiDropdownMenuRadioGroup v-model="selectedLocale">
+          <UiDropdownMenuRadioItem
+            v-for="l in locales"
+            :key="l.code"
+            :value="l.code"
+            @click="selectedLocale = l.code; navigateTo(switchLocalePath(l.code))"
+          >
+            {{ l.name }}
+          </UiDropdownMenuRadioItem>
+        </UiDropdownMenuRadioGroup>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const { locale, locales, switchLocalePath } = useI18nDocs()
+const selectedLocale = ref(locale.value)
+const { enable, triggerType, dropdownType } = useConfig().value.header.languageSwitcher
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const [UseTemplate, Trigger] = createReusableTemplate()
+</script>

package/components/layout/MobileNav.vue

@@ -0,0 +1,44 @@
+<template>
+  <UiSheet v-model:open="open">
+    <UiSheetTrigger as-child>
+      <UiButton
+        variant="ghost"
+        size="icon"
+        class="md:hidden"
+      >
+        <NuxtIcon
+          name="lucide:menu"
+          size="24"
+        />
+      </UiButton>
+    </UiSheetTrigger>
+
+    <UiSheetContent
+      side="left"
+      class="pr-0 unpress-padding"
+    >
+      <LayoutHeaderLogo class="mx-auto w-fit block pr-6" />
+      <LayoutAside is-mobile />
+      <UiDialogTitle class="sr-only" />
+      <UiDialogDescription class="sr-only" />
+    </UiSheetContent>
+  </UiSheet>
+</template>
+
+<script setup lang="ts">
+const open = ref(false)
+
+// Close sheet on navigation
+watch(
+  () => useRoute().path,
+  () => {
+    open.value = false
+  },
+)
+</script>
+
+<style lang="css">
+.unpress.left .unpress-padding {
+  left: auto;
+}
+</style>

package/components/layout/PrevNext.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    v-if="page.prevNext ?? true"
+    class="border-t pt-6 lg:grid lg:grid-cols-2 lg:gap-6"
+  >
+    <LayoutPrevNextButton
+      :prev-next="prev"
+      side="left"
+    />
+    <span
+      v-if="!prev"
+      class="flex-1"
+    />
+    <LayoutPrevNextButton
+      :prev-next="next"
+      side="right"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+const { prev, next } = useI18nDocs()
+</script>

package/components/layout/PrevNextButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <NuxtLink
+    v-if="prevNext && prevNext._path"
+    :to="prevNext._path"
+    class="mb-4 space-y-2 rounded-lg border p-4 transition-all hover:bg-muted/50"
+  >
+    <div class="flex flex-row gap-3">
+      <div
+        v-if="side === 'left'"
+        class="flex size-6 min-w-6"
+      >
+        <NuxtIcon
+          name="lucide:arrow-left"
+          size="20"
+          class="mx-auto self-center"
+        />
+      </div>
+      <span class="space-y-2 self-center">
+        <div class="text-lg font-semibold">
+          {{ prevNext.title }}
+        </div>
+        <div
+          v-if="prevNext.description"
+          class="text-sm text-muted-foreground"
+        >
+          {{ prevNext.description }}
+        </div>
+      </span>
+      <div
+        v-if="side === 'right'"
+        class="ml-auto flex size-6 min-w-6"
+      >
+        <NuxtIcon
+          name="lucide:arrow-right"
+          size="20"
+          class="mx-auto self-center"
+        />
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { ContentNode } from '#imports'
+
+defineProps<{
+  prevNext: ContentNode
+  side: 'left' | 'right'
+}>()
+</script>

package/components/layout/SearchButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <template v-if="enable">
+    <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="[inAside ? 'mb-4' : 'md:w-32 lg:w-40']"
+      @click="isOpen = true"
+    >
+      <span class="mr-auto overflow-hidden">
+        {{ $t(placeholder) }}
+      </span>
+      <Kbd
+        v-if="displayShortcut"
+        class="ml-auto hidden md:block"
+      >
+        <span class="text-xs">⌘</span>K
+      </Kbd>
+    </UiButton>
+    <UiButton
+      v-else
+      variant="ghost"
+      size="icon"
+      :class="displayShortcut && 'flex gap-2 w-[72px]'"
+      @click="isOpen = true"
+    >
+      <NuxtIcon
+        name="lucide:search"
+        size="18"
+      />
+      <Kbd
+        v-if="displayShortcut"
+        class="hidden md:block"
+      >
+        <span class="text-xs">⌘</span>K
+      </Kbd>
+    </UiButton>
+  </template>
+
+  <LayoutSearchDialog v-model:open="isOpen" />
+</template>
+
+<script setup lang="ts">
+const isOpen = ref(false)
+const { enable, inAside, style, placeholder, displayShortcut } = useConfig().value.search
+</script>