Dev.to API를 사용하여 개인 사이트에 신디케이션 링크 추가

나는 최근에 내 개인 사이트의 게시물을 DEV로 신디케이트하는 옵션을 사용하기 시작했습니다. 이렇게 하면 사람들이 내 게시물 아래에 댓글을 게시할 수 있으며 그 중 많은 부분이 유용한 정보를 포함할 수 있습니다. 수백만 명의 독자(!)가 이러한 토론을 쉽게 찾고 참여할 수 있도록 내 게시물 아래에 dev.to 사본에 대한 링크를 추가했습니다.

( Skip to code )

물론 게시할 때마다 이러한 링크를 수동으로 추가할 수 있지만 Eleventy와 같은 강력한 정적 사이트 생성기로 무장했기 때문에 자동화하지 않을 수 없었습니다.

API와 데이터 파일

110명의 사용자는 클라이언트 측 코드 없이 정적으로 다양한 API에서 모든 종류의 데이터를 수집하여 사이트에 넣는 것이 얼마나 쉬운지 알게 될 것입니다. 여기서 우리의 작업은 매우 간단합니다. 각 기사의 url 및 canonical_url 속성을 선택하고 후자에서 전자로의 매핑을 만듭니다.

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)

참고: 이 코드를 복사하여 붙여넣는 경우 dza를 자신의 dev.to 사용자 이름으로 바꾸십시오.

이것은 우리에게 다음과 같은 객체를 줄 것입니다:

{
    "https://www.denizaksimsek.com/2020/css-additional-box-shadow/":
        "https://dev.to/dza/css-adding-additional-box-shadows-2lob",
    ...
}

이제 템플릿에서 사용해 보겠습니다.

{%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%}

작은 문제: Eleventy가 제공하는 page.url 속성은 상대 URL인 반면 DEV에서 얻은 URL은 절대적입니다.
URL 클래스에 대한 작업처럼 들립니다!

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])

이제 DEV에 신디케이트된 모든 게시물에 대한 링크가 표시되어야 합니다.

부록: 최종 데이터 파일

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)