playground

Live-served scratchpad for HTML, CSS, JavaScript, and SvelteKit experiments.

Public URL: https://playground.tail5b443a.ts.net Repo: https://forgejo.tail5b443a.ts.net/forgejo_admin/playground

How it works

• nginx pod mounts ~/html-playground via hostPath — save a file, refresh, instant
• Svelte projects need npm run build after edits, then refresh
• nginx reverse-proxies /paldocs-api/ to the pal-e-docs API (no CORS issues)
• Push to Forgejo for version control: git add . && git commit -m "msg" && git push

Projects

#	Name	Type	URL
5	pal-e-docs Browser	Svelte (live API)	/5-pal-e-docs/build/
3	Westside Basketball Dashboard	Svelte (mock data)	/3-westside-dashboard/build/
4	Sprint Board	Svelte (mock data)	/4-sprint-board/build/
1	Flowing River	Svelte (canvas)	/1-first-repo/build/
2	Svelte Hello	Svelte (learning)	/2-svelte-hello/build/
-	CSS & Svelte Guide	HTML	/guide/

Adding a new project

HTML

mkdir ~/html-playground/6-my-project
# add index.html, styles.css, script.js
# add link in root index.html
# refresh browser — instant

SvelteKit

cd ~/html-playground
cp -r 2-svelte-hello 6-my-app
cd 6-my-app
# update svelte.config.js: paths.base = '/6-my-app/build'
# edit src/routes/+page.svelte
npm install && npm run build
# add link in root index.html pointing to 6-my-app/build/

Structure

playground/
├── index.html              ← landing page
├── guide/                  ← CSS & Svelte fundamentals (HTML)
├── 1-first-repo/           ← flowing river (Svelte + canvas)
├── 2-svelte-hello/         ← learning template (Svelte)
├── 3-westside-dashboard/   ← basketball admin/coach/parent (Svelte)
├── 4-sprint-board/         ← kanban board with drag-and-drop (Svelte)
├── 5-pal-e-docs/           ← note browser, live API (Svelte)
├── k8s/                    ← cluster manifests
└── README.md

Infra

• Serving: nginx:alpine via hostPath volume
• TLS: Tailscale funnel (automatic HTTPS)
• API proxy: /paldocs-api/ → pal-e-docs.pal-e-docs.svc.cluster.local:8000
• Namespace: playground