docs: improve og images compatibility with nuxt-og-image takumi

Author: benjamincanac

docs/app/components/og-image/Component.takumi.vue

@@ -19,20 +19,20 @@ defineProps<{
     >
       <path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" fill="#00DC82" />
     </svg>
-    <div class="w-full border-b-2 border-slate-200">
-      <div class="mx-34 mt-16">
-        <h1 class="text-4xl font-semibold mb-0 flex gap-1">
+    <div class="w-full border-b-2 border-solid border-slate-200">
+      <div class="mx-34 mt-16 mb-2 py-4">
+        <h1 class="text-3xl font-semibold mb-2 flex gap-1">
           <span>{{ title }}</span>
         </h1>
-        <p class="text-2xl text-slate-500 overflow-hidden text-nowrap text-ellipsis mt-2 mb-8">
+        <p class="text-2xl text-slate-500" :style="{ lineClamp: 1, textOverflow: 'ellipsis' }">
           {{ description }}
         </p>
       </div>
     </div>
     <div class="mx-[106px] bg-slate-50 text-center">
       <img
         :src="`/components/light/${slug}.png`"
-        class="mx-auto h-[400px] object-contain"
+        class="mx-auto h-[420px] object-contain"
       >
     </div>
   </div>

docs/app/components/og-image/Docs.takumi.vue

@@ -25,11 +25,11 @@ withDefaults(defineProps<{
       <path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="#00DC82" />
       <path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="#00DC82" />
     </svg>
-    <div class="mx-26 mt-24 border-y-2 border-slate-200 h-14 flex flex-row items-center">
-      <div class="h-full flex items-center border-r-2 border-slate-200 text-green-500 px-6">
+    <div class="mx-26 mt-12 border-y-2 border-solid border-slate-200 h-14 flex flex-row items-center">
+      <div class="h-full flex items-center border-r-2 border-solid border-slate-200 text-green-500 px-6">
         <svg
           v-if="framework === 'nuxt'"
-          class="h-[40px] w-[40px] mt-[10px]"
+          class="h-[40px] w-[40px]"
           viewBox="0 0 512 512"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -38,22 +38,22 @@ withDefaults(defineProps<{
         </svg>
         <svg
           v-else
-          class="w-[34px] h-[30px] mt-6"
+          class="w-[34px] h-[30px]"
           viewBox="0 0 261.76 226.69"
           xmlns="http://www.w3.org/2000/svg"
         >
           <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883" /></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e" /></g></g>
         </svg>
       </div>
-      <div class="h-full uppercase flex items-center border-r-2 border-slate-200 text-green-500 text-[20px] font-semibold px-6 pt-1">
+      <div class="h-full uppercase flex items-center border-r-2 border-solid border-slate-200 text-green-500 text-[20px] font-semibold px-6">
         {{ headline }}
       </div>
     </div>
-    <div class="mx-34 mt-12 h-[240px] flex flex-col justify-center">
-      <h1 class="text-5xl font-semibold mb-0 flex gap-1">
-        <span>{{ title }}</span>
+    <div class="mx-34 mt-12 h-[280px] flex flex-col justify-center">
+      <h1 class="text-4xl font-semibold text-left mb-4">
+        {{ title }}
       </h1>
-      <p class="text-3xl text-slate-500 overflow-hidden" style="max-height: 5.2em;">
+      <p class="text-3xl/11 text-slate-500" :style="{ lineClamp: 3, textOverflow: 'ellipsis' }">
         {{ description }}
       </p>
     </div>