nuxt-og-image 4.0.2 → 4.0.3

package/dist/module.mjs

@@ -456,17 +456,27 @@ function isNuxtGenerate(nuxt = useNuxt()) {
 function normaliseFontInput(fonts) {
   return fonts.map((f) => {
     if (typeof f === "string") {
-      const [name, weight] = f.split(":");
+      const vals = f.split(":");
+      const includesStyle = vals.length === 3;
+      let name, weight, style;
+      if (includesStyle) {
+        name = vals[0];
+        style = vals[1];
+        weight = vals[2];
+      } else {
+        name = vals[0];
+        weight = vals[1];
+      }
       return {
         cacheKey: f,
         name,
         weight: weight || 400,
-        style: "normal",
+        style: style || "normal",
         path: void 0
       };
     }
     return {
-      cacheKey: f.key || `${f.name}:${f.weight}`,
+      cacheKey: f.key || `${f.name}:${f.style}:${f.weight}`,
       style: "normal",
       weight: 400,
       ...f
@@ -489,12 +499,12 @@ async function checkPlaywrightDependency() {
   return !!await tryResolveModule("playwright");
 }
 async function downloadFont(font, storage, mirror) {
-  const { name, weight } = font;
-  const key = `${name}-${weight}.ttf.base64`;
+  const { name, weight, style } = font;
+  const key = `${name}-${style}-${weight}.ttf.base64`;
   if (await storage.hasItem(key))
     return true;
   const host = typeof mirror === "undefined" ? "fonts.googleapis.com" : mirror === true ? "fonts.font.im" : mirror;
-  const css = await $fetch(`https://${host}/css2?family=${name}:wght@${weight}`, {
+  const css = await $fetch(`https://${host}/css2?family=${name}:${style === "ital" ? `ital,wght@1,${weight}` : `wght@${weight}`}`, {
     timeout: 10 * 1e3,
     // 10 second timeout
     headers: {
@@ -561,6 +571,7 @@ const module = defineNuxtModule({
     }
     nuxt.options.alias["#og-image"] = resolve("./runtime");
     nuxt.options.alias["#og-image-cache"] = resolve("./runtime/server/og-image/cache/lru");
+    nuxt.options.alias["#nuxt-og-image-utils"] = resolve("./runtime/shared");
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
     if (config.zeroRuntime) {
@@ -644,8 +655,8 @@ const module = defineNuxtModule({
     }
     if (!config.fonts.length) {
       config.fonts = [
-        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-400.ttf.base64"), absolutePath: true },
-        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-700.ttf.base64"), absolutePath: true }
+        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-normal-400.ttf.base64"), absolutePath: true },
+        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-normal-700.ttf.base64"), absolutePath: true }
       ];
     }
     let publicDirAbs = nuxt.options.dir.public;
@@ -659,32 +670,34 @@ const module = defineNuxtModule({
       })
     });
     config.fonts = (await Promise.all(normaliseFontInput(config.fonts).map(async (f) => {
+      const fontKey = `${f.name}:${f.style}:${f.weight}`;
+      const fontFileBase = fontKey.replaceAll(":", "-");
       if (!f.key && !f.path) {
         if (preset === "stackblitz") {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+          logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
           return false;
         }
         if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
-          f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`;
+          f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`;
         } else {
-          logger.warn(`Failed to download font ${f.name}:${f.weight}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
+          logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
           return false;
         }
       } else if (f.path) {
         const extension = basename(f.path.replace(".base64", "")).split(".").pop();
         if (!["woff", "ttf", "otf"].includes(extension)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
+          logger.warn(`The ${fontKey} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
           return false;
         }
         if (!f.absolutePath)
           f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
         if (!existsSync(f.path)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file does not exist at path ${f.path}.`);
+          logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
           return false;
         }
         const fontData = await readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
-        f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.${extension}.base64`;
-        await fontStorage.setItem(`${f.name}-${f.weight}.${extension}.base64`, fontData);
+        f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
+        await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
         delete f.path;
         delete f.absolutePath;
       }

package/dist/runtime/app/components/Templates/Community/BrandedLogo.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  title?: string
-  logo?: string
-}>(), {
-  title: 'title',
-  logo: 'https://nuxt.com/assets/design-kit/logo-white.png',
-})
-</script>
-
-<template>
-  <div
-    :style="{ backgroundImage: 'linear-gradient(to right, #24243e, #302b63, #0f0c29)' }"
-    class="h-full w-full flex items-start justify-start"
-  >
-    <div class="flex items-start justify-start h-full">
-      <div class="flex flex-col justify-between w-full h-full p-20">
-        <img :src="logo" height="50">
-        <h1 class="text-[60px] text-white font-bold text-left">
-          {{ title }}
-        </h1>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+
+withDefaults(defineProps<{
+  title?: string
+  logo?: string
+}>(), {
+  title: 'title',
+  logo: 'https://nuxt.com/assets/design-kit/logo-white.png',
+})
+</script>
+
+<template>
+  <div
+    :style="{ backgroundImage: 'linear-gradient(to right, #24243e, #302b63, #0f0c29)' }"
+    class="h-full w-full flex items-start justify-start"
+  >
+    <div class="flex items-start justify-start h-full">
+      <div class="flex flex-col justify-between w-full h-full p-20">
+        <img :src="logo" height="50">
+        <h1 class="text-[60px] text-white font-bold text-left">
+          {{ title }}
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/Templates/Community/Frame.vue

@@ -1,64 +1,64 @@
-<script setup lang="ts">
-/**
- * @credits @arashsheyda <https://github.com/arashsheyda>
- */
-
-withDefaults(defineProps<{
-  title?: string
-  description?: string
-  bg?: string
-  icon?: string
-  logo?: string
-  image?: string
-  username?: string
-  socials?: { name: string, icon: string }[]
-}>(), {
-  bg: 'linear-gradient(to bottom right, #171717, #131313)',
-})
-</script>
-
-<template>
-  <div
-    class="relative h-full w-full flex items-center justify-center bg-neutral-900 text-white border-2 border-white"
-    :style="{ backgroundImage: bg }"
-  >
-    <div
-      v-if="image"
-      class="absolute inset-0 w-full h-full bg-center opacity-10"
-      :style="{ backgroundImage: `url(${image})` }"
-    />
-    <div class="flex flex-col items-center text-center">
-      <h1 class="flex gap-4 text-7xl font-bold">
-        <Icon
-          v-if="icon"
-          :name="icon"
-        />
-        {{ title }}
-      </h1>
-      <p class="text-2xl max-w-3xl">
-        {{ description }}
-      </p>
-    </div>
-
-    <img
-      v-if="logo"
-      :src="logo"
-      class="absolute bottom-0 left-0 p-5"
-      style="height: 125px; width: 153px;"
-    >
-    <div class="absolute bottom-5 right-5 flex gap-4">
-      <div
-        v-if="username"
-        class="absolute bottom-12 right-8 font-bold"
-      >
-        {{ username }}
-      </div>
-      <Icon
-        v-for="social of socials"
-        :key="social.name"
-        :name="social.icon!"
-        class="w-7 h-7"
-      />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * @credits @arashsheyda <https://github.com/arashsheyda>
+ */
+
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  bg?: string
+  icon?: string
+  logo?: string
+  image?: string
+  username?: string
+  socials?: { name: string, icon: string }[]
+}>(), {
+  bg: 'linear-gradient(to bottom right, #171717, #131313)',
+})
+</script>
+
+<template>
+  <div
+    class="relative h-full w-full flex items-center justify-center bg-neutral-900 text-white border-2 border-white"
+    :style="{ backgroundImage: bg }"
+  >
+    <div
+      v-if="image"
+      class="absolute inset-0 w-full h-full bg-center opacity-10"
+      :style="{ backgroundImage: `url(${image})` }"
+    />
+    <div class="flex flex-col items-center text-center">
+      <h1 class="flex gap-4 text-7xl font-bold">
+        <Icon
+          v-if="icon"
+          :name="icon"
+        />
+        {{ title }}
+      </h1>
+      <p class="text-2xl max-w-3xl">
+        {{ description }}
+      </p>
+    </div>
+
+    <img
+      v-if="logo"
+      :src="logo"
+      class="absolute bottom-0 left-0 p-5"
+      style="height: 125px; width: 153px;"
+    >
+    <div class="absolute bottom-5 right-5 flex gap-4">
+      <div
+        v-if="username"
+        class="absolute bottom-12 right-8 font-bold"
+      >
+        {{ username }}
+      </div>
+      <Icon
+        v-for="social of socials"
+        :key="social.name"
+        :name="social.icon!"
+        class="w-7 h-7"
+      />
+    </div>
+  </div>
+</template>