Session 16: PDF Fonts, Print Cost Estimator, Share Link Fix
Date: 2026-03-27 Focus: Embed Google Fonts in PDFs, curated font picker, print cost estimator, share link UX
Work Completed
PDF Font Embedding
- Registered 8 Google Fonts with
@react-pdf/renderer: Crimson Pro, Lora, EB Garamond, Playfair Display, Inter, Lato, Open Sans, Montserrat - Fonts loaded from
fonts.gstatic.comand subset-embedded as TrueType in PDF output - Built-in fallbacks: Times-Roman (serif), Helvetica (sans)
Curated Font Picker
- 10 fonts in cover creator (grouped serif/sans-serif), independent controls for title, subtitle, and interior body pages
- Font metadata in
cover-design.ts(no@react-pdfdependency in config) pdfFontFamily()maps font keys to registered @react-pdf font names- "Change Fonts" link on dashboard opens cover page with Text tab pre-selected
Print Cost Estimator (Planning Tool)
- Adjustable contributors, photos/person, message length (short/medium/long)
- Models actual PDF layout: header height, text per response, photo rows, pages per contributor
- Cover type (softcover/hardcover) and interior type (B&W/color) selectors
- Wholesale pricing by size tier with configurable markup percentage
- Split into planning estimator (adjustable) vs order card (real data)
Admin Print Settings
site_settingstable storesprint_markup_pct(default 40%) andprint_credit_usd(default $20)- RLS-protected: only admins can read/write
- Admin page UI for adjusting both values
Share Link Fix
- Stacked QR code + share link vertically (was side-by-side, cramped)
- Visible teal "Copy" button replacing subtle icon
Files Modified/Created
src/lib/pdf-fonts.ts— Font registration modulesrc/lib/cover-design.ts— Font metadata, PDF font mappingsrc/components/CoverCreator.tsx— Font picker UIsrc/components/CostEstimator.tsx— Planning estimator + pricing logicsrc/components/PrintOrderCard.tsx— Order card with real book datasrc/pages/admin/index.astro— Print settings UIsupabase/migrations/—site_settingstable,print_orderstable