@devdogsuga/newsletter 0.1.0

package/dist/icons.js

@@ -0,0 +1,29 @@
+/**
+ * The footer's social icons: Phosphor regular-weight path data on the 256-unit
+ * grid, kept here rather than taken from `@devdogsuga/og`'s generated set for
+ * two reasons — og carries no Discord mark, and its icons are the bold cut
+ * while a 17px footer glyph wants the regular one.
+ *
+ * They ship as paths so the fill stays the caller's to choose; `iconSvg`
+ * wraps one in a standalone `<svg>` for rasterising or for a data URI.
+ */
+import { PALETTE } from "./theme.js";
+export const SOCIAL_ICON_PATHS = {
+    /** Phosphor `DiscordLogo`, regular. */
+    discord: "M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z",
+    /** Phosphor `InstagramLogo`, regular. */
+    instagram: "M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z",
+    /** Phosphor `GithubLogo`, regular. */
+    github: "M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z",
+    /** Phosphor `Globe`, regular. */
+    globe: "M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z",
+};
+export const SOCIAL_ICON_NAMES = Object.keys(SOCIAL_ICON_PATHS);
+/** A standalone `<svg>` around one icon path, ready to rasterise or inline. */
+export function socialIconSvg(name, fill = PALETTE.ink) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="${fill}"><path d="${SOCIAL_ICON_PATHS[name]}"/></svg>`;
+}
+/** The same icon as an `<img>` source for the page render, where SVG is safe. */
+export function socialIconDataUri(name) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(socialIconSvg(name))}`;
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The browser-safe surface: components, content and tokens, with nothing that
+ * assumes Node. The platform's /changelog pages import from here.
+ *
+ * The export-side surface (react-dom/server, MIME assembly, the cid: image
+ * manifest) lives behind `@devdogsuga/newsletter/export` so bundling a page
+ * never drags a server renderer along.
+ */
+export { ChangelogDocument, ChangelogEmail } from "./components.js";
+export { paintCss } from "./darkmode.js";
+export { DATA_URI_ASSETS, DEVDOGS_LOCKUP, GDGC_UGA, MARK_SIZES, type NewsletterAssets, type RenderContext, } from "./assets.js";
+export { type ChangelogEvent, type ChangelogIssue, ISSUES, issueByVersion, } from "./issues.js";
+export { SOCIAL_ICON_NAMES, socialIconDataUri, socialIconSvg, type SocialIconName, } from "./icons.js";
+export { CSS_VARIABLE_FONTS, EMAIL_FONTS, FONTS_HREF, type FontStacks, KIND, PALETTE, SITE, SOCIAL_LINKS, UGA, } from "./theme.js";
+import { type RenderContext } from "./assets.js";
+/**
+ * The context a platform page renders with: the `next/font` CSS variables the
+ * root layout sets (next/font renames every family it self-hosts, so literal
+ * names would never match) and SVG data-URI image sources.
+ */
+export declare function webRenderContext(): RenderContext;

package/dist/index.js

@@ -0,0 +1,24 @@
+/**
+ * The browser-safe surface: components, content and tokens, with nothing that
+ * assumes Node. The platform's /changelog pages import from here.
+ *
+ * The export-side surface (react-dom/server, MIME assembly, the cid: image
+ * manifest) lives behind `@devdogsuga/newsletter/export` so bundling a page
+ * never drags a server renderer along.
+ */
+export { ChangelogDocument, ChangelogEmail } from "./components.js";
+export { paintCss } from "./darkmode.js";
+export { DATA_URI_ASSETS, DEVDOGS_LOCKUP, GDGC_UGA, MARK_SIZES, } from "./assets.js";
+export { ISSUES, issueByVersion, } from "./issues.js";
+export { SOCIAL_ICON_NAMES, socialIconDataUri, socialIconSvg, } from "./icons.js";
+export { CSS_VARIABLE_FONTS, EMAIL_FONTS, FONTS_HREF, KIND, PALETTE, SITE, SOCIAL_LINKS, UGA, } from "./theme.js";
+import { DATA_URI_ASSETS } from "./assets.js";
+import { CSS_VARIABLE_FONTS } from "./theme.js";
+/**
+ * The context a platform page renders with: the `next/font` CSS variables the
+ * root layout sets (next/font renames every family it self-hosts, so literal
+ * names would never match) and SVG data-URI image sources.
+ */
+export function webRenderContext() {
+    return { fonts: CSS_VARIABLE_FONTS, assets: DATA_URI_ASSETS };
+}

