From 43789bdf243d30bb1ad4915ae9a548423a85966e Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Fri, 20 Feb 2026 15:16:53 -0700 Subject: [PATCH] Homepage redesign: show-don't-tell with animated scope hero MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restructure the homepage to lead with visuals instead of text: - Hero: split layout with animated Tektronix 465 oscilloscope showing RC step response (CSS+SVG, zero JS) that links to the notebook - Pipeline strip: 3-step Write → Simulate → Visualize with code/terminal previews and inline waveform SVG - Featured notebooks: 3 curated circuits (RC, 555, common emitter) with pre-rendered waveform thumbnails - Gallery cards: decorative graticule header strip, color-coded by engine - Footer: updated copy with clearer call to action All new sections are server-rendered Astro components. Total new client JavaScript: zero bytes. --- .../src/components/FeaturedNotebooks.astro | 87 ++++ frontend/src/components/NotebookCard.tsx | 61 +-- frontend/src/components/PipelineStrip.astro | 163 +++++++ frontend/src/lib/featured-waveforms.ts | 59 +++ frontend/src/pages/index.astro | 188 +++++--- frontend/src/styles/homepage.css | 415 ++++++++++++++++++ 6 files changed, 885 insertions(+), 88 deletions(-) create mode 100644 frontend/src/components/FeaturedNotebooks.astro create mode 100644 frontend/src/components/PipelineStrip.astro create mode 100644 frontend/src/lib/featured-waveforms.ts diff --git a/frontend/src/components/FeaturedNotebooks.astro b/frontend/src/components/FeaturedNotebooks.astro new file mode 100644 index 0000000..467c975 --- /dev/null +++ b/frontend/src/components/FeaturedNotebooks.astro @@ -0,0 +1,87 @@ +--- +import { rcLowPassSvg, astable555Svg, commonEmitterSvg } from '../lib/featured-waveforms'; + +const featured = [ + { + id: 'rc-lowpass-filter', + title: 'RC Low-Pass Filter', + engine: 'ngspice' as const, + description: 'Classic transient analysis — square wave input through an RC network produces the characteristic exponential charge/discharge response.', + tags: ['transient', 'passive', 'beginner'], + svg: rcLowPassSvg, + }, + { + id: '555-astable-blinker', + title: '555 Astable LED Blinker', + engine: 'ngspice' as const, + description: 'Timer IC in free-running mode — the capacitor ramp between comparator thresholds generates a square wave output.', + tags: ['timer', 'oscillator', 'digital'], + svg: astable555Svg, + }, + { + id: 'common-emitter-amplifier', + title: 'Common Emitter Amplifier', + engine: 'ngspice' as const, + description: 'Single-stage BJT amplifier with AC analysis — input sine wave is amplified and phase-inverted at the collector.', + tags: ['amplifier', 'ac-analysis', 'bjt'], + svg: commonEmitterSvg, + }, +]; + +const engineColor: Record = { + ngspice: { border: 'border-blue-500/30', bg: 'bg-blue-500/10', text: 'text-blue-400' }, + ltspice: { border: 'border-amber-500/30', bg: 'bg-amber-500/10', text: 'text-amber-400' }, +}; +--- + +
+

Featured

+

Start with a classic circuit

