SLB-269: finish multilingual features

apps/cms/composer.json

@@ -30,7 +30,7 @@
     "php": "^8.2 <8.3",
     "amazeeio/drupal_integrations": "^0.3.7",
     "amazeelabs/default-content": "^1.2.11",
-    "amazeelabs/graphql_directives": "^2.1",
+    "amazeelabs/graphql_directives": "^2.4",
     "amazeelabs/proxy-drupal-core": "^1.1.12",
     "amazeelabs/proxy-graphql": "^1.1.7",
     "amazeelabs/proxy-gutenberg": "^1.3",

apps/cms/prep-database.sh

@@ -1,13 +1,13 @@
-if [ ! -z $LAGOON ]
-then
+if [ ! -z $LAGOON ]; then
   # Do not touch database on Lagoon
   exit 0
 fi
 
-if ! test -f web/sites/default/files/.sqlite
-then
+if ! test -f web/sites/default/files/.sqlite; then
   pnpm drupal-install
   pnpm export-webforms
-else
-  pnpm drush cr
 fi
+
+# In any case, re-import translation string.
+pnpm import-translations
+pnpm drush cr

apps/cms/scripts/translations-import.php

@@ -1,5 +1,15 @@
 <?php
-/** @var \Drupal\silverback_translations\TranslationsProcessorInterface $processor */
+
+/**
+ * @file
+ * Import translation strings from the ui package.
+ */
+
+/**
+ * The translations processor for importing.
+ *
+ * @var \Drupal\silverback_translations\TranslationsProcessorInterface $processor.
+ */
 $processor = \Drupal::service('silverback_translations.json_processor');
-$sources = file_get_contents('../generated/translations.json');
+$sources = file_get_contents('../node_modules/@custom/ui/build/translatables.json');
 $processor->createSources($sources, 'gatsby');

apps/decap/data/page/decap-example.yml

@@ -1,10 +1,10 @@
 en:
   id: BTPzQnq79fWNOF1dFmESP
-  path: /decap-example
+  path: /en/decap-example
   title: Decap example
   teaserImage: /apps/decap/media/landscape.jpg
   hero:
-    headline: Decap
+    headline: Decap Example
     lead: This page was created with Decap CMS
     image: /apps/decap/media/landscape.jpg
   content:
@@ -14,4 +14,14 @@ en:
       caption: Here is an ***image***, for good measure.
       alt: Some architecture.
       image: /apps/decap/media/portrait.jpg
-de: {}
+de:
+  path: /de/decap-example
+  title: Decap Beispiel
+  teaserImage: /apps/decap/media/landscape.jpg
+  hero:
+    headline: Decap Beispiel
+    lead: Diese Seite wurde mit Decap CMS erstellt
+    image: /apps/decap/media/landscape.jpg
+  content:
+    - type: text
+      text: Dieser Inhalt wird in einer **JSON** Datei gespeichert.

apps/decap/data/translatables.yml

@@ -0,0 +1,13 @@
+de:
+  qA8qQH: '{year} {company_name}. Alle Rechte vorbehalten.'
+  stJYEY: '{current} von {total}'
+  JJNc3c: Zurück
+  e7yFQY: Menü öffnen
+  FPGwAt: Random Company
+  SRsuWF: Menü schliessen
+  9+Ddtu: Weiter
+  fe0rMF: Suchbegriff
+  jHJmjf: Keine Ergebnisse
+  xmcVZ0: Suchen
+en:
+  FPGwAt: Random Company

apps/decap/src/collections/page.ts

