@coralreefventures/site 0.1.0

package/src/page/Page.module.css

@@ -0,0 +1,95 @@
+/* The marketing pages' type scale, applied to Mantine's Title and Text (and to plain elements in server pages). */
+
+.display {
+  margin: 0;
+  font-size: 52px;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+
+  @media (max-width: 48em) {
+    font-size: 34px;
+  }
+}
+
+.title {
+  composes: display;
+  font-size: 48px;
+}
+
+.lead {
+  margin: 20px 0 0;
+  max-width: 50rem;
+  font-size: 20px;
+  line-height: 1.5;
+  color: var(--site-muted);
+
+  @media (max-width: 48em) {
+    font-size: 18px;
+  }
+}
+
+.h2 {
+  margin: 0;
+  font-size: 30px;
+  line-height: 1.25;
+  text-wrap: balance;
+
+  @media (max-width: 48em) {
+    font-size: 26px;
+  }
+}
+
+.h3 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.subhead {
+  margin: 12px 0 0;
+  max-width: 50rem;
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.55;
+  color: var(--site-muted);
+}
+
+.body {
+  margin: 8px 0 0;
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.6;
+  color: var(--site-muted);
+}
+
+.small {
+  margin: 0;
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1.55;
+  color: var(--site-muted);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+/* Hero buttons: Mantine's md height with a 15 px label, so the wireframe's pair fits on one row beside a screen. */
+.heroButton {
+  padding-inline: 20px;
+  font-size: 15px;
+}
+
+.card {
+  padding: 24px;
+  border: 1px solid var(--site-border);
+  border-radius: var(--mantine-radius-lg);
+  background: var(--mantine-color-white);
+}
+
+.eyebrow {
+  margin: 0 0 6px;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--site-muted);
+}

package/src/shell/Section.module.css

