I recently started using the RSS publishing option to syndicate posts from my personal site to DEV. This allows people to post comments under my posts, many of which might contain useful info. To allow my millions of readers (!) to easily discover and participate in these discussions, I’ve added links to the dev.to copies under my posts.
I could, of course, add these links manually whenever I post, but being armed with such a powerful static site generator as Eleventy, I couldn’t possibly not automate it.
The API and the Data File
Eleventy users will be aware of how easy it is to gather all kinds of data from various APIs and put it in your site, all statically without client-side code. Our task here is exceptionally simple: Pick out the url
and canonical_url
properties for each article, and create a mapping from the latter to the former.
const fetch = require('node-fetch')
module.exports = fetch('https://dev.to/api/articles?username=dza')
.then(res => res.json())
.then(articles => articles.map(
({canonical_url, url}) => [canonical_url, url]))
.then(Object.fromEntries)
Note: If you are copy-and-pasting this code, make sure to replace dza
with your own dev.to username.
This will give us an object like this:
{
"https://www.denizaksimsek.com/2020/css-additional-box-shadow/":
"https://dev.to/dza/css-adding-additional-box-shadows-2lob",
...
}
Now let’s try using it in our templates:
{%if devToSyndication[page.url]%}
<section class="syndication-links">
This article is syndicated to <a class="u-syndication"
href="{{devToSyndication[page.url]}}">DEV</a>, where you can comment on it.
</section>
{%endif%}
Small problem: the page.url
property Eleventy provides us is a relative URL, whereas the URLs we got from DEV are absolute.
Sounds like a job for the URL
class!
function makeRelativeUrl(url) {
const urlObj = new URL(url)
// you might want to append url.search and url.hash too
// but it's unlikely, and a small amount of tech debt is
// good for the soul
return urlObj.pathname
}
...
({canonical_url, url}) => [makeRelativeUrl(canonical_url), url])
Now you should see links on any post that is syndicated to DEV.
Appendix: The Final Data File
const fetch = require('node-fetch')
function makeRelativeUrl(url) {
const urlObj = new URL(url)
// you might want to append url.search and url.hash too
// but it's unlikely, and a small amount of tech debt is
// good for the soul
return urlObj.pathname
}
module.exports = fetch('https://dev.to/api/articles?username=dza')
.then(res => res.json())
.then(articles => articles.map(
({canonical_url, url}) => [makeRelativeUrl(canonical_url), url]))
.then(Object.fromEntries)
Top comments (0)