Port /blog to App router; add blog preview cards [#134]
#1059
Conversation
nextstrain-bot
temporarily deployed
to
nextstrain-s-add-blog-p-ky3afp
genehack
force-pushed
the
add-blog-preview-cards-134
branch
from
131c645 to
e3d671d
Compare
nextstrain-bot
temporarily deployed
to
nextstrain-s-add-blog-p-bstxdd
genehack
force-pushed
the
add-blog-preview-cards-134
branch
from
e3d671d to
94cae8d
Compare
genehack
requested review from
victorlin,
jameshadfield,
tsibley and
joverlee521
genehack
force-pushed
the
add-blog-preview-cards-134
branch
from
94cae8d to
a960935
Compare
genehack
force-pushed
the
add-blog-preview-cards-134
branch
from
a960935 to
9e5c3bb
Compare
| const redirectTo = mostRecentPost | ||
| ? `/blog/${mostRecentPost.blogUrlName}` | ||
| : `/404`; | ||
|
|
||
| redirect(redirectTo); |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
In the end, because of how Next.JS generates URLs without trailing slashes, I had to update the blog image URLs; there was no other way to resolve this (not without other knock-on damage that would have been worse).
So the "multiple pages on the front page" thing will get kicked down the road a bit, and this PR is once again ready to be reviewed.
Note that I also added a section to the static-site README with some minimal info about blog post creation.
The need for this update was mainly to get type information for `marked`; version 14.1.3 was current on the day when I made this change. (The library releases and updates versions _frequently_.) I did not carefully review the five years worth of changelogs between 0.7 and 14.1.3, but empirically the API doesn't seem to have changed and the code still works.
Deletes old Pages Router blog files, as well as displayMarkdown component.
…URLs [#134] * Prepend `/blog/` to all blog post image URLs * Remove `https://nextstrain.org` from link URLs
genehack
force-pushed
the
add-blog-preview-cards-134
branch
from
9e5c3bb to
c2cf130
Compare
Description of proposed changes
This ports the
/blogand/blog/[id]pages to App Router. It also adds metadata to blog posts, including OpenGraph tags, to support preview cards. Finally, it updates themarkedMarkdown parser to the current release, in order to get type support, and adds the@types/sanitize-htmldev dependency to provide type support forsanitize-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)
static-sitefrom Pages Router to App Router #1052Checklist