Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

genehack
Copy link
Contributor

@genehack genehack commented Oct 31, 2024

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)

Checklist

Copy link
Member

@jameshadfield jameshadfield left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

static-site/app/not-found.tsx Outdated Show resolved Hide resolved
static-site/app/whoami/page.tsx Outdated Show resolved Hide resolved
@genehack genehack temporarily deployed to nextstrain-s-add-blog-p-bstxdd November 8, 2024 21:43 Inactive
Copy link
Contributor

@joverlee521 joverlee521 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +12 to +16
const redirectTo = mostRecentPost
? `/blog/${mostRecentPost.blogUrlName}`
: `/404`;

redirect(redirectTo);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

metadata.openGraph!.url = `/blog/${blogPost.blogUrlName}`;
}

return metadata;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hurrah! The original feature that spawned this whole journey into the App router

Screenshot 2024-11-12 at 4 42 51 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Open Graph and Twitter Card meta tags for rich embeds/previews
4 participants