@sevenfold/setto-client 0.17.0 → 0.18.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { SettoLanguages } from './LanguageSwitcher';
 export { DEFAULT_LANGUAGE, languageName, pickInitialLanguage, siteLanguages, } from './lib/languages';
+export { alternateLinks, languageFromPath, pathForLanguage, redirectForVisitor, type LanguageRoute, } from './lib/language-routing';
 export { SettoProvider, useSetto } from './provider';
 export { GuestEditProvider, useGuestEdit } from './guest-edit';
 export { SettoChrome, useSettoChromeSlot } from './chrome';

package/dist/lib/language-routing.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The language lives in the URL.
+ *
+ * It did not, for one release: the choice was kept per browser in
+ * `localStorage`, which is invisible to a search engine and unshareable
+ * between people. A Norwegian plumber who wants to be found in English cannot
+ * be, if the English version has no address. So the primary language stays at
+ * the root — `/`, `/priser` — and every other language takes a prefix:
+ * `/en`, `/en/priser`.
+ *
+ * Primary at the root rather than `/no/…` deliberately: every Setto site alive
+ * today has its Norwegian pages at the root, they are linked to and indexed
+ * there, and moving them would trade a real thing for a tidy one.
+ *
+ * The routes themselves never learn about this. `BrowserRouter` takes the
+ * prefix as its `basename`, so a site's own `/priser` keeps matching whether
+ * the visitor is at `/priser` or `/en/priser` — which matters because those
+ * routes are written per site by the build agent, and a scheme that required
+ * it to think about languages is a scheme that would be got wrong.
+ */
+export interface LanguageRoute {
+    /** The language this URL is in. */
+    language: string;
+    /** `''` for the primary language, `/en` otherwise. Feed to `basename`. */
+    basename: string;
+    /** The path with the prefix removed, always starting with `/`. */
+    rest: string;
+}
+/**
+ * Read the language out of a path.
+ *
+ * Only a prefix that is a language this site actually speaks counts — a site
+ * with a page at `/no` and no Norwegian in its list keeps that page.
+ */
+export declare function languageFromPath(pathname: string, languages: readonly string[], primary?: string): LanguageRoute;
+/** The same page, in another language. */
+export declare function pathForLanguage(pathname: string, target: string, languages: readonly string[], primary?: string): string;
+/**
+ * Every address this page has, for `hreflang`.
+ *
+ * Without these a search engine sees two unrelated pages that happen to say
+ * similar things, and picks one. `x-default` points at the primary, which is
+ * what a reader with no stated preference should land on.
+ */
+export declare function alternateLinks(origin: string, pathname: string, languages: readonly string[], primary?: string): Array<{
+    hreflang: string;
+    href: string;
+}>;
+/**
+ * Where a first-time visitor should be sent, or null to leave them alone.
+ *
+ * Only ever from the unprefixed root towards a prefix, only when the browser
+ * asks for a language this site speaks and the visitor has expressed no
+ * preference of their own here before. One direction only: a redirect that can
+ * send `/en` back to `/` is a redirect that can loop, and somebody who has
+ * clicked «Norsk» on an English page must not be bounced back to English on
+ * their next click.
+ */
+export declare function redirectForVisitor(pathname: string, languages: readonly string[], browserLanguages: readonly string[], stored: string | null, primary?: string): string | null;

package/dist/setto-client.js

@@ -72,6 +72,59 @@ function pickInitialLanguage(available, browserLanguages = typeof navigator ===
   }
   return fallback;
 }
