From 531df09182fe3d40c1206bb3e24949b0664162dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 26 Feb 2026 14:16:27 +0100
Subject: [PATCH] nicolium: the same but for events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/features/status/components/thread.tsx | 50 +++++++++++++++----
 packages/pl-fe/src/layouts/event-layout.tsx   | 49 +++++++++++++++---
 2 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index c7b58f54c..1d792ecc4 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -342,6 +342,45 @@ const Thread = ({
     return children;
   }, [thread, linear, status, isModal]);
 
+  const meta = useMemo(() => {
+    const firstAttachment = status.media_attachments && status.media_attachments[0];
+
+    return (
+      <Helmet>
+        {status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
+        {(firstAttachment?.type === 'image' || firstAttachment?.type === 'gifv') && (
+          <>
+            <meta property='og:image' content={firstAttachment.preview_url} />
+            <meta property='og:image:alt' content={firstAttachment.description || ''} />
+            {firstAttachment.mime_type && (
+              <meta property='og:type' content={firstAttachment.mime_type} />
+            )}
+            {firstAttachment.meta.original && (
+              <meta
+                property='og:image:width'
+                content={firstAttachment.meta.original.width.toString()}
+              />
+            )}
+            {firstAttachment.meta.original && (
+              <meta
+                property='og:image:height'
+                content={firstAttachment.meta.original.height.toString()}
+              />
+            )}
+          </>
+        )}
+        <meta property='og:url' content={status.url} />
+        <meta name='author' content={status.account.display_name || status.account.acct} />
+        <meta property='article:author' content={status.account.url} />
+        <meta property='article:published_time' content={status.created_at} />
+        <meta property='fediverse.creator' name='fediverse.creator' content={status.account.acct} />
+        {status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
+
+        {status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
+      </Helmet>
+    );
+  }, [status]);
+
   useEffect(() => {
     setExpandAllStatuses?.(() => {
       expandStatuses(thread);
@@ -357,16 +396,7 @@ const Thread = ({
         'mt-2': !isModal,
       })}
     >
-      <Helmet>
-        {status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
-        <meta property='og:url' content={status.url} />
-        <meta name='author' content={status.account.display_name || status.account.acct} />
-        <meta property='article:author' content={status.account.url} />
-        <meta property='article:published_time' content={status.created_at} />
-        {status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
-
-        {status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
-      </Helmet>
+      {meta}
 
       <div
         ref={node}
diff --git a/packages/pl-fe/src/layouts/event-layout.tsx b/packages/pl-fe/src/layouts/event-layout.tsx
index 5fa6aa45e..026977096 100644
--- a/packages/pl-fe/src/layouts/event-layout.tsx
+++ b/packages/pl-fe/src/layouts/event-layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { FormattedMessage } from 'react-intl';
 
@@ -66,13 +66,50 @@ const EventLayout = () => {
     pathname.endsWith(path),
   );
 
+  const meta = useMemo(() => {
+    if (!status) return null;
+
+    const firstAttachment = status.media_attachments && status.media_attachments[0];
+
+    return (
+      <Helmet>
+        {status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
+        {(firstAttachment?.type === 'image' || firstAttachment?.type === 'gifv') && (
+          <>
+            <meta property='og:image' content={firstAttachment.preview_url} />
+            <meta property='og:image:alt' content={firstAttachment.description || ''} />
+            {firstAttachment.mime_type && (
+              <meta property='og:type' content={firstAttachment.mime_type} />
+            )}
+            {firstAttachment.meta.original && (
+              <meta
+                property='og:image:width'
+                content={firstAttachment.meta.original.width.toString()}
+              />
+            )}
+            {firstAttachment.meta.original && (
+              <meta
+                property='og:image:height'
+                content={firstAttachment.meta.original.height.toString()}
+              />
+            )}
+          </>
+        )}
+        <meta property='og:url' content={status.url} />
+        <meta name='author' content={status.account.display_name || status.account.acct} />
+        <meta property='article:author' content={status.account.url} />
+        <meta property='article:published_time' content={status.created_at} />
+        <meta property='fediverse.creator' name='fediverse.creator' content={status.account.acct} />
+        {status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
+
+        {status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
+      </Helmet>
+    );
+  }, [status]);
+
   return (
     <>
-      {status?.account.local === false && (
-        <Helmet>
-          <meta content='noindex, noarchive' name='robots' />
-        </Helmet>
-      )}
+      {meta}
       <Layout.Main>
         <Column label={event?.name} withHeader={false}>
           <div className='space-y-4'>