diff --git a/.github/workflows/docusaurus-deploy.yml b/.github/workflows/docusaurus-deploy.yml index 85ae655..bb634c1 100644 --- a/.github/workflows/docusaurus-deploy.yml +++ b/.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 diff --git a/docs/docs/getting-started/quick-start.md b/docs/docs/getting-started/quick-start.md index a08266f..d9f7f4c 100644 --- a/docs/docs/getting-started/quick-start.md +++ b/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 diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index c698867..dcf1c80 100644 --- a/docs/docusaurus.config.ts +++ b/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', diff --git a/docs/fix-image-paths.js b/docs/fix-image-paths.js new file mode 100644 index 0000000..2120d95 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index d4129d5..bc1312a 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/static/img/README.md b/docs/static/img/README.md index 1421f80..48f0846 100644 --- a/docs/static/img/README.md +++ b/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