docs: Add Markdown Annotator tool to Docusaurus site - #88
Open
Ziinc wants to merge 9 commits into
Open
Conversation
github-actions
Bot
changed the title
Contributor
|
🚀 Web preview: https://preview-88.treq-9zy.pages.dev |
Interactive file review tool at /tools/markdown-annotator that lets users annotate markdown and code files like a PR review. Features: - Load files via GitHub URL (auto-fetches raw content, preserves source link) or by pasting content directly with a custom filename - Code view: click line numbers to anchor, shift+click for ranges, double-click to annotate a single line; annotations appear inline below annotated lines - Preview view: select text with the mouse to capture line range, then add annotation via the selection bar; rendered markdown with a lightweight built-in renderer (no external deps) - Annotation dialog with ⌘↵ submit and Esc cancel - Finish review panel: optional summary text, copy-to-clipboard, and "Open in Claude" / "Open in ChatGPT" link buttons that encode the full review prompt (file contents + inline annotations + source URL metadata) - Works for markdown, MDX, and generic code files (TS, JS, Python, Go, etc.) - Full light/dark theme support via CSS custom properties
Refactors the annotator into a shared core (_MarkdownAnnotatorContent.tsx) used by both the main page and the new embed page. New embed page (/tools/markdown-annotator-embed): - Standalone page with no Docusaurus navbar/footer (body override via <Head>) - Reads ?url=<github-url> or ?content=<base64url>&filename=<name> on load - Auto-fetches GitHub files and decodes base64 content - Compact header (filename + Code/Preview toggle) via the compact prop - Treq branding badge fixed in the bottom-right corner of the iframe - Full annotation and review functionality works inside the iframe - Opens Claude/ChatGPT in new tabs which works fine from an embed context Embed panel on the main tool page: - "‹/› Embed" toggle button in the file header (shown when a file is loaded) - Inline panel with slide-down animation showing embed configuration - Width and height number inputs (default 900×650) - GitHub-loaded files use compact ?url= param; pasted content uses URL-safe base64 (?content=); files >60 KB show a warning to use GitHub URL instead - Read-only input with the full <iframe> code, copy button, preview link - Step-by-step embedding instructions (including using width="100%") Content encoding: - URL-safe base64 (RFC 4648 §5): + → -, / → _, padding stripped - UTF-8 aware via TextEncoder/TextDecoder - Reversible with decodeContentFromUrl exported from core Also exports encodeContentForUrl, decodeContentFromUrl, and shared components (CodeView, PreviewView, AnnotationDialog) from the core module so the embed page can lazy-import the tool without duplication.
- Replace modal annotation dialog with GitHub PR-style inline comment cards that appear as rows between lines (no overlay, no blocking UI) - Add "+" button left of the line number gutter; clicking opens an inline form directly below the target line - Line number click anchors a range selection; clicking "+" on another line creates a multi-line annotation spanning the range - Remove tab UI from file loader: URL input sits above a divider, paste textarea sits below — no tabs, no filename field for pasted content - Omit filename/source metadata from the exported prompt when content was pasted (no sourceUrl), keeping the prompt clean - Add line numbers to markdown preview: block-based renderer (renderMarkdownBlocks) returns each element with its source line range; line numbers rendered in a fixed-width gutter next to each block - Apply markdown element styles to new previewBlockContent class so headings, code blocks, lists, blockquotes, and links render correctly
Add Tailwind CSS to the docs site (preflight disabled to avoid Infima conflicts; dark mode keyed on [data-theme="dark"] for Docusaurus compat) and bridge the app's HSL CSS variable tokens (--background, --foreground, --border, --muted, --primary, etc.) so shared components render identically in both contexts. Copy and adapt the app's shared UI primitives into web/src/components: - ui/button.tsx and ui/textarea.tsx (identical to app, path-adjusted) - CommentInput.tsx (adapted from app: no onSubmitWithMode/Tauri deps) - lib/utils.ts with cn() (clsx + tailwind-merge, no Tauri imports) Rewrite the code/preview view components in _MarkdownAnnotatorContent.tsx to use Tailwind classes and the shared CommentInput, matching the app's HunkLines gutter layout (w-24 gutter, w-6 add-button column, flex-1 code) and inline comment card appearance (bg-background rounded-md border border-border/60 with invisible group-hover delete button).
Replace 3-column spreadsheet layout with a 2-column table using colgroup for explicit width control. Add-button and line number share a single 52px gutter cell, all backgrounds applied via inline style to avoid Tailwind/ Infima specificity conflicts, pre elements get fontWeight:normal to prevent Docusaurus from bolding code content.
Ziinc
force-pushed
the
claude/markdown-annotation-tool-tsct8x
branch
from
July 24, 2026 19:49
b96647f to
bd60beb
Compare
- Full-width container instead of capped max-width - Add-comment button moved to the right of the line number - Explicit border removal on the code table to kill row/cell seams - scrollbar-gutter: stable on the code scroll area so the container width doesn't shift when a comment form mounts - Header/panel buttons switched to Docusaurus' button/button--primary/ button--secondary classes instead of custom bordered styles - Code/Preview tabs always shown as a GitHub-style tab bar at the top of the review container (content is always treated as markdown)
- renderMarkdownBlocks now emits one block per source line (except fenced code, which must stay multi-line) so every preview line gets its own gutter, add-button, and annotation range like the code view - PreviewView gains the same anchor/hover range-selection UX as CodeView, with the add-button moved to the right of the line number - CodeView lines wrap (pre-wrap + overflow-wrap: anywhere) instead of scrolling horizontally, so the code column stays full width
Infima's global `table` selector (unscoped — applies to every table on the site) sets `display: block; overflow: auto;`, which blockifies the table so its internal content shrink-wraps to content width instead of filling the container, and stripes every 2nd row via `table tr:nth-child(2n)`. Override both explicitly on the code table's CSS module class, and always set an explicit inline row background (transparent by default) so JS-driven highlighting can't be clobbered by the stylesheet cascade regardless of specificity or load order. Verified in a browser: the code table now fills the container width, the comment input spans full width, and there's no more zebra striping.
Tailwind's preflight is disabled for web/ (so it doesn't fight Infima's own styles), which meant raw <button> elements — the shadcn Button used by CommentInput, the "+" add-comment buttons, the delete button on annotation cards — kept the browser's default UA border. Reset appearance/border on any button inside the tool that isn't using Infima's `.button` classes, which already set their own intentional border.
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
2 participants
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.
Interactive file review tool at /tools/markdown-annotator that lets users
annotate markdown and code files like a PR review. Features:
or by pasting content directly with a custom filename
to annotate a single line; annotations appear inline below annotated lines
annotation via the selection bar; rendered markdown with a lightweight
built-in renderer (no external deps)
"Open in Claude" / "Open in ChatGPT" link buttons that encode the full
review prompt (file contents + inline annotations + source URL metadata)