Shadowgraph
About
Sign in

Drutek/webdevpro

0

stars

0

commits

Astro

primary language

Jul 10, 2026

updated

README

webdev.pro

Static-first Astro site of web developer tools. All tools run client-side — including LLM tokenization, which uses lazy-loaded tokenizers in a Web Worker so initial page loads stay small.

Stack

  • Astro 5 (static output) + TypeScript
  • Tailwind CSS 4 (Vite plugin)
  • Cloudflare Pages for hosting
  • Wrangler for deploys
  • Self-hosted Geist + JetBrains Mono via @fontsource-variable/* (bundled into the build, no runtime CDN)

No client-side framework runtime. No external fonts, analytics, or trackers.

Setup

npm install

Develop

npm run dev      # astro dev — hot reload

Build & deploy

npm run build      # outputs to ./dist
npm run typecheck  # astro check
npm run deploy     # build + wrangler pages deploy

First-time deploy: npx wrangler login and create a Pages project named webdev-pro (matches wrangler.toml). After that, npm run deploy is one command.

Adding a tool

The site is driven by a single registry: src/tools/index.ts.

  1. Append an entry: slug, name, description, category, tags, icon (SVG path data, 24×24 viewBox, currentColor stroke). Categories: ai, formatters, testers, converters, encoders, generators.
  2. Create src/pages/tools/<slug>.astro and wrap content in <ToolLayout slug="<slug>">.
  3. Put pure logic in src/lib/tools/<slug>/index.ts (or src/lib/tools/<slug>.ts for simple tools) — DOM-free, unit-testable.
  4. Optional: call registerTool({...}) from ~/lib/webmcp.ts in the page's <script> to expose the tool to AI agents via the W3C WebMCP API (navigator.modelContext.registerTool). Feature-detected — no-op in browsers that don't ship it.

Homepage grid, search, sitemap, JSON-LD, related-tools row, and a per-page OG image at public/og/tools/<slug>.png (regenerated on every build by scripts/build-og.ts) all flow from the registry — no manual asset work.

Project layout

src/
├── layouts/BaseLayout.astro     # html, head, theme bootstrap, slot
├── components/                   # Header, Footer, ThemeToggle, ToolLayout, ToolCard, CopyButton
├── lib/
│   ├── theme.ts, clipboard.ts
│   └── tools/                    # pure-TS tool logic (no DOM)
├── tools/index.ts                # tool registry — single source of truth
├── pages/
│   ├── index.astro               # searchable tool grid
│   ├── sitemap.xml.ts            # generated from registry
│   └── tools/<slug>.astro
├── styles/global.css             # Tailwind v4 + Stitch design tokens
└── env.d.ts
public/
├── favicon.svg
└── robots.txt

Conventions

  • No JS framework runtime. Per-page interactivity is vanilla TypeScript in Astro <script> blocks.
  • Default dark. Theme bootstrap script in <head> applies dark class before paint to avoid FOUC; toggle persists in localStorage.
  • Search. Press / to focus the global search; filters tool cards on name + tags + description + category.
  • Design system. Stitch "Technical Precision System" tokens in src/styles/global.css. Sharp 0px layout corners, 4px interactive corners, 1px outline-variant borders. Geist for UI, JetBrains Mono for code/labels.

Token Counter

The token-counter tool at /tools/token-counter is the flagship feature.

  • Tokenization runs in a Web Worker — main thread never blocks
  • Lazy-loaded — no tokenizer code in the initial page bundle
  • OpenAI uses js-tiktoken (cl100k_base / o200k_base) — exact
  • Llama, Mistral, DeepSeek, Qwen use @huggingface/transformers to load each model's official tokenizer.json from the HF Hub on demand — exact
  • Anthropic, Google don't publish tokenizers; we proxy via cl100k_base and label "estimate"
  • Pricing in src/data/llm-pricing.json — update the lastUpdated field when you refresh prices

Build size note: @huggingface/transformers v3 includes its model-runtime backend (~5MB JS + 23MB ONNX wasm), code-split into separate chunks. They are only fetched when an HF-tokenizer model is first selected — initial page loads stay small. If you never want those chunks shipped at all, swap the hf branch in src/lib/tools/token-counter/worker.ts to fall back to cl100k_base (estimate) like Anthropic and Google.

License

Personal project. No license attached yet.

Similar repos

kodai-tech-official/kodai-tech

Official codebase and assets for KODAI TECH ☕🐼

0

Guruprasath619/underrated-ai-atlas

An interactive directory and deployment guide for underrated open-source and enterprise AI models.…

0

fastify/website

88

pdufour/llm-coder

In-browser LLM website generator

51

CorentinTh/it-tools

Collection of handy online tools for developers, with great UX.

40,570

nbang/nbang.github.io

github page

1

ratheeshkpattambi/safewebtool

0

its-ash/llm

Learn LLM

0

Languages

Astro

50.6%

TypeScript

31.6%

JavaScript

14.1%

CSS

3.7%

Drutek/webdevpro

0

stars

0

commits

Astro

primary language

Jul 10, 2026

updated

README

webdev.pro

Static-first Astro site of web developer tools. All tools run client-side — including LLM tokenization, which uses lazy-loaded tokenizers in a Web Worker so initial page loads stay small.

Stack

  • Astro 5 (static output) + TypeScript
  • Tailwind CSS 4 (Vite plugin)
  • Cloudflare Pages for hosting
  • Wrangler for deploys
  • Self-hosted Geist + JetBrains Mono via @fontsource-variable/* (bundled into the build, no runtime CDN)

No client-side framework runtime. No external fonts, analytics, or trackers.

Setup

npm install

Develop

npm run dev      # astro dev — hot reload

Build & deploy

npm run build      # outputs to ./dist
npm run typecheck  # astro check
npm run deploy     # build + wrangler pages deploy

First-time deploy: npx wrangler login and create a Pages project named webdev-pro (matches wrangler.toml). After that, npm run deploy is one command.

Adding a tool

The site is driven by a single registry: src/tools/index.ts.

  1. Append an entry: slug, name, description, category, tags, icon (SVG path data, 24×24 viewBox, currentColor stroke). Categories: ai, formatters, testers, converters, encoders, generators.
  2. Create src/pages/tools/<slug>.astro and wrap content in <ToolLayout slug="<slug>">.
  3. Put pure logic in src/lib/tools/<slug>/index.ts (or src/lib/tools/<slug>.ts for simple tools) — DOM-free, unit-testable.
  4. Optional: call registerTool({...}) from ~/lib/webmcp.ts in the page's <script> to expose the tool to AI agents via the W3C WebMCP API (navigator.modelContext.registerTool). Feature-detected — no-op in browsers that don't ship it.

Homepage grid, search, sitemap, JSON-LD, related-tools row, and a per-page OG image at public/og/tools/<slug>.png (regenerated on every build by scripts/build-og.ts) all flow from the registry — no manual asset work.

Project layout

src/
├── layouts/BaseLayout.astro     # html, head, theme bootstrap, slot
├── components/                   # Header, Footer, ThemeToggle, ToolLayout, ToolCard, CopyButton
├── lib/
│   ├── theme.ts, clipboard.ts
│   └── tools/                    # pure-TS tool logic (no DOM)
├── tools/index.ts                # tool registry — single source of truth
├── pages/
│   ├── index.astro               # searchable tool grid
│   ├── sitemap.xml.ts            # generated from registry
│   └── tools/<slug>.astro
├── styles/global.css             # Tailwind v4 + Stitch design tokens
└── env.d.ts
public/
├── favicon.svg
└── robots.txt

Conventions

  • No JS framework runtime. Per-page interactivity is vanilla TypeScript in Astro <script> blocks.
  • Default dark. Theme bootstrap script in <head> applies dark class before paint to avoid FOUC; toggle persists in localStorage.
  • Search. Press / to focus the global search; filters tool cards on name + tags + description + category.
  • Design system. Stitch "Technical Precision System" tokens in src/styles/global.css. Sharp 0px layout corners, 4px interactive corners, 1px outline-variant borders. Geist for UI, JetBrains Mono for code/labels.

Token Counter

The token-counter tool at /tools/token-counter is the flagship feature.

  • Tokenization runs in a Web Worker — main thread never blocks
  • Lazy-loaded — no tokenizer code in the initial page bundle
  • OpenAI uses js-tiktoken (cl100k_base / o200k_base) — exact
  • Llama, Mistral, DeepSeek, Qwen use @huggingface/transformers to load each model's official tokenizer.json from the HF Hub on demand — exact
  • Anthropic, Google don't publish tokenizers; we proxy via cl100k_base and label "estimate"
  • Pricing in src/data/llm-pricing.json — update the lastUpdated field when you refresh prices

Build size note: @huggingface/transformers v3 includes its model-runtime backend (~5MB JS + 23MB ONNX wasm), code-split into separate chunks. They are only fetched when an HF-tokenizer model is first selected — initial page loads stay small. If you never want those chunks shipped at all, swap the hf branch in src/lib/tools/token-counter/worker.ts to fall back to cl100k_base (estimate) like Anthropic and Google.

License

Personal project. No license attached yet.

Similar repos

kodai-tech-official/kodai-tech

Official codebase and assets for KODAI TECH ☕🐼

0

Guruprasath619/underrated-ai-atlas

An interactive directory and deployment guide for underrated open-source and enterprise AI models.…

0

fastify/website

88

pdufour/llm-coder

In-browser LLM website generator

51

CorentinTh/it-tools

Collection of handy online tools for developers, with great UX.

40,570

nbang/nbang.github.io

github page

1

ratheeshkpattambi/safewebtool

0

its-ash/llm

Learn LLM

0

Languages

Astro

50.6%

TypeScript

31.6%

JavaScript

14.1%

CSS

3.7%