chore(deps): update dependency nuxt-og-image to v4 (#1610)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <[email protected]>
nuxt · Feb 9, 2025 · c6f57e0 · c6f57e0
1 parent 279a981
commit c6f57e0
Show file tree

Hide file tree

Showing 9 changed files with 437 additions and 1,150 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -44,7 +44,7 @@ watch(() => search.value?.commandPaletteRef?.query, debounce((query) => {
 <template>
   <UHeader :links="links">
     <template #logo>
-      <TheLogo />
+      <TheLogo class="scale-[1.20] h-6 w-auto text-black dark:text-white mb-[-5px] ml-[14px]" />
     </template>
     <template #right>
       <UColorModeButton v-if="!$colorMode.forced" />

diff --git a/docs/components/OgImage/Docs.vue b/docs/components/OgImage/Docs.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  image: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-between items-start bg-[#020420] p-20 pt-32 pb-16">
+    <div
+      style="position: absolute;width: 1156px;height: 1000px;left: -215px;top: -337px;background: radial-gradient(50% 50% at 50% 50%, #00DC82 0%, rgba(0, 220, 130, 0) 100%);filter: blur(180.5px);opacity: 0.5;"
+    />
+    <div>
+      <h1 class="text-8xl mb-4 text-white flex items-center">
+        <span>{{ title }}</span>
+        <img
+          v-if="image"
+          :src="image"
+          height="80px"
+          width="80px"
+          class="h-20 w-20 rounded ml-8"
+        >
+      </h1>
+      <p class="text-5xl text-gray-200 leading-tight pr-10">
+        {{ description }}
+      </p>
+    </div>
+    <svg
+      class="w-[349px] h-[60px]"
+      width="349px"
+      height="60px"
+      viewBox="0 0 466 80"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M126.723 67.2269C127.449 67.2269 128.067 66.6249 128.067 65.8823V34.6218C128.067 34.6218 129.748 37.6471 132.773 42.6891L145.882 65.2101C146.482 66.4673 147.813 67.2269 148.908 67.2269H157.983V16.8067H148.908C148.303 16.8067 147.563 17.3089 147.563 18.1513V49.7479L141.513 38.9916L129.412 18.4874C128.823 17.4424 127.556 16.8067 126.387 16.8067H117.647V67.2269H126.723Z"
+        fill="white"
+      />
+      <path
+        d="M244.034 30.9244H248.403C249.517 30.9244 250.42 30.0214 250.42 28.9076V20.1681H259.832V30.9244H268.908V38.9916H259.832V53.4454C259.832 56.9748 261.532 58.4874 264.538 58.4874H268.908V67.2269H263.193C255.445 67.2269 250.42 62.2089 250.42 53.7815V38.9916H244.034V30.9244Z"
+        fill="white"
+      />
+      <path
+        d="M198.655 30.9244V51.7647C198.655 56.4718 196.888 60.4401 194.286 63.1933C191.683 65.9465 188.089 67.2269 183.193 67.2269C178.297 67.2269 174.367 65.9465 171.765 63.1933C169.206 60.4401 167.395 56.4718 167.395 51.7647V30.9244H172.773C173.92 30.9244 175.048 31.1335 175.798 31.9328C176.548 32.6877 176.807 33.1311 176.807 34.2857V51.7647C176.807 54.4735 176.96 56.1468 178.151 57.479C179.342 58.7668 180.811 59.1597 183.193 59.1597C185.619 59.1597 186.708 58.7668 187.899 57.479C189.09 56.1468 189.244 54.4735 189.244 51.7647V34.2857C189.244 33.1311 189.502 32.396 190.252 31.5966C190.911 30.8944 191.606 30.9109 192.605 30.9244C192.743 30.9262 193.138 30.9244 193.277 30.9244H198.655Z"
+        fill="white"
+      />
+      <path
+        d="M227.227 48.4034L238.655 30.9244H229.916C228.815 30.9244 227.836 31.3196 227.227 32.2689L221.849 40.3361L216.807 32.605C216.198 31.6557 214.883 30.9244 213.782 30.9244H205.378L216.807 48.0672L204.37 67.2269H213.109C214.202 67.2269 215.187 66.147 215.798 65.2101L221.849 56.1344L228.235 65.5462C228.846 66.4831 229.832 67.2269 230.924 67.2269H239.664L227.227 48.4034Z"
+        fill="white"
+      />
+      <path
+        d="M56.4706 67.2269H93.7815C94.9722 67.227 96.1117 66.8086 97.1429 66.2185C98.174 65.6284 99.2368 64.8876 99.8319 63.8655C100.427 62.8434 100.841 61.6839 100.84 60.5039C100.84 59.3238 100.428 58.1647 99.8319 57.1431L74.6218 13.7815C74.0268 12.7597 73.2998 12.0186 72.2689 11.4286C71.238 10.8386 69.7618 10.4202 68.5714 10.4202C67.381 10.4202 66.241 10.8386 65.2101 11.4286C64.1792 12.0186 63.4522 12.7597 62.8571 13.7815L56.4706 24.8739L43.6975 3.36055C43.1019 2.33877 42.3757 1.26216 41.3445 0.672269C40.3134 0.0823822 39.1738 0 37.9832 0C36.7926 0 35.653 0.0823822 34.6218 0.672269C33.5907 1.26216 32.5283 2.33877 31.9328 3.36055L0.672269 57.1431C0.0762955 58.1647 0.000518695 59.3238 6.41992e-07 60.5039C-0.000517411 61.6839 0.0771927 62.8433 0.672269 63.8654C1.26735 64.8875 2.33024 65.6284 3.36134 66.2185C4.39245 66.8086 5.53202 67.227 6.72269 67.2269H30.2521C39.5753 67.2269 46.3614 63.0446 51.0924 55.126L62.521 35.2941L68.5714 24.8739L87.0588 56.4706H62.521L56.4706 67.2269ZM29.916 56.4706H13.4454L37.9832 14.1176L50.4202 35.2941L42.1819 49.6554C39.0401 54.7932 35.458 56.4706 29.916 56.4706Z"
+        fill="#00DC82"
+      />
+      <path
+        d="M289.076 67.2269C290.932 67.2269 292.437 65.722 292.437 63.8655V20.1681H285.714C283.858 20.1681 282.353 21.673 282.353 23.5294V67.2269H289.076Z"
+        fill="#00DC82"
+      />
+      <path
+        d="M299.832 33.2773V67.2269H307.899C308.641 67.2269 309.243 66.6249 309.243 65.8823V48.0672C309.243 45.893 309.772 43.9759 310.924 42.6891C312.076 41.3579 313.724 40.6723 315.63 40.6723C317.402 40.6723 318.6 41.3579 319.663 42.6891C320.727 43.9759 321.344 45.893 321.344 48.0672V65.8823C321.344 66.6249 321.946 67.2269 322.688 67.2269H329.411C330.154 67.2269 330.756 66.6249 330.756 65.8823V48.0672C330.756 45.893 331.284 43.9759 332.436 42.6891C333.588 41.3579 335.237 40.6723 337.142 40.6723C338.915 40.6723 340.112 41.3579 341.176 42.6891C342.284 43.9759 342.856 45.893 342.856 48.0672V65.8823C342.856 66.6249 343.458 67.2269 344.201 67.2269H352.268V45.042C352.268 42.7791 351.607 40.8108 350.587 38.9916C349.612 37.128 348.371 35.6868 346.554 34.6218C344.737 33.5569 342.56 32.9412 340.167 32.9412C337.597 32.9412 335.147 33.4238 333.109 34.6218C331.114 35.7755 329.917 37.2611 329.075 38.9916C327.435 34.9094 323.84 32.9412 318.655 32.9412C316.484 32.9412 314.58 33.3095 312.941 34.2857C311.345 35.2175 310.174 36.3858 309.243 37.9832V33.2773H299.832Z"
+        fill="#00DC82"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M372.772 32.9412C375.564 32.9412 377.951 33.5569 380.167 34.6218C382.382 35.6424 383.968 37.0836 385.209 38.9916C386.494 40.8552 387.225 42.8933 387.225 45.3781V67.2269H378.15V62.1849C377.574 63.7379 376.181 65.2423 374.452 66.2185C372.769 67.1503 371.043 67.2269 368.738 67.2269C366.611 67.2269 364.708 67.0615 363.024 66.2185C361.384 65.331 359.921 64.0296 358.991 62.521C358.06 60.968 357.646 59.387 357.646 57.479C357.646 54.1955 358.792 51.6115 361.007 49.7479C363.267 47.8399 366.069 46.7227 369.747 46.7227H375.461C376.259 46.7227 377.035 46.4941 377.478 46.0504C377.921 45.5623 378.15 45.0797 378.15 44.3697C378.15 42.9499 377.533 41.8515 376.469 41.0084C375.406 40.121 373.961 39.6639 372.1 39.6639C370.194 39.6639 368.838 40.324 367.73 41.3445C366.666 42.3651 365.802 43.5334 365.713 45.042H357.646C357.779 42.7791 358.422 40.8108 359.663 38.9916C360.904 37.128 362.489 35.6868 364.705 34.6218C366.92 33.5569 369.803 32.9412 372.772 32.9412ZM371.091 60.8403C373.307 60.8403 374.892 59.9073 376.133 58.4874C377.418 57.0675 378.15 55.3278 378.15 53.1092V52.7731H371.427C370.009 52.7731 368.616 52.9828 367.73 53.7815C366.844 54.5802 366.385 55.8561 366.385 57.1429C366.385 58.2521 367.065 59.1964 367.907 59.9063C368.749 60.5719 369.806 60.8403 371.091 60.8403Z"
+        fill="#00DC82"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M426.555 32.9412H417.143V36.3025C416.212 35.1045 415.085 34.279 413.445 33.6134C411.85 32.9035 410.061 32.605 408.067 32.605C404.832 32.605 402.011 33.202 399.662 34.6218C397.314 36.0417 395.569 38.0543 394.284 40.6723C393.043 43.2902 392.267 46.2869 392.267 49.7479C392.267 55.0281 393.845 59.3706 396.637 62.521C399.473 65.627 403.148 67.2269 408.067 67.2269C410.061 67.2269 412.142 66.8841 413.781 66.2185C415.421 65.5085 416.637 64.4357 417.479 63.1933V67.563C417.479 69.116 416.729 70.2843 415.798 71.2605C414.912 72.281 413.855 72.9412 412.437 72.9412H398.318C397.575 72.9412 396.973 73.5431 396.973 74.2857V80H414.118C417.929 80 421.225 78.4324 423.529 76.3025C425.834 74.217 426.555 72.0768 426.555 68.5714V32.9412ZM415.753 56.6989C414.246 58.385 412.252 59.2281 409.77 59.2281C407.289 59.2281 405.294 58.385 403.788 56.6989C402.325 55.0128 401.594 52.7498 401.594 49.91C401.594 47.0702 402.325 44.8073 403.788 43.1211C405.294 41.3906 407.289 40.5254 409.77 40.5254C412.252 40.5254 414.246 41.3906 415.753 43.1211C417.259 44.8073 418.013 47.0702 418.013 49.91C418.013 52.7498 417.259 55.0128 415.753 56.6989Z"
+        fill="#00DC82"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M459.832 64.2017C462.782 62.0236 464.539 59.0626 465.21 55.4622H456.134C455.777 56.8846 454.988 58.0679 453.781 58.8235C452.574 59.5347 450.953 59.8319 449.076 59.8319C446.751 59.8319 444.837 59.1486 443.361 57.8151C441.931 56.4372 441.03 54.5011 440.672 52.1008H463.865C464.561 52.1008 465.218 51.4514 465.21 50.7563C465.205 50.3652 465.207 50.0215 465.208 49.6604C465.209 49.4732 465.21 49.2813 465.21 49.0756C465.21 46.3197 464.736 43.8337 463.529 41.3445C462.367 38.8553 460.318 36.8943 457.815 35.2941C455.312 33.6939 452.158 32.9412 448.403 32.9412C444.782 32.9412 441.876 33.6495 439.328 35.2941C436.824 36.9388 434.865 39.0581 433.613 41.6807C432.406 44.3032 431.933 47.1059 431.933 50.084C431.933 53.0177 432.608 55.8204 433.95 58.4874C435.291 61.1544 437.071 63.1848 439.664 64.8739C442.301 66.5186 445.41 67.563 449.076 67.563C453.233 67.563 456.881 66.3797 459.832 64.2017ZM443.361 41.3445C444.613 40.2333 446.258 39.6639 448.403 39.6639C450.594 39.6639 452.485 40.0555 453.781 41.3445C455.078 42.5891 455.664 44.4307 455.798 46.3866H441.008C441.411 44.0751 442.11 42.4113 443.361 41.3445Z"
+        fill="#00DC82"
+      />
+    </svg>
+  </div>
+</template>
diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue
diff --git a/docs/components/TheLogo.vue b/docs/components/TheLogo.vue
@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="mb-[-5px] ml-[14px] h-6 w-auto scale-[1.20] text-black dark:text-white"
     width="466"
     height="80"
     viewBox="0 0 466 80"

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -31,6 +31,8 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-07-11',
 
   nitro: {
+    // only for prerendering
+    serveStatic: true,
     prerender: {
       routes: ['/', '/api/search.json'],
       autoSubfolderIndex: false,

diff --git a/docs/package.json b/docs/package.json
@@ -8,6 +8,7 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
+    "@css-inline/css-inline": "^0.14.3",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.20",
     "@nuxt/content": "^2.13.4",
@@ -19,7 +20,7 @@
     "@vueuse/core": "^12.4.0",
     "@vueuse/nuxt": "^12.4.0",
     "nuxt": "^3.15.2",
-    "nuxt-og-image": "^2.2.6",
+    "nuxt-og-image": "^4.1.2",
     "perfect-debounce": "^1.0.0",
     "tailwindcss": "^3.4.17"
   }

diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
@@ -22,8 +22,7 @@ useSeoMeta({
   ogDescription: page.value.description,
 })
 
-defineOgImage({
-  component: 'Docs',
+defineOgImageComponent('Docs', {
   title: page.value.title,
   description: page.value.description,
   image: isProvider ? `${page.value._path}.svg` : '',

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -6,8 +6,7 @@ useSeoMeta({
   ogTitle: `Nuxt Image Playground`,
   description,
 })
-defineOgImage({
-  component: 'Docs',
+defineOgImageComponent('Docs', {
   title,
   description,
 })