I’m Blogging, I Promise ;-)

This is how I built my hybrid digital/physical journal at abnormalviolinist.com.

Astro Website (and such)

Stack

The core website is Astro with my usual Tailwind and Iconify. I think if you just wanna slop some HTML and Markdown onto the web with styling, this stack is super fast to work with. I love Astro for being very well thought out and also letting you do whatever you want. If I ever outgrow astro components and templating, I can just staple react to it wherever I want. Love it. It can also mix statically rendered pages with SSR and CSR and whatever you want.

Practice sessions are Markdown files in pages/entries/{year}/{month}/{day}.md files. Everything is held together with dates, I’ll get to that later.

One of the most useful features of Astro is the ability to generate a list by just globbing the markdown files, so there’s no need to keep a separate index. The index page of all the entries gets automatically updated just by creating the new file.

const entries = Object.values(
  import.meta.glob("./entries/**.md", { eager: true }),
).sort(
  (a, b) =>
    new Date((b as Entry).frontmatter.date).getTime() -
    new Date((a as Entry).frontmatter.date).getTime(),
) as Entry[];

There is a date in the frontmatter of each entry (generated by the upload script) which I use to make the page title and sort the entries into reverse chronological order.

Hosting

It’s on Cloudflare Pages. I could use whatever, but Cloudflare isn’t going anywhere and probably won’t pull any weird start-up nonsense. Pages is free up to some absurd number of requests that I’m not worried about. Also, often the cheapest place to register domains. I know they’re evil. They’re all evil.

They also had a nice little script for grabbing objects from an R2 bucket on an internal route without a subdomain or anything.

Recordings

The recordings are all on R2 which is free up to 10GB and then like $1/100GB/month after that so, happy with the pricing. I make my recordings in Audacity or Voice Memos on my phone. Fun Fact: you can set Voice Memos to make lossless recordings! I like lossless not so much for the quality, but just so I have all encoding options open to me. Everything gets stored on my mac as FLAC, then transcoded to MP3V0 (the highest variable bitrate quality), and upload to R2. For convenience, I also keep a copy of the MP3 with the code, but ignored by git. The script searches for a markdown file matching the creation date of the audio file and adds an audio tag to that file. If it’s missing, the script generates the file with the appropriate frontmatter. This is python because it was fast to write. It’s all IO and transcoding. I could parallelize the transcoding if it were ever annoying, but the script performance means nothing.

@click.command
@click.argument("audiofile")
def cli(audiofile):
    name = Path(audiofile).stem
    date = datetime.datetime.fromtimestamp(os.path.getmtime(audiofile))

    output_parent = (
        anv_root / "media" / str(date.year) / f"{date.month:02}" / f"{date.day:02}"
    )
    output_parent.mkdir(parents=True, exist_ok=True)
    output_path = output_parent / f"{name}.mp3"
    if output_path.exists():
        print("Path exists. Delete it to encode again")
        exit(1)
    transcode(audiofile, output_path)
    object_name = f"{date.year}/{date.month:02}/{date.day:02}/{name}.mp3"
    upload(output_path, object_name)
    create_entry(date, object_name)

After uploading the recordings, I have to go back and manually label them all, but this is pretty easy as long as I have named the files well.

The final markdown file looks something like this:

---
layout: ../../../../layouts/PracticeLayout.astro
date: Friday, February 14, 2025
---

## Humoresque

### A section
<audio controls>
    <source src="/media/2025/02/14/humoresque-asec-2025-02-14.mp3"
        type="audio/mpeg" />
</audio>

### B Section part 1
<audio controls>
    <source src="/media/2025/02/14/humoresque-bsec-1-2025-02-14.mp3"
        type="audio/mpeg" />
</audio>

### B Section ending
<audio controls>
    <source src="/media/2025/02/14/humoresque-bsec-2-ending-2025-02-14.mp3"
        type="audio/mpeg" />
</audio>

QR Codes

Keeping everything correlated by date allows for predictable urls, even for pages that don’t yet exist. The endpoint for a practice session is always /entries/{year}/{month}/{day}/. This allows me to pre-generate QR codes in sheets for these urls and just stick them in the practice journal. Obviously the links will be dead until I create the page, but there’s no need to keep a central database or keep track of an index or clever go link. It all works on dates. The QR code generator is also python, again, it’s the fastest for me to write. Performance is meaningless and I’m the only one using it so if it’s broken, I’m there to fix it.

I can specify a rough date range to generate, but it may go beyond my boundary slightly in order to always generate a full sheet of codes to not waste paper. Accomplished with this very silly loop:

while curr_date < end_date:
    next_page = []
    # six rows
    for _ in range(6):
        row = []
        # four columns
        for _ in range(4):
            print(curr_date)
            img_path = make_single_qr(curr_date, tmpdir)
            row.append((img_path, curr_date.strftime("%b %-d, %Y")))
            curr_date += datetime.timedelta(days=1)
        next_page.append(row)
    pages.append(next_page)

The QR library generates a LOT of PNG files, which I stick in a temporary directory and then save in an array with a human readable date. Once it has filled pages for the specified date range, the array is passed to a Jinja2 template (again chosen for the important trait of “I already know it”). Then I use Weasyprint to turn that rendered HTML into a PDF. (You’ll never guess why I chose it.)

html = main_template.render(pages=pages)
tmp_out = tmpdir / "output.html"
with tmp_out.open("w") as f:
    f.write(html)
filename = str(tmpdir / f"codes.pdf")
weasyprint.HTML(filename=str(tmp_out.absolute())).write_pdf(filename)
os.system(f"open {filename}")

All Together

So the full flow is:

1. Stick a dated QR code in my practice journal
2. Actually practice, making and saving recordings as I go and writing in the journal
3. Run the transcode and upload script on each of the FLAC recordings (usually just a shell loop)
4. Label and reorder the audio tags in the markdown file
5. add and commit the new file to git and push
6. Cloudflare rebuilds the site and the new page is live
7. Scan the QR code when I want to listen back to the recordings during future practice sessions.
8. When my sheet of date QR codes runs out, generate and print another one.