Merge pull request #96 from wethegit/feature/index-yaml

feature: index.yml global files
wethegit · Jan 11, 2024 · c1589bf · c1589bf
2 parents 06179f9 + 7cba38b
commit c1589bf
Show file tree

Hide file tree

Showing 17 changed files with 139 additions and 88 deletions.
diff --git a/cli/package.json b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/corgi",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Command line interface for use with the corgi framework.",
   "main": "bin/index.js",
   "bin": {

diff --git a/cli/templates/project/.vscode/settings.json b/cli/templates/project/.vscode/settings.json
@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "eslint.format.enable": true,
   "javascript.updateImportsOnFileMove.enabled": "always",

diff --git a/cli/templates/project/package.json b/cli/templates/project/package.json
@@ -1,6 +1,5 @@
 {
   "name": "corgi-project",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "build": "npm run mash-build && next build",

diff --git a/cli/templates/project/src/components/app/page/components/body-scripts/body-scripts.jsx b/cli/templates/project/src/components/app/page/components/body-scripts/body-scripts.jsx
@@ -1,14 +1,11 @@
 // import Script from "next/script"
 
-import { useLocale } from "@local/hooks"
-
 /**
  * Add scripts to the bottom of the <body> here.
  * See the next/script docs for details and options:
  * https://nextjs.org/docs/basic-features/script
  */
 export function BodyScripts() {
-  const { globals, page } = useLocale()
   return (
     <>
       {/* add scripts like so: */}

diff --git a/cli/templates/project/src/components/app/page/components/page-head/page-head.jsx b/cli/templates/project/src/components/app/page/components/page-head/page-head.jsx
@@ -2,7 +2,7 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 
 import { useLocale } from "@local/hooks"
-import localeConfig, { defaultLocale } from "@local/config-locales"
+import { localeMap, langValue, defaultLocale } from "@local/config-locales"
 
 const fallbackTitle = "DON'T FORGET TO ADD A TITLE!"
 const fallbackDesc = "DON'T FORGET TO ADD A DESCRIPTION!"
@@ -62,14 +62,12 @@ export function PageHead() {
 
         // Now we check the localeMap in config for the
         // alternative locale
-        const mappedAltLocale = localeConfig.localeMap
-          ? localeConfig.localeMap.get(altLocale)
-          : {}
+        const mappedAltLocale = localeMap ? localeMap[altLocale] : {}
 
         // If the mapped object and the regionValue exists
         // we replace the lang with that rather than the default
-        if (localeConfig.langValue && mappedAltLocale) {
-          lang = mappedAltLocale[localeConfig.langValue] || altLocale
+        if (langValue && mappedAltLocale) {
+          lang = mappedAltLocale[langValue] || altLocale
         }
 
         // We grab the pathname

diff --git a/cli/templates/project/src/components/app/page/page.jsx b/cli/templates/project/src/components/app/page/page.jsx
@@ -7,7 +7,7 @@ import localesConfig from "@local/config-locales"
 import { BodyScripts, Footer, Nav, PageHead } from "./components"
 import styles from "./page.module.scss"
 
-export function Page({ children, className, version }) {
+export function Page({ children, className }) {
   const { mediumDown } = useBreakpoints()
   const { locale, localeMap } = useLocale()
 
@@ -19,10 +19,6 @@ export function Page({ children, className, version }) {
     if (docLang !== lang) document.documentElement.lang = lang
   }, [locale, localeMap])
 
-  useEffect(() => {
-    console.log("VERSION:", version)
-  }, [version])
-
   return (
     <>
       <PageHead />

diff --git a/cli/templates/project/src/components/layouts/home/components/home-body/home-body.jsx b/cli/templates/project/src/components/layouts/home/components/home-body/home-body.jsx
@@ -1,23 +1,32 @@
 import { useLocale } from "@local/hooks"
 
-export function HomeBody({ version }) {
-  const { locale, localeMap } = useLocale()
+export function HomeBody() {
+  const {
+    locale,
+    localeMap,
+    globals: { version, coolSetting },
+    page: { pageCoolSetting },
+  } = useLocale()
+
+  console.log(localeMap)
 
   return (
     <main className="content-spacing">
       <h2>
         locale: <code>{locale}</code>
       </h2>
       <ul>
-        {Object.keys(localeMap).map((key) => (
+        {Object.entries(localeMap).map(([key, value]) => (
           <li key={key}>
-            <b>{key}:</b> <span>{localeMap[key]}</span>
+            <b>{key}:</b> <span>{JSON.stringify(value, null, 2)}</span>
           </li>
         ))}
       </ul>
       <h2>
         Version: <code>{version}</code>
       </h2>
+      <p>{coolSetting}</p>
+      <p>{pageCoolSetting}</p>
     </main>
   )
 }
diff --git a/cli/templates/project/src/config-locales.js b/cli/templates/project/src/config-locales.js
@@ -2,39 +2,23 @@
  * Add your required locales here, along with any mapping to specifically-formatted
  * strings. For example, if your locale string differs from the ISO standard
  * abbreviation, you can add that here.
- *   
+ *
  * The mapped object value will be available from the useLocale hook as `localeMap`.
  */
-const localeMap = new Map([
-  [
-    "en",
-    {
-      language: "en-US",
-    },
-  ],
-  [
-    "es",
-    {
-      language: "es-ES",
-    },
-  ],
-  [
-    "fr",
-    {
-      language: "fr-FR",
-    },
-  ],
-]);
-
-
-/**
- * Make just the locale slugs available (i.e. ["en", "fr", etc.]):
- */
-const locales = Array.from(localeMap.keys())
+const localeMap = {
+  en: {
+    language: "en-US",
+  },
+  es: {
+    language: "es-ES",
+  },
+  fr: {
+    language: "fr-FR",
+  },
+}
 
 module.exports = {
   defaultLocale: "en",
-  locales,
   localeMap,
 
   /** Both <html lang=""> and <Link hreflang ... /> tags are auto generated for every

diff --git a/cli/templates/project/src/context/site-state-context.js b/cli/templates/project/src/context/site-state-context.js
@@ -16,7 +16,7 @@ export function SiteStateProvider({ children, version }) {
   }, [])
 
   useEffect(() => {
-    console.log(`v${version}`)
+    console.log(`Version: ${version}`)
   }, [])
 
   return (

diff --git a/cli/templates/project/src/locales/globals/fr.yml b/cli/templates/project/src/locales/globals/fr.yml
@@ -1,3 +1,5 @@
+coolSetting: "FR - This is a cool setting"
+
 meta:
   title: Global fallback title
   description: Global fallback description.

diff --git a/cli/templates/project/src/locales/globals/index.yml b/cli/templates/project/src/locales/globals/index.yml
@@ -0,0 +1,2 @@
+version: 0.0.0
+coolSetting: "This is a cool setting"
diff --git a/cli/templates/project/src/locales/home/fr.yml b/cli/templates/project/src/locales/home/fr.yml
@@ -1,3 +1,5 @@
+pageCoolSetting: "FR - Page cool setting"
+
 # selectedNav should match the appropriate nav item's ID:
 selectedNav: home
 

diff --git a/cli/templates/project/src/locales/home/index.yml b/cli/templates/project/src/locales/home/index.yml
@@ -0,0 +1 @@
+pageCoolSetting: "Page cool setting"
diff --git a/cli/templates/project/src/utils/classnames.js b/cli/templates/project/src/utils/classnames.js
@@ -7,4 +7,5 @@ export function classnames(classes) {
     .flat()
     .filter((c) => typeof c === "string")
     .join(" ")
+    .trim()
 }
diff --git a/cli/templates/project/src/utils/page-setup.js b/cli/templates/project/src/utils/page-setup.js
@@ -1,16 +1,14 @@
 import localeConfig from "@local/config-locales"
 
-import Package from '../../package.json';
-
-const { defaultLocale } = localeConfig
+const { defaultLocale, localeMap } = localeConfig
 
 async function getAvailableLocales(pageName) {
   if (!pageName) return []
 
   const glob = require("glob")
 
-  const yamls = Array.from(localeConfig.localeMap.entries())
-    .map(([locale]) => glob.sync(`./src/locales/${pageName}/${locale}.yml`))
+  const yamls = Object.keys(localeMap)
+    .map((locale) => glob.sync(`./src/locales/${pageName}/${locale}.yml`))
     .flat()
 
   return yamls.map((path) => path.split("/").pop().split(".").shift())
@@ -45,11 +43,12 @@ export async function setupProps(ctx, pageName) {
     ctx.locale || ctx?.params?.locale || ctx.defaultLocale || defaultLocale || "en-us"
 
   let pageLocales = {}
+  let pageIndexLocales = {}
+  let globalIndexLocale = {}
   let globalLocales = {}
-  let localeMap = {}
   let alternativeLocales = []
 
-  if (pageName)
+  if (pageName) {
     try {
       pageLocales = await import(
         /* webpackMode: "eager" */ `../locales/${pageName}/${locale}.yml`
@@ -58,6 +57,15 @@ export async function setupProps(ctx, pageName) {
       console.error(` ${locale} locales file for ${pageName} not found.`)
     }
 
+    try {
+      pageIndexLocales = await import(
+        /* webpackMode: "eager" */ `../locales/${pageName}/index.yml`
+      ).then((m) => m.default)
+    } catch (err) {
+      // no problem if there isn't an index file
+    }
+  }
+
   try {
     globalLocales = await import(
       /* webpackMode: "eager" */ `../locales/globals/${locale}.yml`
@@ -66,7 +74,13 @@ export async function setupProps(ctx, pageName) {
     console.error(`Global locales file for ${locale} not found.`)
   }
 
-  if (localeConfig.localeMap) localeMap = localeConfig.localeMap.get(locale) || {}
+  try {
+    globalIndexLocale = await import(
+      /* webpackMode: "eager" */ `../locales/globals/index.yml`
+    ).then((m) => m.default)
+  } catch (_) {
+    // no problem if there isn't an index file
+  }
 
   try {
     const availableLocales = await getAvailableLocales(pageName)
@@ -77,13 +91,21 @@ export async function setupProps(ctx, pageName) {
 
   return {
     props: {
-      version: Package.version || 0,
+      version: globalIndexLocale.version || 0,
       localeData: {
         pageName: pageName || null,
         locale,
         localeMap,
-        page: pageLocales || {},
-        globals: globalLocales || {},
+        page: {
+          ...(pageIndexLocales || {}),
+          // overwrite page index
+          ...(pageLocales || {}),
+        },
+        globals: {
+          ...(globalIndexLocale || {}),
+          // overwrite global index
+          ...(globalLocales || {}),
+        },
         alternativeLocales,
       },
     },

diff --git a/docs/docs/localization/configuration.mdx b/docs/docs/localization/configuration.mdx
@@ -26,35 +26,26 @@ module.exports = {
 
 ## localeMap
 
-The localeMap is where you'll enter all of the supported locales for your project. This map contains a map of locale strings to various bits of relevant data you might need. For example, if your locale is `"en"`, but you want your HTML's `lang` attribute to be `"en-US"`, you could put that data here. `language` is the only required field here. All of this mapped data is conveniently available via the [`useLocale`](./use-locale-hook) hook.
+The localeMap is where you'll enter all of the supported locales for your project. This object contains a map of locale strings to various bits of relevant data you might need. For example, if your locale is `"en"`, but you want your HTML's `lang` attribute to be `"en-US"`, you could put that data here. `language` is the only required field here. All of this mapped data is conveniently available via the [`useLocale`](./use-locale-hook) hook.
 
 All pages of the project in these locales (with the exception of the [defaultLocale](#defaultLocale), see above) will live at `/<locale string>/<page name>`.
 
 ```js src/config-locales.js
 module.exports = {
-  localeMap: new Map([
-    [
-      "en",
-      {
-        language: "en-US",
-        someAPIEndpointLocale: "en_US",
-      },
-    ],
-    [
-      "es",
-      {
-        language: "es-ES",
-        someAPIEndpointLocale: "es_ES",
-      },
-    ],
-    [
-      "fr",
-      {
-        language: "fr-FR",
-        someAPIEndpointLocale: "fr_FR",
-      },
-    ],
-  ]),
+  localeMap: {
+    en: {
+      language: "en-US",
+      someAPIEndpointLocale: "en_US",
+    },
+    es: {
+      language: "es-ES",
+      someAPIEndpointLocale: "es_ES",
+    },
+    fr: {
+      language: "fr-FR",
+      someAPIEndpointLocale: "fr_FR",
+    },
+  },
 
   // other properties omitted for brevity
 };