UI: Support new OG image design for Takumi

.changeset/young-onions-smile.md

@@ -0,0 +1,6 @@
+---
+"fumadocs-ui": patch
+"@fumadocs/base-ui": patch
+---
+
+Support new OG image design for Takumi

packages/base-ui/scripts/compile-inline.utils.ts

@@ -8,7 +8,7 @@ export async function compileInline() {
     sources: [
       {
         base: path.resolve('src'),
-        pattern: '{components,contexts,provider,utils}/**/*.{ts,tsx}',
+        pattern: 'components/**/*.{ts,tsx}',
         negated: false,
       },
       {

packages/base-ui/src/og/takumi.tsx

@@ -33,6 +33,22 @@ export function generateOGImage(options: GenerateProps & ImageResponseOptions):
 export function generate({
   primaryColor = 'rgba(255,150,255,0.3)',
   primaryTextColor = 'rgb(255,150,255)',
+  icon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="56"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-book-icon lucide-book"
+    >
+      <circle cx="12" cy="12" r="11" stroke={primaryTextColor} strokeWidth="2" />
+    </svg>
+  ),
   ...props
 }: GenerateProps) {
   return (
@@ -45,31 +61,9 @@ export function generate({
         color: 'white',
         padding: '4rem',
         backgroundColor: '#0c0c0c',
-        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,
+        border: `18px solid ${primaryColor}`,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: '16px',
-          marginBottom: '12px',
-          color: primaryTextColor,
-        }}
-      >
-        {props.icon}
-        <p
-          style={{
-            fontSize: '56px',
-            fontWeight: 600,
-            margin: 0,
-          }}
-        >
-          {props.site}
-        </p>
-      </div>
-
       <p
         style={{
           fontWeight: 800,
@@ -84,10 +78,37 @@ export function generate({
           fontSize: '52px',
           color: 'rgba(240,240,240,0.8)',
           margin: 0,
+          marginTop: '16px',
+          paddingBottom: '28px',
+          borderBottom: `8px dashed ${primaryColor}`,
         }}
       >
         {props.description}
       </p>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '20px',
+          marginTop: 'auto',
+          color: primaryTextColor,
+        }}
+      >
+        {icon}
+        {props.site && (
+          <p
+            style={{
+              fontSize: '56px',
+              fontWeight: 600,
+              margin: 0,
+            }}
+          >
+            {props.site}
+          </p>
+        )}
+      </div>
     </div>
   );
 }

packages/radix-ui/scripts/compile-inline.utils.ts

@@ -8,7 +8,7 @@ export async function compileInline() {
     sources: [
       {
         base: path.resolve('src'),
-        pattern: '{components,contexts,provider,utils}/**/*.{ts,tsx}',
+        pattern: 'components/**/*.{ts,tsx}',
         negated: false,
       },
       {

packages/radix-ui/src/og.tsx

@@ -62,7 +62,7 @@ export function generate({
         color: 'white',
         padding: '4rem',
         backgroundColor: '#0c0c0c',
-        border: `18px ${primaryColor}`,
+        border: `18px solid ${primaryColor}`,
       }}
     >
       <p

packages/radix-ui/src/og/takumi.tsx

@@ -30,10 +30,25 @@ export function generateOGImage(options: GenerateProps & ImageResponseOptions):
   );
 }
 
-// TODO: sync with og.tsx once Takumi supported dashed border-style
 export function generate({
   primaryColor = 'rgba(255,150,255,0.3)',
   primaryTextColor = 'rgb(255,150,255)',
+  icon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="56"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-book-icon lucide-book"
+    >
+      <circle cx="12" cy="12" r="11" stroke={primaryTextColor} strokeWidth="2" />
+    </svg>
+  ),
   ...props
 }: GenerateProps) {
   return (
@@ -46,31 +61,9 @@ export function generate({
         color: 'white',
         padding: '4rem',
         backgroundColor: '#0c0c0c',
-        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,
+        border: `18px solid ${primaryColor}`,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: '16px',
-          marginBottom: '12px',
-          color: primaryTextColor,
-        }}
-      >
-        {props.icon}
-        <p
-          style={{
-            fontSize: '56px',
-            fontWeight: 600,
-            margin: 0,
-          }}
-        >
-          {props.site}
-        </p>
-      </div>
-
       <p
         style={{
           fontWeight: 800,
@@ -85,10 +78,37 @@ export function generate({
           fontSize: '52px',
           color: 'rgba(240,240,240,0.8)',
           margin: 0,
+          marginTop: '16px',
+          paddingBottom: '28px',
+          borderBottom: `8px dashed ${primaryColor}`,
         }}
       >
         {props.description}
       </p>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '20px',
+          marginTop: 'auto',
+          color: primaryTextColor,
+        }}
+      >
+        {icon}
+        {props.site && (
+          <p
+            style={{
+              fontSize: '56px',
+              fontWeight: 600,
+              margin: 0,
+            }}
+          >
+            {props.site}
+          </p>
+        )}
+      </div>
     </div>
   );
 }