@@ -0,0 +1,52 @@
+.section {
+  padding-block: var(--site-section-space);
+  border-bottom: 1px solid var(--site-border);
+
+  &[data-tone="band"] {
+    background: var(--site-paper);
+  }
+
+  &[data-size="hero"] {
+    padding-block: calc(var(--site-section-space) * 0.9) var(--site-section-space);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.container {
+  max-width: var(--site-max-width);
+  margin-inline: auto;
+  padding-inline: var(--site-gutter);
+  box-sizing: border-box;
+}
+
+.text,
+.media {
+  min-width: 0;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 48px;
+  align-items: center;
+
+  &[data-align="start"] {
+    align-items: start;
+  }
+
+  &[data-media-first] .media {
+    order: -1;
+  }
+
+  @media (max-width: 62em) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 32px;
+
+    &[data-media-first] .media {
+      order: 0;
+    }
+  }
+}

package/src/shell/Section.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+import classes from "./Section.module.css";
+
+type SectionProps = {
+  children: ReactNode;
+  /** `band` is the tinted background the pages alternate with white. */
+  tone?: "plain" | "band";
+  /** `hero` is the first section of a page, with more space above. */
+  size?: "hero" | "default";
+  /** The id of the section's heading, which names it for assistive technology. */
+  labelledBy?: string;
+};
+
+/** A full-width band with the page container (`--site-max-width` wide with a `--site-gutter` either side). */
+export const Section = ({ children, tone = "plain", size = "default", labelledBy }: SectionProps) => (
+  <section className={classes.section} data-tone={tone} data-size={size} aria-labelledby={labelledBy}>
+    <div className={classes.container}>{children}</div>
+  </section>
+);
+
+/** Two columns that stack on phones and tablets. `mediaFirst` puts the media on the left from md up. */
+export const Split = ({
+  children,
+  media,
+  mediaFirst = false,
+  align = "center",
+}: {
+  children: ReactNode;
+  media: ReactNode;
+  mediaFirst?: boolean;
+  align?: "center" | "start";
+}) => (
+  <div className={classes.split} data-media-first={mediaFirst || undefined} data-align={align}>
+    <div className={classes.text}>{children}</div>
+    <div className={classes.media}>{media}</div>
+  </div>
+);

package/src/shell/SiteFooter.module.css

@@ -0,0 +1,34 @@
+.footer {
+  border-top: 1px solid var(--site-border);
+  background: var(--mantine-color-white);
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
+  gap: 16px 48px;
+  max-width: var(--site-max-width);
+  margin-inline: auto;
+  padding: 32px var(--site-gutter) 48px;
+  box-sizing: border-box;
+  font-size: var(--mantine-font-size-xs);
+  line-height: 1.6;
+  color: var(--site-muted);
+
+  @media (max-width: 48em) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  & p {
+    margin: 0;
+  }
+
+  & a:not([class]) {
+    color: var(--site-muted);
+    text-decoration-thickness: 1px;
+  }
+
+  & a:not([class]):hover {
+    color: var(--site-text);
+  }
+}

package/src/shell/SiteFooter.tsx

@@ -0,0 +1,31 @@
+import type { SiteConfig } from "../config";
+import classes from "./SiteFooter.module.css";
+
+const list = new Intl.ListFormat("en-US", { type: "conjunction" });
+
+/**
+ * The footer: who makes the product, its links, the family's no-trackers line, and the trademark disclaimer for the
+ * vendors the site names. A server component, like the header.
+ */
+export const SiteFooter = ({ site }: { site: SiteConfig }) => (
+  <footer className={classes.footer}>
+    <div className={classes.inner}>
+      <p className={classes.maker}>{site.footer.maker}</p>
+      <p className={classes.links}>
+        {site.footer.links.map((link) => (
+          <span key={link.href}>
+            <a href={link.href}>{link.label}</a> ·{" "}
+          </span>
+        ))}
+        No trackers
+        {site.footer.trademarks.length > 0 && (
+          <>
+            {" "}
+            · {list.format(site.footer.trademarks)} are trademarks of their owners; {site.name} is not affiliated with
+            them
+          </>
+        )}
+      </p>
+    </div>
+  </footer>
+);

package/src/shell/SiteFrame.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+import type { SiteConfig } from "../config";
+import { SiteFooter } from "./SiteFooter";
+import { SiteHeader } from "./SiteHeader";
+
+/**
+ * Every page's frame: skip link, header with the page's section marked current, main, and footer. Pages render it
+ * themselves because a layout cannot know which section is current without a client component.
+ */
+export const SiteFrame = <Key extends string>({
+  site,
+  active,
+  children,
+}: {
+  site: SiteConfig<Key>;
+  active?: Key | undefined;
+  children: ReactNode;
+}) => (
+  <>
+    <a href="#main" className="skip-link">
+      Skip to content
+    </a>
+    <SiteHeader site={site} active={active} />
+    <main id="main">{children}</main>
+    <SiteFooter site={site} />
+  </>
+);

package/src/shell/SiteHeader.module.css

@@ -0,0 +1,143 @@
+/*
+ * Colors come from the theme's primary scale (--mantine-primary-color-*), so the header is the product's color
+ * without naming it; the shadow under the folded menu is the site's --site-shadow, a tint of its darkest color.
+ */
+.header {
+  position: relative;
+  border-bottom: 1px solid var(--site-border);
+  background: var(--mantine-color-white);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  max-width: var(--site-max-width);
+  min-height: 64px;
+  margin-inline: auto;
+  padding-inline: var(--site-gutter);
+  box-sizing: border-box;
+}
+
+.home {
+  display: inline-flex;
+  flex: none;
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  gap: 4px;
+
+  @media (max-width: 62em) {
+    display: none;
+  }
+}
+
+.link {
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1.4;
+  color: var(--site-text);
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--mantine-primary-color-0);
+  }
+
+  &[aria-current="page"] {
+    background: var(--mantine-primary-color-0);
+    font-weight: 700;
+  }
+}
+
+.actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  margin-inline-start: auto;
+}
+
+/* Matches Mantine's filled Button at size sm, which the header cannot use (it is a client component). */
+.primary {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding-inline: 16px;
+  border-radius: var(--mantine-radius-default);
+  background: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+/* An action that leaves the bar on narrow screens; the folded menu lists it instead. */
+@media (max-width: 62em) {
+  .actions [data-hide-below="md"] {
+    display: none;
+  }
+}
+
+@media (max-width: 36em) {
+  .actions [data-hide-below="sm"] {
+    display: none;
+  }
+}
+
+.menu {
+  display: none;
+
+  @media (max-width: 62em) {
+    display: block;
+  }
+}
+
+.menuButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--mantine-radius-default);
+  color: var(--site-text);
+  cursor: pointer;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--mantine-primary-color-0);
+  }
+}
+
+.menuPanel {
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px var(--site-gutter) 16px;
+  border-bottom: 1px solid var(--site-border);
+  background: var(--mantine-color-white);
+  box-shadow: 0 8px 16px var(--site-shadow, rgb(0 0 0 / 8%));
+
+  & .link {
+    padding: 10px 8px;
+    font-size: var(--mantine-font-size-md);
+  }
+}

package/src/shell/SiteHeader.tsx

