nuxt-og-image 5.1.1 → 5.1.3

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

@@ -0,0 +1,12 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    title?: string;
+    logo?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    logo: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,20 +1,14 @@
-<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 setup>
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  bg: { type: String, required: false, default: "linear-gradient(to bottom right, #171717, #131313)" },
+  icon: { type: String, required: false },
+  logo: { type: String, required: false },
+  image: { type: String, required: false },
+  username: { type: String, required: false },
+  socials: { type: Array, required: false }
+});
 </script>
 
 <template>
@@ -28,14 +22,14 @@ withDefaults(defineProps<{
       :style="{ backgroundImage: `url(${image})` }"
     />
     <div class="flex flex-col items-center text-center">
-      <h1 class="flex gap-4 text-7xl font-bold">
+      <h1 class="flex gap-4 text-7xl font-bold" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
         <Icon
           v-if="icon"
           :name="icon"
         />
         {{ title }}
       </h1>
-      <p class="text-2xl max-w-3xl">
+      <p class="text-2xl max-w-3xl" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
     </div>
@@ -56,7 +50,7 @@ withDefaults(defineProps<{
       <Icon
         v-for="social of socials"
         :key="social.name"
-        :name="social.icon!"
+        :name="social.icon"
         class="w-7 h-7"
       />
     </div>

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

@@ -0,0 +1,20 @@
+/**
+ * @credits @arashsheyda <https://github.com/arashsheyda>
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    bg?: string;
+    icon?: string;
+    logo?: string;
+    image?: string;
+    username?: string;
+    socials?: {
+        name: string;
+        icon: string;
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bg: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,12 @@
-<script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.vue
- */
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
-  title: 'title',
-  description: 'description',
-  headline: 'headline',
-})
-
-const title = computed(() => (props.title || '').slice(0, 60))
-const description = computed(() => (props.description || '').slice(0, 200))
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false, default: "description" },
+  headline: { type: String, required: false, default: "headline" }
+});
+const title = computed(() => (props.title || "").slice(0, 60));
+const description = computed(() => (props.description || "").slice(0, 200));
 </script>
 
 <template>
@@ -49,10 +43,10 @@ const description = computed(() => (props.description || '').slice(0, 200))
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
-        <span>{{ title }}</span>
+      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ title }}
       </h1>
-      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight">
+      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
     </div>

