feat: adjust styling of opengraph preview

Author: felix.ruf

data/config.json

@@ -1,4 +1,4 @@
 {
   "basePath": "/techradar",
-  "baseUrl": "http://localhost:3000/techradar"
+  "baseUrl": "http://localhost:3000/techradar/"
 }

src/app/[segment]/[id]/opengraph-image.tsx

@@ -2,7 +2,7 @@ import { ImageResponse } from "next/og";
 
 import { BaseCard } from "@/components/OpenGraph/BaseCard";
 import { ItemInfo } from "@/components/OpenGraph/ItemInfo";
-import { getItem, getItems, getSegment } from "@/lib/data";
+import { getItem, getItems, getRing, getSegment } from "@/lib/data";
 import { htmlToText, limitTextLength } from "@/lib/format";
 
 export const alt = "TechRadar Open Graph Image";
@@ -23,6 +23,7 @@ export default async function OpenGraphImage({
   const item = getItem(res.id);
   const segment = getSegment(res.segment);
   const trimmedItemBody = limitTextLength(htmlToText(item?.body ?? ""), 100);
+  const ring = getRing(item?.ring ?? "");
 
   return new ImageResponse(
     (
@@ -31,7 +32,7 @@ export default async function OpenGraphImage({
           size={size}
           name={item?.title}
           segment={segment?.title}
-          ring={item?.ring}
+          ring={ring}
           description={trimmedItemBody}
         />
       </BaseCard>

src/app/opengraph-image.tsx

@@ -2,6 +2,7 @@ import { ImageResponse } from "next/og";
 
 import { BaseCard } from "@/components/OpenGraph/BaseCard";
 import { getAppName, getLabel } from "@/lib/data";
+import { limitTextLength } from "@/lib/format";
 
 export const alt = "TechRadar Open Graph Image";
 export const size = {
@@ -34,7 +35,7 @@ export default async function OpenGraphImage() {
               width: `${size.width}px`,
             }}
           >
-            {getAppName()}
+            {limitTextLength(getAppName(), 60)}
           </h2>
           <p
             style={{
@@ -47,7 +48,7 @@ export default async function OpenGraphImage() {
               fontSize: 32,
             }}
           >
-            {getLabel("metaDescription")}
+            {limitTextLength(getLabel("metaDescription"), 150)}
           </p>
         </div>
       </BaseCard>

src/components/OpenGraph/BackgroundImage.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from "react";
 
-import { Blip } from "../Radar/Blip";
-
 import { getChartConfig } from "@/lib/data";
 import { Flag, Item, Ring, Segment } from "@/lib/types";
 
@@ -21,7 +19,6 @@ export const BackgroundImage: FC<BackgroundImageProps> = ({
   segments = [],
   rings = [],
   items = [],
-  className,
 }) => {
   const viewBoxSize = size;
   const center = size / 2;
@@ -80,12 +77,6 @@ export const BackgroundImage: FC<BackgroundImageProps> = ({
     const startAngle = (position - 1) * angleIncrement;
     const endAngle = startAngle + angleIncrement;
 
-    const cx = (startAngle + endAngle) / 2 > 180 ? 1 : 0;
-    const cy =
-      (startAngle + endAngle) / 2 > 90 && (startAngle + endAngle) / 2 < 270
-        ? 1
-        : 0;
-
     if (numSegments == 1)
       return (
         <circle
@@ -160,12 +151,10 @@ export const BackgroundImage: FC<BackgroundImageProps> = ({
           />
         );
     }
-    // return <Blip color={segment.color} x={x} y={y} flag={item.flag} />;
   };
 
   return (
     <svg
-      className={className}
       width={viewBoxSize}
       height={viewBoxSize}
       viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}

src/components/OpenGraph/BaseCard.tsx

@@ -9,7 +9,7 @@ import {
   getSegments,
   getTags,
 } from "@/lib/data";
-import { Item, Ring, Segment } from "@/lib/types";
+import { Segment } from "@/lib/types";
 import { listContainsAny } from "@/lib/utils";
 
 interface BaseCardProps {

src/components/OpenGraph/ItemInfo.tsx

@@ -1,13 +1,14 @@
 import { FC } from "react";
 
-import { getAppName } from "@/lib/data";
-import { formatTitle, formatTitleWithMissing } from "@/lib/format";
+import { getAppName, getColors } from "@/lib/data";
+import { formatTitleWithMissing, limitTextLength } from "@/lib/format";
+import { Ring } from "@/lib/types";
 
 interface ItemInfoProps {
   size: { height: number; width: number };
   name?: string;
   segment?: string;
-  ring?: string;
+  ring?: Ring;
   description?: string;
 }
 
@@ -18,6 +19,11 @@ export const ItemInfo: FC<ItemInfoProps> = ({
   ring,
   description,
 }) => {
+  const colors = getColors();
+  const descTextSize = 28;
+  const descLineHeight = 32;
+  const descPaddingVert = 20;
+
   return (
     <div
       style={{
@@ -26,40 +32,75 @@ export const ItemInfo: FC<ItemInfoProps> = ({
         width: "100%",
         height: "100%",
         flex: 1,
-        padding: 50,
+        padding: "30px 50px",
       }}
     >
       <h2
         style={{
           display: "block",
           fontWeight: "bold",
-          width: `${size.width * 0.65}px`,
-        }}
-      >
-        {formatTitleWithMissing(name, getAppName())}
-      </h2>
-      <span
-        style={{
-          fontSize: 32,
-          width: `${size.width * 0.65}px`,
-          flex: 1,
-        }}
-      >
-        {formatTitleWithMissing(segment, ring)}
-      </span>
-      <p
-        style={{
-          display: "block",
-          textOverflow: "ellipsis",
-          overflow: "hidden",
-          whiteSpace: "wrap",
-          height: "17%",
           width: `${size.width * 0.75}px`,
-          fontSize: 32,
         }}
       >
-        {description}
-      </p>
+        {limitTextLength(formatTitleWithMissing(name, getAppName()), 50)}
+      </h2>
+      {segment && (
+        <span
+          style={{
+            fontSize: 32,
+            width: `${size.width * 0.65}px`,
+            flex: 1,
+          }}
+        >
+          {limitTextLength(segment, 80)}
+        </span>
+      )}
+      {description && (
+        <p
+          style={{
+            display: "flex",
+            maxHeight: `${48 + 2 * descPaddingVert + 2 * descLineHeight}px`,
+            width: `${size.width * 0.75}px`,
+            padding: `${24 + descPaddingVert}px 24px`,
+            borderRadius: "12px",
+            backgroundColor: colors.foreground,
+            whiteSpace: "wrap",
+            textAlign: "left",
+            fontSize: `${descTextSize}px`,
+            lineHeight: `${descLineHeight}px`,
+            color: colors.text,
+          }}
+        >
+          {limitTextLength(description, 100)}
+          {ring && (
+            <div
+              style={{
+                display: "flex",
+                position: "absolute",
+                top: `-${descPaddingVert}px`,
+                left: "32px",
+              }}
+            >
+              <span
+                style={{
+                  borderRadius: "100px",
+                  background: ring.color,
+                  color: colors.content,
+                  width: "auto",
+                  padding: "12px 32px",
+                  textTransform: "uppercase",
+                  alignItems: "center",
+                  fontSize: "28px",
+                  lineHeight: "28px",
+                  flexShrink: 0,
+                }}
+              >
+                {ring.title}
+              </span>
+            </div>
+          )}
+        </p>
+      )}
     </div>
   );
 };

src/components/OpenGraph/SegmentInfo.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 
 import { getAppName } from "@/lib/data";
+import { formatTitleWithMissing, limitTextLength } from "@/lib/format";
 import { Segment } from "@/lib/types";
 
 interface SegmentProps {
@@ -28,7 +29,10 @@ export const SegmentInfo: FC<SegmentProps> = ({ segment, size }) => {
           width: `${size.width * 0.65}px`,
         }}
       >
-        {segment.title} | {getAppName()}
+        {limitTextLength(
+          formatTitleWithMissing(segment.title, getAppName()),
+          60,
+        )}
       </h2>
       <p
         style={{
@@ -41,7 +45,7 @@ export const SegmentInfo: FC<SegmentProps> = ({ segment, size }) => {
           fontSize: 32,
         }}
       >
-        {segment.description}
+        {limitTextLength(segment.description, 150)}
       </p>
     </div>
   );