Implement multi-site setup

app/[domain]/layout.tsx

@@ -0,0 +1,12 @@
+import Nav from "#/ui/home/nav";
+import Footer from "#/ui/home/footer";
+
+export default function CustomDomainLayout(props) {
+  return (
+    <div className="flex min-h-screen flex-col justify-between">
+      <Nav />
+      {props.children}
+      <Footer />
+    </div>
+  );
+}

app/[domain]/page.tsx

@@ -0,0 +1,44 @@
+import prisma from "@/lib/prisma";
+import PlaceholderContent from "./placeholder";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { domain: string };
+}) {
+  const title = `${params.domain.toUpperCase()} - A Dub.sh Custom Domain`;
+  const description = `${params.domain.toUpperCase()} is a custom domain on Dub - an open-source link management tool for modern marketing teams to create, share, and track short links.`;
+
+  return {
+    title,
+    description,
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      creator: "@dubdotsh",
+    },
+  };
+}
+
+export async function generateStaticParams() {
+  const domains =
+    process.env.VERCEL_ENV === "production"
+      ? await prisma.domain.findMany({
+          where: {
+            verified: true,
+            target: null,
+          },
+          select: {
+            slug: true,
+          },
+        })
+      : [];
+  return domains.map(({ slug: domain }) => ({
+    domain,
+  }));
+}
+
+export default function CustomDomainPage() {
+  return <PlaceholderContent />;
+}

pages/_root/[domain].tsx → app/[domain]/placeholder.tsx

@@ -1,14 +1,16 @@
-import prisma from "@/lib/prisma";
+"use client";
+
 import Background from "@/components/shared/background";
-import Meta from "@/components/layout/meta";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { useDebounce } from "use-debounce";
 import { STAGGER_CHILD_VARIANTS } from "@/lib/constants";
 import Spline from "@splinetool/react-spline";
 import { InlineSnippet } from "@/components/app/domains/domain-configuration";
+import { useParams } from "next/navigation";
 