package/dist/runtime/app/components/Templates/Community/Nuxt.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,91 +1,54 @@
-<script setup lang="ts">
-/**
- * @credits Nuxt SEO <https://nuxtseo.com/>
- */
-
-import { useSiteConfig } from '#imports'
-import { useOgImageRuntimeConfig } from '#og-image/shared'
-import { computed, defineComponent, h, resolveComponent } from 'vue'
-
-// convert to typescript props
-const props = withDefaults(defineProps<{
-  colorMode?: 'dark' | 'light'
-  title?: string
-  description?: string
-  icon?: string | boolean
-  siteName?: string
-  siteLogo?: string
-  theme?: string
-}>(), {
-  theme: '#00dc82',
-  title: 'title',
-})
-
-const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
-
-const runtimeConfig = useOgImageRuntimeConfig()
-
+<script setup>
+import { useSiteConfig } from "#imports";
+import { useOgImageRuntimeConfig } from "#og-image/shared";
+import { computed, defineComponent, h, resolveComponent } from "vue";
+const props = defineProps({
+  colorMode: { type: String, required: false },
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false },
+  icon: { type: [String, Boolean], required: false },
+  siteName: { type: String, required: false },
+  siteLogo: { type: String, required: false },
+  theme: { type: String, required: false, default: "#00dc82" }
+});
+const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i;
+const runtimeConfig = useOgImageRuntimeConfig();
 const colorMode = computed(() => {
-  return props.colorMode || runtimeConfig.colorPreference || 'light'
-})
-
+  return props.colorMode || runtimeConfig.colorPreference || "light";
+});
 const themeHex = computed(() => {
-  // regex test if valid hex
   if (HexRegex.test(props.theme))
-    return props.theme
-
-  // if it's hex without the hash, just add the hash
+    return props.theme;
   if (HexRegex.test(`#${props.theme}`))
-    return `#${props.theme}`
-
-  // if it's rgb or rgba, we convert it to hex
-  if (props.theme.startsWith('rgb')) {
-    const rgb = props.theme
-      .replace('rgb(', '')
-      .replace('rgba(', '')
-      .replace(')', '')
-      .split(',')
-      .map(v => Number.parseInt(v.trim(), 10))
-    const hex = rgb
-      .map((v) => {
-        const hex = v.toString(16)
-        return hex.length === 1 ? `0${hex}` : hex
-      })
-      .join('')
-    return `#${hex}`
+    return `#${props.theme}`;
+  if (props.theme.startsWith("rgb")) {
+    const rgb = props.theme.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",").map((v) => Number.parseInt(v.trim(), 10));
+    const hex = rgb.map((v) => {
+      const hex2 = v.toString(16);
+      return hex2.length === 1 ? `0${hex2}` : hex2;
+    }).join("");
+    return `#${hex}`;
   }
-  return '#FFFFFF'
-})
-
+  return "#FFFFFF";
+});
 const themeRgb = computed(() => {
-  // we want to convert it so it's just `<red>, <green>, <blue>` (255, 255, 255)
-  return themeHex.value
-    .replace('#', '')
-    .match(/.{1,2}/g)
-    ?.map(v => Number.parseInt(v, 16))
-    .join(', ')
-})
-
-const siteConfig = useSiteConfig()
+  return themeHex.value.replace("#", "").match(/.{1,2}/g)?.map((v) => Number.parseInt(v, 16)).join(", ");
+});
+const siteConfig = useSiteConfig();
 const siteName = computed(() => {
-  return props.siteName || siteConfig.name
-})
+  return props.siteName || siteConfig.name;
+});
 const siteLogo = computed(() => {
-  return props.siteLogo || siteConfig.logo
-})
-
-const IconComponent = runtimeConfig.hasNuxtIcon
-  ? resolveComponent('Icon')
-  : defineComponent({
-      render() {
-        return h('div', 'missing @nuxt/icon')
-      },
-    })
-if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev) {
-  console.warn('Please install `@nuxt/icon` to use icons with the fallback OG Image component.')
-  // eslint-disable-next-line no-console
-  console.log('\nnpx nuxi module add icon\n')
-  // create simple div renderer component
+  return props.siteLogo || siteConfig.logo;
+});
+const IconComponent = runtimeConfig.hasNuxtIcon ? resolveComponent("Icon") : defineComponent({
+  render() {
+    return h("div", "missing @nuxt/icon");
+  }
+});
+if (typeof props.icon === "string" && !runtimeConfig.hasNuxtIcon && process.dev) {
+  console.warn("Please install `@nuxt/icon` to use icons with the fallback OG Image component.");
+  console.log("\nnpx nuxi module add icon\n");
 }
 </script>
 
@@ -93,26 +56,29 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
   <div
     class="w-full h-full flex justify-between relative p-[60px]"
     :class="[
-      colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-white'],
-    ]"
+  colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-white']
+]"
   >
     <div
       class="flex absolute top-0 right-[-100%]" :style="{
-        width: '200%',
-        height: '200%',
-        backgroundImage: `radial-gradient(circle, rgba(${themeRgb}, 0.5) 0%,  ${colorMode === 'dark' ? 'rgba(5, 5, 5,0.3)' : 'rgba(255, 255, 255, 0.7)'} 50%, ${props.colorMode === 'dark' ? 'rgba(5, 5, 5,0)' : 'rgba(255, 255, 255, 0)'} 70%)`,
-      }"
+  width: '200%',
+  height: '200%',
+  backgroundImage: `radial-gradient(circle, rgba(${themeRgb}, 0.5) 0%,  ${colorMode === 'dark' ? 'rgba(5, 5, 5,0.3)' : 'rgba(255, 255, 255, 0.7)'} 50%, ${props.colorMode === 'dark' ? 'rgba(5, 5, 5,0)' : 'rgba(255, 255, 255, 0)'} 70%)`
+}"
     />
     <div class="h-full w-full justify-between relative">
       <div class="flex flex-row justify-between items-start">
         <div class="flex flex-col w-full max-w-[65%]">