+ +
+ {featured.map((nb) => { + const colors = engineColor[nb.engine] ?? engineColor.ngspice; + return ( + + {/* Waveform thumbnail */} +
+ +
+ +
+
+

+ {nb.title} +

+ + {nb.engine} + +
+ +

+ {nb.description} +

+ +
+ {nb.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + ); + })} +
+
diff --git a/frontend/src/components/NotebookCard.tsx b/frontend/src/components/NotebookCard.tsx index 2061eac..818fdd7 100644 --- a/frontend/src/components/NotebookCard.tsx +++ b/frontend/src/components/NotebookCard.tsx @@ -29,37 +29,40 @@ export function NotebookCard({ notebook }: NotebookCardProps) { return ( -
-

- {title} -

- - {engine} - -
- -
- - - {cell_count} cell{cell_count !== 1 ? 's' : ''} - - {formatDate(modified)} -
- - {tags.length > 0 && ( -
- {tags.map((tag) => ( - - {tag} - - ))} +
+
+
+

+ {title} +

+ + {engine} +
- )} + +
+ + + {cell_count} cell{cell_count !== 1 ? 's' : ''} + + {formatDate(modified)} +
+ + {tags.length > 0 && ( +
+ {tags.map((tag) => ( + + {tag} + + ))} +
+ )} +
); } diff --git a/frontend/src/components/PipelineStrip.astro b/frontend/src/components/PipelineStrip.astro new file mode 100644 index 0000000..a9f3095 --- /dev/null +++ b/frontend/src/components/PipelineStrip.astro @@ -0,0 +1,163 @@ +--- +import { Icon } from 'astro-icon/components'; +--- + +
+
+ + +
+ 01 +

Write

+
+ 
* RC Low-Pass Filter
+V1 in 0 PULSE(0 5 0 1n 1n 0.5m 1m)
+R1 in out 10k
+C1 out 0 100n
+.tran 10u 5m
+
+

+ SPICE netlists with syntax highlighting and autocomplete +

+
+ + +
+
+ + +
+ 02 +

Simulate

+
+
+
+ + ngspice 43 +
+
+

Circuit: RC Low-Pass Filter

+

Doing transient analysis...

+

501 data points, 23ms

+
+
+ + complete +
+
+
+

+ Run ngspice simulations with one click +

+
+ + +
+
+ + +
+ 03 +

Visualize

+
+ + + + + + + + + + + + + + + +
+

+ Interactive waveforms + oscilloscope mode +

+
+ +
+
+ + diff --git a/frontend/src/lib/featured-waveforms.ts b/frontend/src/lib/featured-waveforms.ts new file mode 100644 index 0000000..51fb2ee --- /dev/null +++ b/frontend/src/lib/featured-waveforms.ts @@ -0,0 +1,59 @@ +// Pre-rendered SVG waveform thumbnails for the 3 featured notebooks. +// Each is a self-contained SVG string with dark background, faint grid, and trace paths. + +const GRID = ` + + + + + + +`; + +// 1. RC Low-Pass Filter — square wave input (dim) + exponential charge/discharge output (bright) +// Time axis: 0→5ms, two full cycles of 1kHz square wave through R=10k, C=100nF (τ=1ms) +export const rcLowPassSvg = ` + ${GRID} + + + + +`; + +// 2. 555 Astable LED Blinker — sharp square wave output with slight ramp on edges +// Output toggles between ~0V and ~Vcc with RC timing visible +export const astable555Svg = ` + ${GRID} + + + + +`; + +// 3. Common Emitter Amplifier — input sine (dim) + amplified inverted sine (bright) +// AC analysis showing voltage gain with phase inversion +export const commonEmitterSvg = ` + ${GRID} + + + + +`; diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro index f08819e..0d8311c 100644 --- a/frontend/src/pages/index.astro +++ b/frontend/src/pages/index.astro @@ -2,6 +2,8 @@ import { Icon } from 'astro-icon/components'; import NotebookLayout from '../layouts/NotebookLayout.astro'; import NotebookGallery from '../components/NotebookGallery'; +import PipelineStrip from '../components/PipelineStrip.astro'; +import FeaturedNotebooks from '../components/FeaturedNotebooks.astro'; import { fetchNotebookList } from '../lib/server-api'; import type { NotebookSummary } from '../lib/types'; @@ -23,72 +25,139 @@ try { @import '../styles/homepage.css'; - +
-

SpiceBook

-

- Circuit Simulation Notebooks -

-

- Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document. -

-
- - - New Notebook - - - Browse Notebooks - - +
+ + +
+

SpiceBook

+

+ Circuit Simulation Notebooks +

+

+ Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document. +

+
+ + + New Notebook + + + Browse Notebooks + + +
+
+ + +
+ +
+ + +
+ Tektronix + 465 +
+ + +
+
+ + + +
+
+
+
+ + +
+ V(out) + | + 200μs/div + | + 500mV/div +
+ + +
+
+
+ Volts +
+
+
+ Time +
+
+
+ Trigger +
+
+
+
TRAN
+
+
+
+
+ +
+ +
+
- -
-
-
- -

SPICE Simulation

-

- Write netlists and run ngspice. Transient, AC, DC sweep, operating point. -

-
-
- -

Waveform Plots

-

- Results render as interactive plots below each netlist. -

-
-
- -

Schematic Generation

-

- Netlists produce SVG circuit diagrams automatically. -

-
-
- -

Notebook Format

-

- Markdown, SPICE, and Python cells in a single document. -

-
-
+ +
+ +
+ + +
+
-
-

Notebooks

+
+
+

Explore Notebooks

+ {notebooks.length > 0 && ( +

{notebooks.length} notebooks available

+ )} +