Skip to content

feat: new og images#2292

Merged
danielroe merged 90 commits intonpmx-dev:mainfrom
harlan-zw:feat/og-image-v7
Apr 17, 2026
Merged

feat: new og images#2292
danielroe merged 90 commits intonpmx-dev:mainfrom
harlan-zw:feat/og-image-v7

Conversation

@harlan-zw
Copy link
Copy Markdown
Contributor

@harlan-zw harlan-zw commented Mar 27, 2026

🔗 Linked issue

#1654

🧭 Context

The previous PR was rolled back due to some Takumi stability issues. These are now solved afaik and OG Image got a v6 stable release so it's a good time to reintroduce it. (Takumi is v1 beta now so also likely stable very soon)

⚠️ Docus < v5.9.0 uses the old version of og image which causes a version compat issue. Upgrading Docus to v5.9.0 creates a bunch of new issues that seem unrelated to og images, we should investigate that seperately.

📚 Description

Same as before, I've resynced the UI to match recent branding changes.

sample - check PR files for more

https://npmx.dev/
og-image-home

https://npmx.dev/accessibility
og-image-accessibility

https://npmx.dev/blog/alpha-release
og-image-blog-alpha-release

https://npmx.dev/package/@nuxt/kit
og-image-package--nuxt-kit

https://npmx.dev/package-docs/ufo/v/1.6.3
og-image-package-docs-ufo-v-1-6-3

Supersedes #2122 (rebased on latest main with CI fixes).

@harlan-zw
Copy link
Copy Markdown
Contributor Author

harlan-zw commented Apr 12, 2026

⚠️ Dependency Count

This PR adds 30 new dependencies (2271 → 2301), which exceeds the threshold of 15.

This is out of date, the issue was docus was using v5 nuxt-og-image so we were paying double version dependency cost. Also we get hit with the storybook deps for some reason, guessing because we had to lint the lock.

We disable og image in docus for the time being as there's another issue with latest that needs to be investigated seperately.

Run e18e/action-dependency-diff@f825d5b5c5ce0a42dc46c47ec20de24460affcd8
Workspace path is /home/runner/work/npmx.dev/npmx.dev
Detected lockfile pnpm-lock.yaml
Using lockfile: pnpm-lock.yaml
Comparing package lockfiles between origin/main and e59f10ea5a6eb86f40cbd9691ebaaa0fb469ee88
Parsed current lockfile with 2308 packages
Parsed base lockfile with 2274 packages
Dependency threshold set to 15
Size threshold set to 200 kB
Duplicate threshold set to 4
Pack size threshold set to 50 kB
Base dependency count: 2271
Current dependency count: 2301
Dependency count increase: 30
Found 31 new package versions
Found 27 removed package versions.
Added 70333 bytes for @takumi-rs/[email protected]
Added 5216932 bytes for @takumi-rs/[email protected]
Added 20683 bytes for [email protected]
Added 2843696 bytes for [email protected]
Added 185343 bytes for @storybook/[email protected]
Added 1663357 bytes for @storybook/[email protected]
Added 17963 bytes for @storybook/[email protected]
Added 48793 bytes for [email protected]
Added 35426 bytes for [email protected]
Added 38673 bytes for [email protected]
Added 328752 bytes for @eslint/[email protected]
Added 67104 bytes for @eslint/[email protected]
Added 58043 bytes for @eslint/[email protected]
Added 92054 bytes for @eslint/[email protected]
Added 108176 bytes for @eslint/[email protected]
Added 6249953 bytes for @napi-rs/[email protected]
Added 109262 bytes for @nuxt/[email protected]
Added 1380331 bytes for [email protected]
Added 1408380 bytes for [email protected]
Added 7398 bytes for @storybook/[email protected]
Added 18620 bytes for @storybook/[email protected]
Added 54571 bytes for @takumi-rs/[email protected]
Added 6928223 bytes for @takumi-rs/[email protected]
Added 44501 bytes for @oxc-project/[email protected]
Added 24089 bytes for [email protected]
Added 2787848 bytes for [email protected]
Added 1108305 bytes for [email protected]
Added 48046 bytes for [email protected]
Added 25324 bytes for [email protected]
Added 27426 bytes for [email protected]
Added 2593415 bytes for @oxc-parser/[email protected]
Subtracted 3076931 bytes for [email protected]
Subtracted 185343 bytes for @storybook/[email protected]
Subtracted 1663357 bytes for @storybook/[email protected]
Subtracted 17969 bytes for @storybook/[email protected]
Subtracted 320890 bytes for @eslint/[email protected]
Subtracted 59201 bytes for @eslint/[email protected]
Subtracted 55761 bytes for @eslint/[email protected]
Subtracted 54158 bytes for @eslint/[email protected]
Subtracted 93553 bytes for @eslint/[email protected]
Subtracted 325374 bytes for [email protected]
Subtracted 5224260 bytes for [email protected]
Subtracted 7398 bytes for @storybook/[email protected]
Subtracted 18620 bytes for @storybook/[email protected]
Subtracted 7619 bytes for [email protected]
Subtracted 2786378 bytes for [email protected]
Subtracted 28353 bytes for [email protected]
Subtracted 28040 bytes for [email protected]
Subtracted 4382 bytes for [email protected]
Subtracted 36841 bytes for [email protected]
Subtracted 14213 bytes for [email protected]
Subtracted 10509 bytes for [email protected]
Subtracted 3958 bytes for [email protected]
Subtracted 15563 bytes for @sec-ant/[email protected]
Subtracted 378406 bytes for [email protected]
Subtracted 7679 bytes for [email protected]
Subtracted 289748 bytes for [email protected]
Subtracted 4311 bytes for [email protected]
Total dependency size increase: 18.9 MB
Wrote artifact to /home/runner/work/npmx.dev/npmx.dev/.e18e-tmp/e18e-diff-result.json