@@ -193,22 +193,30 @@ export const pageSchema = z.object({
 
 export const getPages: (dir: string) => SilverbackSource<DecapPageSource> =
   (dir: string) => () => {
-    const pages: Array<[string, DecapPageSource]> = [];
+    const pages: Array<[string, DecapPageSource & { _decap_id: string }]> = [];
     fs.readdirSync(dir)
       .filter((file) => file.endsWith('.yml'))
       .forEach((file) => {
         const content = yaml.parse(fs.readFileSync(`${dir}/${file}`, 'utf-8'));
+        const id = Object.values(content)
+          .map((page: any) => page.id)
+          .filter((id) => !!id)
+          .pop();
         Object.keys(content).forEach((lang) => {
           if (Object.keys(content[lang]).length < 2) {
             return;
           }
           const input = {
             ...content[lang],
+            id,
             locale: lang,
           };
           const page = pageSchema.safeParse(input);
           if (page.success) {
-            pages.push([page.data.id, page.data]);
+            pages.push([
+              `${page.data.id}:${lang}`,
+              { ...page.data, _decap_id: id },
+            ]);
           } else {
             console.warn(`Error parsing ${file} (${lang}):`);
             console.warn(page.error.message);
@@ -218,3 +226,5 @@ export const getPages: (dir: string) => SilverbackSource<DecapPageSource> =
       });
     return pages;
   };
+
+export function getPageTranslations() {}

apps/decap/src/collections/translatables.test.ts

@@ -0,0 +1,13 @@
+import { dirname, resolve } from 'node:path';
+import { afterEach } from 'node:test';
+
+import { expect, test, vi } from 'vitest';
+
+import { getTranslatables } from './translatables';
+
+afterEach(vi.resetAllMocks);
+
+test('getTranslatables', () => {
+  const dir = resolve(dirname(new URL(import.meta.url).pathname), '../../data');
+  expect(getTranslatables(dir)).not.toThrow();
+});

apps/decap/src/collections/translatables.ts

@@ -0,0 +1,77 @@
+import { SilverbackSource } from '@amazeelabs/gatsby-source-silverback';
+import { Locale } from '@custom/schema';
+import { DecapTranslatableStringSource } from '@custom/schema/source';
+import { CmsCollection } from 'decap-cms-core';
+import fs from 'fs';
+import yaml from 'yaml';
+import { z } from 'zod';
+
+import rawTranslatables from '../../node_modules/@custom/ui/build/translatables.json';
+
+// Validate that translatables.json contains what we expect.
+const translationSources = z
+  .record(
+    z.object({
+      defaultMessage: z.string(),
+    }),
+  )
+  .transform((data) =>
+    Object.fromEntries(
+      Object.keys(data).map((key) => [key, data[key].defaultMessage]),
+    ),
+  )
+  .parse(rawTranslatables);
+
+export const Translatables: CmsCollection = {
+  label: 'Translations',
+  name: 'translations',
+  i18n: true,
+  files: [
+    {
+      label: 'Translatables',
+      name: 'Translatables',
+      description: 'Translate user interface texts',
+      file: 'apps/decap/data/translatables.yml',
+      i18n: true,
+      fields: Object.keys(translationSources).map((key) => ({
+        name: key,
+        label: translationSources[key],
+        widget: 'string',
+        i18n: true,
+        required: false,
+      })),
+    },
+  ],
+};
+
+export function getTranslatables(
+  dir: string,
+): SilverbackSource<DecapTranslatableStringSource> {
+  return function () {
+    const rawTranslations = yaml.parse(
+      fs.readFileSync(`${dir}/translatables.yml`, 'utf-8'),
+    );
+    return z
+      .record(z.record(z.string()))
+      .transform((data) => {
+        const translations: Array<[string, DecapTranslatableStringSource]> = [];
+        Object.keys(data).forEach((langcode) => {
+          Object.keys(data[langcode]).forEach((key) => {
+            Object.keys(data).forEach((locale) => {
+              translations.push([
+                `${key}:${locale}`,
+                {
+                  __typename: 'DecapTranslatableString',
+                  source: translationSources[key],
+                  language: locale as Locale,
+                  translation: data[locale][key],
+                },
+              ]);
+            });
+          });
+        });
+        return translations;
+      })
+      .parse(rawTranslations);
+  };
+}

apps/decap/src/helpers/frame.tsx

@@ -28,6 +28,7 @@ export function PreviewFrame({ children }: PropsWithChildren) {
         items: menuItems(4),
       },
     ],
+    stringTranslations: [],
   }));
   return <Frame>{children}</Frame>;
 }

apps/decap/src/index.ts

@@ -1 +1,2 @@
 export { getPages } from './collections/page.js';
+export { getTranslatables } from './collections/translatables.js';

apps/decap/src/main.tsx

@@ -1,4 +1,5 @@
 import {
+  Locale,
   PreviewDecapPageQuery,
   registerExecutor,
   ViewPageQuery,
@@ -8,9 +9,13 @@ import CMS from 'decap-cms-app';
 
 import css from '../node_modules/@custom/ui/build/styles.css?raw';
 import { PageCollection, pageSchema } from './collections/page';
+import { Translatables } from './collections/translatables';
 import { createPreview } from './helpers/preview';
 import { UuidWidget } from './helpers/uuid';
 
+const locales = Object.values(Locale);
+const default_locale = locales.includes('en') ? 'en' : locales[0];
+
 CMS.registerPreviewStyle(css, { raw: true });
 CMS.registerWidget('uuid', UuidWidget);
 
@@ -36,8 +41,8 @@ CMS.init({
           },
     i18n: {
       structure: 'single_file',
-      locales: ['en', 'de'],
-      default_locale: 'en',
+      locales,
+      default_locale,
     },
     collections: [
       {
@@ -59,6 +64,7 @@ CMS.init({
           },
         ],
       },
+      Translatables,
       PageCollection,
     ],
   },

apps/website/gatsby-config.mjs

@@ -6,11 +6,11 @@
 // TS file name should be different from gastby-config.ts, otherwise Gatsby will
 // pick it up instead of the JS file.
 
-import { getPages } from '@custom/decap';
+import { getPages, getTranslatables } from '@custom/decap';
 import autoload from '@custom/schema/gatsby-autoload';
 import { resolve } from 'path';
 
-const dir = resolve('node_modules/@custom/decap/data/page');
+const dir = resolve('node_modules/@custom/decap/data');
 
 process.env.GATSBY_DRUPAL_URL =
   process.env.DRUPAL_EXTERNAL_URL || 'http://127.0.0.1:8888';
@@ -71,7 +71,10 @@ export default {
         type_prefix: '',
         schema_configuration: './graphqlrc.yml',
         directives: autoload,
-        sources: { getPages: getPages(dir) },
+        sources: {
+          getPages: getPages(`${dir}/page`),
+          getTranslatables: getTranslatables(dir),
+        },
       },
     },
     {

apps/website/gatsby-node.mjs

@@ -94,6 +94,14 @@ export const createPages = async ({ actions }) => {
       });
     });
 
+  // Create the content hub page in each language.
+  Object.values(Locale).forEach((locale) => {
+    actions.createPage({
+      path: `/${locale}/content-hub`,
+      component: resolve(`./src/templates/content-hub.tsx`),
+    });
+  });
+
   // Broken Gatsby links will attempt to load page-data.json files, which don't exist
   // and also should not be piped into the strangler function. Thats why they
   // are caught right here.