|
| 1 | +# BoostLook Development Guide |
| 2 | + |
| 3 | +This guide explains how to develop and test BoostLook styling using two complementary preview workflows: simple AsciiDoc testing and production-like Antora testing. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +BoostLook provides two preview workflows for developing and testing CSS changes: |
| 8 | + |
| 9 | +- **Preview with AsciiDoc**: Fast iteration with simple AsciiDoc files for quick CSS testing |
| 10 | +- **Preview with Antora**: Comprehensive testing using real Boost documentation content via Antora Specimen |
| 11 | + |
| 12 | +Both workflows provide automatic file watching, rebuilding, and browser preview to streamline your development process. |
| 13 | + |
| 14 | +## Preview Workflows |
| 15 | + |
| 16 | +### Preview with AsciiDoc |
| 17 | + |
| 18 | +**Use Case**: Rapid CSS iteration and basic styling verification |
| 19 | +**Script**: `boostlook_asciidoc_preview.rb` |
| 20 | +**Content**: Your local AsciiDoc files (e.g., `doc/specimen.adoc`) |
| 21 | +**Build System**: Boost.Build (b2) |
| 22 | +**Speed**: Fast, immediate feedback |
| 23 | + |
| 24 | +This workflow monitors AsciiDoc, HTML, and CSS files for changes, automatically rebuilding via Boost.Build and opening the rendered HTML in your browser. |
| 25 | + |
| 26 | +### Preview with Antora |
| 27 | + |
| 28 | +**Use Case**: Realistic testing with actual Boost documentation structure and content |
| 29 | +**Script**: `boostlook_antora_preview.rb` |
| 30 | +**Content**: Real Boost.URL documentation fetched from GitHub |
| 31 | +**Build System**: Antora site generator |
| 32 | +**Speed**: More comprehensive, production-like environment |
| 33 | + |
| 34 | +This workflow uses **Antora Specimen** - a testing setup that fetches official Boost.URL documentation and applies your local BoostLook styling, providing a realistic testing environment with actual production content. |
| 35 | + |
| 36 | +## Prerequisites |
| 37 | + |
| 38 | +### Common Requirements |
| 39 | +- **Ruby** (>= 2.7 recommended) |
| 40 | +- **Listen Gem** – Install via `gem install listen` |
| 41 | + |
| 42 | +### Preview with AsciiDoc Requirements |
| 43 | + |
| 44 | +- **Asciidoctor Gem**: Install via `gem install asciidoctor`. |
| 45 | +- **Boost.Build (b2)**: Ensure `b2` is installed and available in your system's `PATH`. You can verify this by running `which b2` or `b2 --version`. |
| 46 | +- **Boost.Build Configuration (`user-config.jam`)**: This is a critical step. You must tell Boost.Build where to find your `asciidoctor` executable. |
| 47 | + 1. Find the full path to `asciidoctor` by running: |
| 48 | + ```sh |
| 49 | + which asciidoctor |
| 50 | + ``` |
| 51 | + The output will be a path like `/usr/local/bin/asciidoctor`. |
| 52 | + |
| 53 | + 2. Create or edit the file `user-config.jam` in your home directory (`$HOME/user-config.jam` on Linux/macOS). |
| 54 | + |
| 55 | + 3. Add the following line to the file, using the path from step 1: |
| 56 | + ```jam |
| 57 | + # Tell Boost.Build where to find the asciidoctor executable |
| 58 | + using asciidoctor : /usr/local/bin/asciidoctor ; |
| 59 | + ``` |
| 60 | + |
| 61 | +### Preview with Antora Requirements |
| 62 | +- **Node.js** – For Antora CLI |
| 63 | +- **Antora CLI** – Install via `npm install -g @antora/cli @antora/site-generator` |
| 64 | + |
| 65 | +## Quick Start |
| 66 | + |
| 67 | +### Preview with AsciiDoc |
| 68 | + |
| 69 | +1. **Install Prerequisites**: |
| 70 | + ```bash |
| 71 | + # Check Ruby installation |
| 72 | + ruby -v |
| 73 | +
|
| 74 | + # Install required gems |
| 75 | + gem install asciidoctor listen |
| 76 | +
|
| 77 | + # Verify Boost.Build availability |
| 78 | + which b2 |
| 79 | + ``` |
| 80 | + |
| 81 | +2. **Prepare Content**: |
| 82 | + - Place AsciiDoc files in the `doc/` directory |
| 83 | + - Default test file: `doc/specimen.adoc` |
| 84 | + |
| 85 | +3. **Start Preview**: |
| 86 | + ```bash |
| 87 | + # From project root |
| 88 | + ruby boostlook_asciidoc_preview.rb |
| 89 | + ``` |
| 90 | + |
| 91 | +4. **Development Workflow**: |
| 92 | + - Edit `boostlook.css` or AsciiDoc files in `doc/` |
| 93 | + - Script automatically detects changes and rebuilds |
| 94 | + - Browser opens automatically with rendered content |
| 95 | + - Refresh browser to see changes |
| 96 | + |
| 97 | +### Preview with Antora |
| 98 | + |
| 99 | +1. **Install Prerequisites**: |
| 100 | + ```bash |
| 101 | + # Install Antora CLI |
| 102 | + npm install -g @antora/cli @antora/site-generator |
| 103 | +
|
| 104 | + # Install Ruby gem for file watching |
| 105 | + gem install listen |
| 106 | + ``` |
| 107 | + |
| 108 | +2. **Start Preview** (with automatic setup): |
| 109 | + ```bash |
| 110 | + # Force rebuild and start watching |
| 111 | + ruby boostlook_antora_preview.rb --rebuild |
| 112 | + ``` |
| 113 | + |
| 114 | +3. **Development Workflow**: |
| 115 | + - Edit `boostlook.css` → Triggers automatic rebuild |
| 116 | + - Edit `boostlook.rb` → Triggers automatic rebuild |
| 117 | + - View changes in browser (auto-opened) |
| 118 | + - Repeat until styling is perfect |
| 119 | + |
| 120 | +## File Structure |
| 121 | + |
| 122 | +### Preview with AsciiDoc Structure |
| 123 | +``` |
| 124 | +boostlook/ |
| 125 | +├── boostlook.css # Your main CSS file |
| 126 | +├── boostlook.rb # Antora extension (Ruby) |
| 127 | +├── boostlook_asciidoc_preview.rb # AsciiDoc preview script |
| 128 | +└── doc/ |
| 129 | + ├── specimen.adoc # Test AsciiDoc file |
| 130 | + └── ... # Other AsciiDoc files |
| 131 | +``` |
| 132 | + |
| 133 | +### Preview with Antora Structure |
| 134 | +``` |
| 135 | +boostlook/ |
| 136 | +├── boostlook.css # Your main CSS file |
| 137 | +├── boostlook.rb # Antora extension (Ruby) |
| 138 | +├── boostlook_antora_preview.rb # Antora preview script |
| 139 | +└── doc/ |
| 140 | + └── antora_specimen/ |
| 141 | + ├── playbook.yml # Antora configuration |
| 142 | + └── build/ # Generated site (git-ignored) |
| 143 | + └── site/ |
| 144 | + ├── index.html # Entry point |
| 145 | + └── _/css/ |
| 146 | + └── boostlook.css # Your CSS (auto-copied) |
| 147 | +``` |
| 148 | + |
| 149 | +## What You're Testing Against |
| 150 | + |
| 151 | +### Preview with AsciiDoc |
| 152 | +- **Content**: Your custom AsciiDoc files |
| 153 | +- **Structure**: Simple document structure |
| 154 | +- **Elements**: Basic typography, code blocks, tables |
| 155 | +- **Speed**: Very fast iteration cycles |
| 156 | + |
| 157 | +### Preview with Antora |
| 158 | +- **Content**: Official Boost.URL documentation from GitHub |
| 159 | +- **Structure**: Actual Antora-generated documentation |
| 160 | +- **Elements**: Real typography, code blocks, tables, navigation, etc. |
| 161 | +- **Complexity**: Multi-level navigation, cross-references, production patterns |
| 162 | + |
| 163 | +## Configuration |
| 164 | + |
| 165 | +### AsciiDoc Preview Configuration |
| 166 | +The AsciiDoc preview uses your existing Boost.Build configuration. Ensure your `build.jam` or similar build files are properly configured for BoostLook integration. |
| 167 | + |
| 168 | +### Antora Preview Configuration (`doc/antora_specimen/playbook.yml`) |
| 169 | +```yaml |
| 170 | +site: |
| 171 | + title: Boostlook Antora Specimen |
| 172 | + url: / |
| 173 | + start_page: url::index.adoc |
| 174 | +
|
| 175 | +content: |
| 176 | + sources: |
| 177 | + - url: https://github.com/boostorg/url.git |
| 178 | + branches: develop |
| 179 | + start_path: doc |
| 180 | +
|
| 181 | +ui: |
| 182 | + bundle: |
| 183 | + url: https://github.com/boostorg/website-v2-docs/releases/download/ui-master/ui-bundle.zip |
| 184 | + snapshot: true |
| 185 | +
|
| 186 | +output: |
| 187 | + dir: ./build/site |
| 188 | +``` |
| 189 | + |
| 190 | +**Key Points:** |
| 191 | +- **No git submodules** - Content fetched automatically |
| 192 | +- **Remote UI bundle** - Official Boost documentation UI |
| 193 | +- **Your CSS overrides** - Applied automatically after build |
| 194 | + |
| 195 | +## Preview Script Features |
| 196 | + |
| 197 | +### AsciiDoc Preview Features |
| 198 | +- **File Watching**: Monitors `doc/` directory and root CSS files |
| 199 | +- **Automatic Building**: Uses Boost.Build (b2) for rendering |
| 200 | +- **Browser Integration**: Opens rendered HTML automatically |
| 201 | +- **Cross-platform**: Works on macOS, Linux, Windows |
| 202 | + |
| 203 | +### Antora Preview Features |
| 204 | +- **Automatic CSS Override**: Copies your current `boostlook.css` over outdated UI bundle version |
| 205 | +- **Smart Rebuilding**: CSS changes trigger full rebuild (processed by Ruby extension) |
| 206 | +- **Content Fetching**: Automatically downloads latest Boost.URL documentation |
| 207 | +- **File Hash Checking**: Avoids unnecessary rebuilds |
| 208 | + |
| 209 | +## Manual Testing Commands |
| 210 | + |
| 211 | +### Preview with AsciiDoc (Manual) |
| 212 | +```bash |
| 213 | +# Build once without watching |
| 214 | +b2 doc/specimen.html |
| 215 | +
|
| 216 | +# Serve locally (if needed) |
| 217 | +python -m http.server 8000 |
| 218 | +``` |
| 219 | + |
| 220 | +### Preview with Antora (Manual) |
| 221 | +```bash |
| 222 | +# Build once without watching |
| 223 | +cd doc/antora_specimen |
| 224 | +npx antora --fetch playbook.yml |
| 225 | +
|
| 226 | +# Copy your current CSS |
| 227 | +cp ../../boostlook.css build/site/_/css/boostlook.css |
| 228 | +
|
| 229 | +# Serve locally |
| 230 | +npx http-server build/site -p 8080 |
| 231 | +``` |
| 232 | + |
| 233 | +## Troubleshooting |
| 234 | + |
| 235 | +### Preview with AsciiDoc Issues |
| 236 | + |
| 237 | +**Error: `error: no generators were found for type 'HTML'`** |
| 238 | + |
| 239 | +- **Cause**: This is the most common issue. It means Boost.Build (`b2`) cannot find the `asciidoctor` executable. |
| 240 | +- **Solution**: You must configure your `$HOME/user-config.jam` file. Please follow the instructions in the **"Boost.Build Configuration (`user-config.jam`)"** section under Prerequisites. |
| 241 | + |
| 242 | +**Error: `command not found: b2`** |
| 243 | + |
| 244 | +- **Cause**: The Boost.Build `b2` executable is not in your system's `PATH`. |
| 245 | +- **Solution**: Install Boost.Build and ensure its location is added to your `PATH`. Verify with `which b2`. |
| 246 | +
|
| 247 | +**Script must be run from the project root** |
| 248 | +
|
| 249 | +- **Cause**: The script expects to be run from the main `boostlook/` directory. |
| 250 | +- **Solution**: Make sure you are in the project's root directory before running `ruby boostlook_asciidoc_preview.rb`. |
| 251 | + |
| 252 | +**Warnings like `www-browser: not found` or `xdg-open: ... not found`** |
| 253 | + |
| 254 | +- **Cause**: These warnings may appear on some Linux systems if the script cannot find a default command-line web browser. |
| 255 | +- **Solution**: These are usually harmless and can be ignored if a graphical browser still opens. To resolve them, you can install a common utility like `xdg-utils` (`sudo apt-get install xdg-utils` on Debian/Ubuntu). |
| 256 | + |
| 257 | +### Preview with Antora Issues |
| 258 | + |
| 259 | +**Build Fails:** |
| 260 | +```bash |
| 261 | +# Check Antora installation |
| 262 | +npx antora --version |
| 263 | +
|
| 264 | +# Check if playbook is valid |
| 265 | +cd doc/antora_specimen |
| 266 | +npx antora playbook.yml --dry-run |
| 267 | +``` |
| 268 | + |
| 269 | +**CSS Not Updating:** |
| 270 | +```bash |
| 271 | +# Force complete rebuild |
| 272 | +ruby boostlook_antora_preview.rb --rebuild |
| 273 | +
|
| 274 | +# Manually verify CSS copy |
| 275 | +ls -la doc/antora_specimen/build/site/_/css/boostlook.css |
| 276 | +``` |
| 277 | + |
| 278 | +**Preview Script Issues:** |
| 279 | +```bash |
| 280 | +# Check if listen gem is installed |
| 281 | +gem list | grep listen |
| 282 | +
|
| 283 | +# Install if missing |
| 284 | +gem install listen |
| 285 | +``` |
| 286 | + |
| 287 | +**Node.js/Antora Issues:** |
| 288 | +- Ensure Node.js is installed: `node --version` |
| 289 | +- Install/reinstall Antora: ` |
0 commit comments