chore: b2 post; tag consistency
This commit is contained in:
Cory Dransfeldt
parent
8618de09d7
commit
e4b397026f
21 changed files with 205 additions and 20 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "6.0.2",
|
||||
"version": "6.0.3",
|
||||
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2015-03-28'
|
||||
title: 'Currently reading'
|
||||
description: "I've been reading a lot lately (mainly on my phone when I catch a spare moment). I've picked up several books on front end development and am currently digging in to JavaScript: The Good Parts by Douglas Crockford."
|
||||
tags: ['books', 'JavaScript']
|
||||
tags: ['books', 'javascript']
|
||||
---
|
||||
|
||||
I've been reading a lot lately (mainly on my phone when I catch a spare moment). I've picked up several books on front end development and am currently digging in to _JavaScript: The Good Parts_ by [Douglas Crockford](http://www.crockford.com).<!-- excerpt --> I've been trying to dial in on an area of focus when reading about development and, for now, I think I'm settling in on JavaScript and a bit of Python. In addition to Crockford's book I'm planning on reading a book on [Ember.js](http://emberjs.com) and the framework's documentation.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2016-12-31'
|
||||
title: 'JavaScript topics and frameworks to learn in 2017'
|
||||
description: "A fantastastic read on what to stay on top of in the ever-changing JavaScript ecosystem in 2017."
|
||||
tags: ['JavaScript', 'development']
|
||||
tags: ['javascript', 'development']
|
||||
---
|
||||
|
||||
[A fantastastic read](https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.2micvl2c8) by [Eric Elliott](https://ericelliottjs.com) on what to stay on top of in the ever-changing JavaScript ecosystem in 2017.<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2018-04-22'
|
||||
title: 'Generating Jekyll posts using Drafts and Working Copy'
|
||||
description: "I put together a script that will take a draft, grab the title and body and then prompt you for front matter data before sending the completed post off to Working Copy. It's specific to my site, and purposes, but it should be fairly straightforward and easy to adapt to your needs."
|
||||
tags: ['iOS', 'JavaScript', 'automation']
|
||||
tags: ['iOS', 'javascript', 'automation']
|
||||
---
|
||||
|
||||
I put together a script that will take a draft, grab the title and body and then prompt you for front matter data before sending the completed post off to [Working Copy](https://itunes.apple.com/us/app/id896694807?at=11lvuD). It's specific to my site, and purposes, but [it should be fairly straightforward and easy to adapt to your needs.](https://actions.getdrafts.com/a/1GO)<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2020-03-04'
|
||||
title: 'Debugging JavaScript - Interview with Mehdi Osman'
|
||||
description: "Debugging JavaScript is one of those topics where people tend to be divided into two camps - those that console.log and those that use a debugger. In this interview, I am learning more about the topic from Mehdi Osman, the CEO of a company called Asayer."
|
||||
tags: ['development', 'JavaScript']
|
||||
tags: ['development', 'javascript']
|
||||
---
|
||||
|
||||
**[SurviveJS:](https://survivejs.com/blog/debugging-interview/)**
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-02-09'
|
||||
title: 'Adding client-side rendered webmentions to my blog'
|
||||
description: "My blog is currently hosted on weblog.lol which allows for a simple and configurable weblog managed in git with posts formatted in markdown."
|
||||
tags: ['webmentions', 'development', 'JavaScript', 'API']
|
||||
tags: ['webmentions', 'development', 'javascript', 'API']
|
||||
---
|
||||
|
||||
My blog is currently hosted on weblog.lol which allows for a simple and configurable weblog managed in git with posts formatted in markdown. I wanted to add webmentions to my blog which, as of now, doesn't include a build step. To accomplish this, I've added an intermediary api endpoint to the same Next.js app that powers my [/now](https://coryd.dev/now) page.<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-02-06'
|
||||
title: 'Automating (and probably overengineering) my now page'
|
||||
description: "omg.lol (where I point my domain) and host most of my site content recently launched support for /now pages."
|
||||
tags: ['automation', 'development', 'Next.js', 'JavaScript']
|
||||
tags: ['automation', 'development', 'Next.js', 'javascript']
|
||||
---
|
||||
|
||||
[omg.lol](https://home.omg.lol) (where I point my domain) and host most of my site content [recently launched support for /now pages](https://omglol.news/2023/01/16/now-pages-are-here).<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-03-18'
|
||||
title: 'Building my now page using Eleventy'
|
||||
description: "As part of my commitment to writing about things I've written in other frameworks in Eleventy, this is how I re-engineered my /now page in Eleventy."
|
||||
tags: ['Eleventy', 'JavaScript', 'Last.fm', 'Oku', 'Trakt', 'Letterboxd', 'API']
|
||||
tags: ['Eleventy', 'javascript', 'Last.fm', 'Oku', 'Trakt', 'Letterboxd', 'API']
|
||||
---
|
||||
|
||||
As part of my commitment to writing about things I've written in other frameworks in Eleventy, this is how I re-engineered [my /now page](/now) in [Eleventy](https://www.11ty.dev/).<!-- excerpt -->[^1]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-11-30'
|
||||
title: 'Check in to your personal site'
|
||||
description: "For a while now I've had a line on my homepage displaying the track I'm currently listening to via Last.fm. In the interest of taking things entirely too far I've expanded what it does a fair bit."
|
||||
tags: ['Eleventy', 'JavaScript', 'Last.fm', 'Trakt', 'NBA', 'API']
|
||||
tags: ['Eleventy', 'javascript', 'Last.fm', 'Trakt', 'NBA', 'API']
|
||||
---
|
||||
For a while now I've had a line on my homepage displaying the track I'm currently listening to via [Last.fm](https://www.last.fm/user/coryd_). In the interest of taking things entirely too far I've expanded what it does a fair bit.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-06-21'
|
||||
title: 'Displaying listening data from Apple Music using MusicKit.js'
|
||||
description: "Up until now my now page has sourced music data from Last.fm (and may well again). But, in the interest in experimenting a bit, I've tried my hand at rewriting that part of the page to leverage data from Apple Music, using MusicKit.js instead."
|
||||
tags: ['development', 'music', 'Eleventy', 'Apple', 'JavaScript', 'API']
|
||||
tags: ['development', 'music', 'Eleventy', 'Apple', 'javascript', 'API']
|
||||
image: https://cdn.coryd.dev/blog/albums-artists.jpg
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: "My now page consists of a number of similar sections — some besp
|
|||
tags:
|
||||
- Eleventy
|
||||
- development
|
||||
- JavaScript
|
||||
- javascript
|
||||
---
|
||||
|
||||
My now page consists of a number of similar sections — some bespoke text, a number of media grids and lists. The text is repeated once, the lists are easily templated out in [Liquid.js](https://liquidjs.com/) and the media grids are all quite similar. Given the prominence of the media grids on the page and the number of them I decided to consolidate them into a single template while also normalizing the data passed into them as best I could.<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-03-27'
|
||||
title: 'Lazy select-based pagination in Eleventy'
|
||||
description: "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."
|
||||
tags: ['Eleventy', 'JavaScript', 'development']
|
||||
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 -->
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ date: '2023-09-06'
|
|||
title: 'Now page: grouping episodes of the same tv show'
|
||||
description: "I made a minor update to how I'm normalizing TV data for display on my now page."
|
||||
tags:
|
||||
- JavaScript
|
||||
- javascript
|
||||
- Eleventy
|
||||
- development
|
||||
image: https://cdn.coryd.dev/blog/grouped-tv.jpg
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-08-25'
|
||||
title: 'Displaying now playing data with matching emoji using Netlify edge functions and Eleventy'
|
||||
description: "My site is built using 11ty and is rebuilt once an hour. These frequent rebuilds accomplish a few things, notably updating webmention data and keeping my now page current."
|
||||
tags: ['Eleventy', 'JavaScript']
|
||||
tags: ['Eleventy', 'javascript']
|
||||
---
|
||||
|
||||
My site is built using [11ty](https://www.11ty.dev) and is rebuilt once an hour. These frequent rebuilds accomplish a few things, notably updating webmention data and keeping [my now page](https://coryd.dev/now/) current. Recently, however, I decided to add the track I'm other currently listening to on my home page which, ideally, would be updated in real time. [Enter client-side JavaScript and Netlify's Edge Functions](https://docs.netlify.com/edge-functions/overview/).<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-07-21'
|
||||
title: 'Road to madness: charting Apple Music listening data'
|
||||
description: "I've written before about displaying my listening data from Apple Music but, recently, I've attempted to take things a bit further."
|
||||
tags: ['development', 'music', 'Eleventy', 'Apple', 'JavaScript', 'API']
|
||||
tags: ['development', 'music', 'Eleventy', 'Apple', 'javascript', 'API']
|
||||
image: https://cdn.coryd.dev/blog/charlie.jpg
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-03-19'
|
||||
title: 'Scheduled Eleventy builds on Vercel with cron-triggered GitHub actions'
|
||||
description: "In an effort to get away from client-side Javascript and embrace Eleventy for what it is (a static site generator), I've dropped my social-utils instance offline and my now-playing track display on my home page that still relied on it."
|
||||
tags: ['Eleventy', 'JavaScript', 'automation', 'GitHub', 'GitHub actions', 'cron', 'YAML', 'API']
|
||||
tags: ['Eleventy', 'javascript', 'automation', 'GitHub', 'GitHub actions', 'cron', 'YAML', 'API']
|
||||
---
|
||||
|
||||
In an effort to get away from client-side Javascript and embrace Eleventy for what it is (a static site generator), I've dropped my [social-utils](https://github.com/cdransf/social-utils) instance offline and my now-playing track display on my home page that still relied on it.<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2023-04-24'
|
||||
title: 'Talk: Building a now page with Eleventy'
|
||||
description: "My talk from the Eleventy meetup about building my now page (you even get to see how much I resemble my avatar)."
|
||||
tags: ['Eleventy', 'JavaScript', 'automation']
|
||||
tags: ['Eleventy', 'javascript', 'automation']
|
||||
---
|
||||
|
||||
My talk from the Eleventy meetup about building [my now page](https://coryd.dev/now) (you even get to see how much I resemble my avatar).<!-- excerpt -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2024-02-17'
|
||||
title: 'Adding a light-dark theme toggle'
|
||||
description: "I dropped a light/dark theme toggle into the navigation of my site, replacing the prior reliance on the visitor's preference set at the OS level (though it does still consider this preference)."
|
||||
tags: ['CSS', 'JavaScript', 'Eleventy', 'development']
|
||||
tags: ['CSS', 'javascript', 'Eleventy', 'development']
|
||||
---
|
||||
I dropped a light/dark theme toggle into the navigation of my site, replacing the prior reliance on the visitor's preference set at the OS level (though it does still consider this preference).<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2024-02-03'
|
||||
title: 'Browsing the mobile web sucks'
|
||||
description: "The mobile web isn't all bad, but so much of the experience is."
|
||||
tags: ['development', 'JavaScript', 'tech', 'privacy']
|
||||
tags: ['development', 'javascript', 'tech', 'privacy']
|
||||
---
|
||||
The mobile web isn't all bad, but so much of the experience is. I've *absolutely loved* the recent trend back towards personal websites and blogs but, outside of all of those little homes and passion projects, it's rough.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
185
src/posts/2024/using-b2-as-a-json-data-store.md
Normal file
185
src/posts/2024/using-b2-as-a-json-data-store.md
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
date: '2024-02-19'
|
||||
title: 'Using B2 as a JSON data store'
|
||||
description: "My links page is powered by the Readwise Reader API but because there are, quite reasonably, rate limits in place, I've gone ahead and reduced the page count I fetch on each build and cached older link data from past builds in a B2 bucket."
|
||||
tags: ['Eleventy', 'development', 'javascript']
|
||||
---
|
||||
My links page is powered by the [Readwise Reader](https://readwise.io/reader_api) API but because there are, quite reasonably, rate limits in place, I've gone ahead and reduced the page count I fetch on each build and cached older link data from past builds in a B2 bucket.<!-- excerpt -->
|
||||
|
||||
To do this, I've modified `_data/links.js` to leverage the `@aws-sdk/client-s3` package and created a new B2 bucket specifically for my site.
|
||||
|
||||
First, I import the required packages from the new `AWS` dependency (which can be used as Backblaze offers an S3 compatible API):
|
||||
|
||||
```javascipt
|
||||
import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3'
|
||||
```
|
||||
|
||||
I added a method to get readable data from the bucket:
|
||||
|
||||
```javascript
|
||||
const getReadableData = (readable) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const chunks = []
|
||||
readable.once('error', (err) => reject(err))
|
||||
readable.on('data', (chunk) => chunks.push(chunk))
|
||||
readable.once('end', () => resolve(chunks.join('')))
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
Initialize a new S3 client:
|
||||
|
||||
```javascript
|
||||
const client = new S3Client({
|
||||
credentials: {
|
||||
accessKeyId: process.env.ACCESS_KEY_B2,
|
||||
secretAccessKey: process.env.SECRET_KEY_B2,
|
||||
},
|
||||
endpoint: {
|
||||
url: 'https://s3.us-west-001.backblazeb2.com',
|
||||
},
|
||||
region: 'us-west-1',
|
||||
})
|
||||
```
|
||||
|
||||
Fetch my cached link data from the bucket:
|
||||
|
||||
```javascript
|
||||
const BUCKET_B2 = process.env.BUCKET_B2
|
||||
...
|
||||
const cachedLinksOutput = await client.send(
|
||||
new GetObjectCommand({
|
||||
Bucket: BUCKET_B2,
|
||||
Key: 'links.json',
|
||||
})
|
||||
)
|
||||
const cachedLinksData = getReadableData(cachedLinksOutput.Body)
|
||||
cachedLinks = await cachedLinksData.then((tracks) => JSON.parse(tracks)).catch()
|
||||
```
|
||||
|
||||
I then merge the cached links with my newly fetched links and deduplicate them based on the unique `id` from Readwise's API:
|
||||
|
||||
```javascript
|
||||
const filterDuplicates = array => {
|
||||
const seenIds = new Set();
|
||||
return array.filter(obj => !seenIds.has(obj.id) && seenIds.add(obj.id));
|
||||
};
|
||||
...
|
||||
const mergedData = filterDuplicates([
|
||||
...formatLinkData(fullData).filter((link) => link.tags.includes('share')),
|
||||
...Object.values(cachedLinks)
|
||||
])
|
||||
|
||||
await client.send(
|
||||
new PutObjectCommand({
|
||||
Bucket: BUCKET_B2,
|
||||
Key: 'links.json',
|
||||
Body: JSON.stringify(mergedData),
|
||||
})
|
||||
)
|
||||
return mergedData
|
||||
```
|
||||
|
||||
For the sake of making pagination a bit easier and output more consistent, I've reduced the link display to a title, linking out to what I've shared and a snippet crediting the author. With ~200 links shared so far and 30 per page, this yields 7 pages and will persist the shared links without having to page through Readwise's API quite so aggressively.
|
||||
|
||||
My full `_data/links.js` file looks like this:
|
||||
|
||||
```javascript
|
||||
import EleventyFetch from '@11ty/eleventy-fetch'
|
||||
import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3'
|
||||
|
||||
const getReadableData = (readable) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const chunks = []
|
||||
readable.once('error', (err) => reject(err))
|
||||
readable.on('data', (chunk) => chunks.push(chunk))
|
||||
readable.once('end', () => resolve(chunks.join('')))
|
||||
})
|
||||
}
|
||||
|
||||
const filterDuplicates = array => {
|
||||
const seenIds = new Set();
|
||||
return array.filter(obj => !seenIds.has(obj.id) && seenIds.add(obj.id));
|
||||
};
|
||||
|
||||
export default async function () {
|
||||
const client = new S3Client({
|
||||
credentials: {
|
||||
accessKeyId: process.env.ACCESS_KEY_B2,
|
||||
secretAccessKey: process.env.SECRET_KEY_B2,
|
||||
},
|
||||
endpoint: {
|
||||
url: 'https://s3.us-west-001.backblazeb2.com',
|
||||
},
|
||||
region: 'us-west-1',
|
||||
})
|
||||
const BUCKET_B2 = process.env.BUCKET_B2
|
||||
const API_TOKEN_READWISE = process.env.API_TOKEN_READWISE
|
||||
const formatLinkData = (links) => links.map((link) => {
|
||||
return {
|
||||
title: link['title'],
|
||||
url: link['source_url'],
|
||||
tags: [...new Set(Object.keys(link['tags']))],
|
||||
date: `${link['updated_at'] || link['created_at']}`,
|
||||
author: link['author'],
|
||||
summary: link['summary'],
|
||||
note: link['notes'],
|
||||
description: `${link['summary']}<br/><br/>`,
|
||||
id: link['id']
|
||||
}
|
||||
})
|
||||
const fullData = [];
|
||||
const maxRequests = process.env.ELEVENTY_PRODUCTION ? 10 : 2
|
||||
let nextPageCursor = null;
|
||||
let requestCount = 0;
|
||||
let cachedLinks;
|
||||
|
||||
if (process.env.ELEVENTY_PRODUCTION) {
|
||||
const cachedLinksOutput = await client.send(
|
||||
new GetObjectCommand({
|
||||
Bucket: BUCKET_B2,
|
||||
Key: 'links.json',
|
||||
})
|
||||
)
|
||||
const cachedLinksData = getReadableData(cachedLinksOutput.Body)
|
||||
cachedLinks = await cachedLinksData.then((tracks) => JSON.parse(tracks)).catch()
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const queryParams = new URLSearchParams()
|
||||
if (nextPageCursor) queryParams.append('pageCursor', nextPageCursor)
|
||||
const res = EleventyFetch(`https://readwise.io/api/v3/list?location=archive&${queryParams.toString()}`, {
|
||||
duration: '1h',
|
||||
type: 'json',
|
||||
fetchOptions: {
|
||||
headers: {
|
||||
Authorization: `Token ${API_TOKEN_READWISE}`,
|
||||
},
|
||||
},
|
||||
}).catch()
|
||||
const data = await res
|
||||
fullData.push(...data['results']);
|
||||
nextPageCursor = data['nextPageCursor']
|
||||
requestCount++;
|
||||
if (!nextPageCursor || requestCount === maxRequests) break;
|
||||
}
|
||||
|
||||
if (process.env.ELEVENTY_PRODUCTION) {
|
||||
const mergedData = filterDuplicates([
|
||||
...formatLinkData(fullData).filter((link) => link.tags.includes('share')),
|
||||
...Object.values(cachedLinks)
|
||||
])
|
||||
|
||||
await client.send(
|
||||
new PutObjectCommand({
|
||||
Bucket: BUCKET_B2,
|
||||
Key: 'links.json',
|
||||
Body: JSON.stringify(mergedData),
|
||||
})
|
||||
)
|
||||
return mergedData
|
||||
}
|
||||
|
||||
return formatLinkData(fullData).filter((link) => link.tags.includes('share'))
|
||||
}
|
||||
```
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
date: '2024-01-26'
|
||||
title: "You don't need a framework for that"
|
||||
description: "You don't need a framework for *any* website primarily focused on presenting information to users."
|
||||
tags: ['development', 'CSS', 'JavaScript']
|
||||
tags: ['development', 'CSS', 'javascript']
|
||||
---
|
||||
You don't need a framework for *any* website primarily focused on presenting information to users.<!-- excerpt -->
|
||||
|
||||
|
|
|
|||
Reference in a new issue