= Antora Default UI
// Settings:
-:idprefix:
-:idseparator: -
-:experimental:
:hide-uri-scheme:
-// URIs:
-:uri-antora: https://antora.org
-:uri-repo: https://gitlab.com/antora/antora-ui-default
-:uri-preview: https://antora.gitlab.io/antora-ui-default
-:uri-hbs: http://handlebarsjs.com
-:uri-gulp: http://gulpjs.com
-:uri-npm: https://npmjs.com
-:uri-node: https://nodejs.org
-:uri-nvm: https://github.com/creationix/nvm
-:uri-nvm-install: {uri-nvm}#installation
-:uri-git: https://git-scm.com
-:uri-git-dl: {uri-git}/downloads
-
-This project produces the {uri-preview}[default UI bundle] for documentation sites generated with {uri-antora}[Antora].
+// URLs:
+:url-antora: https://antora.org
+:url-repo: https://gitlab.com/antora/antora-ui-default
+:url-preview: https://antora.gitlab.io/antora-ui-default
+:url-hbs: https://handlebarsjs.com
+:url-gulp: https://gulpjs.com
+:url-npm: https://npmjs.com
+:url-node: https://nodejs.org
+:url-nvm: https://github.com/creationix/nvm
+:url-nvm-install: {url-nvm}#installation
+:url-git: https://git-scm.com
+:url-git-dl: {url-git}/downloads
+
+This project produces the {url-preview}[default UI bundle] for documentation sites generated with {url-antora}[Antora].
It contains the UI assets (page templates, CSS, JavaScript, images, etc.) and a Gulp build script.
The build can be used to preview the UI locally (featuring live updates), or to package it for consumption by the Antora site generator.
To understand how the UI works, let's begin by surveying the primary technologies used by the UI.
Handlebars (file extension: `.hbs`)::
-{uri-hbs}[Handlebars] is a "`logic-less`" templating engine used to create HTML from template files.
+{url-hbs}[Handlebars] is a "`logic-less`" templating engine used to create HTML from template files.
Templates contain placeholders (i.e., mustache expressions like `+{{{page.title}}}+`) into which content is injected from a model.
They also accommodate simple logic expressions for repeating content or including it conditionally (e.g., `+{{#each navigation}}+`) as well as partials (e.g., `+{{> header}}+`).
Gulp (script file: [.path]_gulpfile.js/index.js_)::
-{uri-gulp}[Gulp] is a build tool for JavaScript projects.
+{url-gulp}[Gulp] is a build tool for JavaScript projects.
It configures a collection of tasks that can be used to perform automated tasks such as compiling files, running a preview server, or publishing a release.
npm (command: `npm`)::
-npm manages software packages (i.e., software dependencies) that it downloads from {uri-npm}.
+npm manages software packages (i.e., software dependencies) that it downloads from {url-npm}.
Software this project uses includes libraries that handle compilation as well as shared assets such as font files that are distributed as npm packages.
npm is part of Node.js.
= Set up a UI Project
-// Settings:
-:idprefix:
-:idseparator: -
-// URIs:
-:uri-project: https://gitlab.com/antora/antora-ui-default.git
+:url-project: https://gitlab.com/antora/antora-ui-default.git
Before you can start working on the UI, you need to grab the sources and initialize the project.
-The sources can be {uri-project}[Antora's default UI] or an existing UI project structured to work with Antora.
+The sources can be {url-project}[Antora's default UI] or an existing UI project structured to work with Antora.
== Fetch the Default UI project
To start, clone the default UI project using git:
[subs=attributes+]
- $ git clone {uri-project} &&
+ $ git clone {url-project} &&
cd "`basename $_`"
The example above clones Antora's default UI project and then switches to the project folder on your filesystem.