Internationalize website with next-intl for 19 languages

web/app/(legal)/eula/page.tsx → web/app/[locale]/(legal)/eula/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 export default function EulaPage() {
   return (
     <>
-      <h1>End-User License Agreement</h1>
+      <h1>EULA</h1>
       <p>Last updated: December 2, 2025</p>
 
       <p>

web/app/(legal)/privacy-policy/page.tsx → web/app/[locale]/(legal)/privacy-policy/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Link } from "../../../../i18n/navigation";
 
 export const metadata: Metadata = {
   title: "Privacy Policy — cmux",
@@ -29,7 +30,7 @@ export default function PrivacyPolicyPage() {
       </p>
       <p>
         By using our Service, you accept this Privacy Policy and our{" "}
-        <a href="/terms-of-service">Terms of Service</a>, and you consent to
+        <Link href="/terms-of-service">Terms of Service</Link>, and you consent to
         our collection, storage, use and disclosure of your information as
         described here.
       </p>

web/app/[locale]/blog/cmd-shift-u/page.tsx

@@ -0,0 +1,74 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { Link } from "../../../../i18n/navigation";
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog.cmdShiftU" });
+  const url = locale === "en" ? "/blog/cmd-shift-u" : `/${locale}/blog/cmd-shift-u`;
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords: [
+      "cmux", "terminal", "macOS", "notifications", "AI coding agents",
+      "keyboard shortcuts", "developer tools", "workflow",
+    ],
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-03-04T00:00:00Z",
+      url,
+    },
+    twitter: {
+      card: "summary",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: { canonical: url },
+  };
+}
+
+export default function CmdShiftUPage() {
+  const t = useTranslations("blog.posts.cmdShiftU");
+  const tc = useTranslations("common");
+
+  return (
+    <>
+      <div className="mb-8">
+        <Link
+          href="/blog"
+          className="text-sm text-muted hover:text-foreground transition-colors"
+        >
+          &larr; {tc("backToBlog")}
+        </Link>
+      </div>
+
+      <h1>{t("title")}</h1>
+      <time dateTime="2026-03-04" className="text-sm text-muted">
+        {t("date")}
+      </time>
+
+      <p className="mt-6">{t("p1")}</p>
+
+      <video
+        src="/blog/cmd-shift-u.mp4"
+        width={1824}
+        height={1080}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="my-6 rounded-lg w-full h-auto"
+      />
+
+      <p>
+        {t.rich("p2", {
+          link: (chunks) => (
+            <Link href="/docs/notifications">{chunks}</Link>
+          ),
+        })}
+      </p>
+    </>
+  );
+}

web/app/[locale]/blog/introducing-cmux/page.tsx

@@ -0,0 +1,72 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { Link } from "../../../../i18n/navigation";
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog.introducingCmux" });
+  const url = locale === "en" ? "/blog/introducing-cmux" : `/${locale}/blog/introducing-cmux`;
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords: [
+      "cmux", "terminal", "macOS", "Ghostty", "libghostty",
+      "AI coding agents", "Claude Code", "vertical tabs", "split panes", "socket API",
+    ],
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-02-12T00:00:00Z",
+      url,
+    },
+    twitter: {
+      card: "summary",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: { canonical: url },
+  };
+}
+
+export default function IntroducingCmuxPage() {
+  const t = useTranslations("blog.posts.introducingCmux");
+  const tc = useTranslations("common");
+
+  return (
+    <>
+      <div className="mb-8">
+        <Link
+          href="/blog"
+          className="text-sm text-muted hover:text-foreground transition-colors"
+        >
+          &larr; {tc("backToBlog")}
+        </Link>
+      </div>
+
+      <h1>{t("title")}</h1>
+      <time dateTime="2026-02-12" className="text-sm text-muted">{t("date")}</time>
+
+      <p className="mt-6">{t("p1")}</p>
+
+      <h2>{t("whyTitle")}</h2>
+      <p>{t("whyP")}</p>
+
+      <h2>{t("featuresTitle")}</h2>
+      <ul>
+        <li><strong>{t("featureVerticalTabsLabel")}</strong>: {t("featureVerticalTabsDesc")}</li>
+        <li><strong>{t("featureNotificationsLabel")}</strong>: {t("featureNotificationsDesc")}</li>
+        <li><strong>{t("featureSplitPanesLabel")}</strong>: {t("featureSplitPanesDesc")}</li>
+        <li><strong>{t("featureSocketApiLabel")}</strong>: {t("featureSocketApiDesc")}</li>
+        <li><strong>{t("featureGpuLabel")}</strong>: {t("featureGpuDesc")}</li>
+      </ul>
+
+      <h2>{t("getStartedTitle")}</h2>
+      <p>
+        {t.rich("getStartedP", {
+          link: (chunks) => <Link href="/docs/getting-started">{chunks}</Link>,
+        })}
+      </p>
+    </>
+  );
+}

web/app/blog/layout.tsx → web/app/[locale]/blog/layout.tsx

@@ -1,21 +1,29 @@
-import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import { SiteHeader } from "../components/site-header";
 import { BlogPager } from "../components/blog-pager";
 import { BlogCTA } from "../components/blog-cta";
 
-export const metadata: Metadata = {
-  title: {
-    template: "%s — cmux blog",
-    default: "cmux blog",
-  },
-  openGraph: {
-    siteName: "cmux",
-    type: "article",
-  },
-  alternates: {
-    canonical: "./",
-  },
-};
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog" });
+  return {
+    title: {
+      template: `%s — ${t("layoutTitle")}`,
+      default: t("layoutTitle"),
+    },
+    openGraph: {
+      siteName: "cmux",
+      type: "article" as const,
+    },
+    alternates: {
+      canonical: "./",
+    },
+  };
+}
 
 export default function BlogLayout({
   children,

web/app/[locale]/blog/page.tsx

@@ -0,0 +1,60 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { Link } from "../../../i18n/navigation";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog" });
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+  };
+}
+
+const blogSlugs = [
+  "cmdShiftU",
+  "zenOfCmux",
+  "showHnLaunch",
+  "introducingCmux",
+] as const;
+
+const slugToPath: Record<string, string> = {
+  cmdShiftU: "cmd-shift-u",
+  zenOfCmux: "zen-of-cmux",
+  showHnLaunch: "show-hn-launch",
+  introducingCmux: "introducing-cmux",
+};
+
+export default function BlogPage() {
+  const t = useTranslations("blog");
+
+  return (
+    <>
+      <h1>{t("title")}</h1>
+      <div className="space-y-4 mt-6">
+        {blogSlugs.map((slug) => (
+          <article key={slug}>
+            <Link
+              href={`/blog/${slugToPath[slug]}`}
+              className="block group"
+            >
+              <h2 className="text-lg font-medium group-hover:underline">
+                {t(`posts.${slug}.title`)}
+              </h2>
+              <time className="text-sm text-muted">
+                {t(`posts.${slug}.date`)}
+              </time>
+              <p className="mt-1 text-muted">
+                {t(`posts.${slug}.summary`)}
+              </p>
+            </Link>
+          </article>
+        ))}
+      </div>
+    </>
+  );
+}