404 Poetry

Turn your website's 404 page into a poetry creation tool.

1

Add an error_page to your server block if you don't have one already.

/etc/nginx/sites-available/your.website

server {
    root /var/www/your.website;
    index index.html index.htm index.nginx-debian.html;
    server_name your.website www.your.website;

    error_page 404 /404.html;

    location / {
            try_files $uri $uri/ =404;
            autoindex on;
    }
}

2

Replace your 404.html with something like this. Customize the styles to your liking. Sorry, I'm sure the code could be better.

404.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>404 poem</title>
    <style>
        body {
            font-family: serif;
            font-size: 16px;
            line-height: 18px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <main id="poem">
        <!-- this is where your poem will go -->
    </main>
    <script defer>
        const url = new URL(window.location);
        let poem_clean = decodeURI(url.pathname);
        let poem = poem_clean.split('/');
        poem.shift();
        let html_poem = [];

        poem.map(line => {
            html_poem.push(line + '<br>');
        })

        document.querySelector('#poem').innerHTML = html_poem.join('');
    </script>
</body>
</html>

Using your new poem writer

You can now write poems by typing them after your url.

/ => line break

example poem:

https://elliott.computer/hello/there/elliott
https://elliott.computer/words/with/friends