Copy link
Copy Markdown
Member

@alexdln alexdln left a comment

Choose a reason for hiding this comment

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

lgtm, thanks for updates and replies 🤍

Copy link
Copy Markdown
Contributor

@ghostdevv ghostdevv left a comment

Choose a reason for hiding this comment

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

a few more things 😅 code rabbit also has a couple things unresolved

Comment thread nuxt.config.ts
Comment thread app/components/OgImage/BlogPost.takumi.vue Outdated

defineOgImageComponent('Package', {
name: () => packageName.value,
version: () => requestedVersion.value ?? '',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

was removing the ?? '' intentional?

Copy link
Copy Markdown
Contributor Author

@harlan-zw harlan-zw Apr 16, 2026

Choose a reason for hiding this comment

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

Yes, null should be passed for a missing version not an empty string (which is handled by Nuxt islands automatically when nullish value is passed).

Comment thread app/composables/useCharts.ts
Comment thread app/components/OgImage/Package.takumi.vue
Comment thread test/fixtures/mock-routes.cjs Outdated
Comment thread modules/runtime/server/cache.ts Outdated
Comment on lines +145 to +146
expect(component.text()).toContain('test')
expect(component.text()).toContain('repo')
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this seems valid

Comment thread app/components/OgImage/Profile.takumi.vue Outdated
Comment thread uno.config.ts
content: {
pipeline: {
exclude: [
// Preserve the UnoCSS defaults that @unocss/nuxt normally sets
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

how come they're not being set

Copy link
Copy Markdown
Contributor Author

@harlan-zw harlan-zw Apr 16, 2026

Choose a reason for hiding this comment

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

Because we're redefining the config, you'd have to look at the unocss module internals to know more.

@danielroe danielroe dismissed ghostdevv’s stale review April 17, 2026 09:35

I think these changes have been implemented

@danielroe danielroe added this pull request to the merge queue Apr 17, 2026
Merged via the queue into npmx-dev:main with commit b9c3a1d Apr 17, 2026
22 checks passed
@github-actions github-actions Bot mentioned this pull request Apr 17, 2026
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.

4 participants