Images

src/pages/announcements/[...slug].astro

@@ -5,6 +5,9 @@ import PageLayout from "../../layouts/PageLayout.astro";
 import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
 import TagComponent from "../../components/TagComponent.astro";
 import LanguageWarning from "../../components/LanguageWarning.astro";
+import { SEO } from "astro-seo";
+import localBau from "../../images/2022-03-28_13.18.25.png";
+import {getImage, Image} from "astro:assets";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
@@ -37,18 +40,49 @@ interface Props {
 
 const {post, german} = Astro.props;
 const { Content } = await post.render();
+
+const ogImage = await getImage({
+    src: post.data.image || localBau,
+    format: "png",
+    width: 1200,
+    height: 630,
+});
+
 ---
 
-<PageLayout title={post.data.title}>
+<PageLayout title={post.data.title} description={post.data.description}>
+    <Fragment slot="head">
+        <SEO openGraph={{
+            basic: {
+                title: post.data.title,
+                description: post.data.description,
+                type: "article",
+                image: Astro.url.origin + ogImage.src,
+            },
+            article: {
+                publishedTime: post.data.created.toISOString(),
+                author: "SteamWar.de",
+                tags: post.data.tags,
+            },
+        }}
+        />
+    </Fragment>
     <article>
-        <h1 class="text-4xl mb-0">{post.data.title}</h1>
-        <h5 class="flex items-center mt-2 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
-            <TagComponent tag={tag} />
-        ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
-            day: "numeric",
-            month: "short",
-            year: "numeric"
-        }).format(post.data.created)} </h5>
+        <div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
+            {post.data.image && (
+                <Image src={post.data.image} width="1920" height="1080" alt="" class="absolute top-0 left-0 w-full rounded-2xl linear-fade" />
+            )}
+            <div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
+                <h1 class="text-4xl mb-0">{post.data.title}</h1>
+                <h5 class="flex items-center mt-2 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
+                    <TagComponent tag={tag} />
+                ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric"
+                }).format(post.data.created)} </h5>
+            </div>
+        </div>
         {german && (
             <LanguageWarning />
         )}
@@ -56,7 +90,7 @@ const { Content } = await post.render();
         <script>
             import type {ExtendedEvent} from "../../components/types/event";
             import FightTable from "../../components/FightTable.svelte";
-            // @ts-ignore
+            // @ts-expect-error Import Schenanigans
             import {get} from "svelte/store";
             import {eventRepo} from "../../components/repo/repo";
             import GroupTable from "../../components/GroupTable.svelte";
@@ -136,4 +170,10 @@ const { Content } = await post.render();
             @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
         }
     }
+</style>
+
+<style>
+    .linear-fade {
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
+    }
 </style>