🖨️ make-folder-txt — website

The marketing site for make-folder-txt, the zero-dependency CLI that dumps a whole project into one readable .txt file.

Built with React, React Router, and Vite — themed around continuous-feed dot-matrix printout paper, because that's basically what the tool produces.

Getting started · Pages · Design · Project structure · Deployment

---

✨ What this is

A four-page, client-rendered React site that explains and documents make-folder-txt: what it does, how to install it, every CLI flag, and exactly what the output file looks like. No backend, no CMS — just static content served by Vite.

• ⚡ Vite for instant dev server start and a small production build
• 🧭 React Router (react-router-dom) for client-side navigation across 4 pages
• 🖋️ A custom design system — no UI framework, no Tailwind, just hand-rolled CSS
• 📋 Copy-to-clipboard code blocks on every command shown
• ♿ Keyboard-visible focus states and prefers-reduced-motion support baked in
• 📱 Responsive down to mobile

🚀 Getting started

Requirements: Node.js 18+ recommended (anything Vite 5 supports).

# install dependencies
npm install

# start the dev server (with hot reload)
npm run dev

# build for production → outputs to dist/
npm run build

# preview the production build locally
npm run preview

Open the URL printed in your terminal (usually http://localhost:5173).

📄 Pages

Route	What's there
/	Hero with an animated "printing" visual, a feature grid, copyable quick-command snippets, and side-by-side Windows / macOS-Linux examples
/install	A five-step, numbered installation walkthrough
/docs	Full CLI flag reference with a sticky binder-style jump index
/output	A rendered example of the generated .txt output, plus a table of what gets skipped by default

🎨 Design

The whole site leans on one idea: this tool turns a folder into a printout, so the UI should feel like continuous-feed dot-matrix paper.

• Palette — warm paper background, pale green-bar stripes behind code and output blocks, near-black ink for text, and a rubber-stamp red (--stamp-red) used only for accents and interactive elements
• Type — JetBrains Mono for headlines, labels, and anything code-like; IBM Plex Sans for body copy
• Signature element — the hero's PrinterHero component, which "types out" a folder tree turning into file contents on page load
• Recurring motif — buttons styled like ink rubber stamps (.stamp-btn), tying the install CTA, docs links, and copy buttons together
• Dividers — a perforation strip (.perforation) between sections, styled like tear-off punch holes

All design tokens (colors, fonts, spacing primitives) live at the top of src/index.css — change them there and they cascade through every page.

🗂 Project structure

make-folder-txt-site/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.jsx              # React Router + app entry
    ├── App.jsx                # route definitions
    ├── index.css              # design tokens + all component styles
    ├── components/
    │   ├── Navbar.jsx
    │   ├── Footer.jsx
    │   ├── CodeBlock.jsx       # copy-to-clipboard command block
    │   └── PrinterHero.jsx     # the animated signature visual
    └── pages/
        ├── Home.jsx
        ├── Install.jsx
        ├── Docs.jsx
        └── Output.jsx

🛠 Customizing

• Update copy or commands directly in the relevant file under src/pages/ — most content is plain JSX, with command snippets passed into <CodeBlock>.
• Add a page: create a file in src/pages/, add a <Route> in src/App.jsx, and a link in src/components/Navbar.jsx.
• Change the theme: edit the CSS variables at the top of src/index.css (--paper, --stamp-red, --green-bar, etc.).

📦 Deployment

This is a static site after npm run build — deploy the dist/ folder to any static host:

• Vercel / Netlify: connect the repo, set the build command to npm run build and the output directory to dist
• GitHub Pages: build, then publish the dist/ folder via your preferred GitHub Pages action
• Any static host: upload the contents of dist/ after building

Because this uses client-side routing (react-router-dom), make sure your host redirects unknown paths back to index.html (a SPA fallback rule) so that direct links like /docs work on refresh.

📝 License

MIT — see LICENSE.