package/dist/issues.d.ts

@@ -0,0 +1,39 @@
+export interface ChangelogEvent {
+    /** The chip label — the calendar's event-type vocabulary. */
+    chip: string;
+    /** The event-type accent from `KIND`. */
+    color: string;
+    title: string;
+    /** Three-letter weekday, uppercase. */
+    dow: string;
+    /** `"Sep 9"` — month then day, split for the stacked date column. */
+    date: string;
+    time: string;
+    loc: string;
+    rsvp: string | null;
+    blurb: string;
+}
+export interface ChangelogIssue {
+    /** Semver, doubling as the URL segment and the export filename. */
+    version: string;
+    term: string;
+    /** The title-bar date, `"Wed · Sep 9"`. */
+    sendLabel: string;
+    /** The prompt line, `"changelog --date 2026-09-09"`. */
+    command: string;
+    /** The email subject line. */
+    title: string;
+    /** Inbox preview text, hidden in the body. */
+    preview: string;
+    tagline: string;
+    intro: string;
+    /** The `##` heading over the hero card, e.g. `"happening_today"`. */
+    featuredLabel: string;
+    featured: ChangelogEvent;
+    /** The hero card's button label. */
+    cta: string;
+    upcoming: ChangelogEvent[];
+    signoff: string;
+}
+export declare const ISSUES: ChangelogIssue[];
+export declare function issueByVersion(version: string): ChangelogIssue | undefined;

package/dist/issues.js

