Code block copy button

Code blocks on allandeutsch.com now have a copy code button!

I previously had copy code buttons, but I when I upgraded to using @shikijs/twoslash it broke them in a couple ways. First, the output HTML changed and broke my query selectors - that was an easy fix. Slightly more interesting is that typescript code blocks that are augmented with type information by twoslash processing. Previously I was selecting the innerText to grab only the code, but twoslash adds additional elements (and innerText) that contain the type information. I don’t want all of that on the clipboard when copying a code snippet! To fix this I put a pre element with the class code-copy-target after each code block rendered by shiki. I inject the raw code from my markdown code block into the innerText of that node. The copy button gets the text from that node instead of the pretty code block. I also set its display to hidden so it doesn’t disrupt the view of the page and won’t be read by screen readers. I also needed to escape a few characters like < and > with their HTML escape code equivalents so that code snippets with angle brackets don’t break the page HTML.

Detailed feedback view page

Penguinsight now has a page for viewing detailed information about feedback. Clicking the link to view the original document now highlights the section of the page that feedback was provided for. I’m really excited about this because it’s such useful context for reviewing feedback

Automatic linting & formatting update

My setup for Prettier and ESLint has been broken for about a month and the lack of auto-formatting has been driving me crazy. This week I’ve been working through Kent’s Epic Web Dev course with a friend, and being reminded of how nice it is to have a working linter & formatter was the final straw.

I finally got around to fixing the config for ESLint & Prettier on Penguinsight. This was more work than I expected; ESLint switched to a new flat config format which I’ve now adopted. I wasn’t able to upgrade to the latest ESLint 9.0.0 because typescript-eslint doesn’t support it yet, but I did manage to get linting with type information working which helped me catch a few potential bugs already.

For the full details, check out how I set up Linting and formatting a svelte typescript project.