@@ -0,0 +1,59 @@
+import type { HeaderAction, SiteConfig } from "../config";
+import classes from "./SiteHeader.module.css";
+
+const links = (site: SiteConfig, active: string | undefined) =>
+  site.nav.map((item) => (
+    <a key={item.key} href={item.href} className={classes.link} aria-current={item.key === active ? "page" : undefined}>
+      {item.label}
+    </a>
+  ));
+
+const action = ({ label, href, kind, hideBelow }: HeaderAction) => (
+  <a key={href} href={href} className={kind === "primary" ? classes.primary : classes.link} data-hide-below={hideBelow}>
+    {label}
+  </a>
+);
+
+/**
+ * The header: lockup, the sections, and the actions. A server component with plain links, so a page that ships no
+ * client code can carry it; below the md breakpoint the sections fold into a <details> menu, which needs no script,
+ * and any action hidden at some width is listed there too.
+ */
+export const SiteHeader = <Key extends string>({
+  site,
+  active,
+}: {
+  site: SiteConfig<Key>;
+  active?: Key | undefined;
+}) => (
+  <header className={classes.header}>
+    <div className={classes.inner}>
+      <a href="/" className={classes.home}>
+        {site.lockup}
+      </a>
+      <nav aria-label="Main" className={classes.nav}>
+        {links(site, active)}
+      </nav>
+      <div className={classes.actions}>
+        {site.actions.map(action)}
+        <details className={classes.menu}>
+          <summary className={classes.menuButton} aria-label="Menu">
+            <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
+              <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+          </summary>
+          <nav aria-label="Main" className={classes.menuPanel}>
+            {links(site, active)}
+            {site.actions
+              .filter((item) => item.hideBelow !== undefined)
+              .map((item) => (
+                <a key={item.href} href={item.href} className={classes.link}>
+                  {item.label}
+                </a>
+              ))}
+          </nav>
+        </details>
+      </div>
+    </div>
+  </header>
+);

package/src/social-card.tsx

@@ -0,0 +1,126 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { ImageResponse } from "next/og";
+
+import { type Card, cardSegments, socialCardSize } from "./cards";
+import type { SiteConfig } from "./config";
+
+/*
+ * A page's social card: 1200 × 630, the brand's ground, the product's mark and wordmark, the headline, one sentence,
+ * and the domain in the accent, drawn by next/og at build (the product's app/og/[...card]/route.tsx).
+ */
+
+const weights = [400, 600, 700] as const;
+const fontCache = path.join(process.cwd(), ".next", "cache", "coral-reef", "fonts");
+
+// next/og needs TrueType; Google Fonts serves it to clients that are not browsers. Kept between builds with the
+// rest of .next/cache.
+const loadFont = async (family: string, weight: number) => {
+  const slug = family.toLowerCase().replaceAll(" ", "-");
+  const file = path.join(fontCache, `${slug}-${weight}.ttf`);
+  const cached = await readFile(file).catch(() => undefined);
+  if (cached) {
+    return cached;
+  }
+  const query = family.replaceAll(" ", "+");
+  const css = await (await fetch(`https://fonts.googleapis.com/css2?family=${query}:wght@${weight}`)).text();
+  const url = /src:\s*url\(([^)]+\.ttf)\)/.exec(css)?.[1];
+  if (!url) {
+    throw new Error(`Google Fonts returned no TrueType ${family} ${weight}`);
+  }
+  const data = Buffer.from(await (await fetch(url)).arrayBuffer());
+  await mkdir(fontCache, { recursive: true });
+  await writeFile(file, data);
+  return data;
+};
+
+type Font = { name: string; data: Buffer; weight: (typeof weights)[number]; style: "normal" };
+const fonts = new Map<string, Promise<Font[]>>();
+
+const loadFonts = (family: string) => {
+  let loading = fonts.get(family);
+  if (!loading) {
+    loading = Promise.all(
+      weights.map(async (weight) => ({
+        name: family,
+        data: await loadFont(family, weight),
+        weight,
+        style: "normal" as const,
+      })),
+    );
+    fonts.set(family, loading);
+  }
+  return loading;
+};
+
+/** The card's markup, which next/og draws; a function of its own so a test can read it without a renderer. */
+export const socialCardElement = (site: SiteConfig, { headline, sentence }: Card) => {
+  const {
+    background,
+    text,
+    muted,
+    accent,
+    mark,
+    domain = new URL(site.url).host,
+    font = "Noto Sans",
+  } = site.socialCard;
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        padding: "96px 96px 64px",
+        background,
+        fontFamily: font,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
+        {mark}
+        <div style={{ fontSize: 60, fontWeight: 700, letterSpacing: -0.6, color: text }}>{site.name}</div>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", marginTop: "auto" }}>
+        <div
+          style={{ maxWidth: 920, fontSize: 52, fontWeight: 700, lineHeight: 1.25, letterSpacing: -0.5, color: text }}
+        >
+          {headline}
+        </div>
+        {sentence && (
+          <div style={{ marginTop: 20, fontSize: 30, lineHeight: 1.35, color: muted, opacity: 0.85 }}>{sentence}</div>
+        )}
+        <div style={{ marginTop: 40, fontSize: 24, fontWeight: 600, color: accent }}>{domain}</div>
+      </div>
+    </div>
+  );
+};
+
+/** The card as a PNG response. */
+export const socialCard = async (site: SiteConfig, card: Card) =>
+  new ImageResponse(socialCardElement(site, card), {
+    ...socialCardSize,
+    fonts: await loadFonts(site.socialCard.font ?? "Noto Sans"),
+  });
+
+/**
+ * The two exports a static route needs to write every page's card at build (/og/pricing.png): the product's
+ * route.tsx keeps `dynamic = "force-static"` and `dynamicParams = false` as literals, which Next reads statically,
+ * and takes these from here. `more` adds cards for pages outside the config, such as docs pages titled at build.
+ */
+export const socialCardRoute = (site: SiteConfig, more?: () => Promise<readonly (readonly [string, Card])[]>) => {
+  const allCards = async (): Promise<Map<string, Card>> => {
+    const entries: (readonly [string, Card])[] = [...Object.entries(site.cards), ...((await more?.()) ?? [])];
+    return new Map(entries.map(([pagePath, card]) => [cardSegments(pagePath).join("/"), card]));
+  };
+  return {
+    generateStaticParams: async () => [...(await allCards()).keys()].map((key) => ({ card: key.split("/") })),
+    GET: async (_request: Request, { params }: { params: Promise<{ card: string[] }> }) => {
+      const card = (await allCards()).get((await params).card.join("/"));
+      if (!card) {
+        return new Response("Not found", { status: 404 });
+      }
+      return socialCard(site, card);
+    },
+  };
+};

