feat: new og images by harlan-zw · Pull Request #2292 · npmx-dev/npmx.dev

harlan-zw · 2026-03-27T04:06:33Z

🔗 Linked issue

🧭 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)

📚 Description

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

sample - check PR files for more

https://npmx.dev/

https://npmx.dev/accessibility

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

https://npmx.dev/package/@nuxt/kit

https://npmx.dev/package-docs/ufo/v/1.6.3

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

…g-image-v6

…mage-v6

# Conflicts: # nuxt.config.ts # pnpm-lock.yaml

…g-image-v6

Bump nuxt-og-image to 6.2.6 and takumi to 1.0.0-beta.20. Disable prerender failOnError in test builds to match main branch behavior (OAuth plugin crashes without valid clientUri in CI).

Revert changes unrelated to OG image migration: - CI NODE_OPTIONS memory bump - site.description casing change - nitro prerender failOnError workaround - favicon.svg and logo-icon.svg branding changes - a11y test cosmetic string template refactoring

…ge security - Fix blog post avatar stacking (vertical → horizontal) by adding flex-row to container - Remove htmlValidator.ignore regexes that broke structuredClone in @nuxt/test-utils - Remove long-title rule override (not needed without ignore pattern) - Add ogImage.security.maxQueryParamSize - Update blog post snapshot

nuxt-og-image v6 causes runtimeConfig to contain values that structuredClone rejects during vite-plus-test project resolution. Replace structuredClone with JSON roundtrip in @nuxt/test-utils config.mjs as a workaround.

The structuredClone crash was caused by objects created in Vite's module runner (separate V8 context) being stored in runtimeConfig. Fixed upstream in nuxt-site-config by JSON-serializing the runtimeConfig contribution before assignment.

Vite's module runner creates objects in a separate V8 context that structuredClone rejects. Replace with JSON roundtrip in test-utils config resolution until upstream nuxt-site-config fix is published.

harlan-zw · 2026-03-28T02:34:20Z

patches/@nuxt__test-utils.patch

