improve docs

website/docs/contribution/documentation/all-components.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 2
 title: All Components - Complete Reference
-description: Complete guide to all 30+ components with live examples, detailed documentation, and usage
+description: Complete reference of all documentation UI components—Badge, Callout, Accordion, APIReference, and more—with usage examples for Compose docs.
 draft: true
 ---
 

website/docs/facets/authentication.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 2
 title: Authentication
-description: Complete guide to all 30+ components with live examples, detailed documentation, and usage
+description: Access control and permission management for diamond contracts. Implement role-based access control (RBAC) and secure your Compose facets.
 draft: true
 ---
 

website/docs/facets/facets-and-modules.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 3
 title: Facets & Modules
-description: Complete guide to all 30+ components with live examples, detailed documentation, and usage
+description: How facets and modules work together through shared storage. When to use facets vs modules and how to build composable smart contract systems.
 draft: true
 ---
 

website/docs/foundations/overview.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 10
 title: Overview
-description: Complete guide to all 30+ components with live examples, detailed documentation, and usage
+description: Overview of Compose foundations—core concepts, authentication, facets and modules, diamond standard, and storage patterns for diamond-based smart contract development.
 draft: true
 ---
 

website/docs/foundations/solidity-modules.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 3
 title: Solidity Modules
-description: Description of what Solidity modules are and how they are used in Compose.
+description: What Solidity modules are, how they differ from contracts and libraries, and how Compose uses them for reusable facet logic and shared storage.
 ---
 
 

website/docusaurus.config.js

@@ -6,10 +6,12 @@
 
 import path from 'path';
 import {fileURLToPath} from 'url';
+import {createRequire} from 'module';
 import dotenv from 'dotenv';
 import {themes as prismThemes} from 'prism-react-renderer';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 
 dotenv.config();
 
@@ -294,7 +296,16 @@ const config = {
     }),
   plugins: [
     path.join(__dirname, 'plugins', 'markdown-source-docs.js'),
-
+    [
+      '@acid-info/docusaurus-og',
+      {
+        path: './preview-images',
+        imageRenderers: {
+          'docusaurus-plugin-content-docs': require('./lib/ImageRenderers.js').docs,
+          'docusaurus-plugin-content-blog': require('./lib/ImageRenderers.js').blog,
+        },
+      },
+    ],
     process.env.POSTHOG_API_KEY && [
       "posthog-docusaurus",
       {

website/lib/ImageRenderers.js

@@ -0,0 +1,157 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const React = require('react');
+
+const WIDTH = 1200;
+const HEIGHT = 630;
+
+// Inter from @fontsource (woff); Satori accepts ArrayBuffer
+const fontPath = path.join(__dirname, '../node_modules/@fontsource/inter/files/inter-latin-400-normal.woff');
+const fontData = fs.readFileSync(fontPath);
+const fontBuffer = fontPath.endsWith('.woff2')
+  ? fontData.buffer
+  : fontData; // Node Buffer works as ArrayBuffer for Satori
+
+const fontConfig = [
+  {
+    name: 'Inter',
+    data: fontBuffer,
+    weight: 400,
+    style: 'normal',
+  },
+];
+
+const options = {
+  width: WIDTH,
+  height: HEIGHT,
+  fonts: fontConfig,
+};
+
+// Logo as PNG data URI (Satori does not reliably render SVG in img; use pre-generated PNG)
+const logoPngPath = path.join(__dirname, '../static/img/logo-og-white.png');
+let logoDataUri = null;
+function getLogoDataUri() {
+  if (logoDataUri !== null) return logoDataUri;
+  try {
+    const png = fs.readFileSync(logoPngPath);
+    logoDataUri = 'data:image/png;base64,' + png.toString('base64');
+  } catch (_) {
+    logoDataUri = '';
+  }
+  return logoDataUri;
+}
+
+function truncateTitle(title, maxChars = 60) {
+  if (!title || typeof title !== 'string') return 'Compose';
+  const t = title.trim();
+  if (t.length <= maxChars) return t;
+  return t.slice(0, maxChars - 3).trim() + '...';
+}
+
+// Same blue gradient as default socialcard-compose.png: dark (top-left) to medium blue (bottom-right)
+const BACKGROUND_GRADIENT = 'linear-gradient(135deg, #0F172A 0%, #1A3B8A 100%)';
+
+function buildLayout(title, subtitle = 'Smart Contract Oriented Programming for ERC-2535 Diamonds') {
+  const logoSrc = getLogoDataUri();
+  return React.createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        background: BACKGROUND_GRADIENT,
+        color: '#ffffff',
+        fontFamily: 'Inter',
+        padding: 80,
+        justifyContent: 'center',
+      },
+    },
+    // Logo + "Compose" in one row (like default social card)
+    React.createElement(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: 32,
+          gap: 20,
+        },
+      },
+      logoSrc
+        ? React.createElement('img', {
+            src: logoSrc,
+            width: 100,
+            height: 100,
+            style: { display: 'flex' },
+          })
+        : null,
+      React.createElement(
+        'div',
+        {
+          style: {
+            fontSize: 56,
+            fontWeight: 600,
+            opacity: 0.95,
+          },
+        },
+        'Compose'
+      )
+    ),
+    React.createElement(
+      'div',
+      {
+        style: {
+          fontSize: 56,
+          fontWeight: 700,
+          lineHeight: 1.2,
+          marginBottom: 16,
+        },
+      },
+      truncateTitle(title)
+    ),
+    subtitle
+      ? React.createElement(
+          'div',
+          {
+            style: {
+              fontSize: 26,
+              opacity: 0.95,
+              lineHeight: 1.5,
+              maxWidth: 880,
+              marginTop: 1,
+            },
+          },
+          typeof subtitle === 'string' && subtitle.length > 140 ? subtitle.slice(0, 140).trim() + '...' : subtitle
+        )
+      : null
+  );
+}
+
+/**
+ * Docs image renderer. Receives { metadata, version, plugin, document, websiteOutDir }, context.
+ */
+function docs(data, context) {
+  const title = data.metadata?.title ?? 'Compose';
+  const description = data.metadata?.description ?? null;
+  return [buildLayout(title, description), options];
+}
+
+/**
+ * Blog image renderer. Receives { data, plugin, pageType, permalink, document, websiteOutDir }, context.
+ * Only meaningful for pageType 'post'; list/tags/archive may use default or skip.
+ */
+function blog(data, context) {
+  const isPost = data.pageType === 'post';
+  const title = isPost
+    ? (data.data?.metadata?.title ?? data.data?.title ?? 'Compose')
+    : (data.data?.label ?? data.data?.title ?? 'Blog');
+  const description = isPost && data.data?.metadata?.description ? data.data.metadata.description : null;
+  return [buildLayout(title, description), options];
+}
+
+module.exports = { docs, blog };