simple-content-site 2.2.2 → 2.3.0

package/app/composables/useSiteI18n.ts

@@ -4,10 +4,14 @@ import en from '../../i18n/locales/en.json'
 export const useSiteI18n = () => {
   const config = useRuntimeConfig().public
   const isEnabled = ref(!!config.i18n && config.i18n.locales?.length > 0)
+  // todo: reading the strategy like this might cause issues in the future.
+  // @ts-expect-error Due to the above comment
+  const strategy = ref(config.i18n?.strategy || 'prefix_except_default')
 
   if (!isEnabled.value) {
     return {
       isEnabled,
+      strategy,
       locale: ref('en'),
       defaultLocale: ref('en'),
       locales: [],
@@ -25,6 +29,7 @@ export const useSiteI18n = () => {
 
   return {
     isEnabled,
+    strategy,
     locale,
     defaultLocale: ref(config.i18n.defaultLocale || 'en'),
     locales: filteredLocales,

package/app/composables/useSitePage.ts

@@ -0,0 +1,59 @@
+import type { ContentNavigationItem, Collections, PagesCollectionItem } from '@nuxt/content'
+import { findPageHeadline } from '@nuxt/content/utils'
+import { kebabCase } from 'scule'
+
+type SitePageOptions = {
+  immediate?: boolean
+}
+export const useSitePage = async (opts?: SitePageOptions) => {
+  const route = useRoute()
+  const { locale, isEnabled, defaultLocale, strategy } = useSiteI18n()
+  const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+  const collectionName = computed(() => {
+    if (!isEnabled.value || !defaultLocale.value) {
+      return 'pages'
+    }
+    return `pages_${locale.value}`
+  })
+
+  // const page = ref<PagesCollectionItem | undefined>()
+
+  const findByPath = async (path: string) => {
+    if (strategy.value === 'prefix_except_default' && locale.value === defaultLocale.value) {
+      const prefix = `/${locale.value}`
+      if (path !== prefix && !path.startsWith(`${prefix}/`)) {
+        // we need to inject a virtual path to find the page in the collection
+        path = `${prefix}${path}`
+      }
+    }
+    return await queryCollection(collectionName.value as keyof Collections).path(path).first() as PagesCollectionItem
+  }
+
+  const { data: page, refresh } = await useAsyncData(() => kebabCase(route.path), async () => {
+    const match = await findByPath(route.path)
+    return match ? match : undefined
+  }, {
+    immediate: opts?.immediate,
+  })
+  // watch(() => route.path, async (path) => {
+  //   const match = await findByPath(path)
+  //   page.value = match ? match : undefined
+  // })
+
+  const title = computed(() => page.value?.seo?.title || page.value?.title || undefined)
+  const description = computed(() => page.value?.seo?.description || page.value?.description || undefined)
+  const headline = computed(() => findPageHeadline(navigation?.value, page.value?.path))
+  const exists = computed(() => page.value !== undefined)
+
+  return {
+    page,
+    title,
+    description,
+    headline,
+    exists,
+    collectionName,
+    findByPath,
+    refresh,
+  }
+}

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

@@ -1,30 +1,23 @@
 <script setup lang="ts">
-import { kebabCase } from 'scule'
-import type { ContentNavigationItem, Collections, PagesCollectionItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageHeadline } from '@nuxt/content/utils'
 import { addPrerenderPath } from '../../utils/prerender'
+import { useSitePage } from '#imports'
 
 definePageMeta({
   layout: 'page',
 })
 
 const route = useRoute()
-const { locale, isEnabled, defaultLocale } = useSiteI18n()
+const { page, collectionName } = await useSitePage()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const collectionName = computed(() => {
-  if (!isEnabled.value || !defaultLocale.value) {
-    return 'pages'
-  }
-  return `pages_${locale.value}`
-})
-
-const [{ data: page }] = await Promise.all([
-  useAsyncData(kebabCase(route.path), () => queryCollection(collectionName.value as keyof Collections).path(route.path).first() as Promise<PagesCollectionItem>),
-])
-
 if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: import.meta.dev ? `Page ${route.path} not found in ${collectionName.value}` : 'Pages not found', fatal: true })
+  throw createError({
+    statusCode: 404,
+    statusMessage: import.meta.dev ? `Page ${route.path} not found in ${collectionName.value}` : 'Pages not found',
+    fatal: true,
+  })
 }
 
 // Add the page path to the prerender list
@@ -45,7 +38,8 @@ watch(() => navigation?.value, () => {
   headline.value = findPageHeadline(navigation?.value, page.value?.path) || headline.value
 })
 
-defineOgImageComponent('Docs', {
+// todo: make the landing OG component customizable.
+defineOgImageComponent('Landing', {
   headline: headline.value,
 })
 </script>

package/content.config.ts

@@ -90,14 +90,6 @@ const buildI18nCollections = () => {
   for (const locale of locales) {
     const code = (typeof locale === 'string' ? locale : locale.code).replace('-', '_')
 
-    collections[`landing_${code}`] = defineCollection({
-      type: 'page',
-      source: {
-        cwd,
-        include: `${code}/index.md`,
-      },
-    })
-
     collections[`pages_${code}`] = defineCollection({
       type: 'page',
       source: {
@@ -105,7 +97,6 @@ const buildI18nCollections = () => {
         include: `${code}/**/*`,
         prefix: `/${code}`,
         exclude: [
-          `${code}/index.md`,
           `${code}/header.yml`,
           `${code}/footer.yml`,
         ],
@@ -137,20 +128,12 @@ const buildI18nCollections = () => {
 
 const buildDefaultCollections = () => {
   collections = {
-    landing: defineCollection({
-      type: 'page',
-      source: {
-        cwd,
-        include: 'index.md',
-      },
-    }),
     pages: defineCollection({
       type: 'page',
       source: {
         cwd,
         include: '**',
         exclude: [
-          'index.md',
           'header.yml',
           'footer.yml',
         ],
@@ -177,10 +160,13 @@ const buildDefaultCollections = () => {
 }
 
 if (locales && Array.isArray(locales)) {
-  if (locales.length === 0) {
+  if (locales.length > 0) {
+    buildI18nCollections()
+  }
+  else {
     console.warn('Site: There are 0 locales, building with defaults instead.')
+    buildDefaultCollections()
   }
-  buildI18nCollections()
 }
 else {
   buildDefaultCollections()

package/modules/config.ts

@@ -1,4 +1,4 @@
-import { createResolver, defineNuxtModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit'
 import { defu } from 'defu'
 import { existsSync } from 'node:fs'
 import { join } from 'node:path'
@@ -79,16 +79,31 @@ export default defineNuxtModule({
         return hasLocaleFile && hasContentFolder
       })
 
-      // Override strategy to prefix
+      //
       nuxt.options.i18n = defu(nuxt.options.i18n, {
         strategy: 'prefix_except_default',
       }) as typeof nuxt.options.i18n
 
+      // todo: exposing the strategy like this might cause issues in the future.
+      //  So it will be better to expose the i18n redirect plugin instead from a module.
+      nuxt.options.runtimeConfig.public.i18n = defu(nuxt.options.runtimeConfig.public.i18n, {
+        strategy: nuxt.options.i18n.strategy,
+      })
+
       // Expose filtered locales
       nuxt.options.runtimeConfig.public.Site = {
         filteredLocales,
       }
 
+      // ensure we redirect from index if the strategy requires.
+      if (nuxt.options.i18n.strategy && !['prefix_except_default', 'no_prefix'].includes(nuxt.options.i18n.strategy)) {
+        console.log(`[I18n] Adding redirect plugin for root since strategy is: ${nuxt.options.i18n.strategy}`)
+        addPlugin({
+          src: resolve('../runtime/plugins/i18n-redirect'),
+          mode: 'client',
+        })
+      }
+
       nuxt.hook('i18n:registerModule', (register) => {
         const langDir = resolve('../i18n/locales')
 

package/modules/routing.ts

@@ -1,14 +1,13 @@
-import { defineNuxtModule, extendPages, createResolver } from '@nuxt/kit'
+import { defineNuxtModule, createResolver } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
+    // todo: rename this module to fit it's purpose
     name: 'routing',
   },
   async setup(_options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    const isI18nEnabled = !!(nuxt.options.i18n && nuxt.options.i18n.locales && nuxt.options.i18n.locales.length > 0)
-
     // Ensure useSiteI18n is available in the app
     nuxt.hook('imports:extend', (imports) => {
       const loadComposableIfNotFound = (composableName: string) => {
@@ -23,34 +22,7 @@ export default defineNuxtModule({
       loadComposableIfNotFound('useSiteI18n')
       loadComposableIfNotFound('useSiteHeader')
       loadComposableIfNotFound('useSiteFooter')
-    })
-
-    // might want to know about this stuff.
-    if ((import.meta.dev || nuxt.options.dev) && !isI18nEnabled) {
-      console.warn('[Site] I18N is not enabled - using default landing page without language prefix')
-    }
-
-    extendPages((pages) => {
-      const landingTemplate = resolve('../app/templates/landing.vue')
-
-      if (pages.some(p => p.name === (isI18nEnabled ? 'lang-index' : 'index'))) {
-        if (import.meta.dev) console.warn('[Site] Duplicate landing page detected - skipping')
-        return
-      }
-      if (isI18nEnabled) {
-        pages.push({
-          name: 'lang-index',
-          path: '/:lang([a-zA-Z]{2})?',
-          file: landingTemplate,
-        })
-      }
-      else {
-        pages.push({
-          name: 'index',
-          path: '/',
-          file: landingTemplate,
-        })
-      }
+      loadComposableIfNotFound('useSitePage')
     })
   },
 })

package/package.json

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

package/app/plugins/i18n.ts

@@ -1,16 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const nuxtApp = useNuxtApp()
-
-  const i18nConfig = nuxtApp.$config.public.i18n
-  if (!i18nConfig || i18nConfig.locales.length === 0) {
-    return
-  }
-
-  addRouteMiddleware((to) => {
-    if (to.path === '/') {
-      const cookieLocale = useCookie('i18n_redirected').value || i18nConfig.defaultLocale || 'en'
-
-      return navigateTo(`/${cookieLocale}`)
-    }
-  })
-})

package/app/templates/landing.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { Collections } from '@nuxt/content'
-
-const route = useRoute()
-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 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 })
-}
-
-const title = page.value.seo?.title || page.value.title
-const description = page.value.seo?.description || page.value.description
-
-useSeoMeta({
-  title,
-  description,
-  ogTitle: title,
-  ogDescription: description,
-})
-
-if (page.value?.seo?.ogImage) {
-  useSeoMeta({
-    ogImage: page.value.seo.ogImage,
-    twitterImage: page.value.seo.ogImage,
-  })
-}
-else {
-  defineOgImageComponent('Landing', {
-    title,
-    description,
-  })
-}
-</script>
-
-<template>
-  <ContentRenderer
-    v-if="page"
-    :value="page"
-  />
-</template>