Offline Documentation Guide

This guide explains how to generate and use the offline version of the AI CMS Pro documentation.

---

What is Offline Documentation?

The offline documentation is a standalone, folder-based version of the documentation that:

• ✅ Works without a web server
• ✅ Can be opened directly in a browser
• ✅ Can be shared via USB, email, or cloud storage
• ✅ Works completely offline (no internet required)
• ✅ Maintains all functionality including search

---

Generating Offline Documentation

Quick Method

cd _documentation
npm run build:offline

This will:

1. Build the documentation
2. Generate the offline version automatically

Step-by-Step Method

1. Build the documentation:

npm run build

2. Generate offline version:

npm run offline

---

Output Structure

After generation, you'll have a clean, simple structure:

_documentation/
└── offline/
    ├── index.html              ← OPEN THIS FILE! (Single entry point)
    └── docs/                   ← All other files in one folder
        ├── assets/             ← CSS, JS, fonts
        │   ├── index-*.js
        │   ├── index-*.css
        │   └── ...
        ├── images/             ← Documentation images
        │   ├── logo.svg
        │   ├── favicon.svg
        │   └── ...
        ├── screenshots/        ← Installation screenshots
        │   ├── install-welcome.png
        │   └── ...
        ├── 01-INSTALLATION/     ← Installation guides
        │   ├── 01-System-Requirements.html
        │   ├── 02-Installation-cPanel.html
        │   └── ...
        ├── 02-MODULES/         ← Module documentation
        ├── 03-SETTINGS/        ← Settings guides
        ├── 04-FEATURE-MANAGEMENT/ ← Feature management
        └── 05-ADDITIONAL/      ← Additional guides

Clean Structure: Just 2 items in the offline/ folder:

• ✅ index.html - Single file to open
• ✅ docs/ - Folder containing everything else

---

How to Use

Opening the Documentation

The offline folder contains just 2 items:

• index.html - Redirect page (opens this)
• docs/ - Folder with all documentation files

Method 1: Double-click (Easiest)

1. Navigate to _documentation/offline/ folder
2. You'll see only index.html and docs/ folder
3. Double-click index.html
4. It automatically redirects to docs/index.html
5. Documentation opens with all links working

Method 2: Right-click

1. Right-click index.html
2. Select "Open with" → Choose your browser
3. Automatic redirect to main documentation page

Method 3: Direct Access (Alternative)

1. Navigate to offline/docs/ folder
2. Open index.html directly
3. All links work because everything is in docs/ folder

Note: The root index.html is just a redirect. All actual documentation files are in docs/ folder, maintaining the original structure so all links work correctly.

Browsing

• Use the left sidebar to navigate between sections
• Click any link to view documentation pages
• Use search (if available) to find content
• All images and assets load automatically

---

Sharing Offline Documentation

Method 1: Zip File

1. Compress the folder:

   cd _documentation
   zip -r offline-docs.zip offline/

2. Share the zip file:

   • Email it
   • Upload to cloud storage
   • Share via USB drive
   • Host on file sharing service

3. Recipient extracts and opens:

   • Extract the zip file
   • Open index.html in browser

Method 2: Direct Folder Copy

1. Copy the entire offline/ folder
2. Share via:
   • USB drive
   • Network share
   • Cloud sync (Dropbox, Google Drive, etc.)

Important: Keep the entire folder structure intact. Don't move individual files.

---

Features

✅ What Works Offline

• All documentation pages
• Navigation menu
• Images and screenshots
• CSS styling
• Basic JavaScript functionality
• Internal links between pages

⚠️ What Doesn't Work

• External links (will open in browser if online)
• Some advanced search features (depends on implementation)
• Live updates (static version)

---

Browser Compatibility

Tested and works with:

Browser	Status	Notes
Chrome	✅ Excellent	Recommended
Edge	✅ Excellent	Recommended
Firefox	✅ Good	Works well
Safari	✅ Good	Works well
Opera	✅ Good	Works well

---

File Size

Typical offline documentation size:

• Complete: ~10-15 MB
• Compressed (zip): ~5-8 MB

Size includes:

• All HTML pages
• CSS and JavaScript
• Images and screenshots
• Fonts and assets

---

Troubleshooting

Images Not Showing

Problem: Images appear broken

Solution:

• Make sure you opened index.html from the root offline/ folder (it redirects automatically)
• Or open docs/index.html directly
• Ensure the docs/ folder structure is intact
• Don't move index.html or the docs/ folder separately
• Check that docs/images/ and docs/screenshots/ folders exist

Links Not Working

Problem: Clicking links doesn't navigate

Solution:

• Open index.html from root (it redirects) OR open docs/index.html directly
• All files are in docs/ folder, so links work from there
• Ensure the docs/ folder structure is intact
• Check that all HTML files are in the correct folders within docs/
• Try opening docs/index.html directly if redirect doesn't work
• Try a different browser (Chrome/Edge recommended)

Styling Looks Broken

Problem: Pages look unstyled

Solution:

• Open index.html from root (redirects) OR open docs/index.html directly
• Ensure docs/assets/ folder exists with all CSS files
• Check browser console for errors (F12)
• Try opening docs/index.html directly if redirect causes issues
• Try a different browser (Chrome/Edge recommended)

Search Not Working

Problem: Search functionality doesn't work

Solution:

• Some search features require JavaScript
• Make sure JavaScript is enabled in your browser
• Try Chrome or Edge for best compatibility

---

Updating Offline Documentation

When documentation is updated:

1. Regenerate:

   npm run build:offline

2. Replace the old offline/ folder with the new one

3. Or delete and regenerate:

   rm -rf offline/
   npm run build:offline

---

Best Practices

For Distribution

1. ✅ Test before sharing:

   • Open index.html in a browser
   • Check a few pages load correctly
   • Verify images display

2. ✅ Include README:

   • The generated README.md explains how to use
   • Include it when sharing

3. ✅ Compress for sharing:

   • Zip the folder for easier distribution
   • Reduces file size significantly

For Users

1. ✅ Extract completely:

   • Extract the entire offline/ folder
   • Keep index.html and docs/ folder together
   • Don't separate them

2. ✅ Open the correct file:

   • Open index.html from root (it redirects to docs/index.html)
   • OR open docs/index.html directly
   • Both methods work - the redirect is just for convenience

3. ✅ Use recommended browser:

   • Chrome or Edge work best
   • Other browsers work but may have minor issues

4. ✅ Don't modify structure:

   • Keep index.html and docs/ folder in the same directory
   • Don't move or rename them separately

---

Advanced Usage

Customizing Output Location

Edit scripts/generate-offline.js:

const OFFLINE_DIR = path.join(__dirname, '../offline'); // Change this

Excluding Files

Modify the copyDirectory function to skip certain files or folders.

Adding Custom Files

Add files to the offline/ folder after generation, or modify the script to include them.

---

Comparison: Online vs Offline

Feature	Online (VitePress)	Offline (Standalone)
Server Required	✅ Yes	❌ No
Internet Required	✅ Yes (for assets)	❌ No
Search	✅ Full-featured	⚠️ Basic
Updates	✅ Automatic	❌ Manual regeneration
Sharing	⚠️ Requires hosting	✅ Easy (zip file)
Portability	❌ No	✅ Yes
File Size	N/A	~10-15 MB

---

Summary

The offline documentation provides a portable, shareable version of the complete documentation that works without any server or internet connection.

Quick Start:

npm run build:offline
# Then open offline/index.html in your browser

Perfect for:

• Sharing with team members
• Client presentations
• Offline reference
• USB distribution
• Archival purposes

---

Last Updated: 1/22/2026, 1:05:26 PM