Assist Exterior Articles in an Eleventy Weblog

Just a few weeks in the past, I started serving to a good friend migrate his firm weblog from WordPress to a brand new answer. Being a Jamstack proponent, I recommended utilizing Eleventy for his or her new platform. They had been all technical of us and the concept of not having to handle and patch WordPress, PHP, and MySQL was very interesting. For probably the most half, I figured it will be a easy conversion. I might get their theme (utilizing the hardcore developer strategy of “view supply”) and easily arrange a primary Eleventy weblog. (Need assistance doing that? I’ve bought an in depth information that walks you thru it!) Seems, their current weblog had one thing attention-grabbing occurring with it.

You possibly can see their current weblog right here, https://information.ascendingnode.tech/ (On the time I write this, the Eleventy model is finished, simply not but deployed). In case you do not wish to click on, here is the entrance web page of posts:

Within the screenshot above, you see 4 weblog posts. That is – once more – a really typical weblog interface. You see a title, a date, and an extract of the put up. The title (and the phrase ‘extra’ on the finish) ought to hyperlink to the precise weblog put up. All 4 of the posts proven above look to be similar by way of ‘kind’ and performance. Nonetheless, in the event you click on the primary hyperlink, you really find yourself on an exterior web site.

This stunned me… but in addition excited me. I write on my weblog in addition to on exterior publications. At present, I record these articles on my About web page and truthfully, I am in all probability the one one who visits this. However I beloved how the exterior article was offered as simply one other weblog put up. Whereas their present weblog does not have an RSS feed, you can think about it being there identical to every other put up. By way of discoverability, this looks like a good answer.

So how can we remedy this in Eleventy? This is what I got here up with.

First off, I wished my answer to be in keeping with “common” weblog posts, by that I imply making a Markdown file within the posts listing. So given a distant article “A Story of Cats”, I might create a-story-about-cats.md.

Then, I added a brand new key to my put up entrance matter, remoteURL. I thought-about seeing permalink, however so far as I can inform, it could possibly solely be used for writing information to the filesystem, nothing extra.

Lastly, I included a paragraph of textual content. That is the textual content you will see on the house web page, and within the RSS feed. This is how I did this for his or her weblog put up on the exterior web site:

---
title: "Ascending Node Applied sciences: An Interactive Visualization Instrument for House Mission Planning"
date: 2022-08-22T18:00:00
remoteURL: https://space-tech.aerospacedefensereview.com/vendor/ascending-node-technologies-an-interactive-visualization-tool-for-space-mission-planning-cid-742-mid-67.html
---

Ascending Node Applied sciences develops options to permit spacecraft mission designers and operators to work higher collectively via their flagship product Spaceline, which is supported by a number of NASA SBIR Section II awards.

I used to be already utilizing a knowledge listing JSON file to specify a format and tag for posts, however I transformed this to JavaScript so I might add a little bit of logic. In my case, distant URL weblog posts shouldn’t get written to the file system:

module.exports = {
    format: "put up",
    tags: "put up",
    eleventyComputed: {
        permalink: information => {
            if(information.remoteURL) return false;
        }
    }
}

To deal with these posts within the entrance finish, I merely needed to test for the remoteURL worth in entrance matter and guarantee I linked to that as an alternative of the common URL. So on the index web page, I’ve:

{% for put up in latestPosts restrict:10 %}

    {% if put up.information.remoteURL %}
        {% assign hyperlink = put up.information.remoteURL %}
    {% else %}
        {% assign hyperlink = put up.url %}
    {% endif %}

The remainder of the web page does not change. These “distant” posts nonetheless have a title, nonetheless have a date, nonetheless have content material I can cross to an excerpt filter.

Lastly, within the feed.njk template, I do one thing comparable:

{%- if put up.information.remoteURL %}
    {%- set absolutePostUrl = put up.information.remoteURL %}
{%- else %}
     absoluteUrl(metadata.url) %
{%- endif %}

Actually, this is not an enormous deal code-wise, however as somebody who blogs rather a lot and does a number of exterior articles, I am actually proud of this answer. I’ll implement it right here too, however I am going to in all probability be lazy and wait until my subsequent exterior article is printed. What’s cool is – I’ve bought a publication (join beneath!) that’s RSS primarily based – so once I use this method so as to add a brand new exterior article, my subscribed readers will routinely get an replace.

Photograph by Dorrell Tibbs on Unsplash