# AI Formatter

> A client-side browser tool that strips Markdown formatting from ChatGPT, Claude, and Gemini replies into clean plain text. Processing is 100% local — no data leaves the browser.

## Project Structure

- **Framework**: Astro v6 (static site) + Tailwind CSS v4
- **Build**: `npx astro build` outputs to `dist/`
- **Dev**: `npx astro dev`
- **Design**: Linear-inspired dark canvas — see [DESIGN.md](./DESIGN.md)
- **Deployed**: [aiformat.devbuildtool.com](https://aiformat.devbuildtool.com/)

## Key Files

- `src/layouts/BaseLayout.astro` — Root HTML shell, SEO meta tags, CSP, JSON-LD, Google Fonts, AdSense + GA scripts, skip-to-content link
- `src/pages/index.astro` — Homepage: hero, tool panel, feature cards, FAQ, SEO content section
- `src/pages/about.astro` — About page + contact info + physical address
- `src/pages/faq.astro` — FAQ page
- `src/pages/privacy.astro` — Privacy policy + editorial policy
- `src/pages/terms.astro` — Terms of service
- `src/pages/404.astro` / `500.astro` — Error pages
- `src/components/Header.astro` — Sticky nav with theme toggle
- `src/components/Footer.astro` — Footer with links
- `src/components/FormatterTool.astro` — Core tool: input/output textareas with client-side Markdown processing
- `src/components/FeatureCard.astro` — Feature card component
- `src/components/SeoContent.astro` — SEO-rich description section
- `src/components/FaqList.astro` — Accessible accordion FAQ
- `src/components/ThemeToggle.astro` — Dark/light/system theme switcher
- `src/utils/formatMarkdown.ts` — Core Markdown-to-plain-text transformation logic
- `src/utils/formatMarkdown.test.ts` — Tests for the formatter
- `src/data/faqs.ts` — FAQ data
- `src/styles/global.css` — Tailwind v4 imports, custom theme tokens, skip-link styles
- `astro.config.mjs` — Astro config: static output, sitemap, Tailwind v4 Vite plugin
- `DESIGN.md` — Full Linear-inspired design spec (colors, typography, spacing, components)

## How It Works

1. User pastes Markdown-heavy AI output into the input textarea
2. `formatMarkdown.ts` runs in the browser — strips bold (`**`), italic (`*`), headings (`#`), code fences (`` ``` ``), inline code (`` ` ``), links (`[text](url)`), images, blockquotes (`>`), horizontal rules, strikethrough (`~~`), list markers, and table pipes
3. Cleaned plain text appears instantly in the output textarea
4. User clicks "Copy output" to clipboard
5. No server calls, no uploads, no storage — all logic is client-side JavaScript

## Formatting Rules (`formatMarkdown.ts`)

Removes in order:
- Fenced code blocks (preserves content)
- Inline code backticks (preserves content)
- Bold `**text**` and `__text__`
- Italic `*text*` and `_text_`
- Strikethrough `~~text~~`
- Heading markers `# ` through `###### `
- Blockquote `> ` markers
- Horizontal rules `---`, `***`, `___`
- Unordered list markers `- `, `* `, `+ `
- Ordered list markers `1. `
- Images `![alt](url)` → alt text
- Links `[text](url)` → text
- Table pipes → space-separated cells, separator rows removed
- Collapses 3+ newlines to 2, trims trailing whitespace

## SEO Features

- JSON-LD structured data (SoftwareApplication + Organization author)
- Meta description, author, dates (published/modified)
- Open Graph / Twitter Card tags
- Canonical URLs
- Sitemap (via @astrojs/sitemap)
- Content Security Policy meta tag
- Permissions-Policy meta tag
- Skip-to-content accessibility link
- Heading hierarchy: h1 → h2 (no skipped levels)
- `public/llms.txt` for AI discoverability

## Design System

Info in [DESIGN.md](./DESIGN.md):
- **Canvas**: #010102 (near-black with blue tint)
- **Accent**: #5e6ad2 (Linear lavender-blue)
- **Surfaces**: 4-step ladder from #010102 → #191a1b
- **Text**: #f7f8f8 (ink), #d0d6e0 (muted), #8a8f98 (subtle), #62666d (tertiary)
- **Font**: Inter (fallback for Linear custom sans)
- **Spacing**: 4px base unit, 96px section gaps
- **Radius**: 8px buttons, 12px cards, 16px screenshots

## Scripts

- `npm run dev` — Start dev server
- `npm run build` — Build to `dist/`
- `npm run preview` — Preview production build
- `npm test` — Run vitest

## Dependencies

- astro ^6.4.4
- @astrojs/sitemap ^3.6.0
- tailwindcss ^4.1.17
- @tailwindcss/vite ^4.1.17
- typescript ^5.8.3, vitest ^4.1.8 (dev)

## Pages

- [https://aiformat.devbuildtool.com/](https://aiformat.devbuildtool.com/)
- [https://aiformat.devbuildtool.com/about/](https://aiformat.devbuildtool.com/about/)
- [https://aiformat.devbuildtool.com/faq/](https://aiformat.devbuildtool.com/faq/)
- [https://aiformat.devbuildtool.com/privacy/](https://aiformat.devbuildtool.com/privacy/)
- [https://aiformat.devbuildtool.com/terms/](https://aiformat.devbuildtool.com/terms/)
- [https://aiformat.devbuildtool.com/404/](https://aiformat.devbuildtool.com/404/)
- [https://aiformat.devbuildtool.com/500/](https://aiformat.devbuildtool.com/500/)