diff --git a/apps/www/app/api/revalidate/route.ts b/apps/www/app/api/revalidate/route.ts
new file mode 100644
index 00000000..5ae0f76e
--- /dev/null
+++ b/apps/www/app/api/revalidate/route.ts
@@ -0,0 +1,14 @@
+import { revalidatePath } from "next/cache";
+import { type NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+ const token = request.headers.get("authorization")?.replace("Bearer ", "");
+
+ if (token !== process.env.REVALIDATION_TOKEN) {
+ return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+ }
+
+ revalidatePath("/changelog");
+
+ return NextResponse.json({ revalidated: true });
+}
diff --git a/apps/www/app/changelog/data.ts b/apps/www/app/changelog/data.ts
new file mode 100644
index 00000000..a91639d1
--- /dev/null
+++ b/apps/www/app/changelog/data.ts
@@ -0,0 +1,94 @@
+import { allChangelogs } from "content-collections";
+
+const GITHUB_REPO = "unkeyed/unkey";
+const CHANGELOG_PATH = "docs/product/changelog";
+
+function parseFrontmatter(source: string): {
+ title: string;
+ description?: string;
+ tags: string[];
+} {
+ const match = source.match(/^---\n([\s\S]*?)\n---/);
+ if (!match) {
+ return { title: "", tags: ["product"] };
+ }
+
+ const fm = match[1];
+
+ const get = (key: string) => {
+ const m = fm.match(new RegExp(`^${key}:\\s*(.+)$`, "m"));
+ return m ? m[1].replace(/^["']|["']$/g, "").trim() : undefined;
+ };
+
+ const tags = ["product"];
+
+ return { title: get("title") ?? "", description: get("description"), tags };
+}
+
+async function fetchProductChangelogs() {
+ try {
+ const headers: HeadersInit = { Accept: "application/vnd.github.v3+json" };
+ if (process.env.GITHUB_TOKEN) {
+ headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
+ }
+
+ const res = await fetch(
+ `https://api.github.com/repos/${GITHUB_REPO}/contents/${CHANGELOG_PATH}`,
+ { headers, next: { revalidate: 86400 } },
+ );
+ if (!res.ok) {
+ return [];
+ }
+
+ const entries = (await res.json()) as Array<{
+ type: string;
+ name: string;
+ download_url: string;
+ }>;
+
+ const mdxFiles = entries.filter((f) => f.type === "file" && f.name.endsWith(".mdx"));
+
+ const results = await Promise.all(
+ mdxFiles.map(async (file) => {
+ try {
+ const raw = await fetch(file.download_url, {
+ next: { revalidate: 86400 },
+ });
+ if (!raw.ok) {
+ console.error(`Failed to fetch changelog file ${file.name}: ${raw.status}`);
+ return null;
+ }
+ const source = (await raw.text()).replace(/^noindex:\s*.+$/m, "");
+ const date = file.name.slice(0, -4); // YYYY-MM-DD from filename
+ const { title, description, tags } = parseFrontmatter(source);
+ return { slug: date, date, title, description, tags, source };
+ } catch (err) {
+ console.error(`Failed to process changelog file ${file.name}:`, err);
+ return null;
+ }
+ }),
+ );
+
+ return results.filter((entry) => entry !== null);
+ } catch (err) {
+ console.error("Failed to fetch product changelogs:", err);
+ return [];
+ }
+}
+
+export async function getAllChangelogs() {
+ const productEntries = await fetchProductChangelogs();
+
+ const collectionEntries = allChangelogs.map((e) => ({
+ ...e,
+ _kind: "collection" as const,
+ }));
+ const githubEntries = productEntries.map((e) => ({
+ ...e,
+ _kind: "github" as const,
+ }));
+
+ return [...collectionEntries, ...githubEntries].sort(
+ (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+ );
+}
diff --git a/apps/www/app/changelog/page.tsx b/apps/www/app/changelog/page.tsx
index 807ea47c..7e00dff2 100644
--- a/apps/www/app/changelog/page.tsx
+++ b/apps/www/app/changelog/page.tsx
@@ -1,17 +1,17 @@
import { RainbowDarkButton } from "@/components/button";
-import { CTA } from "@/components/cta";
-
import { ChangelogGridItem } from "@/components/changelog/changelog-grid-item";
+import { changelogMdxComponents } from "@/components/changelog/changelog-mdx-components";
import { SideList } from "@/components/changelog/side-list";
+import { CTA } from "@/components/cta";
+import { MDX } from "@/components/mdx-content";
import { ChangelogLight } from "@/components/svg/changelog";
-import { allChangelogs } from "content-collections";
import { formatDate } from "date-fns";
import { ArrowRight } from "lucide-react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { getAllChangelogs } from "./data";
export default async function Changelogs() {
- const changelogs = allChangelogs.sort((a, b) => {
- return new Date(b.date).getTime() - new Date(a.date).getTime();
- });
+ const changelogs = await getAllChangelogs();
return (
<>
@@ -48,8 +48,18 @@ export default async function Changelogs() {
- {changelogs?.map((changelog) => (
-
+ {changelogs.map((entry) => (
+
+ {entry._kind === "collection" ? (
+
+ ) : (
+
+ )}
+
))}
diff --git a/apps/www/app/sitemap.ts b/apps/www/app/sitemap.ts
index a4e625e1..6fdbbdc9 100644
--- a/apps/www/app/sitemap.ts
+++ b/apps/www/app/sitemap.ts
@@ -1,5 +1,6 @@
-import { allChangelogs, allGlossaries, allPolicies, allPosts } from "content-collections";
-import type { Changelog, Glossary, Policy, Post } from "content-collections";
+import { getAllChangelogs } from "@/app/changelog/data";
+import { allGlossaries, allPolicies, allPosts } from "content-collections";
+import type { Glossary, Policy, Post } from "content-collections";
import type { MetadataRoute } from "next";
export default async function sitemap(): Promise {
const baseUrl = "https://www.unkey.com";
@@ -13,7 +14,8 @@ export default async function sitemap(): Promise {
url: `${baseUrl}/policies/${policy.slug}`,
}));
- const changelogs: MetadataRoute.Sitemap = allChangelogs.map((changelog: Changelog) => ({
+ const allChangelogEntries = await getAllChangelogs();
+ const changelogs: MetadataRoute.Sitemap = allChangelogEntries.map((changelog) => ({
url: `${baseUrl}/changelog#${changelog.slug}`,
lastModified: changelog.date,
}));
diff --git a/apps/www/app/templates/client.tsx b/apps/www/app/templates/client.tsx
index e4385efd..8998770e 100644
--- a/apps/www/app/templates/client.tsx
+++ b/apps/www/app/templates/client.tsx
@@ -34,12 +34,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowRight, SearchX, VenetianMask } from "lucide-react";
import Link from "next/link";
import { useEffect, useMemo } from "react";
-import { useForm } from "react-hook-form";
+import { type Resolver, useForm } from "react-hook-form";
import { type Framework, type Language, templates } from "./data";
export function TemplatesClient() {
const form = useForm({
- resolver: zodResolver(schema),
+ resolver: zodResolver(schema) as Resolver,
defaultValues: getDefaulTemplatesFormValues(),
reValidateMode: "onChange",
});
diff --git a/apps/www/components/changelog/callouts.tsx b/apps/www/components/changelog/callouts.tsx
new file mode 100644
index 00000000..af4141a9
--- /dev/null
+++ b/apps/www/components/changelog/callouts.tsx
@@ -0,0 +1,193 @@
+import type { ReactNode } from "react";
+
+type CalloutProps = {
+ children: ReactNode;
+ title?: string;
+};
+
+const variants = {
+ info: {
+ border: "border-l-[#3DC5FA]",
+ bg: "bg-[#3DC5FA]/10",
+ titleColor: "text-[#3DC5FA]",
+ icon: (
+
+ ),
+ },
+ success: {
+ border: "border-l-[#3CEEAE]",
+ bg: "bg-[#3CEEAE]/10",
+ titleColor: "text-[#3CEEAE]",
+ icon: (
+
+ ),
+ },
+ warning: {
+ border: "border-l-[#FFD55D]",
+ bg: "bg-[#FFD55D]/10",
+ titleColor: "text-[#FFD55D]",
+ icon: (
+
+ ),
+ },
+ error: {
+ border: "border-l-[#FB1048]",
+ bg: "bg-[#FB1048]/10",
+ titleColor: "text-[#FB1048]",
+ icon: (
+
+ ),
+ },
+} as const;
+
+type VariantKey = keyof typeof variants;
+
+function Callout({ children, title, variant }: CalloutProps & { variant: VariantKey }) {
+ const v = variants[variant];
+ return (
+
+
{v.icon}
+
+ {title &&
{title}
}
+ {children}
+
+
{changelog.description}
+ {changelog.description && (
+ {changelog.description}
+ )}
{changelog.image && (
@@ -59,7 +71,7 @@ export async function ChangelogGridItem({ className, changelog }: Props) {
"prose-sm md:prose-md prose-strong:text-white/90 prose-code:text-white/80 prose-code:bg-white/10 prose-code:px-2 prose-code:py-1 prose-code:border-white/20 prose-code:rounded-md prose-pre:p-0 prose-pre:m-0 prose-pre:leading-6",
)}
>
-
+ {children}
= {
+ 1: "grid-cols-1",
+ 2: "grid-cols-2",
+ 3: "grid-cols-3",
+ 4: "grid-cols-4",
+ };
+ return {children}
;
+}
+
+// Rewrite relative links (e.g. /platform/instances/overview) to absolute docs URLs
+function ChangelogAnchor({ href, ...props }: AnchorHTMLAttributes) {
+ const resolvedHref = href?.startsWith("/") ? `https://unkey.com/docs${href}` : href;
+ return (
+
+ );
+}
+
+// Use the marketing site's Frame with a default size, since it requires the size prop
+function ChangelogFrame({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Mintlify MDX uses and as children of and
+const Tab = (Tabs as any).Item;
+const Step = (Steps as any).Item;
+
+export const changelogMdxComponents = {
+ // Base HTML element overrides from the marketing site
+ ...MdxComponents,
+
+ // Override the default anchor to rewrite relative paths to absolute docs URLs
+ a: ChangelogAnchor,
+
+ Mermaid,
+ Frame: ChangelogFrame,
+
+ // Callout variants — built on the marketing site's Alert component
+ Note,
+ Info,
+ Tip,
+ Check,
+ Warning,
+ Danger,
+
+ // Mintlify layout & content components
+ Card,
+ CardGroup,
+ Accordion,
+ Tabs,
+ Tab,
+ Steps,
+ Step,
+ Badge,
+ CodeGroup,
+ Columns,
+} as Record;
diff --git a/apps/www/components/changelog/mintlify-wrappers.tsx b/apps/www/components/changelog/mintlify-wrappers.tsx
new file mode 100644
index 00000000..3f5f76cd
--- /dev/null
+++ b/apps/www/components/changelog/mintlify-wrappers.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+// Re-export Mintlify components as client components so they can be safely
+// imported into a server module and passed to MDXRemote as component references.
+export {
+ Accordion,
+ Badge,
+ Card,
+ Check,
+ CodeGroup,
+ Columns,
+ Danger,
+ Info,
+ Note,
+ Steps,
+ Tabs,
+ Tip,
+ Warning,
+} from "@mintlify/components";
diff --git a/apps/www/components/frame.tsx b/apps/www/components/frame.tsx
index 74c1b936..75354c5b 100644
--- a/apps/www/components/frame.tsx
+++ b/apps/www/components/frame.tsx
@@ -1,4 +1,5 @@
import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
export function Frame({
as: Component = "div",
@@ -9,7 +10,7 @@ export function Frame({
as?: any;
size: "sm" | "md" | "lg";
className?: string;
- children: React.ReactNode;
+ children: ReactNode;
}) {
return (
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
new file mode 100644
index 00000000..94487261
--- /dev/null
+++ b/apps/www/components/mdx-components.tsx
@@ -0,0 +1,81 @@
+import { ImageZoom } from "fumadocs-ui/components/image-zoom";
+import type { ImageProps } from "next/image";
+import Image from "next/image";
+import type { DetailedHTMLProps, ImgHTMLAttributes, JSX } from "react";
+import { BlogCodeBlock, BlogCodeBlockSingle } from "./blog/blog-code-block";
+import { BlogList, BlogListItem, BlogListNumbered, type BlogListProps } from "./blog/blog-list";
+import { BlogQuote, type BlogQuoteProps } from "./blog/blog-quote";
+import { Alert } from "./ui/alert/alert";
+
+export const MdxComponents = {
+ Image: (props: ImageProps) =>
+ props.width || props.fill ? (
+
+ ) : (
+
+ ),
+ ImageZoom: (props: ImageProps) => ,
+ img: (props: DetailedHTMLProps, HTMLImageElement>) => (
+ ![{props.alt]()
+ ),
+ Callout: Alert,
+ th: (props: JSX.IntrinsicAttributes) => (
+ |
+ ),
+ tr: (props: JSX.IntrinsicAttributes) => (
+ |
+ ),
+ td: (props: JSX.IntrinsicAttributes) => (
+ |
+ ),
+ a: (props: JSX.IntrinsicAttributes) => (
+
+ ),
+ blockquote: (props: BlogQuoteProps) => BlogQuote(props),
+ BlogQuote: (props: BlogQuoteProps) => BlogQuote(props),
+ ol: (props: BlogListProps) => BlogListNumbered(props),
+ ul: (props: BlogListProps) => BlogList(props),
+ li: (props: BlogListProps) => BlogListItem(props),
+ h1: (props: any) => (
+
+ ),
+ h2: (props: JSX.IntrinsicAttributes) => (
+
+ ),
+ h3: (props: JSX.IntrinsicAttributes) => (
+
+ ),
+ h4: (props: JSX.IntrinsicAttributes) => (
+
+ ),
+ p: (props: JSX.IntrinsicAttributes) => (
+
+ ),
+ code: (props: JSX.IntrinsicAttributes) => (
+ 
- ),
- Callout: Alert,
- th: (props: JSX.IntrinsicAttributes) => (
- |
- ),
- tr: (props: JSX.IntrinsicAttributes) => (
- |
- ),
- td: (props: JSX.IntrinsicAttributes) => (
- |
- ),
- a: (props: JSX.IntrinsicAttributes) => (
-
- ),
- blockquote: (props: BlogQuoteProps) => BlogQuote(props),
- BlogQuote: (props: BlogQuoteProps) => BlogQuote(props),
- ol: (props: BlogListProps) => BlogListNumbered(props),
- ul: (props: BlogListProps) => BlogList(props),
- li: (props: BlogListProps) => BlogListItem(props),
- h1: (props: any) => (
-
- ),
- h2: (props: JSX.IntrinsicAttributes) => (
-
- ),
- h3: (props: JSX.IntrinsicAttributes) => (
-
- ),
- h4: (props: JSX.IntrinsicAttributes) => (
-
- ),
- p: (props: JSX.IntrinsicAttributes) => (
-
- ),
- code: (props: JSX.IntrinsicAttributes) => (
-