davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://daily.tinyprojects.dev/paper_website">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://daily.tinyprojects.dev/paper_website" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p class="paragraph"> <i>December 14th 2021</i> </p>
<p class="paragraph"> TLDR; I started a business that lets you <a href="https://paperwebsite.com/" target="_blank">build websites using pen &amp; paper</a>. In the process I went viral on Twitter, made $1,000 in two days, and blew $720 on 100 paper notebooks from Alibaba. </p>
<h3>📖 Can you build a website from a piece of paper?</h3>
<p class="paragraph"> One day, a riddle popped into my brain: </p>
<p class="paragraph"> <i>"Can you build a website from a piece of paper?"</i> </p>
<p class="paragraph"> I'm a man who <a href="https://tinyprojects.dev/projects/mailoji" target="_blank">once bought 300 emoji domain names from Kazakhstan,</a> but, even to me, the idea of building a website from a piece of paper seemed a <i>bit</i> strange. </p>
<p class="paragraph"> Around this time though, I'd been planning to start a brand new daily blog. </p>
<p class="paragraph"> I began picturing myself in a dressing gown, with a cup of tea and a biro, somehow writing this online blog from a page in a notebook. </p>
<p class="paragraph"> This idea seemed <i>very</i> funny. </p>
<p class="paragraph"> Can you build a website from a piece of paper? I decided to at least try it. </p>
<h3>🧙‍♂️ Paper website experiment #1</h3>
<p class="paragraph"> Feeling confident, I got out some paper and wrote down a chorus from <i>The Fresh Prince of Bel Air</i> (don't ask). </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142559083.png?alt=media&amp;token=6e3c2fd2-21d1-449e-9cda-65ea04c17a95" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> If I could transform these handwritten words into pixel words, then it wouldn't be too hard to convert that into the HTML code for a website. </p>
<p class="paragraph"> I took a photo of the page with my phone, and eagerly fed the image into some software that could recognise handwriting. </p>
<p class="paragraph"> A few moments later, I had the results. </p>
<h3>😱 These results may shock you</h3>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142567580.png?alt=media&amp;token=15fd8e80-676d-47c3-91eb-b31c0e28b414" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> There were a lot of mistakes. </p>
<p class="paragraph"> Despite being left-handed and smudging every birthday card I've ever written in, my handwriting is quite neat, so a paper website was not looking promising. </p>
<p class="paragraph"> The software kind of understood my words, so I wondered if I could just fix the spelling mistakes somehow. </p>
<p class="paragraph"> All I needed was a really good spellchecker. </p>
<h3>🤖 A really good spellchecker</h3>
<p class="paragraph"> GPT-3 has been hailed a breakthrough in Artificial Intelligence. </p>
<p class="paragraph"> Billions of parameters work together like a human brain. It can generate whole books, brand new ideas, and chat like a human. </p>
<p class="paragraph"> I needed it for one thing, and one thing only: to be a glorified spellchecker. </p>
<p class="paragraph"> My idea was to feed this world-class AI sentences with spelling mistakes, and examples of how they should be corrected. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142615331.png?alt=media&amp;token=38f149ec-1e68-4727-bc29-4857b5734c40" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> With some luck, it should then learn how to fix mistakes on all future sentences for my paper website. </p>
<h3>🧪 Paper website experiment #2</h3>
<p class="paragraph"> I strapped GPT-3 onto my handwriting recognition code, and retried the experiment. </p>
<p class="paragraph"> <b><i>&gt; Snap picture. Upload. Cross fingers.</i></b> </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142623074.png?alt=media&amp;token=b12523d8-7482-4d31-90f2-3016dd911c71" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> Somehow, it worked! </p>
<p class="paragraph"> It didn't take too much extra effort to build a small prototype that let me upload a photo of my page, turn it into code, and host it on a tiny website. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639475066242.png?alt=media&amp;token=e9d71744-69f0-4cc0-8190-a3786f052be1" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> I also built a basic editor that let me add links, images and headings to make the website more interesting. </p>
<p class="paragraph"> Can you build a website from a piece of paper? It seemed like it. </p>
<p class="paragraph"> Was it practical to use paper for a <i>real</i> website though? No idea. </p>
<h3>🌄 The first ever paper website</h3>
<p class="paragraph"> A few days later, I set off for a week's holiday in the Peak District. Being me, I thought this would be the perfect time to build a test paper website about the trip. </p>
<p class="paragraph"> On the first morning, I got up early and began writing my website on paper. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639474586662.png?alt=media&amp;token=8b7ce2ef-dd17-424f-8adb-9de6d56ecbe9" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> My girlfriend watched me, puzzled. After convincing her that I hadn't gone crazy, I proudly took a photo of my page, and sent her the URL of my newly created paper blog post. </p>
<p class="paragraph"> Although this was the lamest mic drop of all time, I think she was impressed. </p>
<h3>📝 One week of paper blogging</h3>
<p class="paragraph"> Every morning I kept adding to my new paper website until I had written a <a href="https://weekinthepeaks.com/" target="_blank">whole tiny travel blog</a> about the trip. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142676075.png?alt=media&amp;token=f290fc46-74b2-4eaa-847d-e9598dbcad91" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> Despite no one reading it, I found myself genuinely looking forward to writing a new post each morning. </p>
<p class="paragraph"> I wrote more without the distractions of the internet, and it was refreshing not being in front of a screen. It was also just really fun. </p>
<p class="paragraph"> This made me wonder: </p>
<p class="paragraph"> If I enjoyed this way of building websites, perhaps others would too? </p>
<h3>💻 Starting a paper website business</h3>
<p class="paragraph"> Fueled by the excitement of my paper travel blog, I decided to start a service that would let anyone build their own paper website. </p>
<p class="paragraph"> Over a few weeks I fleshed out my prototype. I built an app for easily taking paper pictures, and created a payment system using Stripe for subscriptions. </p>
<p class="paragraph"> The last step was choosing a name. Fortunately, <a href="https://paperwebsite.com/" target="_blank">paperwebsite.com</a> was available for £10, so I creatively called my service: <a href="https://paperwebsite.com/" target="_blank">Paper Website.</a> </p>
<p class="paragraph"> Now I just needed some customers. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142687737.png?alt=media&amp;token=993b8ba7-5b97-4f17-8eff-5e935a941bc3" alt=""><figcaption class="fig-cap"></figcaption></figure>
<h3>🏷️ Marketing tips from the top</h3>
<p class="paragraph"> To entice some potential customers, I decided to conjure up <i>the ultimate deal.</i> </p>
<p class="paragraph"> For $99, you'd get a year long paper website, and a free Moleskine notebook to build your website in. </p>
<p class="paragraph"> It was everything you needed to start your own paper website (although arguably, a pen might also be useful). </p>
<p class="paragraph"> I started dropping links everywhere to spread the good word. </p>
<h3>📈 Mysterious traffic</h3>
<p class="paragraph"> One afternoon, I was sat in a cafe ready to chow down on some serious work. </p>
<p class="paragraph"> I briefly opened Google Analytics, and noticed that for some reason there were 30 people on paperwebsite.com. </p>
<p class="paragraph"> This was a lot more than the usual 0 website visitors. <i>Things</i> were happening. </p>
<p class="paragraph"> After some investigation, I found that Paper Website had randomly been featured as a tiny footnote in a <a href="https://thehustle.co/%E2%9B%B3-golf-is-blowing-up/" target="_blank">massive newsletter.</a> </p>
<p class="paragraph"> Just as I cracked the case, something amazing happened. </p>
<h3>🎉 First customer</h3>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142697110.png?alt=media&amp;token=c858ea05-fa01-4326-b285-4147c7775bf4" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> I watched as Paper Website went from £0 in sales, to £7 as it got its first monthly subscription customer. </p>
<p class="paragraph"> I let out a tiny fistpump in the middle of the cafe that I desperately hope no one saw. </p>
<p class="paragraph"> It wasn't over yet though. Soon after, somebody was lured in by <i>the ultimate deal.</i> </p>
<p class="paragraph"> I had two customers! Now my girlfriend was impressed: </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639168620794.png?alt=media&amp;token=cd5c9b0f-a841-4692-b62c-99c3895aec8c" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> I was the Dunder Mifflin of the internet. </p>
<h3>🚚 Notebook woes</h3>
<p class="paragraph"> My new users began building their paper websites, whilst I realised I now had to ship somebody a Moleskine notebook as part of <i>the ultimate deal.</i> </p>
<p class="paragraph"> I loaded up the Moleskine website and saw this was going to cost a staggering $30. </p>
<p class="paragraph"> Paper Website would go bankrupt at these prices, so somehow I needed to reduce costs. </p>
<p class="paragraph"> Then I wondered: could I just create my own notebooks? </p>
<h3>💳 Buying 100 custom notebooks</h3>
<p class="paragraph"> I opened my browser and went to Alibaba.com. Ten minutes later I was talking to the <i>Jiaxing Banana Import &amp; Export Co.</i> - apparent experts in creating notebooks. </p>
<p class="paragraph"> Their minimum order was 100 notebooks at $3.25 each. I could even have a custom logo on the front. </p>
<p class="paragraph"> This was a point of no return. By purchasing these notebooks I was commiting to an idea that had only been validated by 2 sales. Shipping was also $395. </p>
<p class="paragraph"> But hey, it would be really cool to have my own notebooks. </p>
<p class="paragraph"> I clicked buy. They'd arrive in 4 weeks. </p>
<h3>📦 Notebook Delivery</h3>
<p class="paragraph"> One month later, two large brown cardboard boxes arrived on my doorstep. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142711973.png?alt=media&amp;token=219c9ea3-aad8-4d4d-94c5-53a6d531ad4b" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> I eagerly cracked them open to see what on earth I'd purchased. </p>
<p class="paragraph"> Fortunately, the <i>Jiaxing Banana Import &amp; Export Co.</i> hadn't let me down. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142715882.png?alt=media&amp;token=dccb1a3c-f3a1-423c-84ac-3b22e25198f6" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> 100 white notebooks, each with my logo on the front. They were the perfect operating system for my paper-based internet. </p>
<p class="paragraph"> My brief, unofficial partnership with Moleskine ended, and I proudly added the new notebooks to my website. </p>
<h3>📆 Preparing for launch</h3>
<p class="paragraph"> Now I had 100 notebooks sat in my kitchen, I needed to actually sell them, otherwise a lot of my family would be getting notebooks for Christmas. </p>
<p class="paragraph"> I decided the best plan would be to generate some hype and do a big launch. </p>
<p class="paragraph"> Over the next week I fine tuned my website, and created a video to try and explain to the public what on earth this paper website thing was. </p>
<p class="embed"></p>
<p class="paragraph"> On November 10th 2021, I typed up a launch tweet. </p>
<p class="paragraph"> Then, I tweeted it. </p>
<h3>💸 Going viral on twitter</h3>
<p class="paragraph"> It couldn't have gone better. The tweet <a href="https://twitter.com/tinyprojectsdev/status/1458414762203795460" target="_blank">blew up.</a> </p>
<p class="paragraph"> It quickly spread from my little following to other people on twitter, getting 230k impressions, over 1500 likes, and 300 retweets. </p>
<p class="paragraph"> More importantly though, I was selling some paper websites! </p>
<p class="paragraph"> Over 2 days I sold 11 subscriptions netting ~$1000/yr in revenue, a lot of them were <i>the ultimate deal</i>. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142721019.png?alt=media&amp;token=3b4f6e60-e8ca-4d72-94f3-a785bdb292ed" alt=""><figcaption class="fig-cap"></figcaption></figure>
<h3>🎊 Launch success</h3>
<p class="paragraph"> After finishing <a href="https://www.producthunt.com/posts/paper-website">4th on Product Hunt</a> a few days later, Paper Website was sitting at a modest ~$3,600/yr in subscriptions. </p>
<p class="paragraph"> Loads of people had also now started to build their own paper websites. </p>
<p class="paragraph"> There were websites about <a href="https://doughnuts.design/" target="_blank">game design</a>, <a href="https://angry-catfish-36.web.app/" target="_blank">puzzles</a>, and even <a href="https://thirasoap.com//" target="_blank">making soap</a> - all created from pen &amp; paper. It was so awesome to see. </p>
<p class="paragraph"> Can you build a website from a piece of paper? People were doing it right now! </p>
<h3>📬 Becoming a mailman</h3>
<p class="paragraph"> When the chaos died down, I bought some padded envelopes, and started packaging my notebooks into them. </p>
<p class="paragraph"> Then, I opened my door, walked down the road, and posted the first ever paper website notebook to someone in London. </p>
<p class="paragraph"> This was a surreal experience, when I first imagined a paper website, I never expected things to go this far. </p>
<p class="paragraph"> But, here I was. This is where my story ends, standing in the middle of a random street in England, dropping a notebook into a Royal Mail postbox. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639142726875.png?alt=media&amp;token=484ecf78-de0f-417f-9dbc-b40c8405f63f" alt=""><figcaption class="fig-cap"></figcaption></figure>
<h3>📘 The end</h3>
<p class="paragraph"> The other day my dad (who's a farmer) tried out Paper Website, and created a <a href="https://red-chicken-48.web.app/" target="_blank">page</a> about building a gate out of horseshoes. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639472924737.png?alt=media&amp;token=3126def4-25ef-4674-b30e-9733c93bcd75" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> Although I still have a big box of notebooks in my kitchen, what I'm really excited about is seeing more websites like his. </p>
<p class="paragraph"> There's a lot of weird, wonderful and interesting ideas out there (like horseshoe gates) that never make it to the internet. Perhaps if starting a website was as simple as picking up a pen, we might see more of them. </p>
<p class="paragraph"> Unknowingly stumbling across someone's paper website also sounds like a lot of fun, and I think the internet should be more fun. </p>
<p class="paragraph"> By the way, I did end up starting my new daily blog. </p>
<p class="paragraph"> I'm currently sat in my dressing gown, with a cup of tea and a biro, writing my latest post for it right now on a piece of paper. </p>
<p class="paragraph"> It's called: <i>I blew $720 on 100 notebooks from Alibaba and started a Paper Website business.</i> </p>
<p class="paragraph"> You've been reading a paper website this whole time. </p>
<figure class="fig-img"><img class="img   " src="https://firebasestorage.googleapis.com/v0/b/paper-website.appspot.com/o/xc4sR7hXDtRiHQ9HeqbzlQ2O9Vv1%2FppRd7MWIR2a1BDbOQdwp%2FSiteImages%2F1639389131965.png?alt=media&amp;token=12be4dfa-72c5-4f7a-95c0-3b8db78bcf9e" alt=""><figcaption class="fig-cap"></figcaption></figure>
<p class="paragraph"> I make <a href="https://tinyprojects.dev/">tiny projects</a> </p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>