blog: Add anchor links to headings

[victorlin]

preview

Description of proposed changes

This PR adds GitHub-style anchor links to heading elements. I also added a '#' on hover. See commits for details.

Related issue(s)

N/A, thought of this while working on #1089

Checklist

• Check if changes affect the resource index JSON revision
• Works on #1089 (preview)
• Checks pass

[joverlee521]

Flagging that right now with the split between the Page and App routers, we also have static-site/src/util/parseMarkdown.js. I think we want to keep the two in-sync?

[victorlin]

Flagging that right now with the split between the Page and App routers, we also have static-site/src/util/parseMarkdown.js. I think we want to keep the two in-sync?

Hmm, I think it's reasonable to have different Markdown parsing based on each of the 3 usages:

• Rendering blog posts (using app router version)
• Rendering the blog feeds (using pages router version)
• Rendering community/group descriptions (using pages router version)

Anchor links are only relevant for blog posts and I don't see the other two benefitting from this functionality. I can rewrite parseMarkdown to only add anchor links with an option (e.g. parseMarkdown({mdString, addHeadingAnchors: true}) so that this function is still unchanged for when we convert the other two to use app router. I can also revert allowing "style" tags and put all the styles in globals.css.

[joverlee521]

I can rewrite parseMarkdown to only add anchor links with an option (e.g. parseMarkdown({mdString, addHeadingAnchors: true}) so that this function is still unchanged for when we convert the other two to use app router. I can also revert allowing "style" tags and put all the styles in globals.css.

+1 for both of these