Conversation
# Conflicts: # nuxt.config.ts # pnpm-lock.yaml
This reverts commit 434ed43.
docus 5.8.1 ships OG image components incompatible with nuxt-og-image v6 (missing renderer suffix). Disable og-image in docs rather than bumping docus, which introduced other CI regressions.
|
Just a heads up on this, I can't spend any more of my time resolving the ongoing conflicts. If you're interested in this work, then let's merge and improve anything else in subsequent PRs; otherwise, let's close it off. |
nuxt.config.ts
Outdated
| '/_og/d/**': getISRConfig(60 * 60 * 24), // 1 day | ||
| '/_avatar/**': { isr: 3600, proxy: 'https://www.gravatar.com/avatar/**' }, |
There was a problem hiding this comment.
Looks like it still needs allowQuery for this route
/_og/d/a_Compare+npm+packages+side-by-side,c_Compare.takumi,q_eyJwYWNrYWdlcyI6InJlYWN0LHR5cGUifQ,props_eyJwYWNrYWdlcyI6WyJyZWFjdCIsInR5cGUiXX0,emptyDescription_Compare+npm+packages+side-by-side,title_Compare+react+vs+type+-+npmx,description_~U2lkZS1ieS1zaWRlIGNvbXBhcmlzb24gb2YgcmVhY3QsIHR5cGU,p_Ii9jb21wYXJlIg.png?_query={"packages":"react,type"}
There was a problem hiding this comment.
Hm this was actually conflicting with og images native caching so we can remove it
There was a problem hiding this comment.
Yup, so we can re-implement but og image internally already provides ISR headers based on the resolved request, so it should be behaving the same. Let me confirm the logic for this, though.
There was a problem hiding this comment.
Were you able to find the information? This logic, as far as I know, is specific to Vercel and is difficult to replicate elsewhere (including in previews). And without allowQuery, they [query params] simply might not be passed to components
There was a problem hiding this comment.
Internally, OG Image has caching on the images themselves, ensuring that regardless of what the CDN layer is doing, the images get cached to avoid expensive re-renders. This uses the default Nitro cache, which, as far as I can tell, is set up in npmx.dev for vercel-runtime-cache.
Additionally, og images will emit two layers of headers, the original route rules on the dynamic and static endpoints at https://github.com/nuxt-modules/og-image/blob/main/src/module.ts#L884 and specific headers on the response itself it the route rules aren't acknowledged for whatever reason https://github.com/nuxt-modules/og-image/blob/945bdb9b20209abbd29d737ef3594ba97c21d754/src/runtime/server/util/cache.ts#L107.
The query params are irrelevant due to the query not affecting the image, as the props are passed in as the regular URL params, i.e /_og/d/q_dynamic-query. The query param does end up in the query, but shouldn't be included as a cache vary, as if the query doesn't affect the props, it's irrelevant. This was an improvement for v5 -> v6 as the caching is more intuitive for CDNs.
With the og image secret passed, we also encode all URLs, which would affect the query param collapsing.
Saying all that, testing across environments and at these different levels gets confusing, so we should of course, double-check it's working as intended after deployment.
|
| 📦 Package | 📋 Versions |
|---|---|
| h3 | 5 versions
h3@2.0.1-rc.11 h3@2.0.1-rc.16 h3@2.0.1-rc.20 |
| oxc-parser | 5 versions
|
| @oxc-parser/binding-wasm32-wasi | 5 versions
|
| glob | 5 versions
|
| @rolldown/pluginutils | 5 versions
@rolldown/pluginutils@1.0.0-rc.9 |
| @oxc-project/types | 7 versions
|
| @oxc-parser/binding-android-arm64 | 5 versions
|
| @oxc-parser/binding-darwin-arm64 | 5 versions
|
| @oxc-parser/binding-darwin-x64 | 5 versions
|
| @oxc-parser/binding-freebsd-x64 | 5 versions
|
| @oxc-parser/binding-linux-arm-gnueabihf | 5 versions
|
| @oxc-parser/binding-linux-arm-musleabihf | 5 versions
|
| @oxc-parser/binding-linux-arm64-gnu | 5 versions
|
| @oxc-parser/binding-linux-arm64-musl | 5 versions
|
| @oxc-parser/binding-linux-riscv64-gnu | 5 versions
|
| @oxc-parser/binding-linux-s390x-gnu | 5 versions
|
| @oxc-parser/binding-linux-x64-gnu | 5 versions
|
| @oxc-parser/binding-linux-x64-musl | 5 versions
|
| @oxc-parser/binding-win32-arm64-msvc | 5 versions
|
| @oxc-parser/binding-win32-x64-msvc | 5 versions
|
💡 To find out what depends on a specific package, run: pnpm -r why example-package
📊 Dependency Size Changes
Warning
This PR adds 18.9 MB of new dependencies, which exceeds the threshold of 200 kB.
| 📦 Package | 📏 Size |
|---|---|
| @takumi-rs/core-linux-x64-gnu@1.0.5 | 6.9 MB |
| @napi-rs/wasm-runtime@1.1.3 | 6.2 MB |
| satori@0.18.4 | -5.2 MB |
| @takumi-rs/wasm@1.0.5 | 5.2 MB |
| @oxc-parser/binding-linux-x64-gnu@0.124.0 | 2.6 MB |
| nuxt-site-config@4.0.8 | 1.4 MB |
| oxc-parser@0.124.0 | 1.4 MB |
| culori@4.0.2 | 1.1 MB |
| image-size@2.0.2 | -378.4 kB |
| execa@9.6.1 | -325.4 kB |
| yoga-wasm-web@0.3.3 | -289.7 kB |
| nuxt-og-image@5.1.13 → nuxt-og-image@6.3.10 | -233.2 kB |
| @nuxt/devtools-kit@4.0.0-alpha.3 | 109.3 kB |
| @takumi-rs/core@1.0.5 | 70.3 kB |
| @takumi-rs/helpers@1.0.5 | 54.6 kB |
| devalue@5.7.1 | 48.8 kB |
| nuxtseo-shared@5.1.3 | 48 kB |
| @oxc-project/types@0.124.0 | 44.5 kB |
| tinyglobby@0.2.16 | 38.7 kB |
| @eslint/core@1.2.0 → @eslint/core@1.2.1 | 37.9 kB |
| figures@6.1.0 | -36.8 kB |
| tinyexec@1.1.1 | 35.4 kB |
| get-stream@9.0.1 | -28.4 kB |
| human-signals@8.0.1 | -28 kB |
| site-config-stack@4.0.8 | 27.4 kB |
| nuxt-site-config-kit@4.0.8 | 25.3 kB |
| call-bind@1.0.9 | 24.1 kB |
| defu@6.1.7 | 20.7 kB |
| @sec-ant/readable-stream@0.4.1 | -15.6 kB |
| @eslint/plugin-kit@0.7.0 → @eslint/plugin-kit@0.7.1 | 14.6 kB |
| pretty-ms@9.3.0 | -14.2 kB |
| yoctocolors@2.1.2 | -10.5 kB |
| @eslint/object-schema@3.0.4 → @eslint/object-schema@3.0.5 | 7.9 kB |
| @eslint/config-array@0.23.4 → @eslint/config-array@0.23.5 | 7.9 kB |
| satori-html@0.3.2 | -7.7 kB |
| is-stream@4.0.1 | -7.6 kB |
| strip-final-newline@4.0.0 | -4.4 kB |
| parse-ms@4.0.0 | -4.3 kB |
| is-unicode-supported@2.1.0 | -4 kB |
| @eslint/config-helpers@0.5.4 → @eslint/config-helpers@0.5.5 | 2.3 kB |
| es-abstract@1.24.1 → es-abstract@1.24.2 | 1.5 kB |
| @storybook/addon-themes@10.3.4 → @storybook/addon-themes@10.3.5 | -6 B |
| @storybook/addon-a11y@10.3.4 → @storybook/addon-a11y@10.3.5 | 0 B |
| @storybook/addon-docs@10.3.4 → @storybook/addon-docs@10.3.5 | 0 B |
| @storybook/csf-plugin@10.3.4 → @storybook/csf-plugin@10.3.5 | 0 B |
| @storybook/react-dom-shim@10.3.4 → @storybook/react-dom-shim@10.3.5 | 0 B |
Total size change: 18.9 MB
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. |

🔗 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)
📚 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).