chore: add recent posts

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).<!-- excerpt --> 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 <https://coryd.dev/follow.xml> 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 <TOKEN OBTAINED FROM YOUR MASTODON INSTANCE>`
+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.

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.<!-- excerpt -->
+
+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 `<select>` and use that to give users more control when paging. That select lives in [`paginator.liquid#17-28`](https://github.com/cdransf/coryd.dev/blob/78f6cfa93b6caaf6d82e9085939df9d2a14fc389/src/_includes/paginator.liquid#L17-L28) and looks like this:
+
+```html
+  <div class="flex flex-row items-center">
+    <select
+      id="pagination"
+      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
+      style="text-align-last:center">
+      {% for pageEntry in pagination.pages %}
+        <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
+      {% endfor %}
+    </select>
+    <span>
+      of {{ pagination.links.size }}</span>
+  </div>
+```
+
+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)