Today, I needed a break from solving hard API problems in C, as I've been working hard on the `mk.h` header lately (I'll recap that all when it's done, but I do post progress stuff on the Fediverse). So I've worked on my website to fix how it looks, as well as is possible!

![[dillo-top.png]]

The main page body is centered, over a reasonable flat color (since gradients aren't supported), and disables the Glu panel for noscript browsers. I also have syntax highlighting working with Pygments now! That means it works on lite browsers, but it also supports additional languages like [x86-64 assembly syntax](/software/practice/calling_asm_from_c)!

It turns out this feature exists out of the box in the Python Markdown package. As usual, I have frustrations with the architectural decisions in that package, and supporting Prone as a highlighted language will probably require forking Pygments and using my own copy. But at least in the short term, for a mainstream use case, this was basically "flip a switch" levels of effort.

![[dillo-bottom.png]]

The Charlotteworld webring embed will never render correctly or work without JS, so this also hides when scripts are disabled. I achieved this with code sharing with the Glu panel by:

1. Adding a `noscript` class to the `body` tag.
2. Adding a `requires-js` class to things that need to be hidden when JS is turned off.
3. A little CSS for the hiding: `body.noscript .requires-js { display: none; }`
4. A line of JS that removes the `noscript` class from `body` on page load.

This means that in a full-featured browser, we remove the `noscript` class and make those other elements visible pretty immediately. On a lite browser like Dillo, anything marked `requires-js` stays hidden, because we never un-hide it.

Additionally, the footnotes section has some proper breathing room, the Progressive Enhancement badge renders text correctly (haven't figured out Mastodon logo yet), and there's one more cool feature.
## Music make you lose control

I really didn't like the state of my [music page](/music), which basically just linked to proprietary third-party websites that have started paywalling the work _I_ did, which I've long since committed to providing to the world for free. I would like, long-term, for my own website to be consistently and durably the best place to listen to my music for $0.

![[dillo-llnm.png]]

Getting old school with tables for alignment made sense here. I've set up the infrastructure for my website code repo to _copy_ the correct files (and rename them) over from my Obsidian vault, rather than contain copies of large media asset files in git.

We have good syntax highlighting now, so I don't feel shy about pasting the code that does the work. It's literally as simple as this.

```python
def generate_album(name_short: str, name_long: str, files: dict):
    src = SRC / "Attachments" / "Music" / "Campadrenalin" / name_long
    dst = DST / "static" / "music" / name_short
    dst.mkdir(parents=True, exist_ok=True)
    for new, old in files.items():
        copy(src / old, dst / new)
        
def generate_static():
    DST.mkdir(parents=True, exist_ok=True)
    copytree(STATIC, DST / "static", dirs_exist_ok=True)
    with open(DST / "static" / "highlight.css", "w") as f:
        f.write(HtmlFormatter().get_style_defs('.codehilite'))
        
    # Music
    generate_album("llnm", "LLNM demo 1", {
        "cover.jpg": "906972_28343.jpg",
        "01-summer-dream.mp3": "01 Summer Dream.mp3",
        "02-another-day.mp3": "02 AnotherDay.mp3",
        "03-chemical-tension.mp3": "03 ChemicalTension.mp3",
        "04-downright-chipper.mp3": "04 Downright Chipper.mp3",
        "05-ambulant.mp3": "05 Ambulant.mp3",
        "06-test-flight.mp3": "06 TestFlightv.2.mp3",
        "07-phoenix.mp3": "07 Pheonix.mp3",
        "08-sand.mp3": "08 Sand.mp3",
        "09-burn-with-me.mp3": "09 BurnWithMe.mp3",
        "10-nuclear-winter.mp3": "10 NuclearWinter.mp3",
        "11-iceberg-in-the-sky.mp3": "11 Iceberg in the Sky.mp3",
        "12-solitude.mp3": "12 Solitude.mp3",
        "13-the-beat-of-the-moon.mp3": "13 The Beat of the Moon.mp3",
        "14-platform-descending.ogg": "platform_descending.ogg",
        "15-red-spot.mp3": "15 RedSpot0.mp3",
        "16-steam-machine.mp3": "16 SteamMachine0.mp3",
        "17-floppy-jalopy.mp3": "17 FloppyJalopy0.mp3",
        "18-solipsis.ogg": "Solipsis.ogg",
    })
    # TODO: flesh out with other songs, track order
    generate_album("fitgp", "Forward is the Great Password", {
        "snow-at-the-lodge.mp3": "Snow at the Lodge.mp3",
    })
```

The music page is *not* autogenerated, and a lot of my old albums don't have any canonical record of track order (requiring me to be my own archaeologist), so my goal is to publish an album a week every Monday. That lets me pace out all the "checking I embedded the right URLs" and such work, so I'm not doing burnout amounts of it in a sitting. The pacing is also probably better for my online audience.

On a browser like Firefox, HTML5 audio controls work as you'd expect.

![[firefox-music.png]]

I feel like, for a brain-foggy day, I still managed to get a lot of stuff done that was personally important to me. We'll see about more work on Prone tomorrow.