fix: update sitemap hreflang format to iso-639

Author: stevenle

.changeset/happy-falcons-act.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root': patch
+---
+
+fix: update sitemap hreflang format to iso-639

packages/root/src/cli/build.ts

@@ -399,15 +399,13 @@ export async function build(rootProjectDir?: string, options?: BuildOptions) {
           sitemapXmlItems.push('<url>');
           sitemapXmlItems.push(`  <loc>${domain}${urlPath}</loc>`);
           if (sitemapItem.alts) {
-            Object.entries(sitemapItem.alts).forEach(
-              ([altLocale, altUrlPath]) => {
-                if (sitemapItem.locale !== altLocale) {
-                  sitemapXmlItems.push(
-                    `  <xhtml:link rel="alternate" hreflang="${altLocale}" href="${domain}${altUrlPath}" />`
-                  );
-                }
+            Object.entries(sitemapItem.alts).forEach(([altLocale, item]) => {
+              if (sitemapItem.locale !== altLocale) {
+                sitemapXmlItems.push(
+                  `  <xhtml:link rel="alternate" hreflang="${item.hrefLang}" href="${domain}${item.urlPath}" />`
+                );
               }
-            );
+            });
           }
           sitemapXmlItems.push('</url>');
         }

packages/root/src/core/types.ts

@@ -231,8 +231,9 @@ export interface SitemapItem {
   route: Route;
   params: Record<string, string>;
   locale: string;
+  hrefLang: string;
   /**
    * Hreflang alts.
    */
-  alts: Record<string, string>;
+  alts: Record<string, {hrefLang: string; urlPath: string}>;
 }

packages/root/src/render/render.tsx

@@ -30,6 +30,7 @@ import {
 } from '../core/types.js';
 import type {ElementGraph} from '../node/element-graph.js';
 import {parseTagNames} from '../utils/elements.js';
+import {toHrefLang} from '../utils/i18n.js';
 import {AssetMap} from './asset-map/asset-map.js';
 import {htmlMinify} from './html-minify.js';
 import {htmlPretty} from './html-pretty.js';
@@ -386,29 +387,38 @@ export class Renderer {
 
   async getSitemap(): Promise<Sitemap> {
     const sitemap: Sitemap = {};
-    const sitemapItemAlts: Record<string, Record<string, string>> = {};
+    const sitemapItemAlts: Record<
+      string,
+      Record<string, {hrefLang: string; urlPath: string}>
+    > = {};
     const trailingSlash = this.rootConfig.server?.trailingSlash || false;
 
     await this.router.walk(async (urlPath: string, route: Route) => {
       const routePaths = await this.router.getAllPathsForRoute(urlPath, route);
       routePaths.forEach((routePath) => {
         const routeLocale = route.isDefaultLocale ? 'x-default' : route.locale;
+        const hrefLang = route.isDefaultLocale
+          ? 'x-default'
+          : toHrefLang(route.locale);
         const defaultUrlPath = normalizeUrlPath(
           replaceParams(route.routePath, routePath.params),
           {trailingSlash: trailingSlash}
         );
         if (!sitemapItemAlts[defaultUrlPath]) {
           sitemapItemAlts[defaultUrlPath] = {};
         }
-        sitemapItemAlts[defaultUrlPath][routeLocale] = normalizeUrlPath(
-          replaceParams(urlPath, routePath.params),
-          {trailingSlash: trailingSlash}
-        );
+        sitemapItemAlts[defaultUrlPath][routeLocale] = {
+          hrefLang: hrefLang,
+          urlPath: normalizeUrlPath(replaceParams(urlPath, routePath.params), {
+            trailingSlash: trailingSlash,
+          }),
+        };
         const sitemapItem: SitemapItem = {
           urlPath: routePath.urlPath,
           route,
           params: routePath.params,
           locale: routeLocale,
+          hrefLang: hrefLang,
           alts: sitemapItemAlts[defaultUrlPath],
         };
         sitemap[routePath.urlPath] = sitemapItem;
@@ -423,7 +433,8 @@ export class Renderer {
       .forEach((urlPath: string) => {
         // console.log(urlPath);
         const sitemapItem = sitemap[urlPath];
-        const orderedAlts: Record<string, string> = {};
+        const orderedAlts: Record<string, {hrefLang: string; urlPath: string}> =
+          {};
         Object.keys(sitemapItem.alts)
           .sort(sortLocales)
           .forEach((locale) => {

packages/root/src/utils/i18n.ts

@@ -0,0 +1,29 @@
+/**
+ * Converts a locale (e.g. `fr_CA`) to an ISO-639 href language code (e.g.
+ * `fr-CA`). This can be used tags like `<html lang="">` and
+ * `<link rel="alternate" hreflang="">`.
+ *
+ * https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
+ */
+export function toHrefLang(locale: string): string {
+  if (locale === 'es_419') {
+    return 'es-419';
+  }
+  if (locale.startsWith('ALL_')) {
+    // Convert `ALL_xx` to `en-xx`. It is currently presumed that whenever
+    // `ALL_xx` is used, the content may be untranslated but shows
+    // country-specific information.
+    const regionCode = locale.split('_')[1];
+    if (regionCode === 'uk') {
+      return 'en-GB';
+    }
+    return `en-${regionCode.toUpperCase()}`;
+  }
+  let hrefLang = locale.replace('_ALL', '').replace('_', '-');
+  if (hrefLang.includes('-')) {
+    // Capitalize the countryCode, e.g. `en-US`.
+    const [langCode, countryCode] = hrefLang.split('-');
+    hrefLang = `${langCode}-${countryCode.toUpperCase()}`;
+  }
+  return hrefLang;
+}

packages/root/test/fixtures/sitemap/root.config.ts

@@ -3,7 +3,7 @@ export default {
   domain: 'https://www.example.com',
   i18n: {
     urlPath: '/intl/[path]',
-    locales: ['en', 'de', 'fr'],
+    locales: ['de', 'en', 'en_ca', 'en_gb', 'fr', 'fr_ca'],
   },
   server: {
     trailingSlash: true,

packages/root/test/fixtures/sitemap/routes/404.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Not found!</h1>;
+}