"Little article" 's brother ⋅ Plume

How I implemented this incredible expressjs / Plume bridge:

import axios from 'axios';
import express from 'express';
import slug from 'slug';

const app = express();

const TEMPLATE = `<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{TITLE}}</title>
        <style>
            * { font-family: monospace }

            body {
                display: flex;
                justify-content: center;
            }

            body > main {
                width: 900px;
            }

            @media only screen and (max-width: 900px) {
                body > main {
                width: 100%;
                }
            }

            img {
                width: 100%;
            }

            .plume::before {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                padding-inline-end: 4px;
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAegAAAHoBlQypfwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADdSURBVDiNndO9SkNBEAbQE0jAxAh2phFUtBGx0Calvoav4BPYWIi1jWBlkc4qhQq2goXPEBsVRLBS/EFBI9fCeyHF3t0kH0y1e2am2K0YLVPYxBrWcTUsnMExvpDl9YxmCk5iBfcDsKiDFF7ABY4C+BNzMdzCLXp4DTTYLi5WA7iGM8wHzt7RxUds+l5gYoY3POIB02V4Cd8lDbJ8g3Zs+kkEv2AjhmfxU4JvsBzDsB+AfRyikcI1PA3AX5xjNQWLbOXwGjtYHBZCHXc4FX4XyeziEhPjYOj4/6Zj5Q+OY01u5Ws4TAAAAABJRU5ErkJggg==') no-repeat;
            }
        </style>
    </head>
    <body>
        <main>
            <a href="/">< back</a>
            <a href="{{PLUME_URL}}" class="plume" target="_blank">Read on Plume</a>
            <hr>
            <article>
                {{BODY}}
            </article>
            <hr>
        </main>
    </body>
</html>`;

app.get('/blog/:articleName', async (req, res) => {
    const { articleName } = req.params;
    const plumeRes = await axios.get('https://plume.edgarogh.fr/@/edgar.ogh/outbox');
    const { items } = plumeRes.data;
    const article = items.find((article) => {
        const name: string = article.object.name;
        return slug(name, { lower: true }) === articleName;
    });
    if (!article) return res.sendStatus(404).end();
    const { content } = article.object as { content: string };
    res.end(
        TEMPLATE
            .replace('{{TITLE}}', article.object.name)
            .replace('{{PLUME_URL}}', article.object.url)
            .replace('{{BODY}}', content)
    );
});

app.listen(8080, console.log);

Filling a hard-coded template using String#replace with data fetched on-the-go for each request is really not something I'm proud of, but I wanted to do things quickly for the POC.

Have a good day.

"Little article" 's brother

(you won this time. or maybe not actually)

Edgar Onghena

Comments