feat: integrate gatsby-plugin-i18n-l10n support

package.json

@@ -19,7 +19,8 @@
     "packages/gatsby-jaen-lens",
     "packages/gatsby-source-jaen",
     "packages/jaen-fields-mdx",
-    "my-gatsby-site"
+    "my-gatsby-site",
+    "limosen.at"
   ],
   "dependencies": {
     "eslint-config-prettier": "^8.6.0",

packages/gatsby-jaen-mailpress/src/index.ts

@@ -1,13 +1,28 @@
 import {GQtyError} from 'gqty'
+import type {GraphQLError} from 'graphql'
+
 import {EnvelopeInput, resolve} from './client'
 
+export interface SendTemplateMailOptions {
+  envelope?: Partial<EnvelopeInput>
+  values?: Record<string, unknown>
+}
+
+export type SendTemplateMailResult =
+  | {
+      ok: true
+      message: string
+    }
+  | {
+      ok: false
+      message: string
+      errors?: readonly GraphQLError[]
+    }
+
 export const sendTemplateMail = async (
   id: string,
-  options?: {
-    envelope?: Partial<EnvelopeInput>
-    values?: Record<string, any>
-  }
-) => {
+  options?: SendTemplateMailOptions
+): Promise<SendTemplateMailResult> => {
   try {
     await resolve(
       ({mutation}) => {

packages/gatsby-plugin-jaen/gatsby/gatsby-config.ts

@@ -1,9 +1,41 @@
 import {GatsbyConfig} from 'gatsby'
 
+import {messagesByLocale} from '../src/locales/messages'
+
+const defaultLocale = 'en-US'
+
+const systemPageBlacklist = ['/cms/', '/login/', '/mailpress/', '/settings/', '/logout/'];
+
+const locales = Object.entries(messagesByLocale).map(([locale, messages]) => {
+  const prefix = locale.split('-')[0]
+
+  const pageBlacklist =
+    locale === defaultLocale ? undefined : systemPageBlacklist
+
+  return {
+    locale,
+    prefix,
+    slugs: {},
+    messages,
+    ...(pageBlacklist ? {pageBlacklist} : {})
+  }
+})
+
+const siteUrl =
+  process.env.GATSBY_SITE_URL || process.env.SITE_URL || 'https://page.jaen.io'
+
 const Config: GatsbyConfig = {
   jsxRuntime: 'automatic',
   jsxImportSource: '@emotion/react',
   plugins: [
+    {
+      resolve: `gatsby-plugin-i18n-l10n`,
+      options: {
+        defaultLocale,
+        siteUrl,
+        locales
+      }
+    },
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,

packages/gatsby-plugin-jaen/package.json

@@ -47,6 +47,7 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^10.13.0",
     "gatsby-plugin-google-gtag": "^5.12.0",
+    "gatsby-plugin-i18n-l10n": "^5.14.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-remove-console": "^0.0.2",
@@ -64,6 +65,7 @@
     "react-dropzone": "^14.2.3",
     "react-filerobot-image-editor": "^4.5.1",
     "react-hook-form": "^7.51.5",
+    "react-intl": "6.8.9",
     "react-konva": "^18.2.10",
     "react-photo-view": "^1.2.3",
     "react-zoom-pan-pinch": "^3.1.0",

packages/gatsby-plugin-jaen/src/locales/i18n.ts

@@ -0,0 +1,26 @@
+export type SupportedLocale = 'en-US' | 'de-AT'
+
+type MessageDictionary = Record<string, string>
+
+type I18nDescriptor = {
+  messages: MessageDictionary
+}
+
+const i18nByLocale: Record<SupportedLocale, I18nDescriptor> = {
+  'en-US': {
+    messages: {
+      language: 'English'
+    }
+  },
+  'de-AT': {
+    messages: {
+      language: 'Deutsch (Österreich)'
+    }
+  }
+}
+
+export const getI18n = (locale: SupportedLocale): I18nDescriptor => {
+  return i18nByLocale[locale]
+}
+
+export const supportedLocales = Object.keys(i18nByLocale) as SupportedLocale[]

packages/gatsby-plugin-jaen/src/locales/messages.ts

@@ -0,0 +1,8 @@
+import {getI18n} from './i18n'
+
+export const messagesByLocale = {
+  'en-US': getI18n('en-US').messages,
+  'de-AT': getI18n('de-AT').messages
+} as const
+
+export type MessagesByLocale = typeof messagesByLocale

packages/gatsby-source-jaen/src/on-create-page/jaen-page.ts

@@ -10,23 +10,43 @@ export const onCreatePage = async ({
   getNode,
   createContentDigest
 }: CreatePageArgs) => {
+  const expectedJaenPageId = `JaenPage ${page.path}`
+  // Gatsby attaches this property at runtime, but it's not declared on the Page TS type.
+  // Use a narrowed shape to make TypeScript happy without changing runtime behavior.
+  type MaybeStateful = {
+    isCreatedByStatefulCreatePages?: boolean
+  }
+  const isStateful = Boolean(
+    (page as unknown as MaybeStateful).isCreatedByStatefulCreatePages
+  )
+
   let jaenPageId = page.context?.jaenPageId as string | undefined
   let pageConfig = page.context?.pageConfig as PageConfig | undefined
 
-  if (!jaenPageId) {
-    jaenPageId = `JaenPage ${page.path}`
-    pageConfig = readPageConfig(page.component)
+  const shouldEnsureJaenPageId =
+    jaenPageId === undefined || (isStateful && jaenPageId !== expectedJaenPageId)
+
+  const shouldEnsurePageConfig = pageConfig === undefined
+
+  if (shouldEnsureJaenPageId || shouldEnsurePageConfig) {
+    pageConfig = pageConfig ?? readPageConfig(page.component)
+
+    const nextJaenPageId = isStateful
+      ? expectedJaenPageId
+      : jaenPageId ?? expectedJaenPageId
 
     actions.deletePage(page)
 
     actions.createPage({
       ...page,
       context: {
         ...page.context,
-        jaenPageId,
+        jaenPageId: nextJaenPageId,
         pageConfig
       }
     })
+
+    jaenPageId = nextJaenPageId
   }
 
   // Find the JaenPage node with the same id
@@ -43,7 +63,7 @@ export const onCreatePage = async ({
     : new Date()
 
   const newJaenPageNode = {
-    id: jaenPageId,
+    id: jaenPageId!,
     slug: lastPathElement,
 
     jaenPageMetadata: {

packages/jaen/src/Head/Head.tsx

@@ -34,10 +34,15 @@ export const Head: React.FC<
 
   const description = jaenPageMetadata?.description || siteMetadata?.description
   const image = jaenPageMetadata?.image || siteMetadata?.image
-  const siteUrl = siteMetadata?.siteUrl || '/'
-  const url = siteMetadata?.siteUrl
-    ? `${siteMetadata?.siteUrl}${props.location.pathname}`
-    : props.location.pathname
+  const normalizedSiteUrl = siteMetadata?.siteUrl?.replace(/\/+$/, '')
+  const canonicalUrl = normalizedSiteUrl
+    ? new URL(
+        props.location.pathname || '/',
+        `${normalizedSiteUrl}/`
+      ).toString()
+    : undefined
+  const siteUrl = normalizedSiteUrl || '/'
+  const url = canonicalUrl || props.location.pathname
   const isBlogPost = !!jaenPageMetadata?.blogPost?.date || false
   const datePublished =
     (isBlogPost && jaenPageMetadata?.blogPost?.date) || false
@@ -62,7 +67,9 @@ export const Head: React.FC<
       <title id="title">{title}</title>
       <meta id="meta-description" name="description" content={description} />
       <meta id="meta-image" name="image" content={image} />
-      <link id="canonical-link" rel="canonical" href={url} />
+      {canonicalUrl ? (
+        <link id="canonical-link" rel="canonical" href={canonicalUrl} />
+      ) : null}
 
       {/* OpenGraph tags */}
       <meta id="og-url" property="og:url" content={url} />