Merge pull request #660 from DuendeSoftware/nicer-og-image

Update documentation and optimize OG logo rendering

Author: khalidabuhakmeh

src/assets/duende-og-bg.png

@@ -1,6 +1,11 @@
 import React from "react";
 import type { RenderFunctionInput } from "astro-opengraph-images";
 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 imageBase64 = `data:image/png;base64,${fs.readFileSync(filePath).toString("base64")}`;
 
 export async function duendeOpenGraphImage({
   title,
@@ -9,94 +14,27 @@ export async function duendeOpenGraphImage({
   return Promise.resolve(
     <div
       style={{
-        ...twj(
-          "h-full w-full flex items-start justify-start border border-[#6e45af]-500 border-[15px] bg-gray-50",
-        ),
+        ...twj("h-full w-full flex items-start justify-start bg-gray-50"),
       }}
     >
       <div style={twj("flex items-start justify-start h-full")}>
-        <div style={twj("flex flex-col justify-between w-full h-full p-20")}>
-          {/* Duende Logo */}
-          <svg
-            width="400"
-            height="144"
-            viewBox="0 0 400 144"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g id="Group-copy">
-              <path
-                id="Path"
-                fill="#633e9e"
-                stroke="none"
-                d="M 73.058296 83.247589 L 73.058281 83.247589 C 66.333809 79.199478 64.144012 70.385605 68.192055 63.66114 L 102.362297 6.898865 C 106.410347 0.174393 115.22422 -2.015411 121.948685 2.032623 L 121.948723 2.032623 C 128.673187 6.080658 130.862991 14.894531 126.814934 21.618996 L 92.644699 78.381355 C 88.596642 85.10582 79.782761 87.295624 73.058296 83.247589 Z"
-              />
-              <path
-                id="path1"
-                fill="#43257c"
-                stroke="none"
-                d="M 119.280449 141.744247 L 119.280411 141.744247 C 112.41246 145.543808 103.684532 143.033279 99.884995 136.165329 L 67.812492 78.191849 C 64.012962 71.323898 66.523483 62.595985 73.391434 58.796417 L 73.391457 58.796417 C 80.259407 54.996918 88.987343 57.507378 92.78688 64.375328 L 124.859367 122.348816 C 128.658905 129.216766 126.148384 137.944672 119.280449 141.744247 Z"
-              />
-              <path
-                id="path2"
-                fill="#8361c5"
-                stroke="none"
-                d="M 0.202704 71.298477 L 0.202704 71.298477 C 0.202704 79.147438 6.624525 85.569214 14.473412 85.569214 L 80.727219 85.569214 C 88.576118 85.569214 94.99794 79.147362 94.99794 71.298477 L 94.99794 71.298477 C 94.99794 63.4496 88.576111 57.02774 80.727219 57.02774 L 14.473412 57.02774 C 6.624525 57.02774 0.202685 63.4496 0.202704 71.298477 Z"
-              />
-              <g id="Group">
-                <path
-                  id="path3"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 165.972351 51.838448 C 169.191803 53.697884 171.704651 56.311676 173.510941 59.67981 C 175.31723 63.048019 176.220352 66.899628 176.220352 71.234711 L 176.220352 73.27478 C 176.220352 77.631142 175.31723 81.488014 173.510941 84.845627 C 171.704651 88.203156 169.186478 90.811676 165.956436 92.671043 C 162.726364 94.530479 159.028793 95.460205 154.863724 95.460205 L 144.791046 95.460205 L 140.455963 95.460205 L 140.455963 49.049362 L 150.46489 49.049362 L 154.927475 49.049362 C 159.071289 49.049362 162.75293 49.979012 165.972351 51.838448 Z M 166.052048 71.171013 C 166.052048 66.580925 165.1064 63.095848 163.215118 60.71579 C 161.323837 58.335732 158.561295 57.145737 154.927475 57.145737 L 150.46489 57.145737 L 150.46489 87.395645 L 154.863724 87.395645 C 158.497543 87.395645 161.270706 86.189705 163.183258 83.777756 C 165.095779 81.365891 166.052048 77.864868 166.052048 73.27478 L 166.052048 71.171013 Z"
-                />
-                <path
-                  id="path4"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 213.514771 60.970795 L 213.514771 95.460205 L 204.494003 95.460205 L 204.238983 91.858261 C 203.154343 93.218285 201.826172 94.26487 200.253647 94.998009 C 198.681122 95.731155 196.885468 96.097687 194.866684 96.097687 C 191.275375 96.097687 188.465012 95.056442 186.435593 92.973877 C 184.406189 90.891319 183.391464 87.661331 183.391464 83.283684 L 183.391464 60.970795 L 192.986023 60.970795 L 192.986023 83.347458 C 192.986023 85.04747 193.405701 86.301224 194.245102 87.108826 C 195.084488 87.91626 196.247955 88.320023 197.735489 88.320023 C 200.689285 88.320023 202.73996 87.289383 203.888367 85.228104 L 203.888367 60.970795 L 213.514771 60.970795 Z"
-                />
-                <path
-                  id="path5"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 251.891205 81.339264 L 230.088287 81.339264 C 230.44957 83.485596 231.342072 85.190948 232.765854 86.455322 C 234.189621 87.719757 236.017166 88.351906 238.248459 88.351906 C 239.905975 88.351906 241.441315 88.038467 242.854462 87.411583 C 244.267624 86.784698 245.473572 85.844376 246.472351 84.590614 L 251.094299 89.913849 C 249.883026 91.656342 248.113953 93.122627 245.787033 94.312698 C 243.460098 95.502686 240.734741 96.097687 237.610931 96.097687 C 234.083374 96.097687 231.018021 95.353943 228.414825 93.866379 C 225.811661 92.378883 223.814133 90.360092 222.422226 87.810074 C 221.030334 85.259987 220.334381 82.444283 220.334381 79.363037 L 220.334381 78.151764 C 220.334381 74.709183 220.982513 71.638466 222.278778 68.939697 C 223.575058 66.240936 225.445099 64.131828 227.888885 62.612373 C 230.332687 61.093002 233.222748 60.333313 236.559052 60.333313 C 239.810364 60.333313 242.583542 61.023964 244.878555 62.405197 C 247.173599 63.786499 248.916138 65.746857 250.106155 68.28627 C 251.296188 70.825684 251.891205 73.816689 251.891205 77.259193 L 251.891205 81.339264 Z M 242.456024 74.135391 C 242.413528 72.265427 241.898209 70.78846 240.910049 69.704727 C 239.921921 68.620918 238.450333 68.079094 236.4953 68.079094 C 234.667755 68.079094 233.238678 68.684692 232.208023 69.895966 C 231.177383 71.107239 230.502701 72.775368 230.183929 74.900421 L 242.456024 74.900421 L 242.456024 74.135391 Z"
-                />
-                <path
-                  id="path6"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 285.295013 63.441177 C 287.18631 65.513062 288.131927 68.897209 288.131927 73.593559 L 288.131927 95.460205 L 278.505524 95.460205 L 278.505524 73.561676 C 278.505524 71.521606 278.069916 70.103149 277.198608 69.306236 C 276.327362 68.509399 274.977936 68.110977 273.150421 68.110977 C 271.896667 68.110977 270.807556 68.376587 269.883179 68.907814 C 268.958801 69.439117 268.209717 70.193466 267.635956 71.171013 L 267.635956 95.460205 L 258.009552 95.460205 L 258.009552 60.970795 L 267.030334 60.970795 L 267.34906 64.955284 C 268.560333 63.446442 270.005371 62.298935 271.684143 61.512703 C 273.362946 60.726463 275.222351 60.333313 277.26239 60.333313 C 280.726196 60.333313 283.403748 61.369217 285.295013 63.441177 Z"
-                />
-                <path
-                  id="path7"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 326.062134 46.499275 L 326.062134 95.460205 L 317.391968 95.460205 L 316.913818 91.762604 C 314.661285 94.652679 311.75 96.097687 308.179932 96.097687 C 305.396118 96.097687 302.989502 95.348602 300.960114 93.850433 C 298.930695 92.352341 297.390015 90.285721 296.338135 87.65065 C 295.286255 85.015656 294.760284 82.008713 294.760284 78.629898 L 294.760284 77.960526 C 294.760284 74.45417 295.286255 71.372856 296.338135 68.716576 C 297.390015 66.060303 298.930695 63.999023 300.960114 62.532738 C 302.989502 61.066452 305.417358 60.333313 308.243683 60.333313 C 311.516235 60.333313 314.246918 61.576469 316.435699 64.062714 L 316.435699 46.499275 L 326.062134 46.499275 Z M 316.435699 84.87751 L 316.435699 71.55349 C 315.330688 69.258484 313.418152 68.110977 310.69809 68.110977 C 308.509308 68.110977 306.910187 69.003471 305.900848 70.78846 C 304.891449 72.573524 304.386719 74.964188 304.386719 77.960526 L 304.386719 78.629898 C 304.386719 81.583672 304.880798 83.937187 305.868958 85.690292 C 306.857086 87.443466 308.445557 88.320023 310.634338 88.320023 C 313.33313 88.320023 315.266907 87.172516 316.435699 84.87751 Z"
-                />
-                <path
-                  id="path8"
-                  fill="#444444"
-                  stroke="none"
-                  d="M 364.631561 81.339264 L 342.828644 81.339264 C 343.189911 83.485596 344.082458 85.190948 345.506226 86.455322 C 346.929993 87.719757 348.757507 88.351906 350.9888 88.351906 C 352.646362 88.351906 354.181671 88.038467 355.594818 87.411583 C 357.007996 86.784698 358.213959 85.844376 359.212708 84.590614 L 363.834656 89.913849 C 362.623413 91.656342 360.854279 93.122627 358.527405 94.312698 C 356.20047 95.502686 353.475128 96.097687 350.351318 96.097687 C 346.823761 96.097687 343.758362 95.353943 341.155182 93.866379 C 338.552032 92.378883 336.554504 90.360092 335.162598 87.810074 C 333.770691 85.259987 333.074768 82.444283 333.074768 79.363037 L 333.074768 78.151764 C 333.074768 74.709183 333.7229 71.638466 335.019135 68.939697 C 336.31543 66.240936 338.185486 64.131828 340.629272 62.612373 C 343.073059 61.093002 345.963104 60.333313 349.299438 60.333313 C 352.550751 60.333313 355.323914 61.023964 357.618958 62.405197 C 359.913971 63.786499 361.656494 65.746857 362.846527 68.28627 C 364.03656 70.825684 364.631561 73.816689 364.631561 77.259193 L 364.631561 81.339264 Z M 355.196381 74.135391 C 355.15387 72.265427 354.63855 70.78846 353.650421 69.704727 C 352.662292 68.620918 351.190704 68.079094 349.235657 68.079094 C 347.408142 68.079094 345.979034 68.684692 344.948395 69.895966 C 343.917755 71.107239 343.243042 72.775368 342.924316 74.900421 L 355.196381 74.900421 L 355.196381 74.135391 Z"
-                />
-              </g>
-              <path
-                id="path9"
-                fill="#764fc1"
-                stroke="none"
-                d="M 399.54776 85.446861 C 399.54776 91.271538 394.825958 95.993301 389.001282 95.993301 C 383.176697 95.993301 378.454834 91.271538 378.454834 85.446861 C 378.454834 79.622261 383.176697 74.900421 389.001282 74.900421 C 394.825958 74.900421 399.54776 79.622261 399.54776 85.446861 Z"
-              />
-              <path
-                id="path10"
-                fill="#764fc1"
-                stroke="none"
-                d="M 96.757782 71.298477 L 96.757782 71.298401 C 96.757782 63.4496 90.301247 57.02774 82.409973 57.02774 L 72.194069 57.02774 L 68.179283 63.66114 C 67.76973 64.337807 67.440765 65.039589 67.156532 65.751526 C 67.092346 65.903656 67.026741 66.054512 66.967896 66.208672 C 66.94931 66.260414 66.932777 66.312378 66.91481 66.364265 C 65.528198 70.12368 65.707603 74.434166 67.797699 78.191849 L 71.901085 85.569214 L 82.409973 85.569214 C 90.301247 85.569214 96.757782 79.147362 96.757782 71.298477 Z"
-              />
-            </g>
-          </svg>
-
-          <h1 style={twj("text-[80px] font-black text-left")}>{title}</h1>
-          <div style={twj("text-2xl font-bold mb-0")}>{description}</div>
+        <img
+          alt="Duende background"
+          style={{
+            ...twj("absolute inset-0 w-full h-full"),
+            ...{ objectFit: "cover" },
+          }}
+          src={imageBase64}
+        />
+        <div
+          style={twj(
+            "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>
+          <div style={twj("text-3xl text-bold mb-3 text-white")}>
+            {description}
+          </div>
         </div>
       </div>
     </div>,

src/components/duende-og-image.tsx

@@ -1,5 +1,6 @@
 ---
 title: DPoP
+description: DPoP (Demonstrating Proof-of-Possession) is a security mechanism that binds access tokens to specific cryptographic keys to prevent token theft and misuse.
 sidebar:
   order: 40
 redirect_from:

src/content/docs/accesstokenmanagement/advanced/DPoP.md

@@ -1,5 +1,6 @@
 ---
 title: Client Assertions
+description: Learn how to use client assertions instead of shared secrets for token client authentication in Duende.AccessTokenManagement.
 sidebar:
   order: 30
 redirect_from:

src/content/docs/accesstokenmanagement/advanced/client-assertions.md

@@ -1,5 +1,6 @@
 ---
 title: Customizing Client Credentials Token Management
+description: Learn how to customize client credentials token management including client options, backchannel communication, and token caching configurations.
 sidebar:
   label: Client Credentials
   order: 1

src/content/docs/accesstokenmanagement/advanced/client-credentials.md

@@ -1,5 +1,6 @@
 ---
 title: Customizing User Token Management
+description: Learn how to customize user token management options, per-request parameters, and token storage mechanisms in ASP.NET Core applications.
 sidebar:
   label: User Tokens
   order: 2

src/content/docs/accesstokenmanagement/advanced/user-tokens.md

@@ -1,5 +1,6 @@
 ---
 title: Blazor Server
+description: Learn how to manage access tokens in Blazor Server applications and handle token storage and HTTP client usage with Duende.AccessTokenManagement.
 sidebar:
   order: 4
 redirect_from:

src/content/docs/accesstokenmanagement/blazor-server.md

@@ -1,5 +1,6 @@
 ---
 title: Access Token Management
+description: The Duende.AccessTokenManagement library provides automatic access token management features for .NET applications
 sidebar:
   order: 1
   label: "Overview"

src/content/docs/accesstokenmanagement/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: Web Applications
+description: Learn how to manage access tokens in web applications, including setup, configuration, and usage with HTTP clients
 sidebar:
   order: 3
 redirect_from:

src/content/docs/accesstokenmanagement/web-apps.md

@@ -1,5 +1,6 @@
 ---
 title: Workers
+description: Learn how to manage OAuth access tokens in worker applications and background tasks using Duende.AccessTokenManagement
 sidebar:
   order: 2
 redirect_from: