Feat/docs

docs/app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'zinc',
+    },
+  },
+})

docs/app/app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate',
+    },
+  },
+})

docs/app/app.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data: navigation } = await useAsyncData('docs-navigation', () =>
+  queryCollectionNavigation('docs'),
+)
+
+provide('navigation', navigation)
+
+const { data: files } = useLazyAsyncData('docs-search', () =>
+  queryCollectionSearchSections('docs', {
+    ignoredTags: ['style'],
+  }), {
+  server: false,
+},
+)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :navigation="navigation"
+        :files="files"
+      />
+    </ClientOnly>
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

docs/app/assets/css/main.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../../../content/**/*";

docs/app/components/AppFooter.vue

@@ -0,0 +1,30 @@
+<template>
+  <USeparator
+    icon="i-simple-icons-nuxtdotjs"
+    class="h-px"
+  />
+
+  <UFooter>
+    <template #left>
+      <NuxtLink
+        to="https://github.com/atinux/nuxt-auth-utils/blob/main/LICENSE"
+        target="_blank"
+        class="text-sm text-muted"
+      >
+        Published under <span class="text-highlighted">MIT License</span>
+      </NuxtLink>
+    </template>
+
+    <template #right>
+      <UButton
+        aria-label="Nuxt Auth Utils on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/atinux/nuxt-auth-utils"
+        target="_blank"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+      />
+    </template>
+  </UFooter>
+</template>

docs/app/components/AppHeader.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const route = useRoute()
+
+const items = computed<NavigationMenuItem[]>(() => [
+  {
+    label: 'Docs',
+    to: '/getting-started/installation',
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/usage'),
+  },
+  {
+    label: 'Changelog',
+    to: 'https://github.com/atinux/nuxt-auth-utils/blob/main/CHANGELOG.md',
+    target: '_blank',
+  },
+])
+</script>
+
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink
+        to="/"
+      >
+        <AppLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+    </template>
+
+    <UNavigationMenu
+      :items="items"
+      variant="link"
+    />
+
+    <template #right>
+      <UColorModeButton />
+
+      <UButton
+        icon="i-simple-icons-github"
+        variant="ghost"
+        color="neutral"
+        to="https://github.com/atinux/nuxt-auth-utils"
+        target="_blank"
+        aria-label="GitHub"
+      />
+    </template>
+
+    <template #body>
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        class="-mx-2.5"
+      />
+    </template>
+  </UHeader>
+</template>

docs/app/components/AppLogo.vue

@@ -0,0 +1,70 @@
+<template>
+  <svg
+    width="100%"
+    height="200"
+    viewBox="0 0 1820 200"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
+      fill="currentColor"
+    />
+    <path
+      d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
+      fill="currentColor"
+    />
+    <path
+      d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
+      fill="currentColor"
+    />
+    <path
+      d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M848 200L920 50L992 200Z M874 200L920 104L966 200Z M905 135L935 135L946 158L894 158Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1103 92V154C1103 168.004 1097.74 179.809 1090 188C1082.26 196.191 1071.57 200 1057 200C1042.43 200 1030.74 196.191 1023 188C1015.39 179.809 1010 168.004 1010 154V92H1026C1029.41 92 1032.77 92.622 1035 95C1037.23 97.2459 1038 98.5652 1038 102V154C1038 162.059 1038.46 167.037 1042 171C1045.54 174.831 1049.91 176 1057 176C1064.22 176 1067.46 174.831 1071 171C1074.54 167.037 1075 162.059 1075 154V102C1075 98.5652 1075.77 96.378 1078 94C1079.96 91.9107 1082.03 91.9599 1085 92C1085.41 92.0055 1086.59 92 1087 92H1103Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1123 92H1136C1139.31 92 1142 89.3137 1142 86V60H1170V92H1197V116H1170V159C1170 169.5 1175.06 174 1184 174H1197V200H1180C1156.95 200 1142 185.071 1142 160V116H1123V92Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1217 50H1245V101C1251 95 1261 92 1274 92C1298 92 1310 108 1310 132V200H1282V138C1282 126 1275 116 1263 116C1251 116 1245 125 1245 138V200H1217V50Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1498 60H1478C1473.52 60 1469.93 59.9395 1467 63C1464.07 65.8905 1465 67.5792 1465 72V141C1465 151.372 1463.65 156.899 1459 162C1454.35 166.931 1448.47 169 1439 169C1429.7 169 1422.65 166.931 1418 162C1413.35 156.899 1413 151.372 1413 141V72C1413 67.5793 1412.93 65.8906 1410 63C1407.07 59.9396 1403.48 60 1399 60H1380V141C1380 159.023 1385.02 173.458 1395 184C1405.16 194.542 1419.89 200 1439 200C1458.11 200 1472.84 194.542 1483 184C1493.16 173.458 1498 159.023 1498 141V60Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1518 92H1531C1534.31 92 1537 89.3137 1537 86V60H1565V92H1592V116H1565V159C1565 169.5 1570.06 174 1579 174H1592V200H1575C1551.95 200 1537 185.071 1537 160V116H1518V92Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1639 28C1639 36.837 1632.39 44 1624 44C1615.61 44 1609 36.837 1609 28C1609 19.163 1615.61 12 1624 12C1632.39 12 1639 19.163 1639 28ZM1636 92H1614C1610 92 1608 94.5 1608 98V200H1636V92Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1656 50H1680C1684 50 1686 52.5 1686 57V200H1656V50Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      d="M1793 120C1786 103 1769 92 1749 92C1724 92 1706 107 1706 126C1706 144 1719 153 1742 158L1756 162C1767 165 1772 169 1772 175C1772 181 1765 186 1752 186C1739 186 1729 178 1725 168L1700 179C1708 196 1726 200 1750 200C1778 200 1796 185 1796 166C1796 148 1782 138 1759 133L1745 129C1734 126 1729 122 1729 116C1729 110 1736 105 1748 105C1759 105 1768 112 1772 122L1793 120Z"
+      fill="var(--ui-primary)"
+    />
+  </svg>
+</template>