-          <h1 class="m-0 font-bold mb-[30px] text-[75px]">
+          <h1 class="m-0 font-bold mb-[30px] text-[75px]" style="display: block; text-overflow: ellipsis;" :style="{ lineClamp: description ? 2 : 3 }">
             {{ title }}
           </h1>
           <p
-            v-if="description" class="text-[35px]" :class="[
-              colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300'],
-            ]"
+            v-if="description"
+            class="text-[35px] leading-12"
+            :class="[
+  colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300']
+]"
+            style="display: block; line-clamp: 3; text-overflow: ellipsis;"
           >
             {{ description }}
           </p>

package/dist/runtime/app/components/Templates/Community/NuxtSeo.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    colorMode?: 'dark' | 'light';
+    title?: string;
+    description?: string;
+    icon?: string | boolean;
+    siteName?: string;
+    siteLogo?: string;
+    theme?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    theme: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,16 +1,11 @@
-<script lang="ts" setup>
-/**
- * @credits Pergel <https://nuxtlabs.com/>
- */
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
-  title: 'title',
-  description: 'description',
-  headline: 'headline',
-})
-
-const title = computed(() => props.title.slice(0, 60))
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false, default: "description" },
+  headline: { type: String, required: false, default: "headline" }
+});
+const title = computed(() => props.title.slice(0, 60));
 </script>
 
 <template>
@@ -34,11 +29,11 @@ const title = computed(() => props.title.slice(0, 60))
       <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
-        <span>{{ title }}</span>
+      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ title }}
       </h1>
-      <p class="text-[32px] text-[#E4E4E7] leading-tight">
-        {{ description.slice(0, 200) }}
+      <p class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
+        {{ description }}
       </p>
     </div>
 

package/dist/runtime/app/components/Templates/Community/Pergel.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,32 +1,23 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-import { computed, useSiteConfig } from '#imports'
-import { parseURL } from 'ufo'
-
-const props = withDefaults(defineProps<{
-  title?: string
-  website?: string
-}>(), {
-  title: 'title',
-})
-
-// fallback to site name
+<script setup>
+import { computed, useSiteConfig } from "#imports";
+import { parseURL } from "ufo";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  website: { type: String, required: false }
+});
 const website = computed(() => {
-  return props.website || parseURL(useSiteConfig().url).host
-})
+  return props.website || parseURL(useSiteConfig().url).host;
+});
 </script>
 
 <template>
   <div class="h-full w-full flex items-start justify-start border-solid border-blue-500 border-[12px] bg-gray-50">
     <div class="flex items-start justify-start h-full">
       <div class="flex flex-col justify-between w-full h-full">
-        <h1 class="text-[80px] p-20 font-black text-left">
+        <h1 class="text-[80px] p-20 font-black text-left" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
           {{ title }}
         </h1>
-        <p class="text-2xl pb-10 px-20 font-bold mb-0">
+        <p class="text-2xl pb-10 px-20 font-bold mb-0" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
           {{ website }}
         </p>
       </div>