+       test: {
+         environmentOptions: {
+-          nuxtRuntimeConfig: applyEnv(structuredClone(options.nuxt.options.runtimeConfig), {
+          nuxtRuntimeConfig: applyEnv(JSON.parse(JSON.stringify(options.nuxt.options.runtimeConfig)), {


@danielroe I tried debugging what could have been causing this issue in nuxt og image (or nuxt site config) but as far as I could tell, neither of them had non-serializable data in the runtime config so it was very strange.

Do you think this fix upstream in @nuxt/test-utils makes sense? Happy to send a PR for it if so. We may consider a structuredClone with this json parse/stringify as fallback if it fails with a warning instead.

Context: https://github.com/npmx-dev/npmx.dev/actions/runs/23634594311/job/68841078028?pr=2292

Restore i18n locale files, schema, and logo-icon.svg to match main. Re-use og_title i18n key in package-docs ogTitle meta instead of removing it.

ghostdevv · 2026-04-05T02:20:17Z

nuxt.config.ts

-    fonts: [
-      { name: 'Geist', weight: 400, path: '/fonts/Geist-Regular.ttf' },
-      { name: 'Geist', weight: 500, path: '/fonts/Geist-Medium.ttf' },
-      { name: 'Geist', weight: 600, path: '/fonts/Geist-SemiBold.ttf' },
-      { name: 'Geist', weight: 700, path: '/fonts/Geist-Bold.ttf' },
-      { name: 'Geist Mono', weight: 400, path: '/fonts/GeistMono-Regular.ttf' },
-      { name: 'Geist Mono', weight: 500, path: '/fonts/GeistMono-Medium.ttf' },
-      { name: 'Geist Mono', weight: 700, path: '/fonts/GeistMono-Bold.ttf' },
-    ],


not needed anymore?

ghostdevv · 2026-04-05T02:20:26Z

nuxt.config.ts

+    security: {
+      maxQueryParamSize: 2048,
+    },


ghostdevv · 2026-04-05T02:20:39Z

nuxt.config.ts

          href: '/opensearch.xml',
        },
      ],
-      meta: [{ name: 'twitter:card', content: 'summary_large_image' }],


not needed anymore?

ghostdevv · 2026-04-05T02:22:24Z

test/e2e/og-image.spec.ts

+ * - Static pages (Page.takumi)
+ * - Packages (Package.takumi with download-chart, code-tree, function-tree variants)
+ */
+const testCases = [


could we use screaming snake case

ghostdevv · 2026-04-05T02:28:39Z

uno.config.ts

+  // og-image uses hardcoded classes we don't want bundled into main app
+  content: {
+    pipeline: {
+      exclude: [
+        // Preserve the UnoCSS defaults that @unocss/nuxt normally sets
+        /\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/,
+        /\?macro=true/,
+        // Exclude OG image templates from the pipeline
+        '**/OgImage/*.takumi.vue',
+      ],
+    },
+  },


could you explain how this works?

ghostdevv · 2026-04-05T02:31:38Z

app/components/OgImage/Package.takumi.vue

+        <span
+          v-else-if="row.kind === 'symbol'"
+          class="w-5 h-5 shrink-0 text-fg-muted force-mr-1.5 i-lucide:code"
+        />


does this branch need an else?

ghostdevv · 2026-04-05T02:33:02Z

app/components/OgImage/Package.takumi.vue

+          class="pt-3 lg:text-4xl text-3xl opacity-70 font-mono tracking-tight leading-none"
+          :style="{ textOverflow: 'ellipsis', lineClamp: 1 }"
+        >
+          v{{ version }}


does this display the resolved version, or could it display the range? not sure which we want here 🤔

ghostdevv · 2026-04-05T02:42:26Z

app/pages/about.vue

+  {
+    title: () => `${$t('about.title')}`,
+    description: 'a fast, modern browser for the npm registry',
+  },


why is this partially translated?

harlan-zw and others added 30 commits February 26, 2026 16:51

feat: nuxt og image v6

a04f84f

chore: sync

0198696

Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/o…

b76f0e2

…g-image-v6

chore: sync

fb61483

chore: sync

b4b7ffc

chore: sync

440bdb1

chore: sync

6e89cb9

chore: sync

b366eaa

chore: sync

17e7ef7

Merge remote-tracking branch 'origin/main' into feat/og-image-v6

6c3add5

fix: small fixes

b69a6df

Merge remote-tracking branch 'origin/main' into feat/og-image-v6

25f3f96

chore: reorder

347cbcc

ci: bump memory

8d8a3ee

Merge remote-tracking branch 'origin/main' into feat/og-image-v6

8e1c597

chore: sync

2cdcc35

Merge remote-tracking branch 'origin/feat/og-image-v6' into feat/og-i…

114f2e3

…mage-v6

chore: opacity

499668f

fix: use utc dates, handle division by zero, + add tanstack fixture

4d5afa5

Merge remote-tracking branch 'origin/main' into feat/og-image-v6

b196d5a

# Conflicts: # nuxt.config.ts # pnpm-lock.yaml

chore: lint

a1259f7

fix: rename og-image snapshot for home path

49a9014

fix: remove UnoCSS pipeline exclude that broke a11y tests

6e62678

chore: opps

9d7060c

fix: preserve UnoCSS default pipeline excludes alongside takumi exclude

83fa423

ci: switch browser tests to x64 runner for Takumi WASM compat

449232c

revert: restore browser test ARM runner

9800fc1

chore: bump og image

b1cae8f

chore: bump takumi

81c6227

Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/o…

f65e30f

…g-image-v6

vercel bot had a problem deploying to Preview – npmx.dev March 27, 2026 04:22 Failure

chore: bump nuxt-og-image to 6.2.6, takumi to 1.0.0-beta.20

0908bb7

vercel bot had a problem deploying to Preview – docs.npmx.dev March 27, 2026 04:38 Failure

vercel bot deployed to Preview – npmx.dev March 27, 2026 04:39 View deployment

chore: bump deps, fix test build prerender

295722d

Bump nuxt-og-image to 6.2.6 and takumi to 1.0.0-beta.20. Disable prerender failOnError in test builds to match main branch behavior (OAuth plugin crashes without valid clientUri in CI).

vercel bot deployed to Preview – npmx.dev March 27, 2026 04:44 View deployment

vercel bot deployed to Preview – npmx.dev March 27, 2026 04:56 View deployment

vercel bot deployed to Preview – npmx.dev March 27, 2026 05:23 View deployment

vercel bot had a problem deploying to Preview – docs.npmx.dev March 27, 2026 05:52 Failure

vercel bot deployed to Preview – npmx.dev March 27, 2026 05:53 View deployment

vercel bot had a problem deploying to Preview – docs.npmx.dev March 27, 2026 06:41 Failure

vercel bot deployed to Preview – npmx.dev March 27, 2026 06:43 View deployment

fix: patch @nuxt/test-utils structuredClone for cross-context objects

4d97433

Vite's module runner creates objects in a separate V8 context that structuredClone rejects. Replace with JSON roundtrip in test-utils config resolution until upstream nuxt-site-config fix is published.

vercel bot had a problem deploying to Preview – docs.npmx.dev March 27, 2026 07:11 Failure

vercel bot deployed to Preview – npmx.dev March 27, 2026 07:13 View deployment

Merge branch 'main' into feat/og-image-v7

fe4d826

vercel bot had a problem deploying to Preview – docs.npmx.dev March 27, 2026 19:46 Failure

[autofix.ci] apply automated fixes

8e5041e

vercel bot deployed to Preview – npmx.dev March 27, 2026 19:48 View deployment

danielroe approved these changes Mar 27, 2026

View reviewed changes

danielroe requested a review from alexdln March 27, 2026 20:15

Merge remote-tracking branch 'origin/main' into feat/og-image-v7

0879add

harlan-zw commented Mar 28, 2026

View reviewed changes

chore: reduce PR scope, revert unrelated i18n and branding changes

515f99b

Restore i18n locale files, schema, and logo-icon.svg to match main. Re-use og_title i18n key in package-docs ogTitle meta instead of removing it.

vercel bot deployed to Preview – npmx.dev March 28, 2026 02:49 View deployment

ghostdevv requested changes Apr 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: new og images#2292

feat: new og images#2292
harlan-zw wants to merge 57 commits intonpmx-dev:mainfrom
harlan-zw:feat/og-image-v7

harlan-zw commented Mar 27, 2026 •

edited

Loading

Uh oh!

harlan-zw Mar 28, 2026 •

edited

Loading

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

ghostdevv Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

harlan-zw commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

harlan-zw Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

harlan-zw commented Mar 27, 2026 •

edited

Loading

harlan-zw Mar 28, 2026 •

edited

Loading