PitBoard website
The download page for PitBoard, served with GitHub Pages at
https://guyka2212.github.io/pitboard-website/.
It's a static site (index.html, styles.css, main.js, assets/). Every push to main deploys
it through .github/workflows/pages.yml.
Downloads
The installers aren't committed. They're assets on the latest
GitHub release, and the page links to
them with fixed names, so the links keep working across versions:
| Asset | Source |
|---|
PitBoard-Setup-Windows.exe | windows-software/dist/PitBoard Setup <version>.exe |
PitBoard-Android.apk | phone-app/androidApp/build/outputs/apk/…/*.apk |
Publishing a new version
Build both apps, copy the files under the names above, then create a release:
gh release create v1.1.0 PitBoard-Setup-Windows.exe PitBoard-Android.apk --repo guyka2212/pitboard-website --title "PitBoard 1.1.0" --notes "What changed"
Then update the version, file sizes and SHA-256 checksums in index.html and push.
Running locally
npx serve .
Changing the styles or script
Browsers cache styles.css and main.js. After changing either one, raise the ?v= number on its
link in index.html (for example styles.css?v=2 → styles.css?v=3) so visitors get the new file.
Documentation
docs/index.html is the user guide, at /docs/. Screenshots live in docs/img/ as WebP. Notes on
a screenshot are plain elements inside its .shot-frame, positioned in percent of the image:
<span class="hl" style="--x:10%;--y:20%;--w:30%;--h:15%"></span> <!-- highlight box -->
<span class="pin" style="--x:40%;--y:20%">1</span> <!-- numbered marker -->
<span class="arrow to-r" style="--x:17%;--y:16%"><b><em>1</em><span>Label</span></b></span>
to-r, to-l, to-t and to-b put the label right, left, above or below the point the arrow
touches; --len sets the arrow length. On phones the labels shrink to their number, so every
annotated screenshot also gets a numbered .legend list underneath.
