Skip to content

Commit d1707b7

Browse files
orangekame3orangekame3
committed
feat: update header navigation and add Core Usage section to documentation
1 parent 4f229c0 commit d1707b7

5 files changed

Lines changed: 236 additions & 11 deletions

File tree

‎src/components/CoreUsage.astro‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
---
2+
const examples = [
3+
{
4+
title: "Define Components",
5+
description: "Create typed components with Pydantic v2 models.",
6+
code: `from cryo_wiring_core import (
7+
CooldownBuilder, ChipConfig, CooldownMetadata,
8+
Attenuator, Filter, Isolator, Amplifier, Stage,
9+
)
10+
11+
catalog = {
12+
"XMA-10dB": Attenuator(manufacturer="XMA", model="2082-6431-10", value_dB=10),
13+
"XMA-20dB": Attenuator(manufacturer="XMA", model="2082-6431-20", value_dB=20),
14+
"Eccosorb": Filter(manufacturer="XMA", model="EF-03", filter_type="Eccosorb"),
15+
"K&L-LPF": Filter(manufacturer="K&L", model="5VLF", filter_type="Lowpass"),
16+
"LNF-HEMT": Amplifier(manufacturer="LNF", model="LNC03_14A", amplifier_type="HEMT", gain_dB=40),
17+
"LNF-ISO": Isolator(manufacturer="LNF", model="ISC4_12A"),
18+
}`,
19+
},
20+
{
21+
title: "Build a Cooldown",
22+
description: "Fluent builder API with per-line overrides.",
23+
code: `cooldown = (
24+
CooldownBuilder(
25+
chip=ChipConfig(name="sample-8q", num_qubits=8, qubits_per_readout_line=4),
26+
metadata=CooldownMetadata(fridge="my-cryo", cooldown_id="cd001", date="2026-03-06"),
27+
catalog=catalog,
28+
control={
29+
Stage.K50: ["XMA-10dB"],
30+
Stage.K4: ["XMA-20dB"],
31+
Stage.MXC: ["XMA-20dB", "Eccosorb"],
32+
},
33+
readout_return={
34+
Stage.K50: ["LNF-HEMT"],
35+
Stage.CP: ["LNF-ISO", "LNF-ISO"],
36+
},
37+
)
38+
.add("C00", Stage.STILL, "K&L-LPF") # per-line override
39+
.remove("RR00", Stage.CP, index=1) # remove second isolator on RR00
40+
.representative("C00", "RS00", "RR00") # mark lines for diagram
41+
.build()
42+
)`,
43+
},
44+
{
45+
title: "Summary & Diagram",
46+
description: "Generate terminal tables, Markdown, HTML, and publication-quality SVG diagrams.",
47+
code: `# Print a Rich-formatted table to the terminal
48+
cooldown.summary()
49+
50+
# Export as Markdown or HTML
51+
md = cooldown.summary(fmt="markdown")
52+
html = cooldown.summary(fmt="html")
53+
54+
# Generate a publication-quality wiring diagram
55+
cooldown.diagram(output="wiring.svg", representative=True)`,
56+
},
57+
{
58+
title: "Export & Validate",
59+
description: "Write YAML files and validate against the spec.",
60+
code: `# Export as a cooldown directory
61+
cooldown.write("output/")
62+
# output/
63+
# ├── metadata.yaml
64+
# ├── chip.yaml
65+
# ├── components.yaml
66+
# ├── control.yaml
67+
# ├── readout_send.yaml
68+
# └── readout_return.yaml
69+
70+
# Validate existing YAML files
71+
from cryo_wiring_core import validate_wiring
72+
validate_wiring(data) # raises jsonschema.ValidationError on failure`,
73+
},
74+
];
75+
---
76+
77+
<section id="core-usage" class="section">
78+
<div class="container">
79+
<h2 class="section-title">Python API</h2>
80+
<p class="section-subtitle">
81+
Build, validate, and visualize wiring configurations programmatically with
82+
<code class="inline-code">cryo-wiring-core</code>.
83+
</p>
84+
<div class="examples">
85+
{
86+
examples.map((example, i) => (
87+
<div class="example-card">
88+
<div class="example-header">
89+
<span class="example-number">{String(i + 1).padStart(2, "0")}</span>
90+
<div>
91+
<h3 class="example-title">{example.title}</h3>
92+
<p class="example-description">{example.description}</p>
93+
</div>
94+
</div>
95+
<pre class="example-code"><code>{example.code}</code></pre>
96+
</div>
97+
))
98+
}
99+
</div>
100+
<div class="core-links">
101+
<a
102+
href="https://cryo-wiring.github.io/core/"
103+
target="_blank"
104+
rel="noopener noreferrer"
105+
class="core-link"
106+
>
107+
API Reference
108+
</a>
109+
<a
110+
href="https://github.com/cryo-wiring/core/blob/main/examples/getting_started.py"
111+
target="_blank"
112+
rel="noopener noreferrer"
113+
class="core-link core-link-secondary"
114+
>
115+
Interactive Notebook
116+
</a>
117+
</div>
118+
</div>
119+
</section>
120+
121+
<style>
122+
.inline-code {
123+
font-family: var(--font-mono);
124+
font-size: 1rem;
125+
color: var(--color-primary);
126+
}
127+
128+
.examples {
129+
max-width: 780px;
130+
margin: 0 auto;
131+
display: flex;
132+
flex-direction: column;
133+
gap: 1.5rem;
134+
}
135+
136+
.example-card {
137+
background: var(--color-bg-card);
138+
border: 1px solid var(--color-border);
139+
border-radius: 0.75rem;
140+
overflow: hidden;
141+
transition: border-color 0.2s;
142+
}
143+
144+
.example-card:hover {
145+
border-color: rgba(56, 189, 248, 0.3);
146+
}
147+
148+
.example-header {
149+
display: flex;
150+
align-items: flex-start;
151+
gap: 1rem;
152+
padding: 1.25rem 1.5rem;
153+
border-bottom: 1px solid var(--color-border);
154+
}
155+
156+
.example-number {
157+
flex-shrink: 0;
158+
font-family: var(--font-mono);
159+
font-size: 0.75rem;
160+
font-weight: 600;
161+
color: var(--color-primary);
162+
padding: 0.25rem 0.5rem;
163+
border: 1px solid rgba(56, 189, 248, 0.3);
164+
border-radius: 0.25rem;
165+
background: rgba(56, 189, 248, 0.05);
166+
margin-top: 0.125rem;
167+
}
168+
169+
.example-title {
170+
font-size: 1rem;
171+
font-weight: 600;
172+
margin-bottom: 0.25rem;
173+
}
174+
175+
.example-description {
176+
font-size: 0.85rem;
177+
color: var(--color-text-muted);
178+
}
179+
180+
.example-code {
181+
padding: 1.25rem 1.5rem;
182+
overflow-x: auto;
183+
margin: 0;
184+
}
185+
186+
.example-code code {
187+
font-family: var(--font-mono);
188+
font-size: 0.8rem;
189+
color: var(--color-success);
190+
line-height: 1.65;
191+
white-space: pre;
192+
}
193+
194+
.core-links {
195+
display: flex;
196+
justify-content: center;
197+
gap: 1rem;
198+
margin-top: 2.5rem;
199+
flex-wrap: wrap;
200+
}
201+
202+
.core-link {
203+
display: inline-flex;
204+
align-items: center;
205+
padding: 0.625rem 1.5rem;
206+
font-size: 0.9rem;
207+
font-weight: 600;
208+
border-radius: 0.5rem;
209+
background: rgba(56, 189, 248, 0.1);
210+
border: 1px solid rgba(56, 189, 248, 0.3);
211+
color: var(--color-primary);
212+
transition: all 0.2s;
213+
}
214+
215+
.core-link:hover {
216+
background: rgba(56, 189, 248, 0.2);
217+
color: var(--color-primary);
218+
}
219+
220+
.core-link-secondary {
221+
background: transparent;
222+
border-color: var(--color-border);
223+
color: var(--color-text-muted);
224+
}
225+
226+
.core-link-secondary:hover {
227+
border-color: rgba(56, 189, 248, 0.3);
228+
color: var(--color-text);
229+
}
230+
</style>

‎src/components/Header.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
const navLinks = [
33
{ label: "Features", href: "#features" },
4+
{ label: "Python API", href: "#core-usage" },
45
{ label: "Ecosystem", href: "#ecosystem" },
56
{ label: "Quick Start", href: "#quickstart" },
67
];

‎src/components/Hero.astro‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@
55
<section class="hero">
66
<div class="hero-bg"></div>
77
<div class="container hero-content">
8-
<img src="/logo.png" alt="cryo-wiring" class="hero-logo" />
98
<p class="hero-badge">Open Source &middot; MIT License</p>
109
<h1 class="hero-title">
1110
Documentation for<br />
12-
<span class="hero-highlight">cryo-wiring</span>
11+
<span class="hero-highlight">cryogenic wiring</span>
1312
</h1>
1413
<p class="hero-description">
1514
A comprehensive suite of tools for managing and visualizing dilution
@@ -68,13 +67,6 @@
6867
position: relative;
6968
}
7069

71-
.hero-logo {
72-
width: 120px;
73-
height: auto;
74-
margin-bottom: 1.5rem;
75-
filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.3));
76-
}
77-
7870
.hero-badge {
7971
display: inline-block;
8072
font-size: 0.8rem;

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const { title } = Astro.props;
1313
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1414
<meta
1515
name="description"
16-
content="cryo-wiring - Open-source tools for managing dilution refrigerator wiring configurations in quantum computing systems."
16+
content="cryo-wiring - Open-source tools for managing cryogenic wiring configurations in quantum computing systems."
1717
/>
1818
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1919
<link

‎src/pages/index.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ import Hero from "../components/Hero.astro";
55
import Features from "../components/Features.astro";
66
import Ecosystem from "../components/Ecosystem.astro";
77
import Architecture from "../components/Architecture.astro";
8+
import CoreUsage from "../components/CoreUsage.astro";
89
import QuickStart from "../components/QuickStart.astro";
910
import Footer from "../components/Footer.astro";
1011
---
1112

12-
<Layout title="cryo-wiring - Documentation for Dilution Refrigerator Wiring">
13+
<Layout title="cryo-wiring - Documentation for Cryogenic Wiring">
1314
<Header />
1415
<main>
1516
<Hero />
1617
<Features />
1718
<Architecture />
19+
<CoreUsage />
1820
<Ecosystem />
1921
<QuickStart />
2022
</main>

0 commit comments

Comments
 (0)