simple-content-site 1.0.2

package/app/app.config.ts

@@ -0,0 +1,29 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'emerald',
+      neutral: 'zinc',
+    },
+    commandPalette: {
+      slots: {
+        input: '[&_.iconify]:size-4 [&_.iconify]:mx-0.5',
+        itemLeadingIcon: 'size-4 mx-0.5',
+      },
+    },
+    contentNavigation: {
+      slots: {
+        linkLeadingIcon: 'size-4 mr-1',
+        linkTrailing: 'hidden',
+      },
+      defaultVariants: {
+        variant: 'link',
+      },
+    },
+    pageLinks: {
+      slots: {
+        linkLeadingIcon: 'size-4',
+        linkLabelExternalIcon: 'size-2.5',
+      },
+    },
+  },
+})

package/app/app.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { PageCollections } from '@nuxt/content'
+import * as nuxtUiLocales from '@nuxt/ui/locale'
+
+const { seo } = useAppConfig()
+const site = useSiteConfig()
+const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
+
+const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
+const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
+const collectionName = computed(() => isEnabled.value ? `pages_${locale.value}` : 'pages')
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' },
+  ],
+  htmlAttrs: {
+    lang,
+    dir,
+  },
+})
+
+useSeoMeta({
+  titleTemplate: seo.titleTemplate,
+  title: seo.title,
+  description: seo.description,
+  ogSiteName: site.name,
+  twitterCard: 'summary_large_image',
+})
+
+if (isEnabled.value) {
+  const route = useRoute()
+  const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
+  onMounted(() => {
+    const currentLocale = route.path.split('/')[1]
+    if (!locales.some(locale => locale.code === currentLocale)) {
+      return navigateTo(switchLocalePath(defaultLocale) as string)
+    }
+  })
+}
+
+const { data: navigation } = await useAsyncData(() => `navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
+  transform: (data) => {
+    const rootResult = data.find(item => item.path === '/pages')?.children || data || []
+
+    return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
+  },
+  watch: [locale],
+})
+const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value as keyof PageCollections), {
+  server: false,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
+    <NuxtLoadingIndicator color="var(--ui-primary)" />
+
+    <AppHeader v-if="$route.meta.header !== false" />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <AppFooter v-if="$route.meta.footer !== false" />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

package/app/components/IconMenuToggle.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+import type { VariantType } from 'motion-v'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) } = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    opacity: 1,
+  },
+  close: (custom: unknown) => {
+    const c = custom as number
+    return {
+      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
+      y: c === 1 ? 6 : c === 3 ? -6 : 0,
+      opacity: c === 2 ? 0 : 1,
+      transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 20,
+      },
+    }
+  },
+}
+
+const state = computed(() => props.open ? 'close' : 'normal')
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    variant="ghost"
+    color="neutral"
+    class="-me-1.5"
+    square
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <motion.line
+        x1="4"
+        y1="6"
+        x2="20"
+        y2="6"
+        :variants="variants"
+        :animate="state"
+        :custom="1"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="20"
+        y2="12"
+        :variants="variants"
+        :animate="state"
+        :custom="2"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="18"
+        x2="20"
+        y2="18"
+        :variants="variants"
+        :animate="state"
+        :custom="3"
+        class="outline-none"
+      />
+    </svg>
+  </UButton>
+</template>

package/app/components/LanguageSelect.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const { locale, locales, switchLocalePath } = useDocusI18n()
+
+function getEmojiFlag(locale: string): string {
+  const languageToCountry: Record<string, string> = {
+    ar: 'sa', // Arabic -> Saudi Arabia
+    bn: 'bd', // Bengali -> Bangladesh
+    ca: 'es', // Catalan -> Spain
+    ckb: 'iq', // Central Kurdish -> Iraq
+    cs: 'cz', // Czech -> Czech Republic (note: modern country code is actually 'cz')
+    da: 'dk', // Danish -> Denmark
+    el: 'gr', // Greek -> Greece
+    en: 'gb', // English -> Great Britain
+    et: 'ee', // Estonian -> Estonia
+    he: 'il', // Hebrew -> Israel
+    hi: 'in', // Hindi -> India
+    hy: 'am', // Armenian -> Armenia
+    ja: 'jp', // Japanese -> Japan
+    kk: 'kz', // Kazakh -> Kazakhstan
+    km: 'kh', // Khmer -> Cambodia
+    ko: 'kr', // Korean -> South Korea
+    ky: 'kg', // Kyrgyz -> Kyrgyzstan
+    lb: 'lu', // Luxembourgish -> Luxembourg
+    ms: 'my', // Malay -> Malaysia
+    nb: 'no', // Norwegian Bokmål -> Norway
+    sl: 'si', // Slovenian -> Slovenia
+    sv: 'se', // Swedish -> Sweden
+    uk: 'ua', // Ukrainian -> Ukraine
+    ur: 'pk', // Urdu -> Pakistan
+    vi: 'vn', // Vietnamese -> Vietnam
+  }
+
+  const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
+  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, '').slice(0, 2)
+
+  return countryCode.toUpperCase()
+    .split('')
+    .map(char => String.fromCodePoint(0x1F1A5 + char.charCodeAt(0)))
+    .join('')
+}
+</script>
+
+<template>
+  <UPopover
+    mode="hover"
+    :content="{ align: 'end' }"
+  >
+    <UButton
+      color="neutral"
+      variant="ghost"
+      class="size-8"
+    >
+      <template #trailing>
+        <span class="text-lg">
+          {{ getEmojiFlag(locale) }}
+        </span>
+      </template>
+    </UButton>
+
+    <template #content>
+      <ul class="flex flex-col">
+        <li
+          v-for="localeItem in locales"
+          :key="localeItem.code"
+        >
+          <NuxtLink
+            class="flex justify-between py-1.5 px-2 gap-1 hover:bg-muted"
+            :to="switchLocalePath(localeItem.code) as string"
+            :aria-label="localeItem.name"
+          >
+            <span class="text-sm">
+              {{ localeItem.name }}
+            </span>
+            <span class="size-5 text-center">
+              {{ getEmojiFlag(localeItem.code) }}
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </template>
+  </UPopover>
+</template>

package/app/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-neutral-900">
+    <svg
+      class="absolute right-0 top-0 opacity-50"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-emerald-500 mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1
+        v-if="title"
+        class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p
+        v-if="description"
+        class="text-[32px] text-neutral-300 leading-tight w-[700px]"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/OgImage/OgImageLanding.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-neutral-900">
+    <svg
+      class="absolute right-0 top-0 opacity-50 "
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="flex flex-col justify-center p-8">
+      <div class="flex justify-center mb-8">
+        <AppHeaderLogo white />
+      </div>
+      <h1
+        v-if="title"
+        class="flex justify-center m-0 text-5xl font-semibold mb-4 text-white"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p
+        v-if="description"
+        class="text-center text-2xl text-neutral-300 leading-tight"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/app/AppFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <UFooter>
+    <template #left>
+      <AppFooterLeft />
+    </template>
+
+    <template #right>
+      <AppFooterRight />
+    </template>
+  </UFooter>
+</template>

package/app/components/app/AppFooterLeft.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-sm text-muted">
+    Copyright © {{ new Date().getFullYear() }}
+  </div>
+</template>

package/app/components/app/AppFooterRight.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+const links = computed(() => [
+  ...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
+    'icon': `i-simple-icons-${key}`,
+    'to': url,
+    'target': '_blank',
+    'aria-label': `${key} social link`,
+  })),
+  appConfig.github && appConfig.github.url && {
+    'icon': 'i-simple-icons-github',
+    'to': appConfig.github.url,
+    'target': '_blank',
+    'aria-label': 'GitHub repository',
+  },
+].filter(Boolean))
+</script>
+
+<template>
+  <template v-if="links.length">
+    <UButton
+      v-for="(link, index) of links"
+      :key="index"
+      size="sm"
+      v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+    />
+  </template>
+  <UColorModeButton />
+</template>

package/app/components/app/AppHeader.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { useDocusI18n } from '../../composables/useDocusI18n'
+
+const appConfig = useAppConfig()
+const site = useSiteConfig()
+
+const { localePath, isEnabled, locales } = useDocusI18n()
+
+const links = computed(() => appConfig.github && appConfig.github.url
+  ? [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': appConfig.github.url,
+        'target': '_blank',
+        'aria-label': 'GitHub',
+      },
+    ]
+  : [])
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    :to="localePath('/')"
+    :title="appConfig.header?.title || site.name"
+  >
+    <AppHeaderCenter />
+
+    <template #title>
+      <AppHeaderLogo class="h-6 w-auto shrink-0" />
+    </template>
+
+    <template #right>
+      <AppHeaderCTA />
+
+      <template v-if="isEnabled && locales.length > 1">
+        <ClientOnly>
+          <LanguageSelect />
+
+          <template #fallback>
+            <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+          </template>
+        </ClientOnly>
+
+        <USeparator
+          orientation="vertical"
+          class="h-8"
+        />
+      </template>
+
+      <UContentSearchButton class="lg:hidden" />
+
+      <ClientOnly>
+        <UColorModeButton />
+
+        <template #fallback>
+          <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+        </template>
+      </ClientOnly>
+
+      <template v-if="links?.length">
+        <UButton
+          v-for="(link, index) of links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #toggle="{ open, toggle }">
+      <IconMenuToggle
+        :open="open"
+        class="lg:hidden"
+        @click="toggle"
+      />
+    </template>
+
+    <template #body>
+      <AppHeaderBody />
+    </template>
+  </UHeader>
+</template>

package/app/components/app/AppHeaderBody.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>
+
+<template>
+  <UContentNavigation
+    highlight
+    variant="link"
+    :navigation="navigation"
+  />
+</template>

package/app/components/app/AppHeaderCTA.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

package/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,10 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mr-1',
+    }"
+  />
+</template>

package/app/components/app/AppHeaderLogo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UColorModeImage
+    v-if="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :light="appConfig.header?.logo?.light || appConfig.header?.logo?.dark"
+    :dark="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :alt="appConfig.header?.logo?.alt || appConfig.header?.title"
+    class="h-6 w-auto shrink-0"
+  />
+  <span v-else>
+    {{ appConfig.header?.title || '{appConfig.header.title}' }}
+  </span>
+</template>

package/app/components/docs/DocsAsideLeftBody.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>
+
+<template>
+  <UContentNavigation
+    highlight
+    :navigation="navigation"
+  />
+</template>

package/app/components/docs/DocsAsideLeftTop.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

package/app/components/docs/DocsAsideRightBottom.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const { t } = useDocusI18n()
+</script>
+
+<template>
+  <div
+    v-if="appConfig.toc?.bottom?.links?.length"
+    class="hidden lg:block space-y-6"
+  >
+    <USeparator type="dashed" />
+
+    <UPageLinks
+      :title="appConfig.toc?.bottom?.title || t('docs.links')"
+      :links="appConfig.toc?.bottom?.links"
+    />
+  </div>
+</template>