66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# 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)
|
|
```
|