Leonardo Devai
6a6b36cd06
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24, Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login, self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the blog series, safe markdown links in the frontends, and many smaller bugs — every project was built, run and exercised end to end. Adds scripts/publish.sh + a CI publish job that splits every folder into its own repo at git.devai.io/templates/<folder>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
61 lines
1.9 KiB
Markdown
61 lines
1.9 KiB
Markdown
# image-slideshow
|
|
|
|
A slideshow you can click through — prev, next and dots — or let play by
|
|
itself. It's all about one idea: keep a list and an index into it, and wrap the
|
|
index around the ends.
|
|
|
|
## Run
|
|
|
|
Get it: `git clone https://git.devai.io/templates/image-slideshow.git`
|
|
|
|
Double-click `index.html` — it opens in your browser and works. Nothing to
|
|
install, no build step.
|
|
|
|
Or serve it like production:
|
|
|
|
```sh
|
|
docker compose up --build
|
|
```
|
|
|
|
Then open http://localhost:8080.
|
|
|
|
## How it works
|
|
|
|
The slides are an array; the slideshow is one number, `index`, saying which
|
|
slide is showing. `show(i)` paints slide `i` and lights up its dot. Prev and
|
|
next call `move(-1)` and `move(1)`, which wrap with the `%` (remainder)
|
|
operator:
|
|
|
|
```js
|
|
show((index + step + slides.length) % slides.length);
|
|
```
|
|
|
|
Step past the last slide and you land on 0; step back from 0 and you land on
|
|
the last one. Adding `slides.length` first keeps the number positive.
|
|
|
|
Auto-play is `setInterval(() => move(1), 4000)`. It pauses while your mouse is
|
|
over the slideshow or your keyboard focus is inside it, and resumes when you
|
|
leave. The slides are CSS gradients, so there are no image files to download.
|
|
|
|
Try it: add a slide to the `slides` array, change `4000` to `2000`, or make the
|
|
arrow keys call `move(-1)` / `move(1)`.
|
|
|
|
## Layout
|
|
|
|
```
|
|
index.html the slide box, prev/next buttons and an empty dots row
|
|
app.js the slides array, show(), move() and auto-play
|
|
styles.css the look; follows your system's light or dark mode
|
|
```
|
|
|
|
## Deploy
|
|
|
|
Push to your own GitHub repo and the shipped workflow
|
|
(`.github/workflows/ci.yml`) tests the compose stack, publishes the image to
|
|
GHCR, and — once you set the `DEPLOY_HOST` / `DEPLOY_USER` variables and
|
|
`DEPLOY_KEY` secret — deploys it to your server over ssh.
|
|
|
|
---
|
|
Part of [devai.io](https://devai.io) — the Web Basics track: HTML, CSS &
|
|
JavaScript, one concept at a time. Next up:
|
|
[form-validation](https://git.devai.io/templates/form-validation).
|