warehack.ing/spicebook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move resistor color guide to /reference/resistor-colors, add 50Ω button on homepage

Browse Source 
Promotes the full ResistorColorGuide component to a dedicated reference
page and replaces the homepage section with a compact inline SVG link
showing Green-Black-Black-Gold (50Ω ±5%) band colors.
This commit is contained in:
Ryan Malloy 2026-02-21 11:32:16 -07:00
parent 0a9abd6771
commit 26f9eb996e
2 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/pages/index.astro
View File

@ -3,7 +3,6 @@ import { Icon } from 'astro-icon/components';
import NotebookLayout from '../layouts/NotebookLayout.astro';
import NotebookGallery from '../components/NotebookGallery';
import PipelineStrip from '../components/PipelineStrip.astro';
import ResistorColorGuide from '../components/ResistorColorGuide.astro';
import FeaturedNotebooks from '../components/FeaturedNotebooks.astro';
import OscilloscopeDisplay from '../components/OscilloscopeDisplay.astro';
import { fetchNotebookList } from '../lib/server-api';
@ -73,9 +72,38 @@ try {
<PipelineStrip />
</section>
<!-- Resistor Color Code Guide -->
<!-- Resistor Color Code Reference link -->
<section class="border-b border-slate-800/60">
<ResistorColorGuide />
<div class="max-w-6xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
<a href="/reference/resistor-colors"
class="inline-flex items-center gap-4 px-5 py-3 rounded-lg border border-slate-700
hover:border-slate-500 hover:bg-slate-800/40 transition-colors group">
<!-- Inline 50-ohm resistor SVG: Green(5)-Black(0)-Black(x1)-Gold(±5%) -->
<svg viewBox="0 0 120 32" class="w-24 h-8 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" aria-label="50 ohm resistor color bands">
<!-- Left lead wire -->
<line x1="0" y1="16" x2="16" y2="16" stroke="#555" stroke-width="1.5"/>
<!-- Band 1: Green (digit 5) -->
<polyline points="16,16 26,6 36,26" fill="none" stroke="#006400" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Band 2: Black (digit 0) -->
<polyline points="36,26 46,6 56,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Band 3: Black (multiplier x1) -->
<polyline points="56,26 66,6 76,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Band 4: Gold (tolerance ±5%) -->
<polyline points="76,26 86,6 96,16" fill="none" stroke="#B8860B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Right lead wire -->
<line x1="96" y1="16" x2="120" y2="16" stroke="#555" stroke-width="1.5"/>
</svg>
<div>
<span class="text-sm font-semibold text-slate-200 group-hover:text-slate-100">
Resistor Color Codes
</span>
<span class="block text-xs text-slate-500">
Learn to read 4-band color codes
</span>
</div>
<Icon name="lucide:chevron-right" class="w-4 h-4 text-slate-600 group-hover:text-slate-400 transition-colors" />
</a>
</div>
</section>
<!-- Featured Notebooks -->

12
frontend/src/pages/reference/resistor-colors.astro Normal file
View File

@ -0,0 +1,12 @@
---
import NotebookLayout from '../../layouts/NotebookLayout.astro';
import ResistorColorGuide from '../../components/ResistorColorGuide.astro';
---
<NotebookLayout
title="Resistor Color Codes — SpiceBook"
description="Visual guide to reading 4-band resistor color codes used in SpiceBook circuit schematics."
canonicalPath="/reference/resistor-colors"
>
<ResistorColorGuide />
</NotebookLayout>