@@ -0,0 +1,146 @@
+/**
+ * The Changelog's content: event data authored in `@devdogsuga/events`'s
+ * meetings (times converted to ET) and the dated sends themselves.
+ *
+ * Issues are versioned with semver — a send is a release. Event copy lives
+ * here rather than in the components so a copy pass before a send touches one
+ * file, and so the platform's archive pages and the exported emails can never
+ * disagree about what an issue said.
+ */
+import { KIND } from "./theme.js";
+const DEV_SESSION_BLURB = "Catch up on workshop materials, meet your teammates for hackathons, get unblocked by focus leads and officers, or just come hang out and get work done.";
+const EVENTS = {
+    interest: {
+        chip: "Interest Meeting",
+        color: KIND.interest,
+        title: "Interest Meeting",
+        dow: "WED",
+        date: "Sep 9",
+        time: "6:00 – 7:00 PM",
+        loc: "DLW 110",
+        rsvp: "https://uga.campuslabs.com/engage/event/12664203",
+        blurb: "Come meet the new leadership team and get the details on all things DevDogs. Returning? Learn what's changing, what's staying the same, and how to get involved this year. Free food, too.",
+    },
+    coldstart: {
+        chip: "Kickoff",
+        color: KIND.workshop,
+        title: "Cold Start",
+        dow: "MON",
+        date: "Sep 14",
+        time: "6:00 – 7:30 PM",
+        loc: "DLW 124",
+        rsvp: "https://uga.campuslabs.com/engage/event/12664196",
+        blurb: "The inaugural meeting for the 2026–2027 year. Get set up to contribute to this year's projects. Plus, a collaborative coding workshop: an introduction to Git, GitHub, and how to contribute to a team project.",
+    },
+    dev1: {
+        chip: "Dev Session",
+        color: KIND.build,
+        title: "Dev Session #1",
+        dow: "WED",
+        date: "Sep 16",
+        time: "6:00 – 7:00 PM",
+        loc: "DLW 124",
+        rsvp: "https://uga.campuslabs.com/engage/event/12664183",
+        blurb: DEV_SESSION_BLURB,
+    },
+    // The three workshop nights have no summary in events yet — these
+    // blurbs are authored from their linked workshop topics; swap in the real
+    // copy once it lands in the meetings config.
+    nextflutter: {
+        chip: "Workshop",
+        color: KIND.workshop,
+        title: "Workshops: Next.js & Flutter",
+        dow: "MON",
+        date: "Sep 21",
+        time: "6:00 – 7:30 PM",
+        loc: "DLW 124",
+        rsvp: null,
+        blurb: "A framework double-header: build for the web with Next.js and go cross-platform with Flutter.",
+    },
+    dev2: {
+        chip: "Dev Session",
+        color: KIND.build,
+        title: "Dev Session #2",
+        dow: "WED",
+        date: "Sep 23",
+        time: "6:00 – 7:00 PM",
+        loc: "DLW 124",
+        rsvp: "https://uga.campuslabs.com/engage/event/12664184",
+        blurb: DEV_SESSION_BLURB,
+    },
+    supabase: {
+        chip: "Workshop",
+        color: KIND.workshop,
+        title: "Workshop: Supabase",
+        dow: "MON",
+        date: "Sep 28",
+        time: "6:00 – 7:30 PM",
+        loc: "DLW 124",
+        rsvp: null,
+        blurb: "Get hands-on with Supabase: Postgres, auth, and realtime data for this year's projects.",
+    },
+    dev3: {
+        chip: "Dev Session",
+        color: KIND.build,
+        title: "Dev Session #3",
+        dow: "WED",
+        date: "Sep 30",
+        time: "6:00 – 7:00 PM",
+        loc: "DLW 124",
+        rsvp: "https://uga.campuslabs.com/engage/event/12664184",
+        blurb: DEV_SESSION_BLURB,
+    },
+    career: {
+        chip: "Workshop",
+        color: KIND.workshop,
+        title: "Workshop: Career Fair Readiness",
+        dow: "MON",
+        date: "Oct 5",
+        time: "6:00 – 8:00 PM",
+        loc: "DLW 110",
+        rsvp: null,
+        blurb: "Get ready for the fall career fair: resume polish, portfolio pointers, and how to talk about what you've built.",
+    },
+};
+export const ISSUES = [
+    {
+        version: "3.0.0",
+        term: "Fall 2026",
+        sendLabel: "Mon · Sep 14",
+        command: "changelog --date 2026-09-14",
+        title: "DevDogs Changelog v3.0.0: Get Started Tonight!",
+        preview: "Tonight at 6: Cold Start. Get set up to build with us this semester.",
+        tagline: "Let's boot up!",
+        intro: "Missed the interest meeting? No problem. Cold Start is the inaugural meeting of the year. Get set up to contribute to this semester's projects, with onboarding we've streamlined so you leave ready to build.",
+        featuredLabel: "happening_tonight",
+        featured: EVENTS.coldstart,
+        cta: "RSVP for Cold Start",
+        upcoming: [
+            EVENTS.dev1,
+            EVENTS.nextflutter,
+            EVENTS.dev2,
+            EVENTS.supabase,
+            EVENTS.dev3,
+            EVENTS.career,
+        ],
+        signoff: "Doors tonight at 6 in DLW 124. Bring a laptop if you have one, and we'll get you set up to ship either way.",
+    },
+    {
+        version: "3.0.1",
+        term: "Fall 2026",
+        sendLabel: "Mon · Sep 14",
+        command: "changelog --date 2026-09-21",
+        title: "Workshops You Won't Want to Miss (DevDogs Changelog v3.0.1)",
+        preview: "Tonight at 6: Next.js and Flutter Workshops. Get started on your web or mobile application development journey.",
+        tagline: "Feature competition #1 kicks off tonight!",
+        intro: "But first, they're saying it's the most important workshops of the semester: Flutter and Next.js, the frameworks underpinning this year's projects. Then, we'll be kicking off our first feature competition!",
+        featuredLabel: "happening_tonight",
+        featured: EVENTS.nextflutter,
+        cta: "RSVP for Cold Start",
+        upcoming: [EVENTS.dev2, EVENTS.supabase, EVENTS.dev3, EVENTS.career],
+        signoff: "Doors tonight at 6 in DLW 124. Bring a laptop if you have one, but we'll get you set up to ship either way.",
+    },
+];
+export function issueByVersion(version) {
+    return ISSUES.find((issue) => issue.version === version);
+}

package/dist/theme.d.ts

