104 lines
4.3 KiB
Markdown
104 lines
4.3 KiB
Markdown
# CLAUDE.md — toolkit
|
|
|
|
## Project
|
|
|
|
SvelteKit 2 + Svelte 5 developer toolkit. All tools run client-side — no server-side logic.
|
|
|
|
## Language
|
|
|
|
**JavaScript only** (`lang="js"` in Svelte files). No TypeScript. Use JSDoc for type annotations.
|
|
|
|
```svelte
|
|
<script lang="js">
|
|
/** @type {string} */
|
|
let value = $state('');
|
|
```
|
|
|
|
## Svelte 5 runes
|
|
|
|
Use `$state`, `$derived`, `$derived.by`, `$effect`, `$props`. No Svelte 4 syntax (`$:`, `export let`, `<slot>`).
|
|
|
|
## Style conventions
|
|
|
|
- Arrow functions for single-expression bodies
|
|
- Regular functions for multi-line logic
|
|
- Imports at top of `<script>`
|
|
- No `function` declarations after state/derived blocks
|
|
|
|
## Shared libraries
|
|
|
|
- `$lib/clipboard.js` — `copy(text)` — wraps `navigator.clipboard.writeText`
|
|
- `$lib/md5.js` — `md5(input: string | Uint8Array): string` — no-dep MD5
|
|
|
|
## Routing
|
|
|
|
File-based under `src/routes/`. Each tool is a directory with `+page.svelte`.
|
|
|
|
| Route | Tool |
|
|
| ------------ | ---------------------------------------------------------------------------------------- |
|
|
| `/` | About — project description + tools index |
|
|
| `/object-id` | MongoDB ObjectId generator & parser |
|
|
| `/uuid` | UUID v1/v3/v4/v5/v6/v7 generator & parser |
|
|
| `/hash` | MD5, SHA-1, SHA-256, SHA-512 |
|
|
| `/cron` | Crontab expression builder |
|
|
| `/api-key` | High-entropy API key generator |
|
|
| `/json` | JSON prettify / compact / validate |
|
|
| `/base` | Base64 / Base64url / Base32 / Base58 / Base16 encode & decode |
|
|
| `/string` | String transforms: lower, UPPER, snake_case, camelCase, PascalCase, kebab, reverse, trim |
|
|
|
|
## Navigation
|
|
|
|
Adding a new tool requires updating three files:
|
|
1. `src/routes/+layout.svelte` — add entry to `links` array
|
|
2. `src/routes/+page.svelte` — add entry to `tools` array
|
|
3. `CLAUDE.md` — add route to the routing table
|
|
|
|
## Theming
|
|
|
|
Colors are defined as CSS custom properties in `src/routes/layout.css`.
|
|
|
|
- Default theme: **Gruvbox Light Hard**
|
|
- Dark theme: **Gruvbox Dark Hard** — activated via `[data-theme="dark"]` on `<html>`
|
|
- Theme toggle button lives in `src/routes/Header.svelte`; persists to `localStorage`
|
|
- Theme is applied before first render via an inline `<script>` in `src/app.html` (no FOUC)
|
|
|
|
Key CSS variables: `--bg`, `--bg-panel`, `--bg-raised`, `--bg-raised-hover`, `--fg`, `--fg-dim`, `--fg-faint`, `--border`, `--border-faint`, `--active-bg`, `--active-fg`, `--link`, `--link-vis`, `--link-hover`, `--err`, `--err-bg`, `--err-border`, `--green`, `--blue`, `--red`, `--bar-bg`, `--bar-fg`, `--bar-dim`.
|
|
|
|
**Never hardcode colors.** Always use CSS variables.
|
|
|
|
## Panel UI pattern
|
|
|
|
Panels (textarea/output areas) use a consistent structure and class names:
|
|
|
|
```svelte
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span>Label</span>
|
|
<div class="panel-actions">
|
|
<button>clear</button>
|
|
<button>copy</button>
|
|
</div>
|
|
</div>
|
|
<textarea ...></textarea>
|
|
</div>
|
|
```
|
|
|
|
CSS for `.panel-header`: `background: var(--bg-raised)`, `border: 1px solid var(--border)`, `border-bottom: none`, `padding: 2px 6px`, `font-size: 0.85em`, `font-weight: bold`.
|
|
|
|
## Active/selected state
|
|
|
|
Buttons and nav tiles use: `background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg)`.
|
|
|
|
## CSS
|
|
|
|
- Global styles: `src/routes/layout.css` — variables, body, a, button, input, select, textarea, table, h1, h2, hr, code
|
|
- Component styles: scoped `<style>` blocks inside each `.svelte` file
|
|
- Aesthetic: suckless/early-2000s — Arial, 1px solid borders, no gradients/shadows/border-radius
|
|
|
|
## Crypto
|
|
|
|
All randomness via `crypto.getRandomValues()`. Hash via `crypto.subtle.digest()`. No external crypto libs except the custom MD5 (needed for UUID v3 and hash page).
|
|
|
|
## No external runtime dependencies
|
|
|
|
`package.json` has only build-time devDependencies. Keep it that way.
|