Fix defineOgImageComponent, remove swipe actions in reader mode, change onClick to addEventListener

2024-06-19 01:19:57 +03:00
parent 4543680a92
commit 05db0b693e
5 changed files with 45 additions and 46 deletions
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  logo: {
+    type: String,
+    required: true,
+  },
+  sectionLogo: {
+    type: null as unknown as PropType<string | null>,
+    default: null,
+    required: false,
+  },
+  thumbnail: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    required: true,
+  },
+})
+
+const sentence = computed(() => {
+  return props.description.split('.').at(0) + '...'
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-end text-white relative">
+    <img
+      :src="thumbnail"
+      :alt="alt"
+      class="w-full h-full object-cover absolute top-0 left-0"
+    />
+    <div class="absolute top-0 left-0 p-5">
+      <img :src="logo" alt="Logo" class="w-[100] h-[100]" />
+    </div>
+    <div v-if="sectionLogo" class="absolute top-0 right-0 p-5">
+      <img :src="sectionLogo" alt="Logo" class="w-[100] h-[100]" />
+    </div>
+
+    <div class="mb-5 px-5" style="text-shadow: black 1px 1px 10px">
+      <h1 class="m-0 text-[60px]">{{ title }}</h1>
+      <strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">
+        {{ sentence }}
+      </strong>
+    </div>
+  </div>
+</template>