Video support and Scrolling Menu

I improved the menu to scroll between articles and wanted to show a video of it.

Github Releases supports video but it's a little idiosyncratic. When you drop a video into the editor, it uploads it and then resolves to a simple text URL. When you preview the release in Github, it magically becomes a video player, presumably because Github can derive the file type from the meta data it saved with the upload. I don't have this meta data so we need something clever.

Parsing Github video URLS

Fortunately, we already solved a similar problem with image URLs. When you download the releases JSON from the Github API, you can add Accept: 'application/vnd.github.full+json' to get the HTML version in addition to the Markup. The HTML version contains proper <video src='private_url'/> tags that I could parse and download the media file from.

I did need to mutate the markdown to properly mark the file as video:

release.body = release.body.replace(`https://github.com/user-attachments/assets/${filename}`,
    `<video src=\"https://github.com/user-attachments/assets/${filename}\" controls></video>`);

Menu improvement

The Github releases UI has a nice sidebar with links to recent articles. When you click it, it scrolls to the article. I had previously implemented scrolling in the chat screen of the mobile app by implementing a ScrollService, and could reuse this for the new menu. Basically the magic is done this snippet:

const element = document.getElementById(elementId);
element.scrollIntoView({behavior: "smooth"});

ScrollService does a little more, like adding a temp class to the element for highlighting, and providing feedback when the element is not found. This is useful because my sidebar menu includes items that are not displayed on the blog overview (because they are too old). When this happens, a callback is called and the menu falls back on a redirect to the article.

private scroll = inject(ScrollService);
...
    this.scroll.scrollToElement(`tag-${post.tag_name}`, this.onElementNotFound.bind(this));
...
    onElementNotFound(elementId: string) {
        const tagName = elementId.slice(4);
        this.router.navigate([`/blog/${tagName}`]);
    }