How I built a now reading feature
I added a now reading section to my site to share the book I’m reading. It’s powered by GitHub Actions and the pressure that comes when all my library loans become available on the same day.
(I wrote about this idea last year when I built an e-paper display to show the book I’m reading.)
New outputs in read-action
To make this feature work, I updated
read-action (my GitHub action that
keeps track of my books in a JSON file) to add an
output parameter.
The nowReading
output parameter has the metadata of the book I’m reading.
Now, every time I use read-action to add a book I’ve started, my workflow can access a parameter containing the data to display that book on my site. But, I still need to get that data from a private repository to my public repository.
Pass data from repository to repository
Since I run read-action in a private repository, I used a
repository dispatch
to pass the book data to my public repository. I did this by updating the
workflow in my private repository to add a step after read-action. This new step
checks if read-action has the output parameter nowReading
. If it does, then it
will use
repository-dispatch to
send the contents of nowReading
to my public repository as an event.
- name: Now reading
if: steps.read_action.outputs.nowReading != ''
uses: peter-evans/repository-dispatch@v2
with:
repository: katydecorah/katydecorah.github.io
event-type: now-reading
client-payload:
'{"github": ${{ toJson(steps.read_action.outputs.nowReading) }}}'
In my public repository, I created a workflow that waits to receive the
now-reading repository dispatch, and once triggered, it will write the contents
to _data/now-reading.json
and commit the file.
name: Now reading
on:
repository_dispatch:
types: [now-reading]
jobs:
nowReading:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Update now-reading.json
env:
JSON_DOC: ${{ github.event.client_payload.github }}
run: |
echo $JSON_DOC > _data/now-reading.json
- run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add -A && git commit -m "📚 Now Reading"
git push
Markup the metadata
As soon as the workflow commits the file, GitHub pages will build the site to display the book. My site uses the following markup (more or less):
<h2>Now reading</h2>
{% assign nowReading = site.data['now-reading'] %}
<div class="home-now-reading">
<img alt="" src="book-{{nowReading.isbn}}.png" />
<div>
<strong>{{nowReading.title}}</strong> by {{nowReading.authors | join: ", "}}
</div>
</div>
Or, I can tell you right here, that I’m reading “Witchcraft for Wayward Girls” by Grady Hendrix. (This sentence will update once I start a new book.)