DEV Community

ludy.dev
ludy.dev

Posted on • Originally published at poemexamples.com

Building a distraction-free poetry database that scores 100 on PageSpeed (No bloat, just beautiful layouts)

By parsing this with a customized unified/remark pipeline, I preserved standard line-breaks using CSS white-space: pre-wrap on the container elements. This ensures that the delicate, visual spacing of poets like Walt Whitman or William Carlos Williams renders exactly as intended on both desktop and mobile screens.

Achieving 100/100 PageSpeed

To give students and writers a fast, distraction-free environment:

  • Static Generation: Every page is pre-rendered at build time. No database queries on runtime.
  • Tailwind CSS: Using utility-first CSS keeps the global stylesheet footprint under 6KB.
  • Zero Bloat: Swapped heavy tracker scripts for privacy-first, lightweight analytics.

I'd love to hear your thoughts on how you handle preserving formatting for sensitive text structures. Check out the live build at poemexamples.com and let me know what you think of the performance!

Top comments (0)