v3 - i18n routing (#718)

* fix(languageSchemaField): title typo

* refactor(assets): move asset files to subdirectory of public

this is to allow middlewares to ignore files under /public with a simple regex (instead of a cryptic catch-all like `.*\\..*`)

* feat(i18n): language routing

introduces a new level in the Next.js dynamic routing: [lang] to specify the desired display language

supported by a middleware to rewrite paths to include language code

* refactor(middlewares): clarify doc comments and variable names

* hotfix(linkTitle): handle i18n link title in web

.storybook/preview.tsx

@@ -5,7 +5,7 @@ import "../src/styles/global.css";
 import localFont from "next/font/local";
 
 const fontRecoleta = localFont({
-  src: "../../public/recoleta.otf",
+  src: "../../public/_assets/recoleta.otf",
   variable: "--font-recoleta",
 });
 

README.md

@@ -186,6 +186,10 @@ By using fetchWithToken, you ensure that all data fetching happens securely, wit
 
 To enable preview functionality in the Presentation view, Sanity applies [steganography](https://www.sanity.io/docs/stega) to the string data. This manipulates the data to include invisible HTML entities to store various metadata. If the strings are used in business logic, that logic will likely break in the Presentation view. To fix this, Sanity provides the `stegaClean` utility to remove this extra metadata. An example of this in action can be found in [CompensationsPreview.tsx](src/compensations/CompensationsPreview.tsx), where JSON parsing of salary data fails without stega cleaning.
 
+### Serving files from `/public`
+
+As part of the Next.js middlewares setup, a [matcher config](src/middleware.ts) is used to ignore certain paths. In most cases, static files stored in the `/public` folder should not be passed through the middlewares. However, defining a regex that excludes all files from this folder can [get messy and risks excluding too many paths](https://github.com/vercel/next.js/discussions/36308#discussioncomment-9913288). To make the regex matcher cleaner, it is encouraged that no files are placed directly in `/public`. Instead, subfolders (e.g. `/public/_assets`) should be defined and then excluded explicitly. Just make sure to not collide with other router paths (prefixing with `_` reduces this risk).
+
 ### OpenGraph image customization
 
 As part of providing the basic metadata for the [OpenGraph Protocol](https://ogp.me), a fallback image is generated if no other is specified. Fonts and background can be customized as shown below.

internationalization/languageSchemaField.ts

@@ -4,7 +4,7 @@ export const languageID = "language";
 
 const languageSchemaField = defineField({
   name: languageID,
-  title: "Langauge",
+  title: "Language",
   description:
     "Select the language for this document from the translation menu. This field reflects the chosen language and is set automatically based on your selection.",
   type: "string",

package.json

@@ -20,6 +20,8 @@
     "@sanity/preview-url-secret": "^1.6.11",
     "@sanity/react-loader": "^1.9.15",
     "@sanity/vision": "^3.39.1",
+    "@types/negotiator": "^0.6.3",
+    "negotiator": "^0.6.3",
     "next": "^14.2.13",
     "next-sanity": "^7.1.4",
     "next-sanity-image": "^6.1.1",

src/app/(main)/[slug]/page.tsx → src/app/(main)/[lang]/[slug]/page.tsx

@@ -3,6 +3,8 @@ import { Metadata } from "next";
 import { Blog } from "src/blog/Blog";
 import BlogPreview from "src/blog/BlogPreview";
 import CustomErrorMessage from "src/blog/components/customErrorMessage/CustomErrorMessage";
+import Legal from "src/blog/components/legal/Legal";
+import LegalPreview from "src/blog/components/legal/LegalPreview";
 import { homeLink } from "src/blog/components/utils/linkTypes";
 import Compensations from "src/compensations/Compensations";
 import CompensationsPreview from "src/compensations/CompensationsPreview";
@@ -13,9 +15,11 @@ import SectionRenderer from "src/utils/renderSection";
 import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
 import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
 import { CompensationsPage } from "studio/lib/interfaces/compensations";
+import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { BlogPage, PageBuilder, Post } from "studio/lib/interfaces/pages";
 import { CustomerCasePage } from "studio/lib/interfaces/specialPages";
 import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/companyDetails";
+import { LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY } from "studio/lib/queries/legalDocuments";
 import {
   BLOG_PAGE_QUERY,
   POSTS_QUERY,
@@ -31,9 +35,7 @@ import { loadStudioQuery } from "studio/lib/store";
 export const dynamic = "force-dynamic";
 
 type Props = {
-  params: {
-    slug: string;
-  };
+  params: { lang: string; slug: string };
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
@@ -51,7 +53,8 @@ const Page404 = (
 );
 
 async function Page({ params }: Props) {
-  const { slug } = params;
+  const { lang, slug } = params;
+
   const { perspective, isDraftMode } = getDraftModeInfo();
 
   const [
@@ -60,6 +63,7 @@ async function Page({ params }: Props) {
     initialCompensationsPage,
     initialLocationsData,
     initialCustomerCases,
+    initialLegalDocument,
   ] = await Promise.all([
     loadStudioQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
     loadStudioQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
@@ -78,6 +82,11 @@ async function Page({ params }: Props) {
       { slug },
       { perspective },
     ),
+    loadStudioQuery<LegalDocument>(
+      LEGAL_DOCUMENTS_BY_SLUG_AND_LANG_QUERY,
+      { slug, language: lang },
+      { perspective },
+    ),
   ]);
 
   if (initialPage.data) {
@@ -145,6 +154,14 @@ async function Page({ params }: Props) {
     );
   }
 
+  if (initialLegalDocument.data) {
+    return isDraftMode ? (
+      <LegalPreview initialDocument={initialLegalDocument} />
+    ) : (
+      <Legal document={initialLegalDocument.data} />
+    );
+  }
+
   return Page404;
 }
 

src/app/(main)/page.tsx → src/app/(main)/[lang]/page.tsx

@@ -1,11 +1,16 @@
 import { Metadata } from "next";
 
+import CustomErrorMessage from "src/blog/components/customErrorMessage/CustomErrorMessage";
 import InformationSection from "src/blog/components/informationSection/InformationSection";
+import { homeLink } from "src/blog/components/utils/linkTypes";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import SectionRenderer from "src/utils/renderSection";
 import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
+import { client } from "studio/lib/client";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import { PageBuilder } from "studio/lib/interfaces/pages";
+import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
+import { LANGUAGES_QUERY } from "studio/lib/queries/languages";
 import { LANDING_PAGE_REF_QUERY } from "studio/lib/queries/navigation";
 import { PAGE_QUERY, SEO_PAGE_QUERY } from "studio/lib/queries/page";
 import { loadStudioQuery } from "studio/lib/store";
@@ -34,9 +39,29 @@ const pagesLink = {
   internalLink: { _ref: "studio/structure/pages" },
 };
 
-const Home = async () => {
+type Props = {
+  params: { lang: string; slug: string };
+};
+
+const Page404 = (
+  <CustomErrorMessage
+    title="404 — Something went wrong"
+    body="The page you are looking for does not exist. There may be an error in the URL, or the page may have been moved or deleted."
+    link={homeLink}
+  />
+);
+
+const Home = async ({ params }: Props) => {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
+  const language = (
+    await client.fetch<LanguageObject[] | null>(LANGUAGES_QUERY)
+  )?.find((l) => l.id === params.lang);
+
+  if (language === undefined) {
+    return Page404;
+  }
+
   const { data: landingId } = await loadStudioQuery<string>(
     LANDING_PAGE_REF_QUERY,
     {},

src/app/layout.tsx

@@ -12,7 +12,7 @@ import { loadStudioQuery } from "studio/lib/store";
 import "src/styles/global.css";
 
 const fontRecoleta = localFont({
-  src: "../../public/recoleta.otf",
+  src: "../../public/_assets/recoleta.otf",
   variable: "--font-recoleta",
 });
 

src/blog/components/loadingNews/loadingNews.module.css

@@ -28,8 +28,8 @@
     display: block;
     width: 1.5rem;
     height: 1.5rem;
-    -webkit-mask: url("/spinner.svg") no-repeat 50% 50%;
-    mask: url("/spinner.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
+    mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
     background-color: var(--primary-black);
     animation: rotateSpinner 750ms linear infinite;
   }

src/components/buttons/button.module.css

@@ -72,7 +72,7 @@
     content: "";
     width: 1.5rem;
     height: 1.5rem;
-    -webkit-mask: url("/arrow-back.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/arrow-back.svg") no-repeat 50% 50%;
     background-color: var(--primary-black);
   }
 }
@@ -83,8 +83,8 @@
     display: block;
     width: 1.5rem;
     height: 1.5rem;
-    -webkit-mask: url("/spinner.svg") no-repeat 50% 50%;
-    mask: url("/spinner.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
+    mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
     background-color: var(--primary-black);
     animation: rotateSpinner 750ms linear infinite;
   }

src/components/forms/checkbox/checkbox.module.css

@@ -72,7 +72,7 @@
     display: inline-block;
     -webkit-mask-size: cover;
     background-color: var(--primary-red-error);
-    -webkit-mask: url("/alert-circle.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
   @media (min-height: 1024px) {

src/components/forms/inputField/inputField.module.css

@@ -35,7 +35,7 @@
     display: inline-block;
     -webkit-mask-size: cover;
     background-color: var(--primary-red-error);
-    -webkit-mask: url("/alert-circle.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
   @media (min-height: 1024px) {

src/components/forms/inputTextArea/inputTextArea.module.css

@@ -36,7 +36,7 @@
     display: inline-block;
     -webkit-mask-size: cover;
     background-color: var(--primary-red-error);
-    -webkit-mask: url("/alert-circle.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
   @media (min-height: 1024px) {

src/components/link/CustomLink.tsx

@@ -16,6 +16,9 @@ interface ICustomLink {
 
 const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
   const linkTitle = link.linkTitle;
+  // TODO: pick title based on selected language
+  const linkTitleValue =
+    (typeof linkTitle === "string" ? linkTitle : linkTitle[0].value) ?? "";
   const href = getHref(link);
   const newTab = link.newTab;
   const target = newTab ? "_blank" : undefined;
@@ -34,7 +37,7 @@ const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
         rel={rel}
         aria-label={link.ariaLabel}
       >
-        <span className={styles.span}>{linkTitle}</span>
+        <span className={styles.span}>{linkTitleValue}</span>
       </Link>
       <div className={styles.underline}></div>
     </div>
@@ -46,7 +49,7 @@ const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
       rel={rel}
       aria-label={link.ariaLabel}
     >
-      {linkTitle}
+      {linkTitleValue}
     </Link>
   );
 };

src/components/link/link.module.css

@@ -44,7 +44,7 @@
     display: inline-block;
     -webkit-mask-size: cover;
     background-color: var(--primary-black);
-    -webkit-mask: url("/arrow.svg") no-repeat 50% 50%;
+    -webkit-mask: url("/_assets/arrow.svg") no-repeat 50% 50%;
   }
 }
 

src/components/linkButton/LinkButton.tsx

@@ -21,10 +21,15 @@ const typeClassMap: { [key in LinkButtonType]: string } = {
 const LinkButton = ({ isSmall, type = "primary", link }: IButton) => {
   const className = `${styles.button} ${isSmall ? styles.small : ""} ${typeClassMap[type]}`;
   const href = getHref(link);
+  const linkTitle = link.linkTitle;
+  // TODO: pick title based on selected language
+  const linkTitleValue =
+    typeof linkTitle === "string" ? linkTitle : linkTitle[0].value;
   return (
-    href && (
+    href &&
+    linkTitleValue && (
       <a className={className} href={href}>
-        {link.linkTitle}
+        {linkTitleValue}
       </a>
     )
   );

src/components/linkButton/linkButton.module.css

@@ -32,9 +32,9 @@
     width: 1.5rem;
     height: 1.5rem;
     content: "";
-    -webkit-mask: url("/arrow.svg") no-repeat center;
+    -webkit-mask: url("/_assets/arrow.svg") no-repeat center;
     -webkit-mask-size: cover;
-    mask: url("/arrow.svg") no-repeat center;
+    mask: url("/_assets/arrow.svg") no-repeat center;
     mask-size: cover;
   }
 }