Add landing page + Starlight docs site (#375)
* udpated matrix * feat(site): add landing page + Starlight docs site Astro + Starlight site in site/ — a flat/paper editorial landing page plus 18 docs pages seeded from the README. Monochrome theme, hairline rules, square corners, live GitHub star count, light default + dark toggle. Deploys to GitHub Pages via .github/workflows/deploy-site.yml. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Colby Mchenry
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
1f3625a3e9
commit
4509b45dd5
@@ -0,0 +1,86 @@
|
||||
---
|
||||
// Flat technical node-link diagram for the hero. Hand-placed so it reads as a
|
||||
// deliberate blueprint, not a physics blob: thin ink lines, hollow nodes, mono
|
||||
// labels. Hovering a node inks it in. No glow, no gradients, no motion.
|
||||
---
|
||||
|
||||
<svg
|
||||
class="cg-graph"
|
||||
viewBox="0 0 780 600"
|
||||
role="img"
|
||||
aria-label="A code knowledge graph: index.ts links to auth.ts, router.ts and api/users.ts, which branch to middleware.ts, types/index.ts, createRouter and listUsers."
|
||||
>
|
||||
<g class="edges">
|
||||
<line x1="430" y1="64" x2="250" y2="210" />
|
||||
<line x1="430" y1="64" x2="450" y2="250" />
|
||||
<line x1="430" y1="64" x2="650" y2="200" />
|
||||
<line x1="250" y1="210" x2="180" y2="380" />
|
||||
<line x1="250" y1="210" x2="340" y2="380" />
|
||||
<line x1="450" y1="250" x2="560" y2="380" />
|
||||
<line x1="560" y1="380" x2="560" y2="500" />
|
||||
</g>
|
||||
|
||||
<g class="nodes">
|
||||
<g class="node">
|
||||
<circle cx="430" cy="64" r="9" />
|
||||
<text x="448" y="69" text-anchor="start">index.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="250" cy="210" r="9" />
|
||||
<text x="232" y="215" text-anchor="end">auth.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="450" cy="250" r="9" />
|
||||
<text x="468" y="255" text-anchor="start">router.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="650" cy="200" r="9" />
|
||||
<text x="668" y="205" text-anchor="start">api/users.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="180" cy="380" r="9" />
|
||||
<text x="180" y="410" text-anchor="middle">middleware.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="340" cy="380" r="9" />
|
||||
<text x="340" y="410" text-anchor="middle">types/index.ts</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="560" cy="380" r="9" />
|
||||
<text x="578" y="385" text-anchor="start">createRouter</text>
|
||||
</g>
|
||||
<g class="node">
|
||||
<circle cx="560" cy="500" r="9" />
|
||||
<text x="560" y="530" text-anchor="middle">listUsers</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.cg-graph {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 560px;
|
||||
min-width: 0; /* flex item: allow shrinking below intrinsic SVG width */
|
||||
display: block;
|
||||
}
|
||||
.cg-graph .edges line {
|
||||
stroke: var(--cg-ink);
|
||||
stroke-width: 1.25;
|
||||
}
|
||||
.cg-graph .node circle {
|
||||
fill: var(--cg-paper);
|
||||
stroke: var(--cg-ink);
|
||||
stroke-width: 1.5;
|
||||
transition: fill 0.12s ease;
|
||||
}
|
||||
.cg-graph .node text {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 15px;
|
||||
fill: var(--cg-ink);
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
.cg-graph .node:hover circle {
|
||||
fill: var(--cg-ink);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
// Starlight 0.39 exposes route data on Astro.locals.starlightRoute (not props).
|
||||
// Link the wordmark to the landing page at the site root.
|
||||
const { siteTitle } = Astro.locals.starlightRoute;
|
||||
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
|
||||
---
|
||||
|
||||
<a href={`${base}/`} class="cg-site-title" translate="no">{siteTitle}</a>
|
||||
|
||||
<style>
|
||||
.cg-site-title {
|
||||
font-family: var(--sl-font);
|
||||
font-weight: 800;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1;
|
||||
color: var(--cg-ink);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cg-site-title:hover {
|
||||
color: var(--cg-ink);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
// Keep Starlight's default social icons (the GitHub link) and append a live
|
||||
// star-count pill, matching the landing page nav.
|
||||
import Default from '@astrojs/starlight/components/SocialIcons.astro';
|
||||
import { getStarsLabel } from '../lib/github';
|
||||
|
||||
const stars = await getStarsLabel();
|
||||
const repo = 'https://github.com/colbymchenry/codegraph';
|
||||
---
|
||||
|
||||
<Default {...Astro.props} />
|
||||
<a
|
||||
class="cg-star"
|
||||
href={`${repo}/stargazers`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`${stars} GitHub stars`}
|
||||
>
|
||||
<span class="cg-star-glyph" aria-hidden="true">★</span>{stars}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.cg-star {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: 1px solid var(--cg-rule);
|
||||
padding: 0.32rem 0.6rem;
|
||||
font-family: var(--sl-font);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--cg-ink);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cg-star:hover {
|
||||
background: var(--cg-paper-press);
|
||||
color: var(--cg-ink);
|
||||
}
|
||||
.cg-star-glyph {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
/* Don't crowd the compact mobile header. */
|
||||
@media (max-width: 50rem) {
|
||||
.cg-star {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user