now + build posts
This commit is contained in:
parent
e886857387
commit
f1b2537ade
2 changed files with 266 additions and 0 deletions
196
src/posts/2023/building-my-now-page-using-eleventy.md
Normal file
196
src/posts/2023/building-my-now-page-using-eleventy.md
Normal file
|
|
@ -0,0 +1,196 @@
|
||||||
|
---
|
||||||
|
date: '2023-03-18'
|
||||||
|
title: 'Building my /now page using Eleventy'
|
||||||
|
draft: false
|
||||||
|
tags: ['11ty', 'eleventy', 'javascript', 'last.fm', 'oku', 'trakt', 'letterboxd']
|
||||||
|
---
|
||||||
|
|
||||||
|
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]
|
||||||
|
|
||||||
|
My /now page is a series of discreet sections — the **Currently** block is [populated by data from](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_includes/now.liquid#L14) [omg.lol](https://omg.lol)'s status.lol service and [several static bullet points and complimentary SVGs](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_includes/now.liquid#L14-L31). The data request to retrieve my status looks like the following:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const EleventyFetch = require('@11ty/eleventy-fetch')
|
||||||
|
|
||||||
|
module.exports = async function () {
|
||||||
|
const url = 'https://api.omg.lol/address/cory/statuses/'
|
||||||
|
const res = EleventyFetch(url, {
|
||||||
|
duration: '1h',
|
||||||
|
type: 'json',
|
||||||
|
})
|
||||||
|
const status = await res
|
||||||
|
return status.response.statuses[0]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The **Listening: artists** and **Listening: albums** sections draw on data from [Last.fm's API](https://www.last.fm/api). The artist request looks like this:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const EleventyFetch = require('@11ty/eleventy-fetch')
|
||||||
|
|
||||||
|
module.exports = async function () {
|
||||||
|
const MUSIC_KEY = process.env.API_KEY_LASTFM
|
||||||
|
const url = `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
|
||||||
|
const res = EleventyFetch(url, {
|
||||||
|
duration: '1h',
|
||||||
|
type: 'json',
|
||||||
|
})
|
||||||
|
const artists = await res
|
||||||
|
return artists.topartists.artist
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The **Listening: albums** call is quite similar, swapping the `user.gettopartists` method for `user.gettopalbums`. The liquid templating for artists iterates through the retrieved and cached data to populate the section:
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
|
||||||
|
```liquid
|
||||||
|
{% if artists %}
|
||||||
|
<h2
|
||||||
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4"
|
||||||
|
>
|
||||||
|
Listening: artists
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
|
||||||
|
{% for artist in artists %}
|
||||||
|
<a href="{{artist.url}}" title="{{artist.name | escape}}">
|
||||||
|
<div class="relative block">
|
||||||
|
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
|
||||||
|
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||||
|
<div class="px-1 text-xs font-bold text-white">{{artist.name}}</div>
|
||||||
|
<div class="px-1 text-xs text-white">
|
||||||
|
{{artist.playcount}} plays
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="{{artist.name | artist}}"
|
||||||
|
onerror="this.onerror=null; this.src='/assets/img/media/404.jpg'"
|
||||||
|
width="350"
|
||||||
|
height="350"
|
||||||
|
class="rounded-lg" alt="{{artist.name | escape}}"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
```
|
||||||
|
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
Artist images are populated by passing the `artist` object to [an `artist` filter](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/config/mediaFilters.js#L4-L5) which strips spaces, replacing them with `-` and normalizing the artist name string to lowercase:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
artist: (media) =>
|
||||||
|
`https://cdn.coryd.dev/artists/${media.replace(/\s+/g, '-').toLowerCase()}.jpg`,
|
||||||
|
```
|
||||||
|
|
||||||
|
These images are all cropped to `350x350` and hosted over on <a href="https://bunny.net?ref=3kd0m6d30v" onclick="fathom.trackGoal('EIQ2NE4V', 0)">Bunny.net</a>[^2].
|
||||||
|
|
||||||
|
[Much like artists, we populate albums from data sourced from Last.fm](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_data/albums.js)
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
|
||||||
|
```liquid
|
||||||
|
{% if albums %}
|
||||||
|
<h2
|
||||||
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4"
|
||||||
|
>
|
||||||
|
Listening: albums
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
|
||||||
|
{% for album in albums %}
|
||||||
|
<a href="{{album.url}}" title="{{album.name | escape}}">
|
||||||
|
<div class="relative block">
|
||||||
|
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
|
||||||
|
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||||
|
<div class="px-1 text-xs font-bold text-white">{{album.name}}</div>
|
||||||
|
<div class="px-1 text-xs text-white">
|
||||||
|
{{album.artist.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="{{album | album}}"
|
||||||
|
onerror="this.onerror=null; this.src='/assets/img/media/404.jpg'"
|
||||||
|
width="350"
|
||||||
|
height="350"
|
||||||
|
class="rounded-lg"
|
||||||
|
alt="{{album.name | escape}}"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
```
|
||||||
|
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
[Albums use a filter that, in this case, evaluates a denylist,](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/config/mediaFilters.js#L6-L10) simply a `string[]`, and replaces images contained therein. Anything not in the denylist is served directly from Last.fm:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
album: (media) => {
|
||||||
|
const img = !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
|
||||||
|
? media.image[media.image.length - 1]['#text']
|
||||||
|
: `https://cdn.coryd.dev/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
|
||||||
|
return img
|
||||||
|
```
|
||||||
|
|
||||||
|
Moving down the page, **Reading** data is sourced from [Oku](https://oku.club):
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { extract } = require('@extractus/feed-extractor')
|
||||||
|
const { AssetCache } = require('@11ty/eleventy-fetch')
|
||||||
|
|
||||||
|
module.exports = async function () {
|
||||||
|
const url = 'https://oku.club/rss/collection/POaRa'
|
||||||
|
const asset = new AssetCache('books_data')
|
||||||
|
if (asset.isCacheValid('1h')) return await asset.getCachedValue()
|
||||||
|
const res = await extract(url).catch((error) => {})
|
||||||
|
const data = res.entries
|
||||||
|
await asset.save(data, 'json')
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Rather than dealing with a an API that returns JSON, I'm transforming the RSS feed that Oku exposes for my currently reading collection, using [@extractis/feed-extractor](https://www.npmjs.com/package/@extractus/feed-extractor) to transform the XML into JSON and leveraging Eleventy's [@11ty/eleventy-fetch](https://www.npmjs.com/package/@11ty/eleventy-fetch) package for caching. Because I'm simply rendering a list of what I'm reading, the liquid templating is a bit simpler:
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
|
||||||
|
```liquid
|
||||||
|
{% if books %}
|
||||||
|
<h2
|
||||||
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4"
|
||||||
|
>
|
||||||
|
Reading
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<ul class="list-inside list-disc pl-5 md:pl-10">
|
||||||
|
{% for book in books %}
|
||||||
|
<li class="mt-1.5 mb-2">
|
||||||
|
<a href="{{book.link}}" title="{{book.title | escape}}">
|
||||||
|
{{book.title}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
```
|
||||||
|
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
For **Watching: movies** and **Watching: tv** we're following a nearly identical pattern (outside of object name semantics that are specific to the media type for each). Both Trakt and Letterboxd expose RSS feeds for watched media activity and both are passed through, fetched and cached using the same dependencies.
|
||||||
|
|
||||||
|
[You can view the tv.js data file here](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_data/tv.js) and [movies here](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_data/movies.js), while [the full `now.liquid` combines all of the discussed snippets](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/src/_includes/now.liquid).
|
||||||
|
|
||||||
|
Currently, this page is refreshed on an hourly basis using scheduled builds on Vercel triggered by GitHub actions, [which you can read about here](/posts/2023/scheduled-eleventy-builds-cron-github-actions/).
|
||||||
|
|
||||||
|
[^1]: You can learn more about /now pages [here](https://nownownow.com/about).
|
||||||
|
[^2]: They're awesome, easy to use and super-affordable. Highly recommended.
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
---
|
||||||
|
date: '2023-03-19'
|
||||||
|
title: 'Scheduled Eleventy builds on Vercel with cron-triggered GitHub actions'
|
||||||
|
draft: false
|
||||||
|
tags: ['11ty', 'eleventy', 'javascript', 'automation', 'github', 'github actions', 'cron', 'yaml']
|
||||||
|
---
|
||||||
|
|
||||||
|
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 -->
|
||||||
|
|
||||||
|
To update my feeds ([feed.xml](https://coryd.dev/feed.xml) and [follow.xml](https://coryd.dev/follow.xml)) and [now page](/now) I've adopted [@11ty/eleventy-fetch](https://www.npmjs.com/package/@11ty/eleventy-fetch) and regular builds at [Vercel](https://vercel.com/) that are triggered by [Github Actions](https://docs.github.com/en/actions) that leverage cron for scheduling. [The workflow file](https://github.com/cdransf/coryd.dev/blob/e886857387661ceeba4f2b368989ec32f0c3f121/.github/workflows/scheduled-build.yaml) looks like this:
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
name: Scheduled Vercel build
|
||||||
|
env:
|
||||||
|
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
|
||||||
|
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
|
||||||
|
on:
|
||||||
|
schedule:
|
||||||
|
- cron: '0 * * * *'
|
||||||
|
jobs:
|
||||||
|
cron:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Install Vercel CLI
|
||||||
|
run: npm install --global vercel@latest
|
||||||
|
- name: Pull Vercel Environment Information
|
||||||
|
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
- name: Build Project Artifacts
|
||||||
|
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
- name: Deploy Project Artifacts to Vercel
|
||||||
|
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
```
|
||||||
|
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
This leverages three different Vercel secrets specific to your account that must be added to the [Github Actions Secrets](https://docs.github.com/en/rest/actions/secrets?apiVersion=2022-11-28) for your project (`Project repo -> Settings -> Secruity section -> Secrets and variables -> Actions`).
|
||||||
|
|
||||||
|
Your Vercel org ID and project ID will be at the bottom of your organization/personal acount's settings (in the General section), with your project ID located in the same section of your project settings.
|
||||||
|
|
||||||
|
If you need to manually trigger a build, you can do so using a workflow with a {% raw %}`[workflow_dispatch]`{% endraw %} trigger like this:
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
name: Manual Vercel build
|
||||||
|
env:
|
||||||
|
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
|
||||||
|
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
|
||||||
|
on: [workflow_dispatch]
|
||||||
|
jobs:
|
||||||
|
cron:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Install Vercel CLI
|
||||||
|
run: npm install --global vercel@latest
|
||||||
|
- name: Pull Vercel Environment Information
|
||||||
|
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
- name: Build Project Artifacts
|
||||||
|
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
- name: Deploy Project Artifacts to Vercel
|
||||||
|
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
|
||||||
|
```
|
||||||
|
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
Once you have the appropriate secrets and workflow file in place, you can let GitHub take care of regularly rebuilding and refreshing your site.
|
||||||
Reference in a new issue