---
title: "Bringing my omg.lol Now page into Eleventy"
date: 2023-03-07T09:52:55
slug: bringing-my-omg-lol-now-page-into-eleventy

---
[Robb Knight](https://rknight.me) has [this great Javascript tool](https://omgnow.rknight.me/) for embedding your [omg.lol](https://omg.lol) /now page in another page.

I thought it was pretty cool to use, but because I'm allergic to client-side Javascript, I wanted to port it to Eleventy so that I could generate it once-per-build. It was actually pretty simple to do, because the [server-side source for omgnow.js is on Github](https://github.com/rknightuk/omgnow.js).  So this was basically a port-to-JS job.

I have to files, `now.md` and `now.11tydata.js`. My `now.md` is pretty simple, it just looks like this:

```markdown
---
title: My /now page
layout: page.njk
---

{{ content | safe }}
```

And then `now.11tydata.js` uses `eleventyComputed` values to retrieve and parse the `/now` page content from the [omg.lol API](https://api.omg.lol/):

```javascript
module.exports = {
    eleventyComputed: {
        content: async () => {
            // Retrieve the /now page from the server
            const response = await fetch("https://api.omg.lol/address/lewis/now");
            const body = await response.json();

            // Convert the unix timestamp to a JS datetime timestamp            
            const updated = new Date(body.response.now.updated * 1000);
            let content = body.response.now.content;

            // Replace the last-updated tag
            content = content.replace("{last-updated}", `<span class="now_updated">Updated ${updated.toLocaleDateString('en-GB', { dateStyle: "medium" })}</span>`);
            // Strip out omg.lol-specific tags
            content = content.replaceAll(/{[^}]*}/g, "");
            // remove comments
            content = content.replaceAll(/\/\*.*?\*\//g, "");

            // Remove everything before the --- Now --- marker, because I handle page titles and headings in 11ty
            if (content.includes("--- Now ---")) {
                const [before, after] = content.split("--- Now ---");
                content = after;
            }
            
            return content;
        }
    }
}
```

And there you have it! Robb's source made this 1000x easier that it would have been. The only thing I need to do is stop stripping out the omg.lol icon sets, and instead replace them with the icons I actually have - my markdown config mostly duplicates the same fontawesome set.