DEV Community

Deniz Akşimşek
Deniz Akşimşek

Posted on • Originally published at denizaksimsek.com on

1

Add Syndication Links On Your Personal Site Using Dev.to API

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.

(Skip to code)

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)
Enter fullscreen mode Exit fullscreen mode

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",
    ...
}
Enter fullscreen mode Exit fullscreen mode

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%}
Enter fullscreen mode Exit fullscreen mode

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])
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay