feat: add Markdown/ZIP export and reorganize sources under src/#1
Merged
Conversation
Inspired by upstream PR Evercoder#16. Why: - Users want to share clipboard snapshots with AI assistants, which works best as a single self-contained Markdown file. - Users also want the raw bytes (text + binary files) for offline analysis or bug reports. - The previous layout mixed source (index.jsx) with the build artifact (index.js) at the repo root, which was easy to edit by mistake. What: - Split index.jsx into a proper src/ tree: src/index.jsx entry (render + paste/drop/dragover) src/ClipboardInspector.jsx main UI component src/extract-data.js DataTransfer/ClipboardItem extraction src/mdn-urls.js MDN link constants src/download/utils.js shared MIME/filename/download helpers src/download/markdown.js new: download as a single .md file src/download/zip.js new: download as a structured ZIP - Add "Download as Markdown" button: single .md with timestamp header, per-entry sections, tables for .types/.items/.files, fenced code blocks with language inferred from MIME, and dynamic fence escaping for content that itself contains triple backticks. Binary payloads are described by name/type/human-readable size. - Add "Download as ZIP" button: structure based on Evercoder#16 (README.txt, metadata.json, types/, items/, files/ with manifests). Improves on Evercoder#16 by nesting each clipboard entry under data-<index>/, so multiple DataTransfer entries no longer collide. - Decouple ClipboardInspector from the global render() via onReset and onPasteFromClipboard props. - Fix pre-existing React warnings by changing class= to className= on .cb-copy and .cb-entry. - Update package.json scripts to point at src/index.jsx, add jszip ^3.10.1 dependency, and rewrite README.md with the new layout and export formats. - Keep index.html / index.js / style.css at the repo root so that `gh-pages -d .` deployment continues to work; the committed index.js is regenerated from src/ via `npm run build`. Verified: npm run build (449.8kb), dev server smoke test on 127.0.0.1:8000, buildMarkdown unit test 14/14. See docs/refactor-2026-04.md for the full plan and trade-offs. Made-with: Cursor
2 tasks
FuDesign2008
added a commit
that referenced
this pull request
Apr 22, 2026
The `Download as Markdown` / `Download as ZIP` buttons introduced in #1 used a Material-style filled look (saturated blue/green + white text) that clashed with the project's Neo-Brutalism language (thick black border, light background, black text, offset black shadow, yellow `:active`). The white `color` also made `box-shadow: 0.1em 0.1em currentColor` render as an invisible white shadow on the white page. Make the two download buttons inherit the baseline `button{}` rules and only override `background` for light-tinted semantic hints: - `--md` → `#cfe8ff` (light blue, black text, contrast ≈17:1) - `--zip` → `#c8f7da` (light green, black text, contrast ≈18:1) Border color, text color, offset shadow, and `:active` yellow now come from the baseline, so the three buttons (`Go back` + two downloads) share the same visual grammar. Net -14 lines of CSS; no JS or markup changes; `index.js` is byte-identical to main. Made-with: Cursor
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Inspired by upstream Evercoder/clipboard-inspector#16, this PR:
.mdfile designed to be pasted directly into an AI chatdata-<index>/so multipleDataTransferentries no longer collidesrc/— splits the 413-lineindex.jsxinto 7 focused modules;index.jsremains at the repo root as a build artifact sogh-pages -d .deployment keeps workingclass=→className=on.cb-copy/.cb-entry)See
docs/refactor-2026-04.mdfor the full plan, trade-offs, and design rationale.New project layout
Markdown export design
.types/.items/.filestext/html→html,application/json→json, etc.)name / type / human-readable size(no base64 embed, to keep the file small)ZIP export improvements over Evercoder#16
data-<index>/subfolder, avoiding the case where multipleDataTransferitems overwrite each other intypes//items//files/src/download/utils.jsfor reuse by the Markdown exporterTest plan
npm installnpm run build— producesindex.js(449.8kb)npm run start— dev server on 127.0.0.1:8000 serves updated bundlebuildMarkdown()unit test — 14/14 assertions covering header metadata, section layout, MIME→language inference, binary description, human-readable sizes, and dynamic fence escapingdata-0/files/<name>.pngexists and the bytes matchdata-<n>/types/structureCompatibility
gh-pages -d .deployment keeps working:index.html,index.js,style.cssremain at the repo rootindex.jsis regenerated onnpm run build; banner updated to "auto-generated from src/, do not edit directly"Follow-ups (not in this PR)
vitestand promote the ad-hocbuildMarkdowntest script into a proper test suiteMade with Cursor