package/src/testing/index.ts

@@ -0,0 +1,67 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+
+/**
+ * The rule both sites hold: the frame every page shares renders as server components only, with no client
+ * components, so a page that needs no script ships none. `clientReach` walks an entry's imports within the site and
+ * names each "use client" module and each import of a package that is one. A product's test asserts it is empty
+ * for the root layout, the 404 page and anything else that must stay script-free, and not empty for a page that
+ * uses Mantine, so the walk is known to see.
+ */
+export const clientPackages = [/^@mantine\//, /^next\/link$/, /^next\/image$/, /^next\/script$/, /^next\/dynamic$/];
+
+export type ClientReachOptions = {
+  /** The app's root, which the alias resolves against. */
+  root: string;
+  /** The import alias for the root; `@/` as both sites have it. */
+  alias?: string;
+};
+
+const resolveLocal = (specifier: string, from: string, { root, alias = "@/" }: ClientReachOptions) => {
+  const base = specifier.startsWith(alias)
+    ? path.join(root, specifier.slice(alias.length))
+    : path.resolve(path.dirname(from), specifier);
+  const stripped = base.replace(/\.tsx?$/, "");
+  const candidates = [
+    base,
+    `${stripped}.ts`,
+    `${stripped}.tsx`,
+    path.join(base, "index.ts"),
+    path.join(base, "index.tsx"),
+  ];
+  return candidates.find((candidate) => existsSync(candidate) && /\.tsx?$/.test(candidate));
+};
+
+/** Every module specifier a file imports, static or dynamic. */
+export const importsOf = (file: string) =>
+  [...readFileSync(file, "utf8").matchAll(/(?:from\s+|import\s*\(?\s*)["']([^"']+)["']/g)].map(
+    (match) => match[1] ?? "",
+  );
+
+export const isClientModule = (file: string) => /^\s*["']use client["']/.test(readFileSync(file, "utf8"));
+
+/** Every problem reachable from `entry`: a client module, or an import of a client package. */
+export const clientReach = (entry: string, options: ClientReachOptions): string[] => {
+  const problems: string[] = [];
+  const seen = new Set<string>();
+  const visit = (file: string) => {
+    seen.add(file);
+    const name = path.relative(options.root, file);
+    if (isClientModule(file)) {
+      problems.push(`${name} is a client module`);
+    }
+    const specifiers = importsOf(file).filter((specifier) => !specifier.endsWith(".css"));
+    const clientImports = specifiers.filter((specifier) => clientPackages.some((pattern) => pattern.test(specifier)));
+    problems.push(...clientImports.map((specifier) => `${name} imports ${specifier}`));
+    const alias = options.alias ?? "@/";
+    const local = specifiers
+      .filter((specifier) => specifier.startsWith(".") || specifier.startsWith(alias))
+      .map((specifier) => resolveLocal(specifier, file, options))
+      .filter((target): target is string => target !== undefined && !seen.has(target));
+    for (const target of local) {
+      visit(target);
+    }
+  };
+  visit(entry);
+  return problems;
+};