Assist Exterior Articles in an Eleventy Weblog

A couple of weeks in the past, I started serving to a pal migrate his firm weblog from WordPress to a brand new answer. Being a Jamstack proponent, I prompt utilizing Eleventy for his or her new platform. They have been all technical people and the thought of not having to handle and patch WordPress, PHP, and MySQL was very interesting. For probably the most half, I figured it might be a easy conversion. I would get their theme (utilizing the hardcore developer strategy of “view supply”) and easily arrange a primary Eleventy weblog. (Need assistance doing that? I’ve obtained an in depth information that walks you thru it!) Seems, their present weblog had one thing fascinating occurring with it.

You possibly can see their present weblog right here, https://information.ascendingnode.tech/ (On the time I write this, the Eleventy model is completed, simply not but deployed). In case you do not need 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 submit. The title (and the phrase ‘extra’ on the finish) ought to hyperlink to the precise weblog submit. All 4 of the posts proven above look to be an identical by way of ‘kind’ and performance. Nevertheless, for those who click on the primary hyperlink, you truly find yourself on an exterior website.

This shocked me… but additionally excited me. I write on my weblog in addition to on exterior publications. Presently, I record these articles on my About web page and truthfully, I am most likely the one one who visits this. However I liked how the exterior article was offered as simply one other weblog submit. Whereas their present weblog does not have an RSS feed, you possibly can think about it being there identical to another submit. When it comes to discoverability, this looks like a excellent answer.

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

First off, I wished my answer to be according to “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 would create a-story-about-cats.md.

Then, I added a brand new key to my submit entrance matter, remoteURL. I thought of seeing permalink, however so far as I can inform, it might probably 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. Here is how I did this for his or her weblog submit on the exterior website:

---
title: "Ascending Node Applied sciences: An Interactive Visualization Software 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 by means of their flagship product Spaceline, which is supported by a number of NASA SBIR Part 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 mustn’t get written to the file system:

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

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

{% for submit in latestPosts restrict:10 %}

    {% if submit.knowledge.remoteURL %}
        {% assign hyperlink = submit.knowledge.remoteURL %}
    {% else %}
        {% assign hyperlink = submit.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 submit.knowledge.remoteURL %}
    {%- set absolutePostUrl = submit.knowledge.remoteURL %}
{%- else %}
     absoluteUrl(metadata.url) %
{%- endif %}

Truthfully, this is not a giant deal code-wise, however as somebody who blogs lots and does a number of exterior articles, I am actually pleased with this answer. I’ll implement it right here too, however I will most likely be lazy and wait until my subsequent exterior article is revealed. What’s cool is – I’ve obtained a publication (enroll under!) that’s RSS primarily based – so once I use this system so as to add a brand new exterior article, my subscribed readers will robotically get an replace.

Picture by Dorrell Tibbs on Unsplash