|
| 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 | +- **Asciidoctor** – Install via `gem install asciidoctor` |
| 44 | +- **Boost.Build (b2)** – Required for builds. Ensure it's installed and available in your PATH. |
| 45 | + |
| 46 | +### Preview with Antora Requirements |
| 47 | +- **Node.js** – For Antora CLI |
| 48 | +- **Antora CLI** – Install via `npm install -g @antora/cli @antora/site-generator` |
| 49 | + |
| 50 | +## Quick Start |
| 51 | + |
| 52 | +### Preview with AsciiDoc |
| 53 | + |
| 54 | +1. **Install Prerequisites**: |
| 55 | + ```bash |
| 56 | + # Check Ruby installation |
| 57 | + ruby -v |
| 58 | + |
| 59 | + # Install required gems |
| 60 | + gem install asciidoctor listen |
| 61 | + |
| 62 | + # Verify Boost.Build availability |
| 63 | + which b2 |
| 64 | + ``` |
| 65 | + |
| 66 | +2. **Prepare Content**: |
| 67 | + - Place AsciiDoc files in the `doc/` directory |
| 68 | + - Default test file: `doc/specimen.adoc` |
| 69 | + |
| 70 | +3. **Start Preview**: |
| 71 | + ```bash |
| 72 | + # From project root |
| 73 | + ruby boostlook_asciidoc_preview.rb |
| 74 | + ``` |
| 75 | + |
| 76 | +4. **Development Workflow**: |
| 77 | + - Edit `boostlook.css` or AsciiDoc files in `doc/` |
| 78 | + - Script automatically detects changes and rebuilds |
| 79 | + - Browser opens automatically with rendered content |
| 80 | + - Refresh browser to see changes |
| 81 | + |
| 82 | +### Preview with Antora |
| 83 | + |
| 84 | +1. **Install Prerequisites**: |
| 85 | + ```bash |
| 86 | + # Install Antora CLI |
| 87 | + npm install -g @antora/cli @antora/site-generator |
| 88 | + |
| 89 | + # Install Ruby gem for file watching |
| 90 | + gem install listen |
| 91 | + ``` |
| 92 | + |
| 93 | +2. **Start Preview** (with automatic setup): |
| 94 | + ```bash |
| 95 | + # Force rebuild and start watching |
| 96 | + ruby boostlook_antora_preview.rb --rebuild |
| 97 | + ``` |
| 98 | + |
| 99 | +3. **Development Workflow**: |
| 100 | + - Edit `boostlook.css` → Triggers automatic rebuild |
| 101 | + - Edit `boostlook.rb` → Triggers automatic rebuild |
| 102 | + - View changes in browser (auto-opened) |
| 103 | + - Repeat until styling is perfect |
| 104 | + |
| 105 | +## File Structure |
| 106 | + |
| 107 | +### Preview with AsciiDoc Structure |
| 108 | +``` |
| 109 | +boostlook/ |
| 110 | +├── boostlook.css # Your main CSS file |
| 111 | +├── boostlook.rb # Antora extension (Ruby) |
| 112 | +├── boostlook_asciidoc_preview.rb # AsciiDoc preview script |
| 113 | +└── doc/ |
| 114 | + ├── specimen.adoc # Test AsciiDoc file |
| 115 | + └── ... # Other AsciiDoc files |
| 116 | +``` |
| 117 | + |
| 118 | +### Preview with Antora Structure |
| 119 | +``` |
| 120 | +boostlook/ |
| 121 | +├── boostlook.css # Your main CSS file |
| 122 | +├── boostlook.rb # Antora extension (Ruby) |
| 123 | +├── boostlook_antora_preview.rb # Antora preview script |
| 124 | +└── doc/ |
| 125 | + └── antora_specimen/ |
| 126 | + ├── playbook.yml # Antora configuration |
| 127 | + └── build/ # Generated site (git-ignored) |
| 128 | + └── site/ |
| 129 | + ├── index.html # Entry point |
| 130 | + └── _/css/ |
| 131 | + └── boostlook.css # Your CSS (auto-copied) |
| 132 | +``` |
| 133 | + |
| 134 | +## What You're Testing Against |
| 135 | + |
| 136 | +### Preview with AsciiDoc |
| 137 | +- **Content**: Your custom AsciiDoc files |
| 138 | +- **Structure**: Simple document structure |
| 139 | +- **Elements**: Basic typography, code blocks, tables |
| 140 | +- **Speed**: Very fast iteration cycles |
| 141 | + |
| 142 | +### Preview with Antora |
| 143 | +- **Content**: Official Boost.URL documentation from GitHub |
| 144 | +- **Structure**: Actual Antora-generated documentation |
| 145 | +- **Elements**: Real typography, code blocks, tables, navigation, etc. |
| 146 | +- **Complexity**: Multi-level navigation, cross-references, production patterns |
| 147 | + |
| 148 | +## Configuration |
| 149 | + |
| 150 | +### AsciiDoc Preview Configuration |
| 151 | +The AsciiDoc preview uses your existing Boost.Build configuration. Ensure your `build.jam` or similar build files are properly configured for BoostLook integration. |
| 152 | + |
| 153 | +### Antora Preview Configuration (`doc/antora_specimen/playbook.yml`) |
| 154 | +```yaml |
| 155 | +site: |
| 156 | + title: Boostlook Antora Specimen |
| 157 | + url: / |
| 158 | + start_page: url::index.adoc |
| 159 | + |
| 160 | +content: |
| 161 | + sources: |
| 162 | + - url: https://github.com/boostorg/url.git |
| 163 | + branches: develop |
| 164 | + start_path: doc |
| 165 | + |
| 166 | +ui: |
| 167 | + bundle: |
| 168 | + url: https://github.com/boostorg/website-v2-docs/releases/download/ui-master/ui-bundle.zip |
| 169 | + snapshot: true |
| 170 | + |
| 171 | +output: |
| 172 | + dir: ./build/site |
| 173 | +``` |
| 174 | +
|
| 175 | +**Key Points:** |
| 176 | +- **No git submodules** - Content fetched automatically |
| 177 | +- **Remote UI bundle** - Official Boost documentation UI |
| 178 | +- **Your CSS overrides** - Applied automatically after build |
| 179 | +
|
| 180 | +## Preview Script Features |
| 181 | +
|
| 182 | +### AsciiDoc Preview Features |
| 183 | +- **File Watching**: Monitors `doc/` directory and root CSS files |
| 184 | +- **Automatic Building**: Uses Boost.Build (b2) for rendering |
| 185 | +- **Browser Integration**: Opens rendered HTML automatically |
| 186 | +- **Cross-platform**: Works on macOS, Linux, Windows |
| 187 | + |
| 188 | +### Antora Preview Features |
| 189 | +- **Automatic CSS Override**: Copies your current `boostlook.css` over outdated UI bundle version |
| 190 | +- **Smart Rebuilding**: CSS changes trigger full rebuild (processed by Ruby extension) |
| 191 | +- **Content Fetching**: Automatically downloads latest Boost.URL documentation |
| 192 | +- **File Hash Checking**: Avoids unnecessary rebuilds |
| 193 | + |
| 194 | +## Manual Testing Commands |
| 195 | + |
| 196 | +### Preview with AsciiDoc (Manual) |
| 197 | +```bash |
| 198 | +# Build once without watching |
| 199 | +b2 doc/specimen.html |
| 200 | +
|
| 201 | +# Serve locally (if needed) |
| 202 | +python -m http.server 8000 |
| 203 | +``` |
| 204 | + |
| 205 | +### Preview with Antora (Manual) |
| 206 | +```bash |
| 207 | +# Build once without watching |
| 208 | +cd doc/antora_specimen |
| 209 | +npx antora --fetch playbook.yml |
| 210 | +
|
| 211 | +# Copy your current CSS |
| 212 | +cp ../../boostlook.css build/site/_/css/boostlook.css |
| 213 | +
|
| 214 | +# Serve locally |
| 215 | +npx http-server build/site -p 8080 |
| 216 | +``` |
| 217 | + |
| 218 | +## Troubleshooting |
| 219 | + |
| 220 | +### Preview with AsciiDoc Issues |
| 221 | + |
| 222 | +**Script Not Running:** |
| 223 | +- Ensure Ruby, Asciidoctor, and Listen gem are installed |
| 224 | +- Verify Boost.Build (b2) is available: `which b2` |
| 225 | +- Check for error messages in terminal |
| 226 | + |
| 227 | +**Changes Not Reflecting:** |
| 228 | +- Ensure files are in monitored directories (`doc/` and root) |
| 229 | +- Manually refresh browser |
| 230 | +- Check build output for errors |
| 231 | + |
| 232 | +**Boost.Build (b2) Not Found:** |
| 233 | +- Install Boost.Build following [official instructions](https://boostorg.github.io/build/) |
| 234 | +- Ensure b2 is in your system PATH |
| 235 | +- Verify with: `b2 --version` |
| 236 | + |
| 237 | +### Preview with Antora Issues |
| 238 | + |
| 239 | +**Build Fails:** |
| 240 | +```bash |
| 241 | +# Check Antora installation |
| 242 | +npx antora --version |
| 243 | +
|
| 244 | +# Check if playbook is valid |
| 245 | +cd doc/antora_specimen |
| 246 | +npx antora playbook.yml --dry-run |
| 247 | +``` |
| 248 | + |
| 249 | +**CSS Not Updating:** |
| 250 | +```bash |
| 251 | +# Force complete rebuild |
| 252 | +ruby boostlook_antora_preview.rb --rebuild |
| 253 | +
|
| 254 | +# Manually verify CSS copy |
| 255 | +ls -la doc/antora_specimen/build/site/_/css/boostlook.css |
| 256 | +``` |
| 257 | + |
| 258 | +**Preview Script Issues:** |
| 259 | +```bash |
| 260 | +# Check if listen gem is installed |
| 261 | +gem list | grep listen |
| 262 | +
|
| 263 | +# Install if missing |
| 264 | +gem install listen |
| 265 | +``` |
| 266 | + |
| 267 | +**Node.js/Antora Issues:** |
| 268 | +- Ensure Node.js is installed: `node --version` |
| 269 | +- Install/reinstall Antora: ` |
0 commit comments