feat: ✨ WebGL graphics blog post, Gerber demo on landing page, open-source license notices
- Blog: porting-kicad-graphics-to-webgl post + GAL native/WebGL comparison images and <GalCompare> - Landing page: embed lazily-loaded Gerber demo section + footer "Live demo" link - Licensing: /licenses page (GPLv3 + wxWindows/LGPL-v2 breakdown, ahilss credit, corresponding-source offer) and a footer build-SHA link - Docs: CLAUDE.md + README note to bump the hardcoded footer BUILD_SHA on each release Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Viktor Vaczi
parent
698f6d7cb7
commit
8b438b48b2
13 changed files with 403 additions and 14 deletions
|
|
@ -26,3 +26,5 @@ It's okay to add temporary logging that will be removed for debugging.
|
|||
Don't try to guess what's broken , use debug tools / symbols, supported by the build scripts
|
||||
|
||||
Feature docs/patches are in features/<branch-name>/. Run scripts/create-feature-patches.sh to save patches for root, kicad, wxwidgets submodules.
|
||||
|
||||
The landing page / website is in /site (Astro, deployed as static assets to Cloudflare R2). When releasing a new version, bump the hardcoded build SHA `BUILD_SHA` in site/src/components/Footer.astro to the deployed main-repo commit. It's shown in the footer and links to that commit; because it pins the kicad + wxwidgets submodule revisions implicitly, it is our GPLv3 corresponding-source pointer (see /licenses). The site is static so there's no build-time git/env to set it automatically — it must be updated by hand each release.
|
||||
|
|
|
|||
17
README.md
17
README.md
|
|
@ -170,6 +170,23 @@ See **[docs/README.md](docs/README.md)** for the full documentation map. Highlig
|
|||
- [Debugging Guide](docs/debugging/DEBUG.md) - Asyncify/WASM debugging
|
||||
- [Tests README](tests/README.md) - Test infrastructure
|
||||
|
||||
## Landing page / website
|
||||
|
||||
The marketing site and landing page live in [`site/`](site/) (Astro), deployed as
|
||||
static assets to Cloudflare R2.
|
||||
|
||||
**On every release, bump the build SHA.** `site/src/components/Footer.astro` has a
|
||||
hardcoded `BUILD_SHA` constant that is shown in the footer and links to the
|
||||
corresponding commit. Because the main-repo commit pins the KiCad and wxWidgets
|
||||
submodule revisions implicitly, this is our GPLv3 **corresponding-source** pointer
|
||||
(surfaced on `/licenses`). The site is static, so nothing sets it automatically —
|
||||
update `BUILD_SHA` by hand to the deployed `pcbjam` commit each time you release.
|
||||
|
||||
## License
|
||||
|
||||
KiCad is GPL-3.0. This project follows the same license.
|
||||
|
||||
The site combines KiCad (GPLv3) with the wxWidgets fork; the wxWidgets WebAssembly
|
||||
port files are LGPL v2 (without the wxWindows binary exception). See the
|
||||
`/licenses` page (`site/src/content/legal/licenses.md`) for the full breakdown and
|
||||
the corresponding-source offer.
|
||||
|
|
|
|||
BIN
site/src/assets/gal/gal-alpha-blending-native.png
Normal file
BIN
site/src/assets/gal/gal-alpha-blending-native.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
site/src/assets/gal/gal-alpha-blending-webgl.png
Normal file
BIN
site/src/assets/gal/gal-alpha-blending-webgl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
site/src/assets/gal/gal-transform-api-native.png
Normal file
BIN
site/src/assets/gal/gal-transform-api-native.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
site/src/assets/gal/gal-transform-api-webgl.png
Normal file
BIN
site/src/assets/gal/gal-transform-api-webgl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -5,6 +5,13 @@ import EECredit from './EECredit.astro';
|
|||
const year = new Date().getFullYear();
|
||||
// TODO(links): add Roadmap (/roadmap) and dedicated How-it-works/Open pages when they ship.
|
||||
const GITHUB_URL = 'https://github.com/emergence-engineering';
|
||||
|
||||
// Build provenance. Hardcoded because the site ships as static assets (R2), so
|
||||
// there's no build-time git/env to read it from. BUMP THIS to the deployed
|
||||
// main-repo (pcbjam) commit on each release — it pins the KiCad + wxWidgets
|
||||
// submodule revisions implicitly. See /licenses for the source-code offer.
|
||||
const BUILD_SHA = '695a460';
|
||||
const BUILD_COMMIT_URL = `https://github.com/emergence-engineering/pcbjam/commit/${BUILD_SHA}`;
|
||||
---
|
||||
|
||||
<footer class="site-footer">
|
||||
|
|
@ -28,7 +35,7 @@ const GITHUB_URL = 'https://github.com/emergence-engineering';
|
|||
<nav class="links stack" aria-label="Product">
|
||||
<a href="/#how-it-works">How it works</a>
|
||||
<a href="/#open">Open & yours</a>
|
||||
<a href="/#multiplayer">Multiplayer</a>
|
||||
<a href="/#demo">Live demo</a>
|
||||
<a href="/#waitlist">Join the waitlist</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -44,12 +51,20 @@ const GITHUB_URL = 'https://github.com/emergence-engineering';
|
|||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
<a href="/cookies">Cookie Policy</a>
|
||||
<a href="/licenses">Open-Source Licenses</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container bottom">
|
||||
<span>© {year} Emergence Engineering</span>
|
||||
<span
|
||||
>© {year} Emergence Engineering · <a
|
||||
class="build"
|
||||
href={BUILD_COMMIT_URL}
|
||||
rel="noopener"
|
||||
target="_blank">build {BUILD_SHA}</a
|
||||
></span
|
||||
>
|
||||
<span class="attrib muted">
|
||||
Built on the open-source <a href="https://www.kicad.org" rel="noopener" target="_blank"
|
||||
>KiCad</a
|
||||
|
|
@ -124,6 +139,15 @@ const GITHUB_URL = 'https://github.com/emergence-engineering';
|
|||
font-size: 0.82rem;
|
||||
max-width: 42rem;
|
||||
}
|
||||
.build {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
.build:hover {
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.cols {
|
||||
|
|
|
|||
128
site/src/components/GalCompare.astro
Normal file
128
site/src/components/GalCompare.astro
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
/**
|
||||
* Native-vs-WebGL GAL comparison strips for the WebGL-port blog post.
|
||||
*
|
||||
* Each scenario from the GAL regression suite (tests/gal-regression) is rendered
|
||||
* twice — once by KiCad's native OpenGL GAL, once by the new WebGL GAL — and the
|
||||
* two are laid side by side so the reader can eyeball parity, exactly the way the
|
||||
* suite is validated. Source PNGs are the committed baselines (1600×1200);
|
||||
* astro:assets <Picture> emits responsive AVIF/WebP at build time.
|
||||
*/
|
||||
import { Picture } from 'astro:assets';
|
||||
import alphaNative from '../assets/gal/gal-alpha-blending-native.png';
|
||||
import alphaWebgl from '../assets/gal/gal-alpha-blending-webgl.png';
|
||||
import xfNative from '../assets/gal/gal-transform-api-native.png';
|
||||
import xfWebgl from '../assets/gal/gal-transform-api-webgl.png';
|
||||
|
||||
const pairs = [
|
||||
{
|
||||
title: 'Alpha blending',
|
||||
native: alphaNative,
|
||||
webgl: alphaWebgl,
|
||||
caption:
|
||||
'Overlapping translucent fills plus a fading alpha ramp, native OpenGL and WebGL come out close.',
|
||||
},
|
||||
{
|
||||
title: 'The Transform() API',
|
||||
native: xfNative,
|
||||
webgl: xfWebgl,
|
||||
caption:
|
||||
'A scenario the other way round: KiCad’s Transform() entry point is dead code on the desktop, so our "correct" implementation doesn\'t matter in the end.',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="gal-compare not-prose">
|
||||
{pairs.map((p) => (
|
||||
<figure class="gal-pair">
|
||||
<div class="gal-pair__grid">
|
||||
<div class="gal-shot">
|
||||
<span class="gal-shot__tag">Native OpenGL</span>
|
||||
<Picture
|
||||
src={p.native}
|
||||
formats={['avif', 'webp']}
|
||||
widths={[320, 640, 800]}
|
||||
sizes="(max-width: 700px) 90vw, 340px"
|
||||
alt={`${p.title} rendered by KiCad's native OpenGL GAL`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="gal-shot">
|
||||
<span class="gal-shot__tag gal-shot__tag--webgl">WebGL</span>
|
||||
<Picture
|
||||
src={p.webgl}
|
||||
formats={['avif', 'webp']}
|
||||
widths={[320, 640, 800]}
|
||||
sizes="(max-width: 700px) 90vw, 340px"
|
||||
alt={`${p.title} rendered by the new WebGL GAL`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption><strong>{p.title}.</strong> {p.caption}</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gal-compare {
|
||||
display: grid;
|
||||
gap: 1.75rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.gal-pair {
|
||||
margin: 0;
|
||||
}
|
||||
.gal-pair__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.gal-shot {
|
||||
position: relative;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
/* astro:assets <Picture> emits the <img>; style it globally within the shot. */
|
||||
.gal-shot :global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: contain;
|
||||
}
|
||||
.gal-shot__tag {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
z-index: 1;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--fg);
|
||||
background: rgba(11, 16, 32, 0.82);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.12rem 0.4rem;
|
||||
}
|
||||
.gal-shot__tag--webgl {
|
||||
color: #fff;
|
||||
background: var(--brand-600);
|
||||
border-color: transparent;
|
||||
}
|
||||
.gal-pair figcaption {
|
||||
margin-top: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
@media (max-width: 460px) {
|
||||
.gal-pair__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
*/
|
||||
const poster = "/gerber-demo/poster.png"; // captured screenshot; optional fallback art
|
||||
const caption =
|
||||
"KiCad's Gerber viewer (gerbview), compiled to WebAssembly, running the tiny_tapeout demo board entirely in your browser.";
|
||||
"KiCad's Gerber viewer compiled to WebAssembly, running the tiny_tapeout demo board ";
|
||||
---
|
||||
|
||||
<figure class="gerber-demo not-prose" data-state="idle">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,69 @@
|
|||
---
|
||||
title: "Porting KiCad's Graphics to WebGL with Claude"
|
||||
description: "Coming soon."
|
||||
pubDate: 2026-06-07
|
||||
title: "Porting KiCad's Graphics to WebGL in 2026"
|
||||
description: "How to make KiCad run in a browser pt. 1. Check the demo!"
|
||||
pubDate: 2026-06-18
|
||||
---
|
||||
|
||||
import GerberDemo from '../../components/GerberDemo.astro';
|
||||
import GalCompare from '../../components/GalCompare.astro';
|
||||
|
||||
{/* TODO(author): intro — the gerbview port and the graphics-abstraction-layer → WebGL work. */}
|
||||
# TLDR:
|
||||
|
||||
Coming soon.
|
||||
I don't know much about graphics.
|
||||
Back when it was still called GPGPU I did a CUDA class, but other than that I have no experience.
|
||||
|
||||
## See it run: a Gerber viewer in your browser
|
||||
Then during porting KiCad I realized that I will need to run its graphics abstraction layer in the browser.
|
||||
|
||||
## Gerber viewer in your browser
|
||||
|
||||
The viewer below is KiCad's `gerbview` compiled to WebAssembly. Click to load it
|
||||
(it streams ~22 MB on demand) and it renders a real multi-layer board —
|
||||
the [tiny_tapeout](https://tinytapeout.com/) demo — entirely client-side, with no
|
||||
server doing the rasterization.
|
||||
(it streams ~22 MB on demand) and it renders a real multi-layer board:
|
||||
the [tiny_tapeout](https://tinytapeout.com/) demo -- entirely client-side.
|
||||
|
||||
<GerberDemo />
|
||||
|
||||
# What did not work
|
||||
|
||||
First I just wanted KiCad to build with a WASM target.
|
||||
It took a while, thankfully I've found https://github.com/ahilss/wxWidgets-wasm, a wxWidgets port for the web for an old version.
|
||||
I've used that port as a starting point, but it missed a lot of features. After multiple lines of find-whats-missing and a lot of e2e tests with a lot of screenshots
|
||||
I had a working~ish wxWidgets port, a good start.
|
||||
|
||||
Then it lot of corner cutting, lot of shimming things away that I wanted to work to make KiCad build. The first time the welcome dialog loaded I was happy, very happy, even though
|
||||
clicks did nothing.
|
||||
|
||||
Then when I got through that eventually KiCad loaded up. It was horribly slow.
|
||||
|
||||
I had two main sources of errors: Asyncify and the OpenGL `-sLEGACY_GL_EMULATION` that made it possible to run OpenGL apps on the web.
|
||||
Asyncify is a huge error source on its own, I wanted to get rid of all OpenGL errors ( and get some speed if possible ), so I have a chance to debug them.
|
||||
The errors were an infinite loop of Emulation and WebGL sprinkled with some Asyncify interplay. I had no other option.
|
||||
|
||||
# Let's rewrite to WebGL!
|
||||
|
||||
Thankfully KiCad has a Graphics Abstraction Layer ( GAL ). There's already an alternative CPU renderer, an OpenGL one, let's do a WebGL one then!
|
||||
I don't know OpenGL but there's Claude Code. So: the core idea was to create WebGL and native test apps that check each GAL feature, compare the screenshots to double check.
|
||||
For the native GAL test apps I had to pull the headers inside KiCad from my test code, it needed a few shims ( KiCad usually brings the kitchen sink too ), but in the end worked.
|
||||
|
||||
At first I wanted to do byte-to-byte comparison but it is not possible ( AFAIK ),
|
||||
the WebGL and OpenGL outputs will never be the same, but to a human eye they can look identical.
|
||||
|
||||
Here are two scenarios straight out of that regression suite -- the same GAL calls, drawn once by native OpenGL and once by my WebGL backend:
|
||||
|
||||
<GalCompare />
|
||||
|
||||
So in the end I relied on asking Claude to check the screenshots, prodding, checking again, but in the end I got two screenshots folders that looked the same.
|
||||
Claude back then wasn't that good at understanding screenshots, sometimes LGTM'd totally black things, couldn't see colors, but it was still helpful.
|
||||
|
||||
# Moment of truth
|
||||
And then I wired up my new WebGL GAL into KiCad and... It worked! And it was fast.
|
||||
|
||||
We want to upstream our changes eventually, I'm sure the fork needs a few changes, but it's not in a bad position already. The shaders stayed the same
|
||||
( with the help of a GLSL 1.0 -> GLSL 3.0 ES transformer Python script ), the difference between the OpenGL and this version is a few hundred lines
|
||||
of translation and emulation code ( for a few things you can't do in WebGL, no raw pointers, immediate mode for ex. ).
|
||||
We don't want to dump this on someone, when that time comes I will need to understand the changes deeply and clean up the rough edges.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* TODO(author): the rest of the article. */}
|
||||
|
|
|
|||
64
site/src/content/legal/licenses.md
Normal file
64
site/src/content/legal/licenses.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: Open-Source Licenses & Source Code
|
||||
description: The open-source software PCBJam is built on, the licences that apply, and how to get the corresponding source code.
|
||||
updated: 2026-06-18
|
||||
---
|
||||
|
||||
## The short version (summary)
|
||||
|
||||
This summary helps you understand this page at a glance. It is **not a substitute** for the open-source licences themselves, which are what legally apply.
|
||||
|
||||
- **PCBJam runs open-source software in your browser.** The application is built on **KiCad** (the open-source EDA suite) compiled to WebAssembly, together with **wxWidgets** and other open-source libraries. Each stays under its own licence.
|
||||
- **You have the right to the source.** Because we deliver GPL-licensed software (KiCad) to your browser, you are entitled under the GNU GPL to the **corresponding source code** for the version you receive. See [Getting the source code](#getting-the-source-code).
|
||||
- **These licences are not changed by us.** Our [Terms of Service](/terms) govern the hosted PCBJam service and our own proprietary code; they do not modify or restrict your rights under the open-source licences with respect to the open-source components themselves.
|
||||
- **Trademarks.** "KiCad" and related marks belong to their owners. PCBJam is an independent product built on KiCad and is **not affiliated with, endorsed by, or sponsored by** the KiCad project.
|
||||
|
||||
---
|
||||
|
||||
## Components and their licences
|
||||
|
||||
PCBJam is a combined work. The table below lists its principal open-source components and the licence that applies to each.
|
||||
|
||||
| Component | What it is | Licence |
|
||||
|---|---|---|
|
||||
| **KiCad** | EDA suite, compiled to WebAssembly — the core of PCBJam | **GNU General Public License, version 3 (GPLv3)** |
|
||||
| **wxWidgets** (base) | Cross-platform GUI toolkit that KiCad uses | **wxWindows Library Licence v3.1** (LGPL v2+ with a binary-distribution exception) |
|
||||
| **wxWidgets — WebAssembly port** | The browser/WASM platform layer, derived from [ahilss/wxWidgets-wasm](https://github.com/ahilss/wxWidgets-wasm) | **GNU Lesser General Public License, version 2 (LGPL v2)** — *without* the wxWindows binary exception |
|
||||
| Other bundled libraries | Various supporting libraries used by KiCad | Their respective licences (Apache-2.0, MIT, BSD-3-Clause, Boost, CC0, ISC, CC-BY-SA-4.0, and others) |
|
||||
|
||||
The combined application is conveyed to you under the **GPLv3**. The wxWidgets components are GPL-compatible: the base toolkit's licence is explicitly compatible with GPL'd applications, and the LGPL v2 WebAssembly-port files may be combined into a GPLv3 work under the LGPL's terms.
|
||||
|
||||
> **Note on the WebAssembly port.** The wxWidgets WASM-port files (originally authored by Adam Hilss) are released under plain **LGPL v2 without** the wxWindows binary-distribution exception that the rest of wxWidgets grants. This does not affect your rights here — PCBJam is conveyed as open source under the GPLv3 regardless — but we state it so our notices are accurate. The unmodified wxWidgets base remains under the wxWindows Library Licence.
|
||||
|
||||
---
|
||||
|
||||
## Getting the source code
|
||||
|
||||
In line with the GNU GPL (and as referenced in §12.4 of our [Terms](/terms)), the complete **corresponding source code** for the GPL-licensed software we deliver to your browser — together with the applicable licence texts and notices — is publicly available in one place:
|
||||
|
||||
**<https://github.com/emergence-engineering/pcbjam>**
|
||||
|
||||
The KiCad and wxWidgets forks are included in that repository as **git submodules**, so a recursive clone fetches everything needed to build PCBJam:
|
||||
|
||||
```sh
|
||||
git clone --recurse-submodules https://github.com/emergence-engineering/pcbjam.git
|
||||
```
|
||||
|
||||
For reference, the component forks pulled in as submodules are:
|
||||
|
||||
- **KiCad fork** — <https://github.com/emergence-engineering/kicad-source-mirror> (branch `wasm-port`)
|
||||
- **wxWidgets fork** (incl. the WebAssembly port) — <https://github.com/emergence-engineering/wxWidgets> (branch `wasm-port`)
|
||||
|
||||
The source corresponding to a specific deployed build is identified by the commit revisions — including submodule revisions — recorded in the application's **About / build information**. If you need the exact corresponding source for a build you received and cannot locate it, contact us at **hello@pcbjam.com** and we will provide it.
|
||||
|
||||
We do not claim ownership of, and do not purport to relicense, the open-source components.
|
||||
|
||||
---
|
||||
|
||||
## Full licence texts
|
||||
|
||||
- **GNU General Public License v3 (GPLv3)** — <https://www.gnu.org/licenses/gpl-3.0.html>
|
||||
- **GNU Lesser General Public License v2 (LGPL v2)** — <https://www.gnu.org/licenses/old-licenses/lgpl-2.0.html>
|
||||
- **wxWindows Library Licence v3.1** — <https://www.wxwidgets.org/about/licence/>
|
||||
|
||||
Copies of these licences and the per-component notices are also included in the source repositories listed above.
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Hero from '../sections/Hero.astro';
|
||||
import TrustBar from '../sections/TrustBar.astro';
|
||||
import Multiplayer from '../sections/Multiplayer.astro';
|
||||
import Pillars from '../sections/Pillars.astro';
|
||||
import HowItWorks from '../sections/HowItWorks.astro';
|
||||
import CapabilityProof from '../sections/CapabilityProof.astro';
|
||||
import GerberDemoSection from '../sections/GerberDemoSection.astro';
|
||||
import OpenYours from '../sections/OpenYours.astro';
|
||||
import MigrationStrip from '../sections/MigrationStrip.astro';
|
||||
import PositioningMap from '../sections/PositioningMap.astro';
|
||||
|
|
@ -50,7 +50,7 @@ const jsonLd = {
|
|||
|
||||
<Hero />
|
||||
<TrustBar />
|
||||
<Multiplayer />
|
||||
<GerberDemoSection />
|
||||
<Pillars />
|
||||
<HowItWorks />
|
||||
<CapabilityProof />
|
||||
|
|
|
|||
107
site/src/sections/GerberDemoSection.astro
Normal file
107
site/src/sections/GerberDemoSection.astro
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
/**
|
||||
* Landing-page Gerber-viewer showcase (below the fold).
|
||||
*
|
||||
* The fully-interactive viewer lives on the blog post — it needs the page to be
|
||||
* cross-origin isolated (COOP/COEP for SharedArrayBuffer + pthreads), which we
|
||||
* deliberately do NOT apply to the landing page: that would block the YouTube
|
||||
* hero embed (a no-COEP cross-origin iframe can't load in an isolated document).
|
||||
* So Launch opens the standalone viewer (/gerber-demo/) in a NEW TAB: that page
|
||||
* IS cross-origin isolated (vercel.json) and boots the board immediately.
|
||||
*/
|
||||
import SectionBand from '../components/SectionBand.astro';
|
||||
|
||||
// Standalone viewer page (cross-origin isolated + auto-boots the board). Opened
|
||||
// in a new tab so the landing page itself never needs isolation.
|
||||
const DEMO_HREF = '/gerber-demo/index.html';
|
||||
const poster = '/gerber-demo/poster.png';
|
||||
---
|
||||
|
||||
<SectionBand id="demo" labelledby="gerber-demo-h2">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Real KiCad, rendering in this tab</span>
|
||||
<h2 id="gerber-demo-h2">Open a real board in your browser</h2>
|
||||
<p class="lead">
|
||||
KiCad's Gerber viewer (GerbView), compiled to WebAssembly — no install, no
|
||||
upload. It rasterizes a real multi-layer board, the
|
||||
<a href="https://tinytapeout.com/">tiny_tapeout</a> demo, entirely
|
||||
client-side. Launch the live viewer:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="gerber-launch"
|
||||
href={DEMO_HREF}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
style={`background-image:url(${poster})`}
|
||||
>
|
||||
<span class="gerber-launch__play" aria-hidden="true">▶</span>
|
||||
<span class="gerber-launch__cta">Launch the live Gerber viewer</span>
|
||||
<span class="gerber-launch__sub">Opens in a new tab · streams ~22 MB on demand</span>
|
||||
</a>
|
||||
</SectionBand>
|
||||
|
||||
<style>
|
||||
.gerber-launch {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
max-height: 460px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-color: var(--bg-soft);
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
transition: filter var(--dur) var(--ease);
|
||||
}
|
||||
/* Dim the poster so the CTA stays legible. */
|
||||
.gerber-launch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(11, 16, 32, 0.5), rgba(11, 16, 32, 0.78));
|
||||
}
|
||||
.gerber-launch:hover {
|
||||
filter: brightness(1.06);
|
||||
text-decoration: none;
|
||||
}
|
||||
.gerber-launch > * {
|
||||
position: relative;
|
||||
}
|
||||
.gerber-launch__play {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
background: var(--brand-600);
|
||||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
padding-left: 4px;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.gerber-launch__cta {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.gerber-launch__sub {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--fg-muted);
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gerber-launch {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue