From 46dc97e75caf40f66a1135eeb5474ccc276bd329 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Thu, 5 Feb 2026 10:06:01 +0100
Subject: [PATCH] fix: mobile friendly content metadata (#1828)

---
 .../src/app/(landing)/blog/[slug]/page.tsx    | 22 +++--------------
 .../app/(landing)/changelog/[slug]/page.tsx   |  8 +++----
 .../src/app/(landing)/content-metadata.tsx    | 24 +++++++++++++++++++
 .../src/app/(landing)/guides/[slug]/page.tsx  | 22 +++--------------
 4 files changed, 33 insertions(+), 43 deletions(-)
 create mode 100644 apps/web/src/app/(landing)/content-metadata.tsx

diff --git a/apps/web/src/app/(landing)/blog/[slug]/page.tsx b/apps/web/src/app/(landing)/blog/[slug]/page.tsx
index 21b5363bf..8cf474de0 100644
--- a/apps/web/src/app/(landing)/blog/[slug]/page.tsx
+++ b/apps/web/src/app/(landing)/blog/[slug]/page.tsx
@@ -1,6 +1,5 @@
 import { CustomMDX } from "@/content/mdx";
-import { formatDate, getBlogPosts } from "@/content/utils";
-import { getAuthor } from "@/data/author";
+import { getBlogPosts } from "@/content/utils";
 import { BASE_URL, getPageMetadata } from "@/lib/metadata/shared-metadata";
 import {
   createJsonLDGraph,
@@ -14,6 +13,7 @@ import {
 import type { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
+import { ContentMetadata } from "../../content-metadata";
 import { ContentPagination } from "../../content-pagination";
 
 export const dynamicParams = false;
@@ -85,10 +85,7 @@ export default async function Blog({
         }}
       />
       <h1>{post.metadata.title}</h1>
-      <p className="flex items-center gap-2.5 divide-x divide-border text-muted-foreground">
-        {formatDate(post.metadata.publishedAt)} | by{" "}
-        <Author author={post.metadata.author} /> | [{post.metadata.category}]
-      </p>
+      <ContentMetadata data={post} />
       {post.metadata.image ? (
         <div className="relative aspect-video w-full overflow-hidden border border-border">
           <Image
@@ -108,16 +105,3 @@ export default async function Blog({
     </section>
   );
 }
-
-function Author({ author }: { author: string }) {
-  const authorData = getAuthor(author);
-  if (typeof authorData === "string") {
-    return author;
-  }
-
-  return (
-    <a href={authorData.url} target="_blank" rel="noopener noreferrer">
-      {authorData.name}
-    </a>
-  );
-}
diff --git a/apps/web/src/app/(landing)/changelog/[slug]/page.tsx b/apps/web/src/app/(landing)/changelog/[slug]/page.tsx
index 01b27925a..dba250a7e 100644
--- a/apps/web/src/app/(landing)/changelog/[slug]/page.tsx
+++ b/apps/web/src/app/(landing)/changelog/[slug]/page.tsx
@@ -1,5 +1,5 @@
 import { CustomMDX } from "@/content/mdx";
-import { formatDate, getChangelogPosts } from "@/content/utils";
+import { getChangelogPosts } from "@/content/utils";
 import { BASE_URL, getPageMetadata } from "@/lib/metadata/shared-metadata";
 import {
   createJsonLDGraph,
@@ -13,6 +13,7 @@ import {
 import type { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
+import { ContentMetadata } from "../../content-metadata";
 import { ContentPagination } from "../../content-pagination";
 
 export const dynamicParams = false;
@@ -84,10 +85,7 @@ export default async function Changelog({
         }}
       />
       <h1>{post.metadata.title}</h1>
-      <p className="flex items-center gap-2.5 divide-x divide-border text-muted-foreground">
-        {formatDate(post.metadata.publishedAt)} | by {post.metadata.author} | [
-        {post.metadata.category}]
-      </p>
+      <ContentMetadata data={post} />
       {post.metadata.image ? (
         <div className="relative aspect-video w-full overflow-hidden border border-border">
           <Image
diff --git a/apps/web/src/app/(landing)/content-metadata.tsx b/apps/web/src/app/(landing)/content-metadata.tsx
new file mode 100644
index 000000000..25c890074
--- /dev/null
+++ b/apps/web/src/app/(landing)/content-metadata.tsx
@@ -0,0 +1,24 @@
+import { type MDXData, formatDate } from "@/content/utils";
+import { getAuthor } from "@/data/author";
+
+export function ContentMetadata({ data }: { data: MDXData }) {
+  return (
+    <p className="flex flex-wrap items-center gap-2.5 divide-x divide-border text-muted-foreground">
+      {formatDate(data.metadata.publishedAt)} | by{" "}
+      <Author author={data.metadata.author} /> | [{data.metadata.category}]
+    </p>
+  );
+}
+
+function Author({ author }: { author: string }) {
+  const authorData = getAuthor(author);
+  if (typeof authorData === "string") {
+    return author;
+  }
+
+  return (
+    <a href={authorData.url} target="_blank" rel="noopener noreferrer">
+      {authorData.name}
+    </a>
+  );
+}
diff --git a/apps/web/src/app/(landing)/guides/[slug]/page.tsx b/apps/web/src/app/(landing)/guides/[slug]/page.tsx
index 25966dade..2d6f0f3e6 100644
--- a/apps/web/src/app/(landing)/guides/[slug]/page.tsx
+++ b/apps/web/src/app/(landing)/guides/[slug]/page.tsx
@@ -1,6 +1,5 @@
 import { CustomMDX } from "@/content/mdx";
-import { formatDate, getGuides } from "@/content/utils";
-import { getAuthor } from "@/data/author";
+import { getGuides } from "@/content/utils";
 import { BASE_URL, getPageMetadata } from "@/lib/metadata/shared-metadata";
 import {
   createJsonLDGraph,
@@ -14,6 +13,7 @@ import {
 import type { Metadata } from "next";
 import Image from "next/image";
 import { notFound } from "next/navigation";
+import { ContentMetadata } from "../../content-metadata";
 import { ContentPagination } from "../../content-pagination";
 
 export const dynamicParams = false;
@@ -85,10 +85,7 @@ export default async function Guide({
         }}
       />
       <h1>{post.metadata.title}</h1>
-      <p className="flex items-center gap-2.5 divide-x divide-border text-muted-foreground">
-        {formatDate(post.metadata.publishedAt)} | by{" "}
-        <Author author={post.metadata.author} /> | [{post.metadata.category}]
-      </p>
+      <ContentMetadata data={post} />
       {post.metadata.image ? (
         <div className="relative aspect-video w-full overflow-hidden border border-border">
           <Image
@@ -108,16 +105,3 @@ export default async function Guide({
     </section>
   );
 }
-
-function Author({ author }: { author: string }) {
-  const authorData = getAuthor(author);
-  if (typeof authorData === "string") {
-    return author;
-  }
-
-  return (
-    <a href={authorData.url} target="_blank" rel="noopener noreferrer">
-      {authorData.name}
-    </a>
-  );
-}
-- 
2.54.0