feat: add printable checklists for SFC certifications #320
Conversation
- New utils/generate-printable-checklists.js script that reads cert MDX files and generates print-optimized HTML checklists - 3-column CSS layout with smart section chunking (splits at midpoint if >6 controls) - Runs as postdocs:build hook, outputs to docs/dist/printable/ - Includes print button, org/owner/date fields, and notes area per section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Print button to CertList component linking to printable HTML - Style print button to match existing Import/Export buttons - Fix output path to docs/public/printable/ for vocs compatibility - Move generate-printables before vocs build for production support - Add docs/public/printable/ to gitignore (generated files) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
@madjin is attempting to deploy a commit to the Security Alliance Team on Vercel. A member of the Team first needs to authorize it. |
- Escape title/subtitle for XSS prevention - Sanitize certName for safe URL/filename use - Filter invalid control objects - Coerce text input to String in escapeHtml 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
This is cool (and the output looks great), but why deploy as a separate doc and button, rather than a standard print style sheet that is used when someone chooses Print in the browser? Generally, it's considered not-great-practice to replicate browser furniture. Does it trigger if I hit cmd-p ? (maybe it does - I couldn't see from my skim of the code - dismiss at will). |
not replicating browser furniture on the main page, moreso providing a link to a purpose-built printable form with fields for Org/Owner/Date, dense layout. Can print via button or cmd/ctrl-p on the new page |
|
It's a nit, but (more) correct behaviour would be to deploy that style sheet if someone prints the main page. https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing |
Per reviewer feedback, adds @media print styles so cmd-p on main pages produces clean output: - Hides nav, sidebar, banner, footer, action buttons - Full-width content with print margins - White background, black text - Shows URLs after external links - Prevents awkward page breaks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Added print stylesheet so now ctrl/cmd-p on main page produces cleaner output. It's ~4x more pages (single-column web layout) vs the dedicated printable which is optimized as a dense 3-column paper form. Here's how modified stylesheet looks, 12 pages vs 7 pages (after): 
The dense html form is 2 pages. Both options now work ^^ 
|
- Hide additional vocs chrome elements (gutterTop, curtains, search) - Hide cert interactive elements (progress bars, toggles, inputs) - Force sections to expand when printing - Clean control card styling with subtle separators - Prevent page breaks inside control cards - Reduce padding for better content density 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2 participants
Summary
Features
/printable/{cert-name}.htmldocs/public/printable/Files Changed
utils/generate-printable-checklists.js- New generator scriptcomponents/cert/CertList.tsx- Print button addedcomponents/cert/control.css- Print button stylingpackage.json- Build script integration.gitignore- Ignore generated filesTest plan
pnpm run docs:devand verify Print button appears on cert pagespnpm run docs:buildand verify files indocs/dist/printable/🤖 Generated with Claude Code
Preview