-export default function Placeholder({ domain }: { domain: string }) {
+export default function PlaceholderContent() {
+  const { domain } = useParams() as { domain: string };
   const [loading, setLoading] = useState(true);
   const onLoad = () => {
     setLoading(false);
@@ -20,10 +22,6 @@ export default function Placeholder({ domain }: { domain: string }) {
 
   return (
     <div className="flex h-screen flex-col items-center">
-      <Meta
-        title={`${domain.toUpperCase()} - A Dub Custom Domain`}
-        description={`${domain.toUpperCase()} is a custom domain on Dub - an open-source link management tool for modern marketing teams to create, share, and track short links.`}
-      />
       <Background />
       <motion.div
         className="z-10"
@@ -87,33 +85,3 @@ export default function Placeholder({ domain }: { domain: string }) {
     </div>
   );
 }
-
-export const getStaticPaths = async () => {
-  const domains = process.env.VERCEL_ENV === "production" ? await prisma.domain.findMany({
-    where: {
-      verified: true,
-      target: null,
-    },
-    select: {
-      slug: true,
-    },
-  }) : []
-
-  return {
-    paths: domains.map(({ slug: domain }) => ({
-      params: {
-        domain,
-      },
-    })),
-    fallback: "blocking",
-  };
-};
-
-export const getStaticProps = async (context) => {
-  const { domain } = context.params;
-  return {
-    props: {
-      domain,
-    },
-  };
-};

app/[domain]/stats/[key]/page.tsx

@@ -0,0 +1,52 @@
+import { notFound } from "next/navigation";
+import { getLinkViaEdge } from "@/lib/planetscale";
+import Stats from "#/ui/stats";
+
+export const runtime = "edge";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { domain: string; key: string };
+}) {
+  const data = await getLinkViaEdge(params.domain, params.key);
+
+  if (!data || !data.publicStats) {
+    return;
+  }
+
+  const title = `Stats for ${params.domain}/${params.key} - Dub`;
+  const description = `Stats page for ${params.domain}/${params.key}, which redirects to ${data.url}.`;
+  const image = `https://${params.domain}/api/og/stats?domain=${params.domain}&key=${params.key}`;
+
+  return {
+    title,
+    description,
+    image,
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      image,
+      creator: "@dubdotsh",
+    },
+  };
+}
+
+export default async function StatsPage({
+  params,
+}: {
+  params: { domain: string; key: string };
+}) {
+  const data = await getLinkViaEdge(params.domain, params.key);
+
+  if (!data || !data.publicStats) {
+    notFound();
+  }
+
+  return (
+    <div className="bg-gray-50">
+      <Stats staticDomain={params.domain} />
+    </div>
+  );
+}

app/dub.sh/changelog/[slug]/page.tsx

@@ -0,0 +1,155 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { allChangelogPosts } from "contentlayer/generated";
+import { MDX } from "#/ui/blog/mdx";
+import Link from "next/link";
+import { formatDate } from "@/lib/utils";
+import { getBlurDataURL } from "@/lib/images";
+import BlurImage from "#/ui/blur-image";
+import Author from "#/ui/blog/author";
+import { Facebook, LinkedIn, Twitter } from "@/components/shared/icons";
+
+export async function generateStaticParams() {
+  return allChangelogPosts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata | undefined> {
+  const post = allChangelogPosts.find((post) => post.slug === params.slug);
+  if (!post) {
+    return;
+  }
+
+  const {
+    title,
+    publishedAt: publishedTime,
+    summary: description,
+    image,
+    slug,
+  } = post;
+
+  return {
+    title: `${title} - Dub Changelog`,
+    description,
+    openGraph: {
+      title: `${title} - Dub Changelog`,
+      description,
+      type: "article",
+      publishedTime,
+      url: `https://dub.sh/changelog/${slug}`,
+      images: [
+        {
+          url: image,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [image],
+    },
+  };
+}
+
+export default async function ChangelogPost({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const post = allChangelogPosts.find((post) => post.slug === params.slug);
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className="mx-auto my-20 grid max-w-screen-xl md:grid-cols-4 md:px-20">
+      <div className="sticky top-10 hidden self-start md:col-span-1 md:block">
+        <Link
+          href="/changelog"
+          className="text-sm text-gray-500 transition-colors hover:text-gray-800"
+        >
+          ← Back to Changelog
+        </Link>
+      </div>
+      <div className="flex flex-col space-y-8 md:col-span-3">
+        <div className="mx-5 grid gap-5 md:mx-0">
+          <div className="flex flex-col">
+            <Link
+              href="/changelog"
+              className="my-5 text-sm text-gray-500 md:hidden"
+            >
+              ← Back to Changelog
+            </Link>
+            <time
+              dateTime={post.publishedAt}
+              className="flex items-center text-sm text-gray-500 md:text-base"
+            >
+              {formatDate(post.publishedAt)}
+            </time>
+          </div>
+          <h1 className="font-display text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+            {post.title}
+          </h1>
+        </div>
+        <BlurImage
+          src={post.image}
+          alt={post.title}
+          width={1200}
+          height={900}
+          priority // since it's above the fold
+          placeholder="blur"
+          blurDataURL={await getBlurDataURL(post.image!)}
+          className="border border-gray-100 md:rounded-2xl"
+        />
+        <div className="mx-5 mb-10 flex items-center justify-between md:mx-0">
+          {/* @ts-expect-error Async Server Component */}
+          <Author username={post.author} />
+          <div className="flex items-center space-x-6">
+            <Link
+              href={`https://twitter.com/intent/tweet?text=${post.title}&url=https://dub.sh/changelog/${post.slug}&via=${post.author}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-all hover:scale-110"
+            >
+              <Twitter className="h-6 w-6" />
+            </Link>
+            <Link
+              href={`
+            http://www.linkedin.com/shareArticle?mini=true&url=https://dub.sh/changelog/${post.slug}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-all hover:scale-110"
+            >
+              <LinkedIn className="h-6 w-6" fill="black" />
+            </Link>
+            <Link
+              href={`https://www.facebook.com/sharer/sharer.php?u=https://dub.sh/changelog/${post.slug}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-all hover:scale-110"
+            >
+              <Facebook className="h-6 w-6" fill="black" />
+            </Link>
+          </div>
+        </div>
+        <MDX code={post.body.code} />
+        <div className="mt-10 flex justify-end border-t border-gray-200 pt-5">
+          <Link
+            href={`https://github.com/steven-tey/dub/blob/main/posts/changelog/${params.slug}.mdx`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-gray-500 transition-colors hover:text-gray-800"
+          >
+            <p>Found a typo? Edit this page →</p>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}