docs/app/components/OgImage/AuthUtils.takumi.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { title = 'My Page', description = '' } = defineProps<{
+  title?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center items-center p-[60px] bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white">
+    <h1
+      class="text-[72px] font-bold m-0 leading-tight text-center"
+      style="text-wrap: balance;"
+    >
+      {{ title }}
+    </h1>
+    <p
+      v-if="description"
+      class="text-[32px] opacity-60 mt-4 text-center max-w-[900px]"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>

docs/app/components/UInputCopy.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { InputProps } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'
+
+withDefaults(defineProps<{
+  value: string
+  size?: InputProps['size']
+}>(), {
+  size: 'lg',
+})
+
+const { copy, copied } = useClipboard()
+</script>
+
+<template>
+  <label class="inline-block max-w-full shrink-0">
+    <UInput
+      :model-value="value"
+      :size="size"
+      disabled
+      :ui="{
+        root: 'w-max max-w-full font-mono',
+        base: 'field-sizing-content min-w-[34ch] whitespace-nowrap',
+        trailing: 'pe-1 shrink-0',
+      }"
+    >
+      <div
+        class="absolute inset-0"
+        :class="[copied ? 'cursor-default' : 'cursor-copy']"
+        @click="copy(value)"
+      />
+      <template #trailing>
+        <UButton
+          :icon="copied ? 'i-iconoir-check' : 'i-iconoir-copy'"
+          color="neutral"
+          variant="link"
+          :padded="false"
+          :ui="{ leadingIcon: 'size-4' }"
+          :class="{ 'text-green-500 hover:text-green-500 dark:text-green-400 hover:dark:text-green-400': copied }"
+          aria-label="copy button"
+          @click="copy(value)"
+        />
+      </template>
+    </UInput>
+  </label>
+</template>

docs/app/layouts/default.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <AppHeader />
+
+    <UMain>
+      <slot />
+    </UMain>
+
+    <AppFooter />
+  </div>
+</template>

docs/app/layouts/docs.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <AppHeader />
+
+    <UMain>
+      <UContainer>
+        <UPage>
+          <template #left>
+            <UPageAside>
+              <template #top>
+                <UContentSearchButton :collapsed="false" />
+              </template>
+
+              <UContentNavigation
+                :navigation="navigation"
+                highlight
+              />
+            </UPageAside>
+          </template>
+
+          <slot />
+        </UPage>
+      </UContainer>
+    </UMain>
+    <AppFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>

docs/app/pages/[...slug].vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'docs' })
+
+const route = useRoute()
+
+const { data: page } = await useAsyncData(route.path, () =>
+  queryCollection('docs').path(route.path).first(),
+)
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
+  queryCollectionItemSurroundings('docs', route.path, { before: 1, after: 1 }),
+)
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+
+defineOgImage('AuthUtils', { title, description })
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+    />
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page.body"
+        :value="page"
+      />
+
+      <USeparator v-if="surround?.length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc :links="page.body.toc.links" />
+    </template>
+  </UPage>
+</template>