Merge pull request #425 from ghostty-org/app-router

App Router

Author: mitchellh

AGENTS.md

@@ -0,0 +1,11 @@
+# Ghostty Website
+
+## Basics
+
+- Verify all changes with `npm run build`
+- Lint all code with `npm run lint` and fix all issues including warnings
+- The site should be fully static, no server-side rendering, functions, etc.
+
+## Code Style
+
+- All functions and top-level constants should be documented with comments

src/pages/404Page.module.css src/app/404Page.module.csssrc/pages/404Page.module.css renamed to src/app/404Page.module.css

@@ -0,0 +1,100 @@
+"use client";
+
+import AnimatedTerminal from "@/components/animated-terminal";
+import GridContainer from "@/components/grid-container";
+import { ButtonLink } from "@/components/link";
+import { P } from "@/components/text";
+import type { TerminalFontSize } from "@/components/terminal";
+import type { TerminalsMap } from "./terminal-data";
+import { useEffect, useState } from "react";
+import s from "./home-content.module.css";
+
+interface HomeClientProps {
+  terminalData: TerminalsMap;
+}
+
+/** Tracks the current viewport size for responsive terminal sizing. */
+function useWindowSize() {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    function updateSize() {
+      setWidth(window.innerWidth);
+      setHeight(window.innerHeight);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return [width, height];
+}
+
+/** Renders the animated terminal hero and action links for the homepage. */
+export default function HomeClient({ terminalData }: HomeClientProps) {
+  const animationFrames = Object.keys(terminalData)
+    .filter((k) => {
+      return k.startsWith("home/animation_frames");
+    })
+    .map((k) => terminalData[k]);
+
+  // Calculate what font size we should use based off of
+  // Width & Height considerations. We will pick the smaller
+  // of the two values.
+  const [windowWidth, windowHeight] = useWindowSize();
+  const widthSize =
+    windowWidth > 1100 ? "small" : windowWidth > 674 ? "tiny" : "xtiny";
+  const heightSize =
+    windowHeight > 900 ? "small" : windowHeight > 750 ? "tiny" : "xtiny";
+  let fontSize: TerminalFontSize = "small";
+  const sizePriority = ["xtiny", "tiny", "small"];
+  for (const size of sizePriority) {
+    if (widthSize === size || heightSize === size) {
+      fontSize = size;
+      break;
+    }
+  }
+
+  return (
+    <main className={s.homePage}>
+      {/* Don't render the content until the window width has been
+        calculated, else there will be a flash from the smallest size
+        of the terminal to the true calculated size */}
+      {windowWidth > 0 && (
+        <>
+          <section className={s.terminalWrapper} aria-hidden={true}>
+            <AnimatedTerminal
+              title={"👻 Ghostty"}
+              fontSize={fontSize}
+              whitespacePadding={
+                windowWidth > 950 ? 20 : windowWidth > 850 ? 10 : 0
+              }
+              className={s.animatedTerminal}
+              columns={100}
+              rows={41}
+              frames={animationFrames}
+              frameLengthMs={31}
+            />
+          </section>
+
+          <GridContainer>
+            <P weight="regular" className={s.tagline}>
+              Ghostty is a fast, feature-rich, and cross-platform terminal
+              emulator that uses platform-native UI and GPU acceleration.
+            </P>
+          </GridContainer>
+
+          <GridContainer className={s.buttonsList}>
+            <ButtonLink href="/download" text="Download" size="large" />
+            <ButtonLink
+              href="/docs"
+              text="Documentation"
+              size="large"
+              theme="neutral"
+            />
+          </GridContainer>
+        </>
+      )}
+    </main>
+  );
+}

src/app/HomeContent.tsx

@@ -0,0 +1,84 @@
+import Breadcrumbs, { type Breadcrumb } from "@/components/breadcrumbs";
+import NavTree, { type NavTreeNode } from "@/components/nav-tree";
+import ScrollToTopButton from "@/components/scroll-to-top";
+import Sidecar from "@/components/sidecar";
+import { H1, P } from "@/components/text";
+import { DOCS_PAGES_ROOT_PATH, GITHUB_REPO_URL } from "@/lib/docs/config";
+import type { DocsPageData } from "@/lib/docs/page";
+import { Pencil } from "lucide-react";
+import s from "./DocsPage.module.css";
+import customMdxStyles from "@/components/custom-mdx/CustomMDX.module.css";
+
+interface DocsPageContentProps {
+  navTreeData: NavTreeNode[];
+  docsPageData: DocsPageData;
+  breadcrumbs: Breadcrumb[];
+}
+
+// DocsPageContent renders the shared docs layout with nav, content, and sidecar.
+export default function DocsPageContent({
+  navTreeData,
+  docsPageData: {
+    title,
+    description,
+    editOnGithubLink,
+    content,
+    relativeFilePath,
+    pageHeaders,
+    hideSidecar,
+  },
+  breadcrumbs,
+}: DocsPageContentProps) {
+  // Calculate the "Edit in Github" link. If it's not provided
+  // in the frontmatter, point to the website repo mdx file.
+  const resolvedEditOnGithubLink = editOnGithubLink
+    ? editOnGithubLink
+    : `${GITHUB_REPO_URL}/edit/main/${relativeFilePath}`;
+
+  return (
+    <div className={s.docsPage}>
+      <div className={s.sidebar}>
+        <div className={s.sidebarContentWrapper}>
+          <NavTree
+            nodeGroups={[
+              {
+                rootPath: DOCS_PAGES_ROOT_PATH,
+                nodes: navTreeData,
+              },
+            ]}
+            className={s.sidebarNavTree}
+          />
+        </div>
+      </div>
+
+      <main className={s.contentWrapper}>
+        <ScrollToTopButton />
+
+        <div className={s.docsContentWrapper}>
+          <div className={s.breadcrumbsBar}>
+            <Breadcrumbs breadcrumbs={breadcrumbs} />
+          </div>
+          <div className={s.heading}>
+            <H1>{title}</H1>
+            <P className={s.description} weight="regular">
+              {description}
+            </P>
+          </div>
+          <div className={customMdxStyles.customMDX}>{content}</div>
+          <br />
+          <div className={s.editOnGithub}>
+            <a href={resolvedEditOnGithubLink}>
+              Edit on GitHub <Pencil size={14} />
+            </a>
+          </div>
+        </div>
+
+        <Sidecar
+          hidden={hideSidecar}
+          className={s.sidecar}
+          items={pageHeaders}
+        />
+      </main>
+    </div>
+  );
+}

…pages/docs/[...path]/DocsPage.module.css src/app/docs/DocsPage.module.csssrc/pages/docs/[...path]/DocsPage.module.css renamed to src/app/docs/DocsPage.module.css src/pages/docs/[...path]/DocsPage.module.css renamed to src/app/docs/DocsPage.module.css

@@ -0,0 +1,108 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import type { Breadcrumb } from "@/components/breadcrumbs";
+import type { NavTreeNode } from "@/components/nav-tree";
+import { DOCS_DIRECTORY, DOCS_PAGES_ROOT_PATH } from "@/lib/docs/config";
+import {
+  type DocsPageData,
+  loadAllDocsPageSlugs,
+  loadDocsPage,
+} from "@/lib/docs/page";
+import {
+  docsMetadataTitle,
+  loadDocsNavTreeData,
+  navTreeToBreadcrumbs,
+} from "@/lib/docs/navigation";
+import DocsPageContent from "../DocsPageContent";
+
+interface DocsRouteProps {
+  params: Promise<{ path?: string[] }>;
+}
+
+// Disable runtime fallback routing so unknown docs paths become 404s.
+export const dynamicParams = false;
+
+// normalizePathSegments converts an optional catch-all param into a concrete array.
+function normalizePathSegments(path: string[] | undefined): string[] {
+  return path ?? [];
+}
+
+// toActivePageSlug maps an optional catch-all route to the docs slug used by loaders.
+function toActivePageSlug(path: string[]): string {
+  return path.length === 0 ? "index" : path.join("/");
+}
+
+// isErrorWithCode narrows unknown errors so filesystem codes can be checked safely.
+function isErrorWithCode(err: unknown): err is Error & { code: unknown } {
+  return err instanceof Error && typeof err === "object" && "code" in err;
+}
+
+// loadDocsRouteData loads all data needed to render a docs page and its metadata.
+async function loadDocsRouteData(path: string[]): Promise<{
+  navTreeData: NavTreeNode[];
+  docsPageData: DocsPageData;
+  breadcrumbs: Breadcrumb[];
+}> {
+  const activePageSlug = toActivePageSlug(path);
+  const [navTreeData, docsPageData] = await Promise.all([
+    loadDocsNavTreeData(DOCS_DIRECTORY, activePageSlug),
+    loadDocsPage(DOCS_DIRECTORY, activePageSlug).catch((err: unknown) => {
+      if (isErrorWithCode(err) && err.code === "ENOENT") {
+        notFound();
+      }
+      throw err;
+    }),
+  ]);
+
+  const breadcrumbs = navTreeToBreadcrumbs(
+    "Ghostty Docs",
+    DOCS_PAGES_ROOT_PATH,
+    navTreeData,
+    activePageSlug,
+  );
+
+  return { navTreeData, docsPageData, breadcrumbs };
+}
+
+// generateStaticParams pre-renders the docs index and every nested docs slug.
+export async function generateStaticParams(): Promise<
+  Array<{ path: string[] }>
+> {
+  const docsPageSlugs = await loadAllDocsPageSlugs(DOCS_DIRECTORY);
+  const docsPagePaths = docsPageSlugs
+    .filter((slug) => slug !== "index")
+    .map((slug) => ({ path: slug.split("/") }));
+
+  return [{ path: [] }, ...docsPagePaths];
+}
+
+// generateMetadata builds SEO metadata from the resolved docs page and breadcrumbs.
+export async function generateMetadata({
+  params,
+}: DocsRouteProps): Promise<Metadata> {
+  const { path } = await params;
+  const { docsPageData, breadcrumbs } = await loadDocsRouteData(
+    normalizePathSegments(path),
+  );
+
+  return {
+    title: docsMetadataTitle(breadcrumbs),
+    description: docsPageData.description,
+  };
+}
+
+// DocsPage renders both /docs and /docs/* routes via a single optional catch-all route.
+export default async function DocsPage({ params }: DocsRouteProps) {
+  const { path } = await params;
+  const { navTreeData, docsPageData, breadcrumbs } = await loadDocsRouteData(
+    normalizePathSegments(path),
+  );
+
+  return (
+    <DocsPageContent
+      navTreeData={navTreeData}
+      docsPageData={docsPageData}
+      breadcrumbs={breadcrumbs}
+    />
+  );
+}

src/app/docs/DocsPageContent.tsx

@@ -2,12 +2,14 @@ import { ButtonLink } from "@/components/link";
 import GenericCard from "@/components/generic-card";
 import { CodeXml, Download, Package } from "lucide-react";
 import s from "./DownloadPage.module.css";
-import type { DownloadPageProps } from "./index";
+
+interface ReleaseDownloadPageProps {
+  latestVersion: string;
+}
 
 export default function ReleaseDownloadPage({
   latestVersion,
-  docsNavTree,
-}: DownloadPageProps) {
+}: ReleaseDownloadPageProps) {
   return (
     <div className={s.downloadCards}>
       <GenericCard

src/app/docs/[[...path]]/page.tsx

@@ -2,12 +2,8 @@ import { ButtonLink } from "@/components/link";
 import GenericCard from "@/components/generic-card";
 import { CodeXml, Github, Globe } from "lucide-react";
 import s from "./DownloadPage.module.css";
-import type { DownloadPageProps } from "./index";
 
-export default function TipDownloadPage({
-  latestVersion,
-  docsNavTree,
-}: DownloadPageProps) {
+export default function TipDownloadPage() {
   return (
     <div className={s.downloadCards}>
       <GenericCard