Internationalize website with next-intl for 19 languages

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

@@ -1,14 +1,16 @@
 import type { Metadata } from "next";
+import { useTranslations } from "next-intl";
 
 export const metadata: Metadata = {
   title: "EULA — cmux",
   description: "End-User License Agreement for cmux",
 };
 
 export default function EulaPage() {
+  const t = useTranslations("legal");
   return (
     <>
-      <h1>End-User License Agreement</h1>
+      <h1>{t("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,14 +1,17 @@
 import type { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { Link } from "../../../../i18n/navigation";
 
 export const metadata: Metadata = {
   title: "Privacy Policy — cmux",
   description: "Privacy policy for cmux",
 };
 
 export default function PrivacyPolicyPage() {
+  const t = useTranslations("legal");
   return (
     <>
-      <h1>Privacy Policy</h1>
+      <h1>{t("privacyPolicy")}</h1>
       <p>Last updated: December 2, 2025</p>
 
       <p>
@@ -29,7 +32,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/(legal)/terms-of-service/page.tsx → web/app/[locale]/(legal)/terms-of-service/page.tsx

@@ -1,14 +1,16 @@
 import type { Metadata } from "next";
+import { useTranslations } from "next-intl";
 
 export const metadata: Metadata = {
   title: "Terms of Service — cmux",
   description: "Terms of service for cmux",
 };
 
 export default function TermsOfServicePage() {
+  const t = useTranslations("legal");
   return (
     <>
-      <h1>Terms of Service</h1>
+      <h1>{t("termsOfService")}</h1>
       <p>Last revised on: December 2, 2025</p>
 
       <p>

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

@@ -1,19 +1,14 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "../../../../i18n/navigation";
 
 export const metadata: Metadata = {
   title: "Cmd+Shift+U",
   description:
     "How Cmd+Shift+U navigates between finished agents across workspaces in cmux.",
   keywords: [
-    "cmux",
-    "terminal",
-    "macOS",
-    "notifications",
-    "AI coding agents",
-    "keyboard shortcuts",
-    "developer tools",
-    "workflow",
+    "cmux", "terminal", "macOS", "notifications", "AI coding agents",
+    "keyboard shortcuts", "developer tools", "workflow",
   ],
   openGraph: {
     title: "Cmd+Shift+U",
@@ -29,34 +24,30 @@ export const metadata: Metadata = {
     description:
       "How Cmd+Shift+U navigates between finished agents across workspaces in cmux.",
   },
-  alternates: {
-    canonical: "https://cmux.dev/blog/cmd-shift-u",
-  },
+  alternates: { canonical: "https://cmux.dev/blog/cmd-shift-u" },
 };
 
 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; Back to blog
+          &larr; {tc("backToBlog")}
         </Link>
       </div>
 
-      <h1>Cmd+Shift+U</h1>
+      <h1>{t("title")}</h1>
       <time dateTime="2026-03-04" className="text-sm text-muted">
-        March 4, 2026
+        {t("date")}
       </time>
 
-      <p className="mt-6">
-        My favorite cmux feature is <kbd>Cmd+Shift+U</kbd>. I have 17
-        workspaces open right now, each running an agent. I used to click
-        through tabs and the notification panel to figure out what completed.
-        Typing is faster.
-      </p>
+      <p className="mt-6">{t("p1")}</p>
 
       <video
         src="/blog/cmd-shift-u.mp4"
@@ -70,12 +61,11 @@ export default function CmdShiftUPage() {
       />
 
       <p>
-        <kbd>Cmd+Shift+U</kbd> jumps to the newest unread{" "}
-        <Link href="/docs/notifications">notification</Link>. In practice
-        that means the last agent that finished. It switches to the right
-        workspace, focuses the exact pane, flashes it so you see where to
-        look, and marks it read. If the notification came from another window,
-        that window comes forward.
+        {t.rich("p2", {
+          link: (chunks) => (
+            <Link href="/docs/notifications">{chunks}</Link>
+          ),
+        })}
       </p>
     </>
   );

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

@@ -0,0 +1,70 @@
+import type { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { Link } from "../../../../i18n/navigation";
+
+export const metadata: Metadata = {
+  title: "Introducing cmux",
+  description:
+    "A native macOS terminal built on Ghostty, designed for running multiple AI coding agents side by side.",
+  keywords: [
+    "cmux", "terminal", "macOS", "Ghostty", "libghostty",
+    "AI coding agents", "Claude Code", "vertical tabs", "split panes", "socket API",
+  ],
+  openGraph: {
+    title: "Introducing cmux",
+    description:
+      "A native macOS terminal built on Ghostty, designed for running multiple AI coding agents side by side.",
+    type: "article",
+    publishedTime: "2026-02-12T00:00:00Z",
+    url: "https://cmux.dev/blog/introducing-cmux",
+  },
+  twitter: {
+    card: "summary",
+    title: "Introducing cmux",
+    description:
+      "A native macOS terminal built on Ghostty, designed for running multiple AI coding agents side by side.",
+  },
+  alternates: { canonical: "https://cmux.dev/blog/introducing-cmux" },
+};
+
+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>Vertical tabs</strong>: {t("featureVerticalTabs").split(": ")[1] || t("featureVerticalTabs")}</li>
+        <li><strong>Notification rings</strong>: {t("featureNotifications").split(": ")[1] || t("featureNotifications")}</li>
+        <li><strong>Split panes</strong>: {t("featureSplitPanes").split(": ")[1] || t("featureSplitPanes")}</li>
+        <li><strong>Socket API</strong>: {t("featureSocketApi").split(": ")[1] || t("featureSocketApi")}</li>
+        <li><strong>GPU-accelerated</strong>: {t("featureGpu").split(": ")[1] || t("featureGpu")}</li>
+      </ul>
+
+      <h2>{t("getStartedTitle")}</h2>
+      <p>
+        {t.rich("getStartedP", {
+          link: (chunks) => <Link href="/docs/getting-started">{chunks}</Link>,
+        })}
+      </p>
+    </>
+  );
+}

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

@@ -0,0 +1,52 @@
+import type { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { Link } from "../../../i18n/navigation";
+
+export const metadata: Metadata = {
+  title: "Blog",
+  description: "News and updates from the cmux team",
+};
+
+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>
+    </>
+  );
+}