Add recent feature blog posts

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

@@ -0,0 +1,74 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { buildAlternates } from "../../../../i18n/seo";
+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.cmuxFinder" });
+  const rawKeywords = t.raw("metaKeywords");
+  const keywords = Array.isArray(rawKeywords)
+    ? rawKeywords.filter((keyword): keyword is string => typeof keyword === "string")
+    : [];
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords,
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-05-22T00:00:00Z",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: buildAlternates(locale, "/blog/cmux-finder"),
+  };
+}
+
+export default function CmuxFinderPage() {
+  const t = useTranslations("blog.posts.cmuxFinder");
+  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-05-22" className="text-sm text-muted">
+        {t("date")}
+      </time>
+
+      <video
+        src="/blog/cmux-finder.mp4"
+        width={1280}
+        height={736}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="my-6 rounded-lg w-full h-auto"
+      />
+
+      <p>{t("p1")}</p>
+      <p>{t("p2")}</p>
+      <p>{t("p3")}</p>
+      <p>{t("p4")}</p>
+      <p>{t("p5")}</p>
+    </>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { buildAlternates } from "../../../../i18n/seo";
+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.cmuxVault" });
+  const rawKeywords = t.raw("metaKeywords");
+  const keywords = Array.isArray(rawKeywords)
+    ? rawKeywords.filter((keyword): keyword is string => typeof keyword === "string")
+    : [];
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords,
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-05-22T00:00:00Z",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: buildAlternates(locale, "/blog/cmux-vault"),
+  };
+}
+
+export default function CmuxVaultPage() {
+  const t = useTranslations("blog.posts.cmuxVault");
+  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-05-22" className="text-sm text-muted">
+        {t("date")}
+      </time>
+
+      <video
+        src="/blog/cmux-vault.mp4"
+        width={1280}
+        height={902}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="my-6 rounded-lg w-full h-auto"
+      />
+
+      <p>{t("p1")}</p>
+      <p>{t("p2")}</p>
+      <p>{t("p3")}</p>
+      <p>{t("p4")}</p>
+    </>
+  );
+}

web/app/[locale]/blog/markdown-viewer/page.tsx

@@ -0,0 +1,79 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { buildAlternates } from "../../../../i18n/seo";
+import { Link } from "../../../../i18n/navigation";
+import { CodeBlock } from "../../components/code-block";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog.markdownViewer" });
+  const rawKeywords = t.raw("metaKeywords");
+  const keywords = Array.isArray(rawKeywords)
+    ? rawKeywords.filter((keyword): keyword is string => typeof keyword === "string")
+    : [];
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords,
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-05-22T00:00:00Z",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: buildAlternates(locale, "/blog/markdown-viewer"),
+  };
+}
+
+export default function MarkdownViewerPage() {
+  const t = useTranslations("blog.posts.markdownViewer");
+  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-05-22" className="text-sm text-muted">
+        {t("date")}
+      </time>
+
+      <video
+        src="/blog/cmux-markdown-tobi.mp4"
+        width={1280}
+        height={850}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="my-6 rounded-lg w-full h-auto"
+      />
+
+      <p>{t("p1")}</p>
+      <p>{t("p2")}</p>
+      <CodeBlock lang="bash">{`cmux open README.md`}</CodeBlock>
+      <p>{t("p3")}</p>
+      <p>
+        {t.rich("p4", {
+          tobiLink: (chunks) => <a href="https://github.com/tobi">{chunks}</a>,
+        })}
+      </p>
+    </>
+  );
+}

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

@@ -2,6 +2,7 @@ import { useTranslations } from "next-intl";
 import { getTranslations } from "next-intl/server";
 import { buildAlternates } from "../../../i18n/seo";
 import { Link } from "../../../i18n/navigation";
+import { blogPosts } from "../components/blog-posts";
 
 export async function generateMetadata({
   params,
@@ -17,51 +18,27 @@ export async function generateMetadata({
   };
 }
 
-const blogSlugs = [
-  "sessionRestore",
-  "cmuxSsh",
-  "cmuxClaudeTeams",
-  "cmuxOmo",
-  "gpl",
-  "cmdShiftU",
-  "zenOfCmux",
-  "showHnLaunch",
-  "introducingCmux",
-] as const;
-
-const slugToPath: Record<string, string> = {
-  sessionRestore: "session-restore",
-  cmuxOmo: "cmux-omo",
-  cmuxClaudeTeams: "cmux-claude-teams",
-  cmuxSsh: "cmux-ssh",
-  gpl: "gpl",
-  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}>
+        {blogPosts.map((post) => (
+          <article key={post.slug}>
             <Link
-              href={`/blog/${slugToPath[slug]}`}
+              href={`/blog/${post.slug}`}
               className="block group"
             >
               <h2 className="text-lg font-medium group-hover:underline">
-                {t(`posts.${slug}.title`)}
+                {t(`posts.${post.key}.title`)}
               </h2>
               <time className="text-sm text-muted">
-                {t(`posts.${slug}.date`)}
+                {t(`posts.${post.key}.date`)}
               </time>
               <p className="mt-1 text-muted">
-                {t(`posts.${slug}.summary`)}
+                {t(`posts.${post.key}.summary`)}
               </p>
             </Link>
           </article>

web/app/[locale]/blog/passkey-auth/page.tsx

@@ -0,0 +1,74 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { buildAlternates } from "../../../../i18n/seo";
+import { Link } from "../../../../i18n/navigation";
+import { CodeBlock } from "../../components/code-block";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "blog.passkeyAuth" });
+  const rawKeywords = t.raw("metaKeywords");
+  const keywords = Array.isArray(rawKeywords)
+    ? rawKeywords.filter((keyword): keyword is string => typeof keyword === "string")
+    : [];
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+    keywords,
+    openGraph: {
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+      type: "article",
+      publishedTime: "2026-05-22T00:00:00Z",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("metaTitle"),
+      description: t("metaDescription"),
+    },
+    alternates: buildAlternates(locale, "/blog/passkey-auth"),
+  };
+}
+
+export default function PasskeyAuthPage() {
+  const t = useTranslations("blog.posts.passkeyAuth");
+  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-05-22" className="text-sm text-muted">
+        {t("date")}
+      </time>
+
+      <video
+        src="/blog/passkey-browser-import.mp4"
+        width={1280}
+        height={988}
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="my-6 rounded-lg w-full h-auto"
+      />
+
+      <p className="mt-6">{t("p1")}</p>
+      <p>{t("p2")}</p>
+      <CodeBlock lang="bash">{`cmux browser import`}</CodeBlock>
+      <p>{t("p3")}</p>
+    </>
+  );
+}