From 7b21a5b384bea20f756528070704c752c73c07f2 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 27 Mar 2023 18:03:31 -0700 Subject: [PATCH] chore: add recent posts --- ...ate-syndicate-content-mastodon-eleventy.md | 52 +++++++++++++++++++ .../lazy-select-based-pagination-eleventy.md | 49 +++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 src/posts/2023/automate-syndicate-content-mastodon-eleventy.md create mode 100644 src/posts/2023/lazy-select-based-pagination-eleventy.md diff --git a/src/posts/2023/automate-syndicate-content-mastodon-eleventy.md b/src/posts/2023/automate-syndicate-content-mastodon-eleventy.md new file mode 100644 index 00000000..88c62566 --- /dev/null +++ b/src/posts/2023/automate-syndicate-content-mastodon-eleventy.md @@ -0,0 +1,52 @@ +--- +date: '2023-03-27' +title: 'Automate and syndicate content from Eleventy to Mastodon' +draft: false +tags: ['automation', 'Mastodon', 'Eleventy'] +--- + +I've discussed [building a now page using Eleventy](/posts/2023/building-my-now-page-using-eleventy/) but I also syndicate a subset of that content out to Mastodon using [`@11ty/eleventy-activity-feed`](https://www.npmjs.com/package/@11ty/eleventy-activity-feed) and [Make](https://make.com). The [`@11ty/eleventy-activity-feed`](https://www.npmjs.com/package/@11ty/eleventy-activity-feed) allows you to aggregate various web feeds into a single feed, inserting entries from the feeds sequentially as they're published. My `follow-feed.11ty.js` looks like this: + +```javascript +module.exports = class { + data() { + return { + permalink: '/follow.xml', + } + } + +async render() { + const { ActivityFeed } = await import('@11ty/eleventy-activity-feed') + const feed = new ActivityFeed() + feed.addSource('atom', 'Blog', 'https://coryd.dev/feed.xml') + feed.addSource('rss', 'Letterboxd', 'https://letterboxd.com/cdme/rss') + feed.addSource('rss', 'Glass', 'https://glass.photo/coryd/rss') + feed.addSource('rss', 'Oku', 'https://oku.club/rss/collection/NvEmF') + + return feed.toRssFeed({ + title: "Cory Dransfeldt's activity feed", + language: 'en', + url: 'https://coryd.dev/follow/', + subtitle: "Cory Dransfeldt's activity across the web.", + }) + } +} +``` + +As I update the above feeds, my activity feed found at updates. My workflow at Make[^1] watches `/follow.xml`, checking it every 2 hours and posting the newest item title and url to Mastodon. + +If you elect to use Make for something like this you'll need to leverage the RSS module, which I've configured to return a maximum of 3 items per check and either the Mastodon or HTTP module (I've used the latter as the former errored when accessing my instance). If you use the HTTP module, the configuration is fairly simple: + +1. Log in to your instance, accessing the prefererences, then the `Development` menu. +2. Create a new application, naming it whatever you'd like (mine is named coryd.dev[^2]) with the `write:statuses` scope. +3. Head back to Make, connecting an HTTP module to your RSS module. +4. Add a heading named `Authorization` with a value of `Bearer ` +5. Add a second heading named `Accept` with a value of `application/json` +6. Set the body type to `Application/x-www-form-urlencoded` +7. Add a field with the key set to `status` and the value to the `Title` and `URL` data obtained from your RSS module. +8. Save and schedule the scenario to run at your preferred frequency. + +You should now see posts from your follow feed being sent off to your Mastodon instance as they're updated. + +[^1]: A drag and drop automation service much like Zapier or IFTTT. +[^2]: For the sake of vanity or clarity with respect to the source of the post. \ No newline at end of file diff --git a/src/posts/2023/lazy-select-based-pagination-eleventy.md b/src/posts/2023/lazy-select-based-pagination-eleventy.md new file mode 100644 index 00000000..306c7c99 --- /dev/null +++ b/src/posts/2023/lazy-select-based-pagination-eleventy.md @@ -0,0 +1,49 @@ +--- +date: '2023-03-27' +title: 'Lazy select-based pagination in Eleventy' +draft: false +tags: ['Eleventy', 'javascript', 'development'] +--- + +I've relaunched, rebuilt and rewritten my personal blog more times than I can count and I've had a trail of posts I've never fully migrated at each turn. This weekend, while relaxing and watching movies I ported them into Eleventy and, in doing so, found that the pagination implementation I was using didn't scale well with the number of pages I added. + +I quickly explored having the current page act as a floating index of sorts wherein I would cap the number of pages shown at, say, `5` and then show the previous and next two pages on either side. Limiting the rendered count in [liquid.js](https://liquidjs.com/) was as simple as using the `limit` filter, but tracking the floating index and numbers on either side was more difficult than I would have liked. + +Given that I was already iterating through all pages in my posts collection, my next thought (and the choice I ran with) was to fold all of the enumerated values into a ` + {% for pageEntry in pagination.pages %} + + {% endfor %} + + + of {{ pagination.links.size }} + +``` + +When the select is changed, Javascript is executed to update the current uri to the appropriate page — that logic lives in an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) in [`base.liquid`](https://github.com/cdransf/coryd.dev/blob/78f6cfa93b6caaf6d82e9085939df9d2a14fc389/src/_includes/base.liquid#L74-L88): + +```javascript +(function() { + const pagination = document.getElementById('pagination'); + if (pagination) { + pagination.addEventListener('change', (event) => { + const page = parseInt(event.target.value) + if (page === 1) { + window.location.href = '/' + } else { + window.location.href = `/${ + event.target.value - 1 + }/` + } + }) + } +})() +``` + +[You can see all of that rendered here.](https://coryd.dev/#pagination) \ No newline at end of file