Port /blog to App router; add blog preview cards [#134]

[genehack]

Description of proposed changes

This ports the /blog and /blog/[id] pages to App Router. It also adds metadata to blog posts, including OpenGraph tags, to support preview cards. Finally, it updates the marked Markdown parser to the current release, in order to get type support, and adds the @types/sanitize-html dev dependency to provide type support for sanitize-html.

Note that this code is on top of, and includes, the changes from #1032; when that is merged, I will rebase this on top of it. This is rebased and ready to review.

Related issue(s)

• resolves Add Open Graph and Twitter Card meta tags for rich embeds/previews #134
• Convert static-site from Pages Router to App Router #1052

Checklist

• Checks pass
• Check if changes affect the resource index JSON revision

[jameshadfield]

A couple of comments while trying out the PR. I didn't do a thorough comparison of pages as I think others have done so.

[joverlee521]

I only did a quick review in the test app, I didn't dig into specifics. Really love the new layout of the blog page!

I only flagged a weird behavior in loading images when redirecting from the main /blog page to the most recent blog post.

[joverlee521]

The images of the most recent blog fail to load when going to /blog, but load fine at /blog/2024-10-22-oropouche-analysis-and-resources

[genehack]

yeah, i see that.

seems to be because the image URLs are relative to /blog (i.e., img/foo.png, not /blog/img/foo.png), maybe? The images are showing as 404 and the HTTP request was GET /img/oropouche_host_view.png.

oddly, it works fine on localhost... I will dig into the redirect() API and see if I need to do something different, but an initial fix might be tweaking the image URLs in the Oropouche post.

[genehack]

So, yeah, this is because of how the redirect() API works, apparently.

I think I'm going to take this as the push from the universe to move ahead with converting the front page to be the five most recent blog posts, which will require some additional refactoring in this PR.

[victorlin]

nit

update marked from 0.7 to 14.1.3

What an upgrade! I'm sure there was a reason for this but it's hard to tell from the commit message. Was there a function that wasn't available in the older version?

[genehack]

The primary reason was I needed to update it off 0.7 to get typing support, and so I figured I might as well update it to "current".

FWIW, 0.7 is "only" five years old — the package versions fairly aggressively, for whatever reason.

[victorlin]

Makes sense!

[victorlin]

There are two functions that have duplicated JS and TS versions:

• getBlogPosts
  • static-site/src/util/blogPosts.js
  • static-site/app/blog/utils.ts
• parseMarkdown
  • static-site/app/blog/parseMarkdown.ts
  • static-site/src/util/parseMarkdown.js

I understand that the JS versions are still used by scripts/generate-blog-feeds.js. Is there a plan to deduplicate these at some point?

[genehack]

I could convert scripts/generate-blog-feeds to TS — which would allow the old getBlogPosts() to be removed — but it felt out of scope of the issue.

The old parseMarkdown() is also used in static-site/src/components/sourceInfoHeading.jsx, so that needs both community and groups (at least) to be converted over before it can be removed.

[victorlin]

Thanks for the explanation. I still think it'd be useful to add a small comment at the "deprecated" JS file indicating that it's been ported over to TS. Otherwise I will keep asking for clarification about these duplicates in PR reviews.