Ryan Malloy
eae849fe7a
SSR the notebook list in Astro frontmatter (eliminating the client-side loading spinner). Add hero section with oscilloscope graticule background, 4-column feature highlights, and a React island gallery with category filter pills, tag search, and grouped/flat view modes.
116 lines
4.6 KiB
Plaintext
116 lines
4.6 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import NotebookLayout from '../layouts/NotebookLayout.astro';
|
|
import NotebookGallery from '../components/NotebookGallery';
|
|
import { fetchNotebookList } from '../lib/server-api';
|
|
import type { NotebookSummary } from '../lib/types';
|
|
|
|
let notebooks: NotebookSummary[] = [];
|
|
let fetchError: string | null = null;
|
|
try {
|
|
notebooks = await fetchNotebookList();
|
|
} catch (err) {
|
|
fetchError = err instanceof Error ? err.message : 'Backend unavailable';
|
|
}
|
|
---
|
|
|
|
<NotebookLayout
|
|
title="SpiceBook"
|
|
description="Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document."
|
|
canonicalPath="/"
|
|
>
|
|
<style>
|
|
@import '../styles/homepage.css';
|
|
</style>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero-graticule border-b border-slate-800/60">
|
|
<div class="relative max-w-6xl mx-auto px-6 pt-16 pb-20">
|
|
<p class="text-sm font-semibold tracking-widest text-blue-400 uppercase mb-4">SpiceBook</p>
|
|
<h1 class="text-4xl md:text-5xl font-bold text-slate-100 tracking-tight max-w-2xl">
|
|
Circuit Simulation Notebooks
|
|
</h1>
|
|
<p class="mt-4 text-lg text-slate-400 max-w-xl leading-relaxed">
|
|
Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document.
|
|
</p>
|
|
<div class="flex items-center gap-3 mt-8">
|
|
<a
|
|
href="/notebook/new"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium transition-colors text-sm"
|
|
>
|
|
<Icon name="lucide:plus" class="w-4 h-4" />
|
|
New Notebook
|
|
</a>
|
|
<a
|
|
href="#notebooks"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border border-slate-700 text-slate-300 hover:border-slate-500 hover:text-slate-100 font-medium transition-colors text-sm"
|
|
>
|
|
Browse Notebooks
|
|
<Icon name="lucide:chevron-down" class="w-4 h-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature Highlights -->
|
|
<section class="max-w-6xl mx-auto px-6 py-16">
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
|
|
<Icon name="lucide:zap" class="w-6 h-6 text-blue-400 mb-3" />
|
|
<h3 class="font-semibold text-slate-100 mb-1">SPICE Simulation</h3>
|
|
<p class="text-sm text-slate-400 leading-relaxed">
|
|
Write netlists and run ngspice. Transient, AC, DC sweep, operating point.
|
|
</p>
|
|
</div>
|
|
<div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
|
|
<Icon name="lucide:activity" class="w-6 h-6 text-blue-400 mb-3" />
|
|
<h3 class="font-semibold text-slate-100 mb-1">Waveform Plots</h3>
|
|
<p class="text-sm text-slate-400 leading-relaxed">
|
|
Results render as interactive plots below each netlist.
|
|
</p>
|
|
</div>
|
|
<div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
|
|
<Icon name="lucide:circuit-board" class="w-6 h-6 text-blue-400 mb-3" />
|
|
<h3 class="font-semibold text-slate-100 mb-1">Schematic Generation</h3>
|
|
<p class="text-sm text-slate-400 leading-relaxed">
|
|
Netlists produce SVG circuit diagrams automatically.
|
|
</p>
|
|
</div>
|
|
<div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
|
|
<Icon name="lucide:file-text" class="w-6 h-6 text-blue-400 mb-3" />
|
|
<h3 class="font-semibold text-slate-100 mb-1">Notebook Format</h3>
|
|
<p class="text-sm text-slate-400 leading-relaxed">
|
|
Markdown, SPICE, and Python cells in a single document.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Notebook Gallery -->
|
|
<section id="notebooks" class="max-w-6xl mx-auto px-6 pb-20 scroll-mt-8">
|
|
<h2 class="text-2xl font-bold text-slate-100 mb-8">Notebooks</h2>
|
|
<NotebookGallery
|
|
client:load
|
|
initialNotebooks={notebooks}
|
|
error={fetchError}
|
|
/>
|
|
</section>
|
|
|
|
<!-- Footer CTA -->
|
|
<footer class="border-t border-slate-800/60">
|
|
<div class="max-w-6xl mx-auto px-6 py-16 text-center">
|
|
<h2 class="text-2xl font-bold text-slate-100 mb-3">Ready to simulate?</h2>
|
|
<a
|
|
href="/notebook/new"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium transition-colors text-sm mt-4"
|
|
>
|
|
<Icon name="lucide:plus" class="w-4 h-4" />
|
|
New Notebook
|
|
</a>
|
|
<p class="text-sm text-slate-500 mt-6">
|
|
Built on ngspice · Part of <a href="https://warehack.ing" class="text-slate-400 hover:text-slate-300 underline underline-offset-2">warehack.ing</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</NotebookLayout>
|