@@ -0,0 +1,123 @@
+/**
+ * The Changelog's design tokens, transcribed to email-safe literals.
+ *
+ * Everything here must survive the worst renderer the newsletter will meet —
+ * classic Outlook's Word engine — so colors are flat hex (no alpha, no
+ * oklch), fonts are longhand stacks, and the site's translucent chip classes
+ * (`border-{c}-400/30 bg-{c}-500/10 text-{c}-300`) are precomputed with
+ * `mix()` instead of asking a mail client to composite them.
+ */
+import type { CSSProperties } from "react";
+/** The club accent — UGA arch black on red. */
+export declare const UGA = "#ba0c2f";
+/**
+ * Event-type colors, taken from the calendar's own vocabulary in
+ * `@devdogsuga/brand/event` rather than restated: the chips here and the
+ * chips on the site's schedule are the same promise about the same event
+ * types.
+ */
+export declare const KIND: {
+    readonly interest: "#a684ff";
+    readonly build: "#00a6f4";
+    readonly study: "#ffb900";
+    readonly social: "#ff637e";
+    readonly workshop: "#00d492";
+};
+/** The mauve surfaces, matching the platform (mauve-950 canvas → -300 text). */
+export declare const PALETTE: {
+    readonly bg: "#13121b";
+    readonly bar: "#0e0d15";
+    readonly card: "#201e2b";
+    readonly card2: "#26232f";
+    readonly border: "#332f40";
+    readonly ink: "#f3f1f6";
+    readonly mute: "#a49eb1";
+    readonly dim: "#6f6a80";
+};
+export declare const SITE = "https://devdogsuga.org";
+export declare const SOCIAL_LINKS: readonly [{
+    readonly label: "discord";
+    readonly icon: "discord";
+    readonly url: "https://discord.gg/devdogs";
+}, {
+    readonly label: "instagram";
+    readonly icon: "instagram";
+    readonly url: "https://instagram.com/devdogsuga";
+}, {
+    readonly label: "github";
+    readonly icon: "github";
+    readonly url: "https://github.com/devdogsuga";
+}, {
+    readonly label: "web";
+    readonly icon: "globe";
+    readonly url: "https://devdogsuga.org/?utm_content=linkinbio";
+}];
+/**
+ * The site's three typefaces on Google Fonts — the same trio `layout.tsx`
+ * loads through next/font. Apple Mail, iOS Mail and most webview clients honor
+ * the `<link>`/`@import`; Gmail and Outlook ignore them and fall down the
+ * stacks in `EMAIL_FONTS`.
+ */
+export declare const FONTS_HREF = "https://fonts.googleapis.com/css2?family=Alan+Sans:wght@400..900&family=Cascadia+Code:wght@400;600;700&family=Hanken+Grotesk:wght@400;600;700;800&display=swap";
+export interface FontStacks {
+    display: string;
+    sans: string;
+    mono: string;
+}
+/** Literal family stacks for the email body, web font first. */
+export declare const EMAIL_FONTS: FontStacks;
+/**
+ * The page-side stacks: next/font renames every family it self-hosts, so a
+ * literal 'Alan Sans' would never match on the site. The CSS variables the
+ * root layout sets are the only spelling both dev and prod agree on.
+ */
+export declare const CSS_VARIABLE_FONTS: FontStacks;
+/**
+ * A flat blend of `fg` into `bg` at opacity `t` — what the site's translucent
+ * chip classes compute at composite time, precomputed here because alpha
+ * channels do not survive every mail client.
+ */
+export declare function mix(fg: string, bg: string, t: number): string;
+/**
+ * The three flattened colors of one event chip, shared between the `Chip`
+ * component and the dark-mode pinning stylesheet so the pinned values can
+ * never drift from the rendered ones.
+ */
+export declare function chipColors(color: string, ground: string): {
+    border: string;
+    fill: string;
+    text: string;
+};
+/** The two lightened accent tints the quiet bottom cards title with. */
+export declare const HEADING_TINTS: {
+    readonly newHere: string;
+    readonly signoff: string;
+};
+/**
+ * Longhand font styling. The shorthand `font: 700 13px/1 …` reads better in a
+ * template string but classic Outlook applies it unreliably, so every text
+ * style is spelled out property by property.
+ */
+export declare function font(weight: number, size: number, lineHeight: number | string, family: string): CSSProperties;
+/**
+ * A solid background painted twice: as `background-color` for the clients
+ * that only read that, and again as a same-color `linear-gradient` image
+ * layer, as Gmail dark-mode armor (Gmail rewrites background colors but
+ * leaves background images alone). Classic Outlook ignores background images
+ * and falls back to the flat color.
+ *
+ * These background styles ride in `paintCss()` rules, NEVER inline: the web
+ * Outlooks' dark mode rewrites every inline background in place with inline
+ * `!important` (which no stylesheet rule can outrank) and strips inline
+ * background images, but leaves the embedded stylesheet's colors untouched —
+ * proven on a received copy, 2026-09-11. The one deliberate exception is
+ * `<body>` in `ChangelogDocument`, whose inline background exists to be
+ * repainted (see the comment there).
+ */
+export declare function solidBg(color: string): CSSProperties;
+/** The site's `.slants` stripe: white 45° slants over a color. The solid `backgroundColor` comes first so clients that drop gradients degrade flat; the closing `linear-gradient` layer is the same Gmail armor as `solidBg` — and like `solidBg`, this ships only through `paintCss()`. */
+export declare function slants(color: string): CSSProperties;
+/** `bg-dot-grid` — a radial dot texture degrading to the flat color underneath, with the same-color gradient underlay as Gmail armor (see `solidBg`; stylesheet-only, like every background). */
+export declare function dotGrid(bg: string, dot: string): CSSProperties;
+/** A colored block shadow edged in black — the site's `shadow-block-outlined-*`. */
+export declare function blockShadow(color: string, size?: number): CSSProperties;

