|
| 1 | += Antora Default UI |
| 2 | +// Settings: |
| 3 | +:experimental: |
| 4 | +:hide-uri-scheme: |
| 5 | +// Project URLs: |
| 6 | +:url-project: https://gitlab.com/antora/antora-ui-default |
| 7 | +:url-preview: https://antora.gitlab.io/antora-ui-default |
| 8 | +:url-ci-pipelines: {url-project}/pipelines |
| 9 | +:img-ci-status: {url-project}/badges/master/pipeline.svg |
| 10 | +// External URLs: |
| 11 | +:url-antora: https://antora.org |
| 12 | +:url-antora-docs: https://docs.antora.org |
| 13 | +:url-git: https://git-scm.com |
| 14 | +:url-git-dl: {url-git}/downloads |
| 15 | +:url-gulp: http://gulpjs.com |
| 16 | +:url-opendevise: https://opendevise.com |
| 17 | +:url-nodejs: https://nodejs.org |
| 18 | +:url-nvm: https://github.com/creationix/nvm |
| 19 | +:url-nvm-install: {url-nvm}#installation |
| 20 | +:url-source-maps: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map |
| 21 | + |
| 22 | +image:{img-ci-status}[CI Status (GitLab CI), link={url-ci-pipelines}] |
| 23 | + |
| 24 | +This project is an archetype that demonstrates how to produce a UI bundle that can be used by {url-antora}[Antora] to generated a documentation site. |
| 25 | +You can see a preview of the default UI at {url-preview}. |
| 26 | + |
| 27 | +While the default UI is ready to be used with Antora, the intent is that you'll fork it and customize it for your own needs. |
| 28 | +It's intentionally minimalistic so as to give you a good starting point without requiring too much effort to customize. |
| 29 | + |
| 30 | +== Use the Default UI |
| 31 | + |
| 32 | +If you want to simply use the default UI for your Antora-generated site, add the following UI configuration to your playbook: |
| 33 | + |
| 34 | +[source,yaml] |
| 35 | +---- |
| 36 | +ui: |
| 37 | + bundle: |
| 38 | + url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/master/raw/build/ui-bundle.zip?job=bundle-stable |
| 39 | + snapshot: true |
| 40 | +---- |
| 41 | + |
| 42 | +NOTE: The `snapshot` flag tells Antora to fetch the UI when the `--fetch` command-line flag is present. |
| 43 | +This setting is required because updates to the UI bundle are pushed to the same URL. |
| 44 | +If the URL were to be unique, this setting would not be required. |
| 45 | + |
| 46 | +Read on to learn how to customize the default UI for your own documentation. |
| 47 | + |
| 48 | +== Development Quickstart |
| 49 | + |
| 50 | +This section offers a basic tutorial to teach you how to set up the default UI project, preview it locally, and bundle it for use with Antora. |
| 51 | +A more comprehensive tutorial can be found in the documentation at {url-antora-docs}. |
| 52 | + |
| 53 | +=== Prerequisites |
| 54 | + |
| 55 | +To preview and bundle the default UI, you need the following software on your computer: |
| 56 | + |
| 57 | +* {url-git}[git] (command: `git`) |
| 58 | +* {url-nodejs}[Node.js] (commands: `node` and `npm`) |
| 59 | +* {url-gulp}[Gulp CLI] (command: `gulp`) |
| 60 | + |
| 61 | +==== git |
| 62 | + |
| 63 | +First, make sure you have git installed. |
| 64 | + |
| 65 | + $ git --version |
| 66 | + |
| 67 | +If not, {url-git-dl}[download and install] the git package for your system. |
| 68 | + |
| 69 | +==== Node.js |
| 70 | + |
| 71 | +Next, make sure that you have Node.js installed (which also provides npm). |
| 72 | + |
| 73 | + $ node --version |
| 74 | + |
| 75 | +If this command fails with an error, you don't have Node.js installed. |
| 76 | +If the command doesn't report an LTS version of Node.js (e.g., v10.15.3), it means you don't have a suitable version of Node.js installed. |
| 77 | +In this guide, we'll be installing Node.js 10. |
| 78 | + |
| 79 | +While you can install Node.js from the official packages, we strongly recommend that you use {url-nvm}[nvm] (Node Version Manager) to manage your Node.js installation(s). |
| 80 | +Follow the {url-nvm-install}[nvm installation instructions] to set up nvm on your machine. |
| 81 | + |
| 82 | +Once you've installed nvm, open a new terminal and install Node.js 10 using the following command: |
| 83 | + |
| 84 | + $ nvm install 10 |
| 85 | + |
| 86 | +You can switch to this version of Node.js at any time using the following command: |
| 87 | + |
| 88 | + $ nvm use 10 |
| 89 | + |
| 90 | +To make Node.js 10 the default in new terminals, type: |
| 91 | + |
| 92 | + $ nvm alias default 10 |
| 93 | + |
| 94 | +Now that you have Node.js installed, you can proceed with installing the Gulp CLI. |
| 95 | + |
| 96 | +==== Gulp CLI |
| 97 | + |
| 98 | +You'll need the Gulp command-line interface (CLI) to run the build. |
| 99 | +The Gulp CLI package provides the `gulp` command which, in turn, executes the version of Gulp declared by the project. |
| 100 | + |
| 101 | +You can install the Gulp CLI globally (which resolves to a location in your user directory if you're using nvm) using the following command: |
| 102 | + |
| 103 | + $ npm install -g gulp-cli |
| 104 | + |
| 105 | +Verify the Gulp CLI is installed and on your PATH by running: |
| 106 | + |
| 107 | + $ gulp --version |
| 108 | + |
| 109 | +If you prefer to install global packages using Yarn, run this command instead: |
| 110 | + |
| 111 | + $ yarn global add gulp-cli |
| 112 | + |
| 113 | +Alternately, you can use the `gulp` command that is installed by the project's dependencies. |
| 114 | + |
| 115 | + $ $(npm bin)/gulp --version |
| 116 | + |
| 117 | +Now that you have the prerequisites installed, you can fetch and build the UI project. |
| 118 | + |
| 119 | +=== Clone and Initialize the UI Project |
| 120 | + |
| 121 | +Clone the default UI project using git: |
| 122 | + |
| 123 | +[subs=attributes+] |
| 124 | + $ git clone {url-project} && |
| 125 | + cd "`basename $_`" |
| 126 | + |
| 127 | +The example above clones Antora's default UI project and then switches to the project folder on your filesystem. |
| 128 | +Stay in this project folder when executing all subsequent commands. |
| 129 | + |
| 130 | +Use npm to install the project's dependencies inside the project. |
| 131 | +In your terminal, execute the following command: |
| 132 | + |
| 133 | + $ npm install |
| 134 | + |
| 135 | +This command installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project. |
| 136 | +This folder does not get included in the UI bundle and should _not_ be committed to the source control repository. |
| 137 | + |
| 138 | +[TIP] |
| 139 | +==== |
| 140 | +If you prefer to install packages using Yarn, run this command instead: |
| 141 | +
|
| 142 | + $ yarn |
| 143 | +==== |
| 144 | + |
| 145 | +=== Preview the UI |
| 146 | + |
| 147 | +The default UI project is configured to preview offline. |
| 148 | +The files in the [.path]_preview-src/_ folder provide the sample content that allow you to see the UI in action. |
| 149 | +In this folder, you'll primarily find pages written in AsciiDoc. |
| 150 | +These pages provide a representative sample and kitchen sink of content from the real site. |
| 151 | + |
| 152 | +To build the UI and preview it in a local web server, run the `preview` command: |
| 153 | + |
| 154 | + $ gulp preview |
| 155 | + |
| 156 | +You'll see a URL listed in the output of this command: |
| 157 | + |
| 158 | +.... |
| 159 | +[12:00:00] Starting server... |
| 160 | +[12:00:00] Server started http://localhost:5252 |
| 161 | +[12:00:00] Running server |
| 162 | +.... |
| 163 | + |
| 164 | +Navigate to this URL to preview the site locally. |
| 165 | + |
| 166 | +While this command is running, any changes you make to the source files will be instantly reflected in the browser. |
| 167 | +This works by monitoring the project for changes, running the `preview:build` task if a change is detected, and sending the updates to the browser. |
| 168 | + |
| 169 | +Press kbd:[Ctrl+C] to stop the preview server and end the continuous build. |
| 170 | + |
| 171 | +=== Package for Use with Antora |
| 172 | + |
| 173 | +If you need to package the UI so you can use it to generate the documentation site locally, run the following command: |
| 174 | + |
| 175 | + $ gulp bundle |
| 176 | + |
| 177 | +If any errors are reported by lint, you'll need to fix them. |
| 178 | + |
| 179 | +When the command completes successfully, the UI bundle will be available at [.path]_build/ui-bundle.zip_. |
| 180 | +You can point Antora at this bundle using the `--ui-bundle-url` command-line option. |
| 181 | + |
| 182 | +If you have the preview running, and you want to bundle without causing the preview to be clobbered, use: |
| 183 | + |
| 184 | + $ gulp bundle:pack |
| 185 | + |
| 186 | +The UI bundle will again be available at [.path]_build/ui-bundle.zip_. |
| 187 | + |
| 188 | +==== Source Maps |
| 189 | + |
| 190 | +The build consolidates all the CSS and client-side JavaScript into combined files, [.path]_site.css_ and [.path]_site.js_, respectively, in order to reduce the size of the bundle. |
| 191 | +{url-source-maps}[Source maps] correlate these combined files with their original sources. |
| 192 | + |
| 193 | +This "`source mapping`" is accomplished by generating additional map files that make this association. |
| 194 | +These map files sit adjacent to the combined files in the build folder. |
| 195 | +The mapping they provide allows the debugger to present the original source rather than the obfuscated file, an essential tool for debugging. |
| 196 | + |
| 197 | +In preview mode, source maps are enabled automatically, so there's nothing you have to do to make use of them. |
| 198 | +If you need to include source maps in the bundle, you can do so by setting the `SOURCEMAPS` environment varible to `true` when you run the bundle command: |
| 199 | + |
| 200 | + $ SOURCEMAPS=true gulp bundle |
| 201 | + |
| 202 | +In this case, the bundle will include the source maps, which can be used for debuggging your production site. |
| 203 | + |
| 204 | +== Copyright and License |
| 205 | + |
| 206 | +Copyright (C) 2017-2019 OpenDevise Inc. and the Antora Project. |
| 207 | + |
| 208 | +Use of this software is granted under the terms of the https://www.mozilla.org/en-US/MPL/2.0/[Mozilla Public License Version 2.0] (MPL-2.0). |
| 209 | +See link:LICENSE[] to find the full license text. |
| 210 | + |
| 211 | +== Authors |
| 212 | + |
| 213 | +Development of Antora is led and sponsored by {url-opendevise}[OpenDevise Inc]. |
0 commit comments