chore: Update Docusaurus deployment workflow and image handling

- Enhanced the deployment workflow to ensure screenshots are copied to the correct static directory.
- Added a new script to fix image paths in Markdown files for better compatibility with the updated structure.
- Updated Docusaurus configuration to streamline static directory management and support image loading.
- Adjusted documentation to reference the new image paths.

.github/workflows/docusaurus-deploy.yml

@@ -40,7 +40,32 @@ jobs:
         run: npm ci
       
       - name: Copy screenshots to static directory
-        run: npm run prepare-screenshots
+        run: |
+          npm run prepare-screenshots
+          # Ensure the images referenced in the docs are definitely available
+          mkdir -p static/img
+          cp -v ../screenshots/dashboard.gomft.png static/img/
+          cp -v ../screenshots/transfer.config.gomft.png static/img/
+          ls -la static/img/dashboard.gomft.png static/img/transfer.config.gomft.png
+      
+      - name: Fix Markdown image paths
+        run: npm run fix-image-paths
+      
+      - name: Verify screenshots exist
+        run: |
+          echo "Checking if screenshots were copied correctly..."
+          if [ -f "static/img/dashboard.gomft.png" ]; then
+            echo "✅ Found dashboard.gomft.png in static/img/"
+          else
+            echo "❌ Missing dashboard.gomft.png in static/img/"
+            exit 1
+          fi
+          if [ -f "static/img/transfer.config.gomft.png" ]; then
+            echo "✅ Found transfer.config.gomft.png in static/img/"
+          else
+            echo "❌ Missing transfer.config.gomft.png in static/img/"
+            exit 1
+          fi
       
       - name: Build
         run: npm run build

docs/docs/getting-started/quick-start.md

@@ -23,7 +23,7 @@ The dashboard provides an overview of:
 - System status
 - Quick action buttons
 
-![GoMFT Dashboard](../../img/dashboard.gomft.png)
+![GoMFT Dashboard](../../static/img/dashboard.gomft.png)
 
 ## Creating Your First Transfer Configuration
 
@@ -36,7 +36,7 @@ The dashboard provides an overview of:
    - Configure transfer options (file filtering, bandwidth limits, etc.)
 4. Click **Save Transfer**
 
-![Create Transfer](../../img/transfer.config.gomft.png)
+![Create Transfer](../../static/img/transfer.config.gomft.png)
 
 ## Create Your First Scheduled Job
 1. Naviagate to **Scheduled Jobs** in the sidebar menu

docs/docusaurus.config.ts

@@ -23,7 +23,12 @@ const config: Config = {
   trailingSlash: false,
 
   // Explicit static directories configuration
-  staticDirectories: ['static', 'static/screenshots'],
+  staticDirectories: ['static'],
+
+  // Configure image loader to handle absolute paths with baseUrl
+  markdown: {
+    mermaid: true,
+  },
 
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',

docs/fix-image-paths.js

@@ -0,0 +1,68 @@
+// Fix image paths in Markdown files
+const fs = require('fs');
+const path = require('path');
+
+// Function to recursively find all Markdown files
+function findMarkdownFiles(directory) {
+  const files = [];
+  
+  function traverse(dir) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      
+      if (entry.isDirectory()) {
+        traverse(fullPath);
+      } else if (entry.isFile() && entry.name.endsWith('.md')) {
+        files.push(fullPath);
+      }
+    }
+  }
+  
+  traverse(directory);
+  return files;
+}
+
+// Function to fix image paths in a file
+function fixImagePaths(filePath) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  let originalContent = content;
+  
+  // Replace absolute paths with relative ones based on file location
+  const relativeToRoot = path.relative(path.dirname(filePath), path.resolve('static'));
+  const relativePath = relativeToRoot.replace(/\\/g, '/');
+  
+  // Replace any occurrence of ![...](/img/...) with ![...](relativePath/img/...)
+  content = content.replace(/!\[(.*?)\]\(\/img\/(.*?)\)/g, 
+    (match, alt, imgPath) => `![${alt}](${relativePath}/img/${imgPath})`);
+  
+  // If content changed, write back to file
+  if (content !== originalContent) {
+    console.log(`Fixed image paths in ${filePath}`);
+    fs.writeFileSync(filePath, content, 'utf8');
+    return true;
+  }
+  
+  return false;
+}
+
+// Main function
+function main() {
+  console.log('Finding Markdown files...');
+  const docsDir = path.resolve('docs');
+  const mdFiles = findMarkdownFiles(docsDir);
+  
+  console.log(`Found ${mdFiles.length} Markdown files`);
+  
+  let fixedCount = 0;
+  for (const file of mdFiles) {
+    if (fixImagePaths(file)) {
+      fixedCount++;
+    }
+  }
+  
+  console.log(`Fixed image paths in ${fixedCount} files`);
+}
+
+main(); 

docs/package.json

@@ -14,7 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
     "deploy-gh-pages": "GIT_USER=StarFleetCPTN USE_SSH=true yarn deploy",
-    "prepare-screenshots": "node -e \"const fs = require('fs'); const paths = ['./static/screenshots', './static/img/screenshots']; paths.forEach(path => { if (!fs.existsSync(path)) { fs.mkdirSync(path, { recursive: true }); } }); fs.readdirSync('../screenshots').forEach(file => { paths.forEach(path => { const targetFile = path + '/' + file; if (!fs.existsSync(targetFile)) { fs.copyFileSync('../screenshots/' + file, targetFile); } }); });\""
+    "prepare-screenshots": "node -e \"const fs = require('fs'); const paths = ['./static/screenshots', './static/img/screenshots', './static/img']; paths.forEach(path => { if (!fs.existsSync(path)) { fs.mkdirSync(path, { recursive: true }); } }); fs.readdirSync('../screenshots').forEach(file => { paths.forEach(path => { const targetFile = path + '/' + file; if (!fs.existsSync(targetFile)) { fs.copyFileSync('../screenshots/' + file, targetFile); } }); });\"",
+    "fix-image-paths": "node fix-image-paths.js"
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",

docs/static/img/README.md

@@ -1,6 +1,14 @@
-# GoMFT Documentation Images
+# Images directory
 
-This directory contains images used in the GoMFT documentation.
+This directory contains various images used throughout the documentation, including:
+
+1. Logo files
+2. Screenshots
+3. Icons and other assets
+
+Some screenshots are automatically copied from the main repository's `/screenshots` directory during the build process.
+
+The automated copy is handled by the `prepare-screenshots` script in package.json.
 
 ## Required Images