simple-content-site 1.0.3 → 1.0.5

package/app/app.vue

@@ -4,7 +4,7 @@ import * as nuxtUiLocales from '@nuxt/ui/locale'
 
 const { seo } = useAppConfig()
 const site = useSiteConfig()
-const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
+const { locale, locales, isEnabled, switchLocalePath } = useSiteI18n()
 
 const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
 const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')

package/app/components/LanguageSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { locale, locales, switchLocalePath } = useDocusI18n()
+const { locale, locales, switchLocalePath } = useSiteI18n()
 
 function getEmojiFlag(locale: string): string {
   const languageToCountry: Record<string, string> = {

package/app/components/app/AppFooter.vue

@@ -1,11 +1,26 @@
+<script setup lang="ts">
+import { useSiteFooter } from '../../composables/useSiteFooter'
+
+const { data: footer } = await useSiteFooter()
+</script>
+
 <template>
   <UFooter>
     <template #left>
       <AppFooterLeft />
     </template>
-
+    <template
+      v-if="footer && footer.sections && footer.sections.length"
+      #top
+    >
+      <UContainer>
+        <UFooterColumns
+          :columns="footer.sections"
+        />
+      </UContainer>
+    </template>
     <template #right>
-      <AppFooterRight />
+      <AppFooterRight :links="footer && footer.socials" />
     </template>
   </UFooter>
 </template>

package/app/components/app/AppFooterRight.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
+const props = defineProps<{
+  links?: ButtonProps[]
+}>()
+
 const appConfig = useAppConfig()
 
-const links = computed(() => [
+const footerLinks = computed(() => props.links || [
   ...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
     'icon': `i-simple-icons-${key}`,
     'to': url,
@@ -18,9 +24,9 @@ const links = computed(() => [
 </script>
 
 <template>
-  <template v-if="links.length">
+  <template v-if="footerLinks.length">
     <UButton
-      v-for="(link, index) of links"
+      v-for="(link, index) of footerLinks"
       :key="index"
       size="sm"
       v-bind="{ color: 'neutral', variant: 'ghost', ...link }"

package/app/components/app/AppHeader.vue

@@ -1,35 +1,26 @@
 <script setup lang="ts">
-import { useDocusI18n } from '../../composables/useDocusI18n'
+import { useSiteI18n } from '../../composables/useSiteI18n'
+import { useSiteHeader } from '../../composables/useSiteHeader'
+
+const { data: header } = await useSiteHeader()
 
 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',
-      },
-    ]
-  : [])
+const { localePath, isEnabled, locales } = useSiteI18n()
 </script>
 
 <template>
   <UHeader
     :ui="{ center: 'flex-1' }"
     :to="localePath('/')"
-    :title="appConfig.header?.title || site.name"
+    :title="header?.title || appConfig.header?.title || site.name"
   >
-    <AppHeaderCenter />
-
     <template #title>
       <AppHeaderLogo class="h-6 w-auto shrink-0" />
     </template>
 
+    <AppHeaderCenter />
     <template #right>
       <AppHeaderCTA />
 
@@ -57,14 +48,6 @@ const links = computed(() => appConfig.github && appConfig.github.url
           <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 }">

package/app/components/app/AppHeaderBody.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
+import { useSiteHeader } from '../../composables/useSiteHeader'
+
+const { data: header } = await useSiteHeader()
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 </script>
 
 <template>
+  <UNavigationMenu
+    v-if="header?.navigation"
+    :items="header?.navigation"
+    orientation="vertical"
+    class="-mx-2.5"
+  />
   <UContentNavigation
+    v-else
     highlight
     variant="link"
     :navigation="navigation"

package/app/components/app/AppHeaderCenter.vue

@@ -1,5 +1,17 @@
+<script setup lang="ts">
+import { useSiteHeader } from '#imports'
+
+const { data: header } = await useSiteHeader()
+</script>
+
 <template>
+  <UNavigationMenu
+    v-if="header?.navigation"
+    :items="header?.navigation"
+    variant="link"
+  />
   <UContentSearchButton
+    v-else
     :collapsed="false"
     class="w-full"
     variant="soft"

package/app/components/app/AppHeaderLogo.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { useSiteHeader } from '#imports'
+
 const appConfig = useAppConfig()
+const { data: header } = await useSiteHeader()
 </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"
+    v-if="header?.logo || appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :light="header?.logo?.light || appConfig.header?.logo?.light || appConfig.header?.logo?.dark"
+    :dark="header?.logo?.dark || appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :alt="header?.logo?.alt || appConfig.header?.logo?.alt || appConfig.header?.title"
     class="h-6 w-auto shrink-0"
   />
   <span v-else>
-    {{ appConfig.header?.title || '{appConfig.header.title}' }}
+    {{ header?.title || appConfig.header?.title || '{appConfig.header.title}' }}
   </span>
 </template>

package/app/components/docs/DocsAsideRightBottom.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
-const { t } = useDocusI18n()
+const { t } = useSiteI18n()
 </script>
 
 <template>

package/app/components/docs/DocsPageHeaderLinks.vue

@@ -4,7 +4,7 @@ import { useClipboard } from '@vueuse/core'
 const route = useRoute()
 
 const { copy, copied } = useClipboard()
-const { t } = useDocusI18n()
+const { t } = useSiteI18n()
 
 const markdownLink = computed(() => `${window?.location?.origin}/raw${route.path}.md`)
 const items = [

package/app/composables/useSiteFooter.ts

@@ -0,0 +1,25 @@
+import type { Collections, FooterCollectionItem } from '@nuxt/content'
+
+export const useSiteFooter = () => {
+  const { locale, isEnabled } = useSiteI18n()
+  const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
+  const collectionName = computed(() => isEnabled.value ? `footer_${locale.value}` : 'footer')
+
+  return useAsyncData(collectionName, async () => {
+    const customFooter = await queryCollection(collectionName.value as keyof Collections).first()
+    if (!customFooter) {
+      // attempt to find for the default language
+      if (isEnabled.value && defaultLocale) {
+        const fallbackFooter = await queryCollection(`footer_${defaultLocale}` as keyof Collections).first()
+        if (fallbackFooter) {
+          return fallbackFooter as FooterCollectionItem
+        }
+      }
+      return <FooterCollectionItem> {
+        socials: [] as FooterCollectionItem['socials'],
+      }
+    }
+
+    return customFooter as FooterCollectionItem
+  })
+}

package/app/composables/useSiteHeader.ts

@@ -0,0 +1,26 @@
+import type { Collections, HeaderCollectionItem } from '@nuxt/content'
+
+export const useSiteHeader = () => {
+  const config = useAppConfig()
+  const { locale, isEnabled } = useSiteI18n()
+  const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
+  const collectionName = computed(() => isEnabled.value ? `header_${locale.value}` : 'header')
+
+  return useAsyncData(collectionName, async () => {
+    const customHeader = await queryCollection(collectionName.value as keyof Collections).first()
+    if (!customHeader) {
+      if (isEnabled.value && defaultLocale) {
+        const fallbackHeader = await queryCollection(`header_${defaultLocale}` as keyof Collections).first()
+        if (fallbackHeader) {
+          return fallbackHeader as HeaderCollectionItem
+        }
+      }
+      return <HeaderCollectionItem> {
+        title: config.header.title,
+        logo: config.header.logo,
+      }
+    }
+
+    return customHeader as HeaderCollectionItem
+  })
+}

package/app/composables/{useDocusI18n.ts → useSiteI18n.ts}

@@ -1,7 +1,7 @@
 import type { LocaleObject } from '@nuxtjs/i18n'
 import en from '../../i18n/locales/en.json'
 
-export const useDocusI18n = () => {
+export const useSiteI18n = () => {
   const config = useRuntimeConfig().public
   const isEnabled = ref(!!config.i18n)
 

package/app/error.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
   error: NuxtError
 }>()
 
-const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
+const { locale, locales, isEnabled, t, switchLocalePath } = useSiteI18n()
 
 const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
 const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')

package/app/pages/[[lang]]/[...slug].vue

@@ -9,7 +9,7 @@ definePageMeta({
 })
 
 const route = useRoute()
-const { locale, isEnabled } = useDocusI18n()
+const { locale, isEnabled } = useSiteI18n()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const collectionName = computed(() => isEnabled.value ? `pages_${locale.value}` : 'pages')

package/app/templates/landing.vue

@@ -2,12 +2,12 @@
 import type { Collections } from '@nuxt/content'
 
 const route = useRoute()
-const { locale, isEnabled } = useDocusI18n()
+const { locale, isEnabled } = useSiteI18n()
 
 // Dynamic collection name based on i18n status
 const collectionName = computed(() => isEnabled.value ? `landing_${locale.value}` : 'landing')
 
-const { data: page } = await useAsyncData(collectionName.value, () => queryCollection(collectionName.value as keyof Collections).path(route.path).first())
+const { data: page } = await useAsyncData(collectionName.value, () => queryCollection(collectionName.value as keyof Omit<Collections, 'header' | 'footer'>).path(route.path).first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: import.meta.dev ? `Page ${route.path} not found in ${collectionName.value}` : 'Page not found', fatal: true })
 }

package/content.config.ts

@@ -7,6 +7,50 @@ const { options } = useNuxt()
 const cwd = joinURL(options.rootDir, 'content')
 const locales = options.i18n?.locales
 
+const variantEnum = z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link'])
+const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info'])
+const sizeEnum = z.enum(['xs', 'sm', 'md', 'lg', 'xl'])
+// const orientationEnum = z.enum(['vertical', 'horizontal'])
+
+// const createBaseSchema = () => z.object({
+//   title: z.string().nonempty(),
+//   description: z.string().nonempty(),
+// })
+
+// const createFeatureItemSchema = () => createBaseSchema().extend({
+//   icon: z.string().nonempty().editor({ input: 'icon' }),
+// })
+
+const createLinkSchema = () => z.object({
+  class: z.string().optional(),
+  label: z.string().nonempty(),
+  to: z.string().nonempty(),
+  icon: z.string().optional().editor({ input: 'icon' }),
+  size: sizeEnum.optional(),
+  trailing: z.boolean().optional(),
+  trailingIcon: z.string().optional().editor({ input: 'icon' }),
+  target: z.string().optional(),
+  color: colorEnum.optional(),
+  variant: variantEnum.optional(),
+})
+
+const createNavigationSchema = () => z.object({
+  label: z.string().nonempty(),
+  class: z.string().optional(),
+  to: z.string().nonempty(),
+  icon: z.string().optional().editor({ input: 'icon' }),
+  size: sizeEnum.optional(),
+  trailing: z.boolean().optional(),
+  trailingIcon: z.string().optional().editor({ input: 'icon' }),
+  target: z.string().optional(),
+  color: colorEnum.optional(),
+  variant: variantEnum.optional(),
+})
+
+const createNavigationItemSchema = () => createNavigationSchema().extend({
+  children: z.array(createNavigationSchema()).optional(),
+})
+
 const createPageSchema = () => z.object({
   links: z.array(z.object({
     label: z.string(),
@@ -16,6 +60,24 @@ const createPageSchema = () => z.object({
   })).optional(),
 })
 
+const createHeaderSchema = () => z.object({
+  title: z.string().optional(),
+  logo: z.object({
+    light: z.string(),
+    dark: z.string().optional(),
+    alt: z.string().optional(),
+  }).optional(),
+  navigation: z.array(createNavigationItemSchema()).optional(),
+})
+
+const createFooterSchema = () => z.object({
+  sections: z.array(z.object({
+    label: z.string().nonempty(),
+    children: z.array(createLinkSchema()),
+  })),
+  socials: z.array(createLinkSchema()),
+})
+
 let collections: Record<string, DefinedCollection>
 
 if (locales && Array.isArray(locales)) {
@@ -37,10 +99,34 @@ if (locales && Array.isArray(locales)) {
         cwd,
         include: `${code}/**/*`,
         prefix: `/${code}`,
-        exclude: [`${code}/index.md`],
+        exclude: [
+          `${code}/index.md`,
+          `${code}/header.yml`,
+          `${code}/footer.yml`,
+        ],
       },
       schema: createPageSchema(),
     })
+
+    collections[`header_${code}`] = defineCollection({
+      type: 'data',
+      source: {
+        cwd,
+        include: `${code}/header.yml`,
+        prefix: `/${code}`,
+      },
+      schema: createHeaderSchema(),
+    })
+
+    collections[`footer_${code}`] = defineCollection({
+      type: 'data',
+      source: {
+        cwd,
+        include: `${code}/footer.yml`,
+        prefix: `/${code}`,
+      },
+      schema: createFooterSchema(),
+    })
   }
 }
 else {
@@ -57,16 +143,29 @@ else {
       source: {
         cwd,
         include: '**',
-        exclude: ['index.md'],
+        exclude: [
+          'index.md',
+          'header.yml',
+          'footer.yml',
+        ],
       },
       schema: createPageSchema(),
     }),
-    contact: defineCollection({
-      type: 'page',
+    header: defineCollection({
+      type: 'data',
+      source: {
+        cwd,
+        include: 'header.yml',
+      },
+      schema: createHeaderSchema(),
+    }),
+    footer: defineCollection({
+      type: 'data',
       source: {
         cwd,
-        include: 'contact.md',
+        include: 'footer.yml',
       },
+      schema: createFooterSchema(),
     }),
   }
 }

package/modules/routing.ts

@@ -9,13 +9,13 @@ export default defineNuxtModule({
 
     const isI18nEnabled = !!(nuxt.options.i18n && nuxt.options.i18n.locales)
 
-    // Ensure useDocusI18n is available in the app
+    // Ensure useSiteI18n is available in the app
     nuxt.hook('imports:extend', (imports) => {
-      if (imports.some(i => i.name === 'useDocusI18n')) return
+      if (imports.some(i => i.name === 'useSiteI18n')) return
 
       imports.push({
-        name: 'useDocusI18n',
-        from: resolve('../app/composables/useDocusI18n'),
+        name: 'useSiteI18n',
+        from: resolve('../app/composables/useSiteI18n'),
       })
     })
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "simple-content-site",
   "description": "Nuxt layer for simple website with basic functions.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "main": "./nuxt.config.ts",
   "repository": {

package/server/routes/raw/[...slug].md.get.ts

@@ -29,7 +29,7 @@ export default eventHandler(async (event) => {
     }
   }
 
-  const page = await queryCollection(event, collectionName as keyof Collections).path(path).first()
+  const page = await queryCollection(event, collectionName as keyof Omit<Collections, 'header' | 'footer'>).path(path).first()
   if (!page) {
     throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
   }