coryd.dev-eleventy/src/posts/2024/link-blogging-using-readwise.md

date	title	description	draft	tags
2024-01-10	Link blogging using Readwise Reader	How I use Readwise Reader to post and share links.	false	development tech Eleventy

I use Readwise Reader's API to populate the links on my now page. These then get included in my follow feed that's syndicated out to Mastodon using a GitHub action authored by Nicolas Hoizey.

The data file used to fetch these links looks like this:

import EleventyFetch from '@11ty/eleventy-fetch'

export default async function () {
  const API_TOKEN_READWISE = process.env.API_TOKEN_READWISE
  const url = 'https://readwise.io/api/v3/list?location=archive'
  const res = EleventyFetch(url, {
    duration: '1h',
    type: 'json',
    fetchOptions: {
      headers: {
        Authorization: `Token ${API_TOKEN_READWISE}`,
      },
    },
  }).catch()
  const data = await res
  const links = data['results'].map((link) => {
    return {
      title: link['title'],
      url: link['source_url'],
      tags: [...new Set(Object.keys(link['tags']))],
      date: link['created_at'],
      summary: link['summary'],
      note: link['notes'],
      description: `${link['summary']}<br/><br/>`,
    }
  })
  return links.filter((link) => link.tags.includes('share'))
}

This fetches links from my archive (so that it's much more likely that I've read them) and includes them on my now page via a links.liquid partial that looks like this:

{% raw %}

{% if links.size > 0 %}
  <h2 class="now__section--header flex--centered">
    {% tablericon "link" "Links" %}
    Links
  </h2>
  <ul class="link__list">
    {% for link in links limit: 5 %}
      <li>
        <a class="no-underline" href="{{link.url}}" title="{{link.title | escape}}">
          {{ link.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

{% endraw %}

Now, however, I've gone ahead and added the notes field from Readwise's API response to the data I expose in my links.js file above and constructed an additional top level page, complete with pagination. This top level page formats my shared links much like the posts on my home page, adds the summary Readwise fetches as a <blockquote> and, if I've added notes to the document (which I'll now aim to do more consistently), it will render them below the <blockquote>. Now, all of the links I've shared are at least visible somewhere on my site instead of the five most recent on my now page. The links page template looks like this:

{% raw %}

---
title: Links
layout: default
pagination:
  data: links
  size: 8
---
{% for link in links %}
<article class="h-entry">
  <a class="no-underline" href="{{ link.url }}">
    <h2 class="flex--centered">{{ link.title }}</h2>
  </a>
  <time class="dt-published" datetime="{{ link.date }}">
    {{ link.date | date: "%m.%Y" }}
  </time>
  <blockquote class="p-summary">{{ link.summary }}</blockquote>
  {%- if link.note %}
    <p>{{ link.note }}</p>
  {% endif -%}
</article>
{% endfor %}
{% include "partials/paginator.liquid" %}

{% endraw %}

There you have it — link blogging via Readwise Reader¹.

---

1. Or lazy link blogging, if you'd prefer. ↩︎