package/dist/theme.js

@@ -0,0 +1,155 @@
+import { EVENT_KIND_VISUALS, EVENT_SEGMENT_VISUALS, } from "@devdogsuga/brand/event";
+/** The club accent — UGA arch black on red. */
+export const UGA = "#ba0c2f";
+/**
+ * Event-type colors, taken from the calendar's own vocabulary in
+ * `@devdogsuga/brand/event` rather than restated: the chips here and the
+ * chips on the site's schedule are the same promise about the same event
+ * types.
+ */
+export const KIND = {
+    interest: EVENT_KIND_VISUALS["Interest Meeting"].accent,
+    build: EVENT_KIND_VISUALS["Dev Session"].accent,
+    study: EVENT_KIND_VISUALS["Study Session"].accent,
+    social: EVENT_KIND_VISUALS.Social.accent,
+    workshop: EVENT_SEGMENT_VISUALS.workshop.accent,
+};
+/** The mauve surfaces, matching the platform (mauve-950 canvas → -300 text). */
+export const PALETTE = {
+    bg: "#13121b",
+    bar: "#0e0d15",
+    card: "#201e2b",
+    card2: "#26232f",
+    border: "#332f40",
+    ink: "#f3f1f6",
+    mute: "#a49eb1",
+    dim: "#6f6a80",
+};
+export const SITE = "https://devdogsuga.org";
+export const SOCIAL_LINKS = [
+    { label: "discord", icon: "discord", url: "https://discord.gg/devdogs" },
+    {
+        label: "instagram",
+        icon: "instagram",
+        url: "https://instagram.com/devdogsuga",
+    },
+    { label: "github", icon: "github", url: "https://github.com/devdogsuga" },
+    {
+        label: "web",
+        icon: "globe",
+        // The link-in-bio entry point: ?utm_content=linkinbio opens the site's
+        // app switcher (see the platform's AppSwitcher/AutoOpen), landing the
+        // reader on the same linktree experience as QR codes and social bios.
+        url: `${SITE}/?utm_content=linkinbio`,
+    },
+];
+/**
+ * The site's three typefaces on Google Fonts — the same trio `layout.tsx`
+ * loads through next/font. Apple Mail, iOS Mail and most webview clients honor
+ * the `<link>`/`@import`; Gmail and Outlook ignore them and fall down the
+ * stacks in `EMAIL_FONTS`.
+ */
+export const FONTS_HREF = "https://fonts.googleapis.com/css2?family=Alan+Sans:wght@400..900&family=Cascadia+Code:wght@400;600;700&family=Hanken+Grotesk:wght@400;600;700;800&display=swap";
+/** Literal family stacks for the email body, web font first. */
+export const EMAIL_FONTS = {
+    display: "'Alan Sans', 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    sans: "'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    mono: "'Cascadia Code', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace",
+};
+/**
+ * The page-side stacks: next/font renames every family it self-hosts, so a
+ * literal 'Alan Sans' would never match on the site. The CSS variables the
+ * root layout sets are the only spelling both dev and prod agree on.
+ */
+export const CSS_VARIABLE_FONTS = {
+    display: "var(--font-display, sans-serif)",
+    sans: "var(--font-sans, sans-serif)",
+    mono: "var(--font-mono, monospace)",
+};
+/**
+ * A flat blend of `fg` into `bg` at opacity `t` — what the site's translucent
+ * chip classes compute at composite time, precomputed here because alpha
+ * channels do not survive every mail client.
+ */
+export function mix(fg, bg, t) {
+    const channels = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    const [a, b] = [channels(fg), channels(bg)];
+    return `#${a
+        .map((v, i) => Math.round(v * t + (b[i] ?? 0) * (1 - t))
+        .toString(16)
+        .padStart(2, "0"))
+        .join("")}`;
+}
+/**
+ * The three flattened colors of one event chip, shared between the `Chip`
+ * component and the dark-mode pinning stylesheet so the pinned values can
+ * never drift from the rendered ones.
+ */
+export function chipColors(color, ground) {
+    return {
+        border: mix(color, ground, 0.35),
+        fill: mix(color, ground, 0.12),
+        text: mix(color, "#ffffff", 0.62),
+    };
+}
+/** The two lightened accent tints the quiet bottom cards title with. */
+export const HEADING_TINTS = {
+    newHere: mix(KIND.study, "#ffffff", 0.62),
+    signoff: mix(UGA, "#ffffff", 0.45),
+};
+/**
+ * Longhand font styling. The shorthand `font: 700 13px/1 …` reads better in a
+ * template string but classic Outlook applies it unreliably, so every text
+ * style is spelled out property by property.
+ */
+export function font(weight, size, lineHeight, family) {
+    return {
+        fontWeight: weight,
+        fontSize: `${size}px`,
+        lineHeight,
+        fontFamily: family,
+    };
+}
+/**
+ * A solid background painted twice: as `background-color` for the clients
+ * that only read that, and again as a same-color `linear-gradient` image
+ * layer, as Gmail dark-mode armor (Gmail rewrites background colors but
+ * leaves background images alone). Classic Outlook ignores background images
+ * and falls back to the flat color.
+ *
+ * These background styles ride in `paintCss()` rules, NEVER inline: the web
+ * Outlooks' dark mode rewrites every inline background in place with inline
+ * `!important` (which no stylesheet rule can outrank) and strips inline
+ * background images, but leaves the embedded stylesheet's colors untouched —
+ * proven on a received copy, 2026-09-11. The one deliberate exception is
+ * `<body>` in `ChangelogDocument`, whose inline background exists to be
+ * repainted (see the comment there).
+ */
+export function solidBg(color) {
+    return {
+        backgroundColor: color,
+        backgroundImage: `linear-gradient(${color},${color})`,
+    };
+}
+/** The site's `.slants` stripe: white 45° slants over a color. The solid `backgroundColor` comes first so clients that drop gradients degrade flat; the closing `linear-gradient` layer is the same Gmail armor as `solidBg` — and like `solidBg`, this ships only through `paintCss()`. */
+export function slants(color) {
+    return {
+        backgroundColor: color,
+        backgroundImage: `repeating-linear-gradient(45deg,rgba(255,255,255,.24) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.24) 50%,rgba(255,255,255,.24) 75%,transparent 75%),linear-gradient(${color},${color})`,
+        backgroundSize: "16px 16px,auto",
+    };
+}
+/** `bg-dot-grid` — a radial dot texture degrading to the flat color underneath, with the same-color gradient underlay as Gmail armor (see `solidBg`; stylesheet-only, like every background). */
+export function dotGrid(bg, dot) {
+    return {
+        backgroundColor: bg,
+        backgroundImage: `radial-gradient(${dot} 1px,transparent 1px),linear-gradient(${bg},${bg})`,
+        backgroundSize: "15px 15px,auto",
+    };
+}
+/** A colored block shadow edged in black — the site's `shadow-block-outlined-*`. */
+export function blockShadow(color, size = 6) {
+    return {
+        boxShadow: `${size + 1}px ${size + 1}px 0 0 #000, ${size}px ${size}px 0 0 ${color}`,
+    };
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@devdogsuga/newsletter",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "The DevDogs Changelog: email-safe React components rendered as platform pages and exported as Outlook-importable .eml files",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DevDogsUGA/Backstage",
+    "directory": "packages/newsletter"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./export": {
+      "types": "./dist/export/index.d.ts",
+      "default": "./dist/export/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "@devdogsuga/brand": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitest/coverage-v8": "^4.1.11",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.11",
+    "@devdogsuga/config": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}