+function normalise(pathname) {
+  const path = pathname.startsWith("/") ? pathname : `/${pathname}`;
+  return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+}
+function languageFromPath(pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  const path = normalise(pathname);
+  const first = path.split("/")[1] ?? "";
+  const match = languages.find(
+    (tag) => tag !== primary && tag.toLowerCase() === first.toLowerCase()
+  );
+  if (!match) return { language: primary, basename: "", rest: path };
+  const rest = path.slice(first.length + 1);
+  return { language: match, basename: `/${match}`, rest: rest === "" ? "/" : rest };
+}
+function pathForLanguage(pathname, target, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  const { rest } = languageFromPath(pathname, languages, primary);
+  if (target === primary) return rest;
+  return rest === "/" ? `/${target}` : `/${target}${rest}`;
+}
+function alternateLinks(origin, pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  if (languages.length < 2) return [];
+  const links = languages.map((tag) => ({
+    hreflang: tag,
+    href: origin + pathForLanguage(pathname, tag, languages, primary)
+  }));
+  links.push({
+    hreflang: "x-default",
+    href: origin + pathForLanguage(pathname, primary, languages, primary)
+  });
+  return links;
+}
+function isReservedPath(pathname) {
+  return pathname === "/setto" || pathname.startsWith("/setto/");
+}
+function redirectForVisitor(pathname, languages, browserLanguages, stored, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  if (languages.length < 2) return null;
+  if (isReservedPath(pathname)) return null;
+  const current = languageFromPath(pathname, languages, primary);
+  if (current.basename !== "") return null;
+  if (stored) {
+    return stored !== primary && languages.includes(stored) ? pathForLanguage(pathname, stored, languages, primary) : null;
+  }
+  for (const wanted of browserLanguages) {
+    const base = wanted.toLowerCase().split("-")[0];
+    if (!base) continue;
+    if (base === primary.toLowerCase().split("-")[0]) return null;
+    const norwegian = ["no", "nb", "nn"];
+    if (norwegian.includes(base) && norwegian.includes(primary.toLowerCase())) return null;
+    const hit = languages.find((tag) => tag.toLowerCase().split("-")[0] === base);
+    if (hit && hit !== primary) return pathForLanguage(pathname, hit, languages, primary);
+  }
+  return null;
+}
 const INLINE_MARKER = "data-setto-languages-inline";
 function SettoLanguages({ languages, inline = false }) {
   const { i18n } = useTranslation();
@@ -109,8 +162,8 @@ function SettoLanguages({ languages, inline = false }) {
     setOpen(false);
     if (tag === current) return;
     storeLanguage(tag);
-    void i18n.changeLanguage(tag);
-    document.documentElement.lang = tag;
+    const target = pathForLanguage(window.location.pathname, tag, languages);
+    window.location.assign(target + window.location.search + window.location.hash);
   };
   return /* @__PURE__ */ jsxs("div", { ref, style: inline ? inlineWrapStyle : floatingWrapStyle, children: [
     /* @__PURE__ */ jsxs(
@@ -22006,10 +22059,34 @@ function SettoProvider({ config, children }) {
   );
   useEffect(() => {
     if (!i18n || languages.length < 2) return;
-    const wanted = pickInitialLanguage(languages, void 0, readStoredLanguage());
-    if (wanted && wanted !== i18n.language) void i18n.changeLanguage(wanted);
-    document.documentElement.lang = wanted;
+    const redirect = redirectForVisitor(
+      window.location.pathname,
+      languages,
+      navigator.languages ?? [navigator.language],
+      readStoredLanguage()
+    );
+    if (redirect && redirect !== window.location.pathname) {
+      window.location.replace(redirect + window.location.search + window.location.hash);
+      return;
+    }
+    const { language } = languageFromPath(window.location.pathname, languages);
+    if (language !== i18n.language) void i18n.changeLanguage(language);
+    document.documentElement.lang = language;
   }, [i18n, languages]);
+  useEffect(() => {
+    if (languages.length < 2) return;
+    const links = alternateLinks(window.location.origin, window.location.pathname, languages);
+    const added = links.map(({ hreflang, href }) => {
+      const el = document.createElement("link");
+      el.rel = "alternate";
+      el.hreflang = hreflang;
+      el.href = href;
+      el.dataset.settoAlternate = "";
+      document.head.appendChild(el);
+      return el;
+    });
+    return () => added.forEach((el) => el.remove());
+  }, [languages]);
   const storeRef = useRef(null);
   const themeStoreRef = useRef(null);
   const assetStoreRef = useRef(null);
@@ -24875,6 +24952,7 @@ export {
   T,
   adminRedirectUrl,
   adminViewUrl,
+  alternateLinks,
   checkoutIntentUrl,
   currentAdminView,
   extractContentKeys,
@@ -24886,11 +24964,14 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  languageFromPath,
   languageName,
   nodeChildren,
   parseBlockTree,
+  pathForLanguage,
   pickInitialLanguage,
   readLocaleFields,
+  redirectForVisitor,
   settoSubmissionUrl,
   siteHomeUrl,
   siteLanguages,