Dynamic OGs Again Again 😭 (#178)

* add a lineclamp in case of description * add templates page case
directus · Jan 7, 2025 · e9e8c98 · e9e8c98
1 parent 532fa2f
commit e9e8c98
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/components/OgImage/Default.vue b/components/OgImage/Default.vue
@@ -89,7 +89,7 @@ defineProps<OgProps>();
 					</h1>
 				</div>
 				<div v-if="publishedAt" class="flex">
-					<div class="text-xl text-slate-500">
+					<div class="text-xl text-slate-500 line-clamp-2">
 						{{ publishedAt }}
 					</div>
 				</div>

diff --git a/utils/og.ts b/utils/og.ts
@@ -55,6 +55,18 @@ export function getOgProps(baseUrl: string, collection: string, item = {} as any
 			};
 		}
 
+		case 'templates': {
+			return {
+				...props,
+				title: item.name ?? 'Directus Template',
+				imageUrl: `${baseUrl}/${item.image?.id}?format=jpeg&width=800`,
+				badgeLabel: 'Directus Template',
+				publishedAt: item.description,
+				authorName: userName(item.creator),
+				authorImage: `${baseUrl}/${item.creator?.avatar}?format=jpeg&width=800`,
+			};
+		}
+
 		default:
 			return props;
 	}