Added automatically generating banner cards for each md page file that has

---
banner_title: "..."
banner_description: "..."
---

scripts/banner-generator.cjs

@@ -0,0 +1,98 @@
+const fs = require('fs');
+const path = require('path');
+const matter = require('gray-matter');
+const makeCard = require('twitter-card-image');
+
+const projects = ['flash', 'mobot', 'serverlibraries'];
+const baseDir = path.resolve(__dirname, './');
+const outputImageDir = path.resolve(__dirname, '../.vitepress/dist/assets/banner-cards/');
+
+if (!fs.existsSync(outputImageDir)) {
+    fs.mkdirSync(outputImageDir, { recursive: true });
+}
+
+const generateBannerCard = async (filePath, outputPath) => {
+    try {
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const { data: frontmatter } = matter(content);
+        const title = frontmatter.banner_title || frontmatter.title || path.basename(filePath, '.md');
+        const description = frontmatter.banner_description || '';
+
+        await makeCard({
+            width: 1280,
+            height: 669,
+            output: outputPath,
+            templateImage: path.resolve(__dirname, '../resources/assets/pservicesdocs-card-template.png'),
+            fonts: [
+                {
+                    file: path.resolve(__dirname, '../resources/fonts/Roboto-Bold.ttf'),
+                    family: 'Roboto',
+                },
+            ],
+            texts: [
+                {
+                    text: title,
+                    font: '70px "Roboto-Bold"',
+                    x: 75,
+                    y: 699 / 2 - 100,
+                    color: '#fff',
+                    maxWidth: 700,
+                    lineHeight: 64
+                },
+                {
+                    text: description,
+                    font: '32px "Roboto-Bold"',
+                    x: 75,
+                    y: 699 - 290,
+                    color: '#7a7a7a',
+                    lineHeight: 40
+                },
+            ],
+            roundedBorder: {
+                color: 'rgba(0, 0, 0, 0)',
+                radius: 20,
+                width: 10,
+            },
+        });
+
+    } catch (error) {
+        console.error(`Error generating banner card for ${filePath}: ${error.message}`);
+    }
+};
+
+const generateIndexImage = async () => {
+    const indexPath = path.resolve(baseDir, '../index.md');
+    if (fs.existsSync(indexPath)) {
+        const outputImagePath = path.join(outputImageDir, 'index.png');
+        await generateBannerCard(indexPath, outputImagePath);
+    } else {
+        console.log('No global index.md found');
+    }
+};
+
+const generateImagesForProjects = async () => {
+    await generateIndexImage();
+
+    //handle all projects
+    for (const project of projects) {
+        const projectPath = path.join(baseDir, "../" + project);
+
+        if (!fs.existsSync(projectPath)) {
+            console.log(`Directory not found for project: ${project}`);
+            continue;
+        }
+
+        const files = fs.readdirSync(projectPath).filter((file) => file.endsWith('.md'));
+        for (const file of files) {
+            const filePath = path.join(projectPath, file);
+            const fileName = `${project}-${file.replace('.md', '')}.png`;
+            const outputImagePath = path.join(outputImageDir, fileName);
+            console.log(`Generating: ${fileName}`);
+            await generateBannerCard(filePath, outputImagePath);
+        }
+    }
+};
+
+module.exports = {
+    generateImagesForProjects,
+};

scripts/composer.js

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import matter from 'gray-matter'; // Install 'gray-matter' for parsing frontmatter
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+console.log('Starting composer.js execution');
+
+const projects = ['flash', 'mobot', 'serverlibraries'];
+const sidebarConfig = {};
+const pageMetadata = {};
+
+projects.forEach((project) => {
+    const projectPath = path.resolve(__dirname, `../${project}`);
+    const sidebarPath = path.join(projectPath, 'config/sidebar.json');
+
+    console.log(`Checking for sidebar.json in ${project}`);
+    if (fs.existsSync(sidebarPath)) {
+        console.log(`Found sidebar.json in ${project}`);
+        const sidebar = JSON.parse(fs.readFileSync(sidebarPath, 'utf-8'));
+        Object.assign(sidebarConfig, sidebar);
+    } else {
+        console.log(`sidebar.json not found in ${project}`);
+    }
+
+    // Process Markdown files
+    const files = fs.readdirSync(projectPath).filter((file) => file.endsWith('.md'));
+    files.forEach((file) => {
+        const filePath = path.join(projectPath, file);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const { data: frontmatter } = matter(content);
+        const metadataKey = `/${project}/${file.replace('.md', '')}`;
+
+        pageMetadata[metadataKey] = {
+            title: frontmatter.ogTitle || frontmatter.title || file.replace('.md', ''),
+            description: frontmatter.ogDescription || '',
+        };
+    });
+});
+
+export { sidebarConfig, pageMetadata };

scripts/postbuild.cjs

@@ -0,0 +1,14 @@
+const { generateImagesForProjects } = require('./banner-generator.cjs');
+
+const postbuild = async () => {
+    console.log('Build completed, starting Banner card image generation...');
+    try {
+        await generateImagesForProjects();
+        console.log('Banner card images generated successfully!');
+    } catch (error) {
+        console.error('Error during image generation:', error);
+    }
+};
+
+// Execute the post-build task
+postbuild().then(r => r).catch(e => console.error(e));