Introduction to Tools¶

Phantom Documentation Kit provides powerful tools to make your documentation projects more efficient and professional.

Vendor Builder¶

What Does It Do?¶

Phantom Vendor Builder is a tool that automatically manages your JavaScript and CSS dependencies. It allows you to manage third-party libraries like Chart.js and Font Awesome from a single location.

Key Features¶

Automatic Build: Missing files are automatically compiled when serve.py and build.py run
NPM Integration: Compatible with all npm packages
Smart Optimization: Customizable optimization with Terser and cssnano
Font Awesome Built-in: Font Awesome is automatically included

Configuration¶

{
  "dependencies": [
    {
      "name": "Chart.js",
      "from": "node_modules/chart.js/dist/chart.umd.js",
      "to": "chart.umd.js",
      "type": "js",
      "minify": true
    }
  ]
}

Automatically Processed Libraries¶

Font Awesome: CSS and webfonts automatically included
Chart.js: Charting library
Asciinema Player: Terminal recording player
LoadJS: Dynamic script loader

Detailed Documentation →

Image Optimizer¶

What Does It Do?¶

Phantom Image Optimizer is a powerful tool that automatically optimizes images used in your documentation. Leveraging the industrial strength of the Sharp library, it significantly reduces file sizes while preserving visual quality.

Key Features¶

High Performance: Fast optimization with parallel processing support
Smart Compression: Up to 70% size reduction while preserving visual quality
Multiple Format Support: JPEG, PNG, WebP, AVIF formats
Flexible Configuration: Customizable quality and size settings
Test System: Performance testing with Oxford Pet Dataset

Use Cases¶

Documentation screenshots
Blog and article images
Product photos
Diagrams and infographics

Detailed Documentation →