fix: title and description #187
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Discord example of how it looks now. |
|
This is great @PhilipWillms! Thanks ❤️ Two questions I hope you can help with now you've already figured this out:
|
@YousefED I liked the idea of having images with dynamic titles so I implemented something like that. Now each page can have custom meta tags. I abstracted that in some way so that you do not need to set all meta tags on each page but rather just have to add some values in the frontmatter and the meta tags get created based on that. Not sure if we want it this way or rather be able to set all the meta tags for each site individually like it kinda got started in this commented code. I was also not sure about how the preview image should look like. I did not like how it was looking when using the whole banner with the custom title below so I chose to just use the Icon like this. If no |
There was a problem hiding this comment.
This is great @PhilipWillms, thanks!! I've checked the code and it looks great. Some final suggestions in the review 💪
| { | ||
| property: "twitter:title", | ||
| content: | ||
| `${METADATA_DEFAULT.title} - ${pageData.frontmatter.title}` || |
There was a problem hiding this comment.
I don't think this syntax will work? if frontmatter.title is undefined, I think it will just render BlockNote - undefined right?
(there's a couple more occurences in this file)
packages/website/api/og.tsx
Outdated
| </div> | ||
| ); | ||
|
|
||
| return new ImageResponse(title ? iconWithTitle(title) : banner, { |
There was a problem hiding this comment.
I would probably prefer banner + title. Or alternatively, a quick fix could be to prefix the title with BlockNote - . Currently, there's no way from the image to understand to which site / project the image refers to which I think is not ideal
| </svg> | ||
| <div | ||
| style={{ | ||
| fontSize: 60, |
There was a problem hiding this comment.
Can we use the "Gilroy" font that's also used on the website? https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-a-custom-font
packages/website/api/og.tsx
Outdated
| export default async function handler(request) { | ||
| try { | ||
| const { searchParams } = new URL(request.url); | ||
| const title = searchParams.get("title")?.slice(0, 100); |
There was a problem hiding this comment.
Add ellipsis? … (single utf character) if it's too long?
Closes #156