# Markdown Studio

A self-contained web app for working with markdown files: upload a `.md` file (or start blank), edit it with live syntax highlighting, see a rendered preview, and export the result as **PDF**, **standalone HTML**, or **Markdown**.

Built with React + Vite + Tailwind CSS and [Untitled UI React](https://www.untitledui.com/react) components. No backend — everything runs in the browser, and your document auto-saves to localStorage.

## Features

- **Upload** — drag & drop or browse for `.md` / `.markdown` / `.txt` files (drop works anywhere in the app)
- **Edit** — CodeMirror editor with markdown + fenced-code syntax highlighting
- **Preview** — GitHub-flavored markdown (tables, task lists, strikethrough) with highlighted code blocks
- **Layouts** — editor only, side-by-side split (draggable divider), or preview only
- **Export** — Markdown download (`⌘S` / `Ctrl+S`), self-contained HTML file, or PDF via the browser's print dialog
- **Extras** — light/dark theme, autosave to localStorage, unsaved-changes indicator

## Development

```sh
pnpm install
pnpm dev        # http://localhost:5173
pnpm build      # typecheck + production build into dist/
```

## Docker

```sh
docker compose up --build
# → http://localhost:8080
```

Or without compose:

```sh
docker build -t markdown-studio .
docker run -p 8080:80 markdown-studio
```

The image is a multi-stage build: Node builds the static bundle, nginx serves it (SPA fallback + gzip + long-lived caching for hashed assets).

## SEO

The app ships with full on-page SEO: keyword-rich title/description, canonical URL, Open Graph + Twitter cards with a branded share image (`public/og-image.png`), JSON-LD `WebApplication` structured data, favicons + web manifest, `robots.txt`, and a `<noscript>` fallback for crawlers.

Absolute URLs (canonical, `og:url`, `og:image`) are stamped at build time from `VITE_SITE_URL`. Set it to your public domain before building:

```sh
# .env file
VITE_SITE_URL=https://markdown.yourdomain.com

# or as a Docker build arg
VITE_SITE_URL=https://markdown.yourdomain.com docker compose up --build
```

After deploying, verify the share card with https://www.opengraph.xyz and submit the site in Google Search Console. Ranking beyond on-page factors depends on your domain, backlinks, and content — consider a landing/blog section if you want to target more queries.

## Project layout

```
src/
├── components/      # Untitled UI components (installed via `npx untitledui add`)
├── features/        # App UI: header, editor pane, preview pane, upload zone
├── hooks/           # use-document (state + autosave), use-resolved-theme
├── lib/             # markdown pipeline, export (md / html / pdf), sample doc
└── pages/           # markdown-studio (main screen)
```