feat(website): add blog social media banner #3614
Conversation
|
I'm kinda stuck on the relative links not working locally thing, but, I don't think there's a high-penalty for it being broken - the generic preview image simply won't load, which is the status quo anyway. And once this is merged, we can always change the image url to the full link instead of the relative one. |
mairin
requested review from
slemeur,
themr0c,
benoitf and
a team
as code owners
mairin
requested review from
dgolovin and
lstocchi
and removed request for
a team
| @@ -5,6 +5,7 @@ slug: podman-desktop-release-0.15 | |||
| authors: [deboer] | |||
| tags: [podman-desktop, release, kubernetes, kind] | |||
| hide_table_of_contents: false | |||
| image: /assets/images/podman-desktop-release-0.15-89cd5f136ad85c15bc5b4d16a919140a.webp | |||
There was a problem hiding this comment.
maybe we need to move images to static folder so you can use the same name. I'm not sure how the suffix is generated here so I don't know if it can be broken after an update ?
There was a problem hiding this comment.
So I optimized them and put them in a static folder (will push to PR after finishing this comment)... and I have no idea why but if I visit http://localhost:3000/img/blog/podman-desktop-release-1.3.webp in my browser, the image works no problem. It doesn't if I set the header in the blog post image attribute like so:
image: /img/blog/podman-desktop-release-1.3.webp
It won't display in the social preview:
If I hardcode it including http (https does not work) like so, it works:
image: http://localhost:3000/img/blog/podman-desktop-release-1.3.webp
Docusaurus is doing something weird to relative links... any ideas?
There was a problem hiding this comment.
AFAIK it looks like the relative image tag in the blog post are prefixed by the docusaurus URL object
I've created #3685
There was a problem hiding this comment.
#3685 has been merged, if you try again locally the 'social preview links should work'
There was a problem hiding this comment.
It does!!! Thanks @benoitf !!
benoitf
changed the title
|
@mairin I think you'll need to rebase the PR, here are 71 commits attached to this PR |
I don't know why it does that... :-/ if i rebase from the terminal thats what happens. But if I rebase using the github UI it doesn't seem to do that. I'm not sure how to fix it :( |
Helps address containers#3613 Signed-off-by: Máirín Duffy <[email protected]>
now if someone shares a blog post that doesn't have a specific feature image defined or if they share a link to anywhere on podman-desktop.io, it should provide a general Podman Desktop branded banner. Signed-off-by: Máirín Duffy <[email protected]>
Helps address issue containers#3613... moving blog images to the static folder to try to have reliable image links for social card previews. These are optimized too so they should save space once we remove the old copies. Signed-off-by: Máirín Duffy <[email protected]>
updating the 5 most recent blog posts (as of 29 aug 2023 😀) with static images so the social media previews for them will have more stable links than whatever docusaurus is doing with adding tokens to the image names Signed-off-by: Máirín Duffy <[email protected]>
benoitf
force-pushed
the
blog-social-media-banner-fix
branch
from
ad43eee
to
dcdf38f
Compare
|
@mairin I have rebased your branch using |
What does this PR do?
This PR sets explicit featured images for individual blog posts (the most recent 5, to be exact) so when those blog post links are shared on social media, etc., they will display the image for that post in the preview.
Right now, no image is defined, so they show up blank and sad.
I also attempt to set a default, general "Podman Desktop" graphic banner to show up in the case that we don't define a featured image for any individual blog post. Also, this general banner should show up if any link on podman-desktop.io is shared and generates a preview card.
(I say "attempt" because for whatever reason, I couldn't test the default locally without using https://localhost:3000/img/banner_podman-desktop.png as the image url value... of course I'm not going to hard code that... I committed the relative path 'img/banner_podman-desktop.png' as demonstrated in the upstream docs and hoping it words in 'prod')
Screenshot/screencast of this PR
BEFORE 😭
AFTER 🥰
What issues does this PR fix or reference?
#3613
How to test this PR?
yarn&&yarn startin the website directory of the repohttp://localhost:3000