Reverting back to a document-based web with PDFs
Posted January 18, 2022
…expect it uses PDFs.
Okay why though?
It reminds me of a simpler world where free indie web projects defined the web instead of being their exception.
In the spirit of all that, I decided to create Wordle PDF.
A document-based web
PDFs, on the other hand, take all of this away, literally reverting us back to a document-based web.
(see what I did there 😅)
You can embed links in PDFs but that's about it.
Dynamically creating PDFs with React
@react-pdf/renderer feels very similar to using React Native because instead of using
<div />s, you're using
<Document />s and
@react-pdf/renderer uses yoga — React Native's layout engine — to let you using flexbox to position pieces of text in of PDFs via CSS-like properties.
Making Wordle PDF
Put it all together and you get Wordle PDF.
@react-pdf/rendererto dynamically generate a PDF with dynamically generated links
- clicking each link advances the state of the game
- the state of the game is serialized into a state string
- that state string is parsed and processes and sent to all the components of Wordle PDF
The end result is a super slow "app" that doesn't have any animations and requires a full page reload in order to see the next screen, just like the good ol' days.
Play it here. (This uses the same exact words as the original Wordle!)
See all the source code at github.com/ricokahler/wordlepdf.com