Dojo Page, Reusable Hero/CTA/Grid Components, TextLinkSpan, and a Long-Form Content Scaffold

Dojo Page, Reusable Hero/CTA/Grid Components, TextLinkSpan, and a Long-Form Content Scaffold

Why Care?

For the firm (Mike): This is the first session where the dojo's actual landing surface exists as a dedicated page, not a placeholder homepage. Every component built today is reusable — HeroContentCoreMessage, AlternateCta, AreasOfVentureGrid, and the new TextLinkSpan — so subsequent pages (the eventual book reader, sub-page galleries, member-only views) inherit a consistent typographic + token-driven look without re-typing inline styles. The long-form/venture-workflows/ collection scaffold turns the 1,751-line Venture Handbook from a Google-Doc-shaped artifact into a sequence of addressable chapter records — frontmatter-first, body imports later. We're now one decision away from publishing the book on FullStack VC under whichever long-form pattern wins (discussion appended to the prompt).

For our end users (VCs visiting the dojo): A real /dojo page that says what the dojo is, who it's for, and how to join — with the ten workflow areas of a venture firm laid out as scannable cards, each surfaced with marketing-flavored tags ("Anchor LPs", "Founder-friendly nos", "DPI vs TVPI") that a Fellow can scan in 10 seconds and click into when chapter pages ship. The homepage is also less noisy: one primary "Join the Dojo" CTA, with Brand Kit + Design System tucked into a subtle dot-separated text-link row up by the header.

What landed

/dojo — the dedicated dojo landing page

src/pages/dojo/index.astro. Top half is a CSS grid: 2/3 left for HeroContentCoreMessage (eyebrow / h1 / h2 subheader / supporting paragraph / primary CTA), 1/3 right for AlternateCta (a card-shaped invitation to the dispatches with secondary action). Below that, the AreasOfVentureGrid section renders the 10 chapters from the Class 20 Venture Handbook as a 1/2/3-column responsive grid.

Header nav link "Dojo" was repointed from / → /dojo.

The hero CTA wires to /login for now — placeholder until the dojo-specific /api/o-auth/dojo/join route exists.

Four new reusable components

All four read only semantic tokens (--color-*, --font-*, --fx-*) — work cleanly in light, dark, and vibrant modes. All four registered in /design-system with live demos and a CSS-contract pre block.

tags vs subsections — naming the distinction

First pass at AreasOfVentureGrid borrowed sub-section labels from the source chapter structure (Discussion / Tips & Tricks / Tools of the Trade / Case Studies / Highlights). Those are the right content-page navigation tags but the wrong card-marketing tags — they don't read as reasons to click. Renamed the prop subsections → tags (interface, render, CSS class __subs → __tags, aria-label) and rewrote all 10 cards' tag arrays as search-friendly hooks chosen for SEO + GEO discoverability: "Anchor LPs", "Pre-marketing", "Founder-friendly nos", "Diligence sprints", "Carry waterfall", "DPI vs TVPI" — concrete entity-style phrases an LLM would happily surface in an answer.

The subsection_outline field on each content-collection file preserves the original H2 list — it'll become the in-page TOC when chapter bodies are imported. Two distinct fields, two distinct purposes.

Homepage cleanup — primary CTA gets to be primary again

src/pages/index.astro previously had three flush-left buttons in a row: Join the Dojo (filled), Brand Kit (outlined), Design System (outlined). Three equal-weight buttons fight each other. Now:

• Brand Kit + Design System moved to a <TextLinkSpan> in a thin row directly under the site header, right-aligned, matching the same max-w-4xl container the hero uses.

• Join the Dojo stays as the only block-level button, alone in the hero.

TextLinkSpan is display: inline-flex so text-align: right on the parent right-hugs the cluster cleanly. Bright dot defaults to var(--color-primary) — a violet pop in dark/vibrant, a softer hint in light mode.

Long-form content scaffold (src/content/long-form/venture-workflows/)

Ten frontmatter-only files, one per chapter, zero-padded for natural sort (01-… through 10-…). Each file carries:

