Skip to content

Fix blog image layout shift #2237

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.

Sign up for GitHub

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

Merged
Andarist merged 1 commit into from
Aug 11, 2026
+7 −10
Merged

Fix blog image layout shift #2237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions site/blog/announcing-changesets-v3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { VPImage } from "vitepress/theme"
import DiscordLogo from "~icons/logos/discord-icon"
import OCLogo from "~icons/logos/opencollective"
import Socials from "../.vitepress/theme/components/Socials.vue"
import cliExampleImage from "../assets/cli-example.webp"
import packThenPublishImage from "../assets/pack-then-publish.excalidraw.svg"
import packThenPublishLightImage from "../assets/pack-then-publish-light.excalidraw.svg"
import peerBumpImage from "../assets/peer-bump-dark.excalidraw.svg"
Expand Down Expand Up @@ -62,9 +61,10 @@ This has been the most requested change to Changesets for years (as can be seen
<VPImage
loading="lazy"
class="no-shadow"
style="max-width: 420px"
alt="graph showing that peer dependents are bumped by patch versions instead of major"
width="420"
height="511"
:image="{
alt: 'graph showing that peer dependents are bumped by patch versions instead of major',
dark: peerBumpImage,
light: peerBumpLightImage,
}"
Expand All @@ -88,9 +88,10 @@ We are working on it, and it will be included in the next feature update.
<VPImage
loading="lazy"
class="no-shadow"
style="max-width: 500px"
alt="Publishing flow diagram"
width="500"
height="402"
:image="{
alt: 'Publishing flow diagram',
dark: packThenPublishImage,
light: packThenPublishLightImage,
}"
Expand All @@ -102,11 +103,7 @@ Changesets now uses [`cac`](https://npmx.dev/cac) for CLI arguments and help mes

<!-- https://lexidraw.app/#atproto=did:plc:skqg5gindwkuzjmjub6db6yn,3mskqppq5nk2u -->

<VPImage
loading="lazy"
alt="cli flow example"
:image="cliExampleImage"
/>
![cli flow example](../assets/cli-example.webp)

@bluwy bluwy Aug 11, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

VitePress can auto-calculate the width and height using this markdown form, so converted it this way here.

I need to investigate later is there's a better way to support light-dark images without using VPImage so we can get this automatic size calculation as well.

@beeequeue beeequeue Aug 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It doesn't add the lazy property iirc when I added it, even with the vitepress setting

@beeequeue beeequeue Aug 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

But that should be fine, it's a small-ish image

@bluwy bluwy Aug 11, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Setting markdown.image.lazyLoad seems to add for the markdown images, we can add it though


### Use installed formatters to format changelogs

Expand Down