finxol.io
Personal blog
finxol.io
blog
feat(og): add post description to OG image
+16
-4
+10
-4
app/components/OgImage/Post.vue
+10
-4
app/components/OgImage/Post.vue
···
5
5
title: string;
6
6
date: string;
7
7
author: string;
8
+
description: string;
8
9
}>();
9
10
10
-
const { title, date, author } = props;
11
+
const { title, date, author, description } = props;
11
12
</script>
12
13
13
14
<template>
14
15
<div class="h-full w-full flex items-start justify-start bg-stone-100">
15
16
<div class="flex items-start justify-start h-full">
16
17
<div class="flex flex-col justify-between w-full h-full px-30 py-15" style="font-family: 'Recoleta'">
17
-
<h1 class="text-[90px] text-left">
18
-
{{ title }}
19
-
</h1>
18
+
<div>
19
+
<h1 class="text-[80px] text-left">
20
+
{{ title }}
21
+
</h1>
22
+
<p class="text-[30px] text-left line-clamp-3 text-ellipsis" style="font-family: 'Orkney Regular'">
23
+
{{ description }}
24
+
</p>
25
+
</div>
20
26
<div class="flex flex-row items-center justify-between text-4xl font-bold mb-0">
21
27
<div class="flex flex-row items-center gap-8">
22
28
<img src="/logo.png" alt="Author Avatar" height="56" width="56">
+1
app/pages/posts/[...slug].vue
+1
app/pages/posts/[...slug].vue