package/dist/runtime/app/components/Templates/Community/SimpleBlog.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title?: string;
+    website?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,37 +1,22 @@
-<script setup lang="ts">
-import { computed } from '#imports'
-
-/**
- * @credits UnJS <https://unjs.io/>
- */
-
-const props = withDefaults(defineProps<{
-  title?: string
-  description?: string
-  emoji?: string
-  downloads?: string | number
-  stars?: string | number
-  contributors?: string | number
-}>(), {
-  title: 'unjs/h3',
-  description: 'Minimal H(TTP) framework built for high performance and portability',
-  emoji: '⚡',
-  downloads: '2500000',
-  stars: '2400',
-  contributors: '30',
-})
-
-const org = computed(() => props.title.split('/')[0])
-const repo = computed(() => props.title.split('/')[1])
-
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  title: { type: String, required: false, default: "unjs/h3" },
+  description: { type: String, required: false, default: "Minimal H(TTP) framework built for high performance and portability" },
+  emoji: { type: String, required: false, default: "\u26A1" },
+  downloads: { type: [String, Number], required: false, default: "2500000" },
+  stars: { type: [String, Number], required: false, default: "2400" },
+  contributors: { type: [String, Number], required: false, default: "30" }
+});
+const org = computed(() => props.title.split("/")[0]);
+const repo = computed(() => props.title.split("/")[1]);
 const stars = computed(() => {
-  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(Number(props.stars || 0))
-})
-const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
-  .format(Number(props.downloads || 0)),
-)
-
-const description = computed(() => (props.description || '').slice(0, 200))
+  return new Intl.NumberFormat("en-US", { notation: "compact", compactDisplay: "short" }).format(Number(props.stars || 0));
+});
+const downloads = computed(
+  () => new Intl.NumberFormat("en-US", { notation: "compact", compactDisplay: "short" }).format(Number(props.downloads || 0))
+);
+const description = computed(() => (props.description || "").slice(0, 200));
 </script>
 
 <template>
@@ -40,11 +25,17 @@ const description = computed(() => (props.description || '').slice(0, 200))
       <div class="flex flex-row justify-between">
         <div class="max-w-[700px]">
           <h1 class="mb-[30px] max-w-[700px] text-[60px] text-gray-900 font-normal flex flex-row">
-            <span>{{ org }}</span>
-            <span v-if="repo" class="ml-2">/</span>
-            <span v-if="repo" class="ml-2 font-bold">{{ repo }}</span>
+            <p style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;">
+              {{ org }}
+            </p>
+            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2">
+              /
+            </p>
+            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2 font-bold">
+              {{ repo }}
+            </p>
           </h1>
-          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]">
+          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
             {{ description }}
           </p>
         </div>

package/dist/runtime/app/components/Templates/Community/UnJs.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @credits UnJS <https://unjs.io/>
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    emoji?: string;
+    downloads?: string | number;
+    stars?: string | number;
+    contributors?: string | number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    emoji: string;
+    downloads: string | number;
+    stars: string | number;
+    contributors: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,12 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  title?: string
-}>(), {
-  title: 'title',
-})
+<script setup>
+defineProps({
+  title: { type: String, required: false, default: "title" }
+});
 </script>
 
 <template>
   <div class="h-full w-full flex items-start justify-start bg-yellow-50 relative">
-    <h1 class="text-7xl p-20 font-bold text-left text-gray-900">
+    <h1 class="text-7xl p-20 font-bold text-left text-gray-900" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
       {{ title }}
     </h1>
 

package/dist/runtime/app/components/Templates/Community/Wave.vue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,15 +1,8 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  emoji?: string
-  title?: string
-}>(), {
-  title: 'title',
-  emoji: '👋',
-})
+<script setup>
+defineProps({
+  emoji: { type: String, required: false, default: "\u{1F44B}" },
+  title: { type: String, required: false, default: "title" }
+});
 </script>
 
 <template>
@@ -19,7 +12,7 @@ withDefaults(defineProps<{
         <p class="text-[120px] mx-auto text-center font-bold mb-0">
           {{ emoji }}
         </p>
-        <h1 class="text-[60px] font-bold">
+        <h1 class="text-[60px] font-bold" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
           {{ title }}
         </h1>
       </div>

package/dist/runtime/app/components/Templates/Community/WithEmoji.vue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    emoji?: string;
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    emoji: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;