Clean and minimal homepage for s17 Labs.

Stack

Built with Astro + Tailwind CSS v4. Static output, zero runtime JavaScript frameworks, deployed to GitHub Pages via GitHub Actions.

• src/pages/ — routes (/, /tools, /design, /projects, /privacy, /terms, /404)
• src/components/ — shared UI (BaseHead, Icon, TopBar, SearchDialog, SearchFab, Footer, …)
• src/data/tools.ts — single source of truth for the tools listing
• src/data/nav.ts — site nav and /design/ sections, shared by the toolbar menu, search, and the design page pills
• public/ — static assets served as-is (favicon, fonts, brand images, robots.txt)

Full repo documentation lives in docs/README.md.

Development

Requires Node 22+.

npm install
npm run dev      # local dev server
npm run build    # production build to dist/
npm run preview  # preview the production build

Design System

Colors, typography, iconography, components, and brand kit — documented and showcased with live specimens at s17labs.github.io/design. New pages must use ToolLayout + the tool.css tokens; anything used twice gets promoted from the tool stylesheet into tool.css.

Navigation

Every page except the home page gets a sticky top bar from BaseLayout: back link, page header, search, and a menu — pass barTitle (plus optional backHref / backLabel / barWidth) rather than hand-rolling a page header. The bar is sized to the page's content measure so it and the column below share both edges. The home page renders a floating search button instead. Search (/ or ⌘K) indexes the tools, projects, pages, and design sections straight from the existing registries, so it stays current with no separate index to maintain.

The shared footer includes a TOP button on every page. It scrolls to the beginning of the page, using an immediate scroll when reduced motion is requested.

Tools

The s17 Labs Tools suite lives in this repo and is served at s17labs.github.io/tools. Tools are native Astro pages sharing a common design system (src/styles/tool.css, ToolLayout.astro) with logic typechecked in src/scripts/tools/ — see src/data/tools.ts for the registry.

• Icon Maker, Image Resizer, SVG to PNG, Case Converter, QR Generator — Astro pages sharing the s17 design system (src/styles/tool.css, ToolLayout.astro)

All tools run fully client-side — no server endpoints. Font Awesome icon data comes from npm packages; client logic is typechecked TypeScript in src/scripts/tools/. Note: emoji SVGs in Icon Maker are fetched from a CDN at runtime, so emoji sources need network access. The registry lives in src/data/tools.ts.

Adding a new tool

1. Create src/pages/tools/<slug>.astro using ToolLayout
2. Put client logic in src/scripts/tools/<slug>.ts
3. Register it in src/data/tools.ts

---

© 2026 s17 Labs