Merge pull request #665 from DuendeSoftware/category-og-image

Refactor descriptions and enhance Open Graph image rendering

Author: khalidabuhakmeh

src/assets/duende-og-bg-2.png

@@ -4,13 +4,36 @@ const { twj } = await import("tw-to-css");
 import fs from "node:fs";
 import path from "node:path";
 
-const filePath = path.join(process.cwd(), "src", "assets", "duende-og-bg.png");
+const filePath = path.join(
+  process.cwd(),
+  "src",
+  "assets",
+  "duende-og-bg-2.png",
+);
 const imageBase64 = `data:image/png;base64,${fs.readFileSync(filePath).toString("base64")}`;
 
 export async function duendeOpenGraphImage({
   title,
   description,
+  url,
 }: RenderFunctionInput): Promise<React.ReactNode> {
+  let category =
+    url
+      .match(/\/([\w-]+)\//)
+      ?.at(1)
+      ?.toLowerCase() ?? "";
+
+  const categoryMap: Record<string, string> = {
+    bff: "BFF",
+    identityserver: "IdentityServer",
+    accesstokenmanagement: "Access Token Management",
+    identitymodel: "IdentityModel",
+    general: "General",
+    "identitymodel-oidcclient": "IdentityModel OIDC Client",
+  };
+
+  category = categoryMap[category] ?? "General";
+
   return Promise.resolve(
     <div
       style={{
@@ -31,7 +54,12 @@ export async function duendeOpenGraphImage({
             "flex flex-col justify-end justify-items-start w-full h-full p-20",
           )}
         >
-          <h1 style={twj("text-[75px] text-bold text-white")}>{title}</h1>
+          {category && (
+            <div style={twj("text-2xl italic font-bold text-gray-500 mt-4")}>
+              {category}
+            </div>
+          )}
+          <h1 style={twj("text-[70px] text-bold text-white")}>{title}</h1>
           <div style={twj("text-3xl text-bold mb-3 text-white")}>
             {description}
           </div>

src/assets/duende-og-bg.png

@@ -1,5 +1,5 @@
 ---
-title: "Entity Framework Core For Configuration & Operational data"
+title: "Entity Framework Core: Configuration & Operational Data"
 description: "Learn how to configure IdentityServer to use Entity Framework Core for storing configuration and operational data in a persistent database."
 date: 2020-09-10T08:22:12+02:00
 sidebar:

src/components/duende-og-image.tsx

@@ -1,6 +1,6 @@
 ---
 title: "Pushed Authorization Request Store"
-description: Documentation for the IPushedAuthorizationRequestStore interface which manages the storage, retrieval, and consumption of pushed authorization requests in the OAuth PAR flow.
+description: Interface for managing pushed authorization requests storage in OAuth PAR flow.
 sidebar:
   order: 110
 redirect_from:

src/content/docs/identityserver/quickstarts/4-entity-framework.md

@@ -1,6 +1,6 @@
 ---
 title: Pushed Authorization Requests
-description: "A comprehensive guide to implementing Pushed Authorization Requests (PAR) in IdentityServer, an OAuth standard that enhances security by moving authorization parameters from the front channel to the back channel, with details on licensing, client usage, data storage, and configuration options."
+description: "Pushed Authorization Requests (PAR) in IdentityServer, an OAuth standard that enhances security by moving authorization parameters from the front channel to the back channel."
 sidebar:
   order: 175
 redirect_from: