nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.65k stars 465 forks source link

Content with github source driver #2968

Closed zakarialounes closed 3 weeks ago

zakarialounes commented 3 weeks ago

Environment

Reproduction

Describe the bug

Using GitHub as a source driver do not allow me to take advantage of the i18n as provided for the default content source.

No problem for the default content source with the same files and structure.

Content from GitHub source is identified as English, regardless of the parent directory (en, es, fr).

nuxt.config.ts

export default defineNuxtConfig({
  // ...

  i18n: {
    locales,
    lazy: true,
    strategy: 'prefix_except_default',
    detectBrowserLanguage: false,
    langDir: 'lang/',
    defaultLocale,
    vueI18n: './i18n.config.ts'
  },

  content: {
    defaultLocale,
    locales: localesCode,
    sources: {
      registry: {
        prefix: '/protocols',
        driver: 'github',
        repo: "ezstaking/website-registry",
        branch: "main",
        dir: "build/_content"
      },
    }
  }

  // ...
})

i18n.config.ts

import { defaultLocale, localesCode } from './locales.config'

export default {
  legacy: false,
  availableLocales: localesCode,
  fallbackLocale: defaultLocale,
  missingWarn: true,
  fallbackWarn: true,
  // silentFallbackWarn: true,
};

GitHub content directory

➜  website-registry git:(main) ls -R build/_content
en es fr

build/_content/en:
akash

build/_content/en/akash:
description.md

build/_content/es:
akash

build/_content/es/akash:
description.md

build/_content/fr:
akash

build/_content/fr/akash:
description.md

Default content directory

➜  website git:(main) ✗ ls -R content
en es fr

content/en:
akash

content/en/akash:
description.md

content/es:
akash

content/es/akash:
description.md

content/fr:
akash

content/fr/akash:
description.md

Retrieved articles for GitHub content directory with locale = 'en' ❌ NOK

/protocols/en/akash/description // { _locale = 'en' }
/protocols/es/akash/description // { _locale = 'en' }
/protocols/fr/akash/description // { _locale = 'en' }

Retrieved articles for default content directory with locale = 'en' ✅ OK

/protocols/akash/description // { _locale = 'en' }

Additional context

No response

Logs

No response

zakarialounes commented 3 weeks ago

By adding as many github content sources as defined locales, I was able to get the github content driver working with i18n.

// nuxt.config.ts

import { defaultLocale, locales, localesCode } from './locales.config'
import { sources } from './github-content-sources.config'

export default defineNuxtConfig({
  // ...

  i18n: {
    locales,
    lazy: true,
    strategy: 'prefix_except_default',
    detectBrowserLanguage: false,
    langDir: 'lang/',
    defaultLocale,
    vueI18n: './i18n.config.ts'
  },

  content: {
    defaultLocale,
    locales: localesCode,
    sources
  }

  // ...
})
// github-content-sources.config.ts

import { localesCode } from './locales.config'

const is18nForGithubDriverSupported = false

const contentSourceRegistry = {
  prefix: '/protocols',
  driver: 'github',
  repo: 'ezstaking/website-registry',
  branch: 'main',
  dir: 'build/_content'
}

export const sources = is18nForGithubDriverSupported
  ? { registry: contentSourceRegistry }
  : localesCode.reduce(
    (accumulator, locale) => {
      return {
        ...accumulator, [`registry_${locale}`]: {
          ...contentSourceRegistry,
          prefix: '/' + locale + contentSourceRegistry.prefix,
          dir: contentSourceRegistry.dir + '/' + locale
        }
      }
    },
    {}
  )
// locales.config.ts

export const locales = [
  {
    code: "en",
    iso: "en-US",
    file: "en-US.json",
    name: "English",
    dir: "ltr",
  },
  {
    code: 'es',
    iso: 'es-ES',
    file: 'es-ES.json',
    name: 'Español',
    dir: "ltr",
  },
  {
    code: 'fr',
    iso: "fr-FR",
    file: 'fr-FR.json',
    name: 'Français',
    dir: "ltr",
  },
  // {
  //   code: 'ru',
  //   iso: "ru-RU",
  //   file: 'next/ru-RU.json',
  //   name: 'Русский',
  //   dir: "ltr",
  // },
]

export const localesCode = locales.map(locale => locale.code)

export const defaultLocale = "en"