• Display fields the cards already need: chapter_number, title, lede, tags

• Sequencing: published: false (opt-in chapter by chapter), date_authored, date_published: null

• Provenance: source_publication, source_organization, source_chapter_number, plus source_chapter_title_original on chapter 3 where the title was shortened

• subsection_outline: the structural H2 list from the source — distinct from tags, will drive the eventual in-page TOC and chapter spine when bodies are imported

The collection schema in src/content.config.ts is intentionally NOT yet registered — the right shape depends on which long-form pattern wins (see discussion).

Long-form publishing discussion

Per the prompt, the discussion was appended directly into context-v/prompts/Discuss-how-to-Publish-Long-Form-like-eBook.md underneath the setup content. Web-search-augmented, not just model knowledge. Evaluated five options against the actual shape of the Venture Handbook artifact (10 chapters, ~50 footnotes, ~25 images, parallel sub-section grammar):

1. Lossless Reader (/read/through) — wrong shape; built for standalone essays

2. Astro Starlight — strong on chapter chrome, weak on aesthetic fit; theming overhead is real

3. mdBook — tempting for the Rust-learning angle, bad for product cohesion

4. Wing it with @lossless-group/lfm (recommended) — content collection inside the site, small BookReaderLayout over BaseThemeLayout, push image-directive + heading-slugs + wikilinks into the published LFM package as a forcing function

5. Quartz 4 (bonus) — right answer for an Obsidian digital garden, wrong answer for a bound book

Four follow-up questions to push back on at the bottom of the discussion (route naming, editorial pass scope, image handling effort, top-level nav placement).

Kauffman Fellows mark — SVG starting points

Two vector approximations saved to public/:

• kauffman-fellows-mark.svg — the simpler outline mark with two filled chevrons inside a hex outline (matches the wordmark presentation)

• kauffman-fellows-app-icon.svg — the dimensional "origami" version with the vertical fold and four facets, sized 512×512

Intended as Affinity-refinement starting points, not final brand assets. Sample colors from the source JPG, round the chevron tips/notches, tune the fold's offset from center. (Mike's PNG/SVG exports from Affinity also landed alongside.)

Dev port pinned to 4324

astro.config.mjs now declares server.port: 4324. Keeps the GitHub OAuth localhost callback URL deterministic (http://localhost:4324/api/auth/github/callback) regardless of which other dev servers are running on default ports.

Theme.css minor update

Added --color__pampas (#f6f1ef) to the named-token tier and replaced the light-mode --fx-headline-gradient: none with a subtle linear-gradient(120deg, ink 0%, violet-deep 100%) so the same background-clip: text headline technique used in dark/vibrant gives a clean, near-solid-but-distinct headline in light mode instead of going invisible.

What this enables

Notable decisions worth re-reading

1. tags not subsections on cards. Marketing hooks (SEO + GEO) ≠ structural content navigation. Two different prop names, two different jobs. subsection_outline lives on the content-collection record and will drive in-page TOCs when chapter bodies arrive.

2. /dojo is its own page; / is unchanged for now. The Header Dojo link points to /dojo. The homepage / still carries dojo content from earlier scaffolding — Mike's call whether to repurpose / for something else (firm overview, "what is FullStack VC") or leave the duplication as a redirect target.

3. Wing it with LFM > adopt Starlight/mdBook/Quartz for the Venture Handbook publication. Recommended in the appended discussion; uses the book as a forcing function to push three concrete features into @lossless-group/lfm (image directive, heading slugs + per-chapter TOC, wikilinks) — features mpstaton-site and twf-site will both benefit from.

4. Did not register the content collection schema. Deliberate. Adding the defineCollection block locks in the field shape; the wing-it-with-LFM plan may want to add chapter_eyebrow, hero_image, og_image, etc. before we lock the schema. Ten frontmatter files exist as data; the loader is one file edit away.

5. Did not refactor dojo/index.astro to source cards from the collection. Same reason — wait until the schema is locked. The card data lives inline today; one await getCollection('venture-workflows') will replace it.