Hacking an e-Reader with React

I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React using Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.

Transcript

1. HACKING AN E-READER WITH REACT FOR TEA Tiger Oakes
2. ▪ Building Microsoft Loop. ▪ Worked on Edge, Chrome, and Firefox. ABOUT ME tigeroakes.com @notwoods@bsky.social @notwoods@hachyderm.io @not_woods TIGER OAKES
3. I LIKE TEA
4. Too many teas! PROBLEM
6. MENU IMAGE Rendering a custom image to display on the e-reader screen 1
7. BACKGROUND
8. MANYWORLDSTAVERN.COM/PRODUCTS/HAZY-HILLS
9. FOREGROUND
10. .SVG FILE <svg viewBox="0 0 600 800" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(0 0)"> <text>Hazy Hills</text> <line x1="0" y1="10" x2="220" y2="10" /> <text>Black tea, moderate caffeine</text> <text>9 g/12 oz, steep 4 mins, 93°C</text> </g> </svg>
11. interface FormattedTeaDatabasePage { /** Name of the tea. */ name: string; /** Caffeine level. */ caffeine: string; /** Temperature to steep the tea at. */ temperature: string; /** How long to steep the tea for. */ steepTime: string; /** How many tea leaves to use per amount of water. */ serving: string; /** Type of tea, such as "Black tea" or "Herbal tea". */ type: string; /** Where in the house the tea is located at. */ location: readonly string[]; }
12. RENDERING NAME CAFFEINE TEMP STEEP TIME SERVING SIZE TYPE Hazy Hills ★★☆ 93°C 4 mins 9 g / 12 oz Black tea function TeaInfo({ tea, position }) { return ( <g transform={`translate(${position})`}> <text>{tea.name}</text> <line x1="0" y1="10" x2="220" y2="10" /> <text y="30" className="desc"> {tea.type}, {CAFFEINE_LEVELS[tea.caffeine]} </text> <text y="48" className="desc"> {tea.serving}, steep {tea.steepTime}, {tea.temperature} </text> </g> ); }
13. TRANSFORM: TRANSLATE function TeaDisplayGroup({ teaList, position }) { const positions = [ "30 85", "30 180", "30 275", "322 85", "322 180", "322 275", ]; return ( <g transform={`translate(${position})`}> {teaList.map((tea, index) => ( <TeaInfo tea={tea} position={positions[index]} /> ))} </g> ); }
14. TRANSFORM: TRANSLATE function TeaDisplayGroup({ teaList, position }) { const positions = [ "30 85", "30 180", "30 275", "322 85", "322 180", "322 275", ]; return ( <g transform={`translate(${position})`}> {teaList.map((tea, index) => ( <TeaInfo tea={tea} position={positions[index]} /> ))} </g> ); }
15. TRANSFORM: TRANSLATE function TeaMenu({ teaLists }) { const positions = [ "8 8", "8 360", ]; return ( <g> {teaLists.map((teaList, index) => ( <TeaDisplayShelf teaList={teaList} position={positions[index]} /> ))} </g> ); }
16. OTHER DESIGNS DIFFERENT CONTENT Use a different number of groups and reposition them. DIFFERENT FONTS Swap font-family with CSS. DIFFERENT BACKGROUND Change out the background shown under the text.
17. LOADING IMAGE ONTO E-READER Set as custom screensaver image NOOK & IPAD Use the image as a book cover KINDLE & KOBO
18. E-BOOK MENU Creating ePub files to load onto the eReader 2
19. EPUB FORMAT BOOK.EPUB RENAMED ZIP FILE Simply renaming book.zip to book.epub creates an e-Book. Standard format used by almost all e-Readers.
20. Directory with XML sitemap pointing to HTML files, CSS, and images ZIP folder with XML table of contents pointing to XHTML files, CSS, and images E-BOOKS ARE LIKE WEBSITES WEBSITE E-BOOK ▪ sitemap.xml ▪ index.html ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf ▪ content.opf ▪ chapter1.xhtml ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf
21. XHTML VS HTML <img /> vs <Img /> <hr /> vs <hr> <link rel="stylesheet" href="css/style.css"> <h1>Heading</h1> <p>Paragraph</p> IDENTICAL ELEMENTS IDENTICAL CSS ONLY LOWERCASE TAGS STRICT CLOSING TAGS S C E O
22. CONTENT.OPF METADATA Book title, author, cover 1 SPINE The chapters, in order 3 MANIFEST List of every file in the ZIP folder GUIDE Important pages 2 4
23. CONTENT.OPF <?xml version="1.0" encoding="UTF-8"?> <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="id-1"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:identifier id="id-1">uuid</dc:identifier> <dc:title>Tea Book</dc:title> <dc:creator>Tiger Oakes</dc:creator> <meta name="cover" content="cover_id" /> </metadata> <manifest> <item href="css/styles.css" media-type="text/css" /> <item id="nav" href="index_page.xhtml" media-type="application/xhtml+xml" /> <item id="ch1" href="chapter1.xhtml" media-type="application/xhtml+xml" /> <item id="cover_id" href="image.png" media-type="image/png" /> </manifest> <spine toc="ncx"> <itemref idref="nav" /> <itemref idref="ch1" /> </spine> <guide> <reference type="toc" title=“Index Page" href="index_page.xhtml" /> </guide> </package>
24. CONTENT.OPF <?xml version="1.0" encoding="UTF-8"?> <package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="id-1"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:identifier id="id-1">uuid</dc:identifier> <dc:title>Tea Book</dc:title> <dc:creator>Tiger Oakes</dc:creator> <meta name="cover" content="cover_id" /> </metadata> <manifest> <item href="css/styles.css" media-type="text/css" /> <item id="nav" href="index_page.xhtml" media-type="application/xhtml+xml" /> <item id="ch1" href="chapter1.xhtml" media-type="application/xhtml+xml" /> <item id="cover_id" href="image.png" media-type="image/png" /> </manifest> <spine toc="ncx"> <itemref idref="nav" /> <itemref idref="ch1" /> </spine> <guide> <reference type="toc" title="Index Page" href="index_page.xhtml" /> </guide> </package>
25. SCRIPTING Write these files with automated tooling 3
26. PANDOC Statically generate an ePub file using markdown as input. pandoc.org
27. MARKDOWN TEMPLATE Each top-level heading is turned into a chapter in the eBook. --- title: Tea Book creator: Tiger Oakes cover-image: image.png css: css/style.css ... # Chapter 1 Hello world … # Chapter 2
28. DENO Write JavaScript to run on your desktop (like Node) but with much more built-in functionality
29. github.com/NotWoods/tea-book SOLUTION More fun than pen and paper!
30. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. THANK YOU! github.com/NotWoods/tea-book tigeroakes.com @notwoods@hachyderm.io @not_woods