Dojo Page, Reusable Hero/CTA/Grid Components, TextLinkSpan, and a Long-Form Content Scaffold
Built the dedicated /dojo landing (2/3 hero · 1/3 alternate CTA, plus a 10-card Areas-of-Venture grid lifted from the Class 20 Venture Handbook chapter structure). Extracted four reusable components: HeroContentCoreMessage, AlternateCta, AreasOfVentureGrid, and TextLinkSpan (subtle dot-separated text-link row). Cleaned up the homepage so Brand Kit + Design System sit as a right-aligned TextLinkSpan under the header instead of competing with the primary CTA. Scaffolded a `long-form/venture-workflows` content collection with 10 frontmatter-only files — one per chapter — provenance + sequencing + marketing tags ready, body imports waiting on the long-form publishing decision (in-file discussion appended to the prompt). Added an SVG approximation of the Kauffman Fellows mark for Affinity refinement, and pinned the Astro dev port to 4324 to keep OAuth localhost callbacks deterministic alongside other projects.
Changelog — 2026-04-26 (01)
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
| Component | Path | Role |
|---|---|---|
HeroContentCoreMessage | components/heroes/ | Marketing-page hero composition — eyebrow + gradient h1 (via --fx-headline-gradient) + h2 + supporting paragraph + optional CTA |
AlternateCta | components/heroes/ | Card-shaped secondary CTA designed to live next to a hero (typically 1/3 width) — title + body HTML + trailing attribution + optional secondary action |
AreasOfVentureGrid | components/sections/ | 1/2/3-column responsive grid of “areas” cards — each card has a chapter number, title, lede, and marketing tags |
TextLinkSpan | components/buttons/ | Inline-flex row of subtle text links, auto-separated by a bright dot CSS pseudo-element. Width / minWidth / maxWidth / separator / separatorColor all overridable; sensible defaults if undeclared |
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 samemax-w-4xlcontainer 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, plussource_chapter_title_originalon chapter 3 where the title was shortened subsection_outline: the structural H2 list from the source — distinct fromtags, 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):
- Lossless Reader (
/read/through) — wrong shape; built for standalone essays - Astro Starlight — strong on chapter chrome, weak on aesthetic fit; theming overhead is real
- mdBook — tempting for the Rust-learning angle, bad for product cohesion
- Wing it with
@lossless-group/lfm(recommended) — content collection inside the site, smallBookReaderLayoutoverBaseThemeLayout, push image-directive + heading-slugs + wikilinks into the published LFM package as a forcing function - 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
| Concern | Status |
|---|---|
/dojo exists as a real landing page | ✓ shipped |
| Reusable hero composition for future marketing pages | ✓ HeroContentCoreMessage |
| Reusable secondary-CTA card pattern | ✓ AlternateCta |
| Reusable responsive grid section pattern | ✓ AreasOfVentureGrid |
| Subtle text-link row (footer-style links inline) | ✓ TextLinkSpan |
| Venture Handbook chapters addressable as data | ✓ frontmatter scaffolded |
| Content collection registered | ⏳ waits on long-form pattern decision |
| Cards source from collection (vs hard-coded) | ⏳ next move once collection is registered |
| Chapter pages with bodies | ⏳ pending the wing-it-with-LFM decision |
| Brand mark assets — production-grade | ⏳ Affinity refinement of provided SVG starts |
Notable decisions worth re-reading
-
tagsnotsubsectionson cards. Marketing hooks (SEO + GEO) ≠ structural content navigation. Two different prop names, two different jobs.subsection_outlinelives on the content-collection record and will drive in-page TOCs when chapter bodies arrive. -
/dojois 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. -
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. -
Did not register the content collection schema. Deliberate. Adding the
defineCollectionblock locks in the field shape; the wing-it-with-LFM plan may want to addchapter_eyebrow,hero_image,og_image, etc. before we lock the schema. Ten frontmatter files exist as data; the loader is one file edit away. -
Did not refactor
dojo/index.astroto source cards from the collection. Same reason — wait until the schema is locked. The card data lives inline today; oneawait getCollection('venture-workflows')will replace it.
Files modified (23)
sites/fullstack-vc/astro.config.mjssites/fullstack-vc/src/components/basics/Header.astrosites/fullstack-vc/src/components/buttons/TextLinkSpan.astrosites/fullstack-vc/src/components/heroes/HeroContentCoreMessage.astrosites/fullstack-vc/src/components/heroes/AlternateCta.astrosites/fullstack-vc/src/components/sections/AreasOfVentureGrid.astrosites/fullstack-vc/src/content/long-form/venture-workflows/01-strategy-development-and-raising-a-fund.mdsites/fullstack-vc/src/content/long-form/venture-workflows/02-proprietary-dealflow-and-dealflow-management.mdsites/fullstack-vc/src/content/long-form/venture-workflows/03-thesis-diligence-and-pushing-deals-through.mdsites/fullstack-vc/src/content/long-form/venture-workflows/04-winning-deals.mdsites/fullstack-vc/src/content/long-form/venture-workflows/05-board-participation-and-governance.mdsites/fullstack-vc/src/content/long-form/venture-workflows/06-portfolio-services-and-community.mdsites/fullstack-vc/src/content/long-form/venture-workflows/07-portfolio-tracking-modeling-and-follow-on-management.mdsites/fullstack-vc/src/content/long-form/venture-workflows/08-fund-management-and-administration.mdsites/fullstack-vc/src/content/long-form/venture-workflows/09-investor-relations-community-and-reporting.mdsites/fullstack-vc/src/content/long-form/venture-workflows/10-exits-secondary-liquidity-and-distributions.mdsites/fullstack-vc/src/pages/index.astrosites/fullstack-vc/src/pages/dojo/index.astrosites/fullstack-vc/src/pages/design-system/index.astrosites/fullstack-vc/src/styles/theme.csssites/fullstack-vc/public/kauffman-fellows-mark.svgsites/fullstack-vc/public/kauffman-fellows-app-icon.svgastro-knots/context-v/prompts/Discuss-how-to-Publish-Long-Form-like-eBook.md