Merge branch 'update-with-latest-master' into ods-docs-ui

.gitlab-ci.yml

@@ -1,29 +1,29 @@
 image: node:10.14.2-alpine
 stages: [setup, verify, deploy]
-yarn:
+install:
  stage: setup
  cache:
  paths:
- - .yarn-cache/
+ - .cache/npm
  script:
- - &run_yarn
- yarn --cache-folder=.yarn-cache --pure-lockfile > /dev/null
+ - &npm_install
+ npm install --quiet --no-progress --cache=.cache/npm
 lint:
  stage: verify
  cache: &pull_cache
  policy: pull
  paths:
- - .yarn-cache/
+ - .cache/npm
  script:
- - *run_yarn
+ - *npm_install
  - node_modules/.bin/gulp lint
 bundle-stable:
  stage: deploy
  only:
  - master@antora/antora-ui-default
  cache: *pull_cache
  script:
- - *run_yarn
+ - *npm_install
  - node_modules/.bin/gulp bundle
  artifacts:
  paths:
@@ -34,7 +34,7 @@ bundle-dev:
  - master
  cache: *pull_cache
  script:
- - *run_yarn
+ - *npm_install
  - node_modules/.bin/gulp bundle
  artifacts:
  expire_in: 1 day # unless marked as keep from job page
@@ -46,7 +46,7 @@ pages:
  - master@antora/antora-ui-default
  cache: *pull_cache
  script:
- - *run_yarn
+ - *npm_install
  - node_modules/.bin/gulp preview:build
  # FIXME figure out a way to avoid copying these files to preview site
  - rm -rf public/_/{helpers,layouts,partials}

README.adoc

@@ -9,47 +9,53 @@
 :img-ci-status: {url-project}/badges/master/pipeline.svg
 // External URLs:
 :url-antora: https://antora.org
+:url-antora-docs: https://docs.antora.org
 :url-git: https://git-scm.com
 :url-git-dl: {url-git}/downloads
 :url-gulp: http://gulpjs.com
 :url-opendevise: https://opendevise.com
-:url-node: https://nodejs.org
+:url-nodejs: https://nodejs.org
 :url-nvm: https://github.com/creationix/nvm
 :url-nvm-install: {url-nvm}#installation
-:url-yarn: https://yarnpkg.com
 
 image:{img-ci-status}[CI Status (GitLab CI), link={url-ci-pipelines}]
 
-This project is an archetype that demonstrates how to produce a UI bundle for use in a documentation site generated with {url-antora}[Antora].
+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.
 You can see a preview of the default UI at {url-preview}.
 
+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.
+It's intentionally minimalistic so as to give you a good starting point without requiring too much effort to customize.
+
 == Use the Default UI
 
-If you want to use the default UI for your Antora-generated site, add the following UI configuration to your playbook:
+If you want to simply use the default UI for your Antora-generated site, add the following UI configuration to your playbook:
 
-[source,yaml,subs=attributes+]
+[source,yaml]
 ----
 ui:
  bundle:
  url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/master/raw/build/ui-bundle.zip?job=bundle-stable
  snapshot: true
 ----
 
-Read on to learn how to use your own build of the default UI.
+NOTE: The `snapshot` flag tells Antora to fetch the UI when the `--fetch` command-line flag is present.
+This setting is required because updates to the UI bundle are pushed to the same URL.
+If the URL were to be unique, this setting would not be required.
+
+Read on to learn how to custom the default UI for your own documentation.
 
-== Quickstart
+== Development Quickstart
 
-This section offers a basic tutorial for learning how to preview the default UI and bundle it for use with Antora.
-A more comprehensive tutorial will be made available in the documentation.
+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.
+A more comprehensive can be found in the documentation at {url-antora-docs}.
 
 === Prerequisites
 
 To preview and bundle the default UI, you need the following software on your computer:
 
 * {url-git}[git] (command: `git`)
-* {url-node}[Node] (command: `node`)
+* {url-nodejs}[Node.js] (command: `node`)
 * {url-gulp}[Gulp CLI] (command: `gulp`)
-* {url-yarn}[Yarn] (command: `yarn`)
 
 ==== git
 
@@ -59,50 +65,54 @@ First, make sure you have git installed.
 
 If not, {url-git-dl}[download and install] the git package for your system.
 
-==== Node
+==== Node.js
 
-Next, make sure that you have Node.js (herein "`Node`") installed.
+Next, make sure that you have Node.js installed.
 
  $ node --version
 
-If this command fails with an error, you don't have Node installed.
-If the command doesn't report a Node LTS version (e.g., v10.14.2), you don't have a suitable version of Node installed.
+If this command fails with an error, you don't have Node.js installed.
+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.
+In this guide, we'll be installing Node.js 10.
 
-While you can install Node from the official packages, we strongly recommend that you use {url-nvm}[nvm] (Node Version Manager) to install and manage Node.
+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).
 Follow the {url-nvm-install}[nvm installation instructions] to set up nvm on your machine.
 
-Once you've installed nvm, open a new terminal and install Node 10 using the following command:
+Once you've installed nvm, open a new terminal and install Node.js 10 using the following command:
 
  $ nvm install 10
 
-You can switch to this version of Node at any time using the following command:
+You can switch to this version of Node.js at any time using the following command:
 
  $ nvm use 10
 
-To make Node 10 the default in new terminals, type:
+To make Node.js 10 the default in new terminals, type:
 
  $ nvm alias default 10
 
-Now that you have Node 10 installed, you can proceed with installing the Gulp CLI and Yarn.
+Now that you have Node.js installed, you can proceed with installing the Gulp CLI.
 
 ==== Gulp CLI
 
-Next, you'll need the Gulp command-line interface (CLI).
-This package provides the `gulp` command which executes the version of Gulp declared by the project.
+You'll need the Gulp command-line interface (CLI) to run the build.
+The Gulp CLI package provides the `gulp` command which, in turn, executes the version of Gulp declared by the project.
 
 You should install the Gulp CLI globally (which resolves to a location in your user directory if you're using nvm) using the following command:
 
  $ npm install -g gulp-cli
 
-==== Yarn
+Verify the Gulp CLI is installed and on your PATH by running:
 
-Finally, you'll need Yarn, which is the preferred package manager for the Node ecosystem.
+ $ gulp --version
 
-You should install Yarn globally (which resolves to a location in your user directory if you're using nvm) using the following command:
+[TIP]
+====
+If you prefer to install global packages using Yarn, run this command instead:
 
- $ npm install -g yarn
+ $ yarn global add gulp-cli
+====
 
-Now that you have the prerequisites installed, you can fetch and build the default UI project.
+Now that you have the prerequisites installed, you can fetch and build the UI project.
 
 === Clone and Initialize the UI Project
 
@@ -113,21 +123,29 @@ Clone the default UI project using git:
  cd "`basename $_`"
 
 The example above clones Antora's default UI project and then switches to the project folder on your filesystem.
-Stay in this project folder in order to initialize the project using Yarn.
+Stay in this project folder when executing all subsequent commands.
 
-Use Yarn to install the project's dependencies.
-In your terminal, execute the following command (while inside the project folder):
+Use npm to install the project's dependencies inside the project.
+In your terminal, execute the following command:
 
- $ yarn install
+ $ npm install
 
 This command installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project.
-This folder does not get included in the UI bundle.
+This folder does not get included in the UI bundle and should _not_ be committed to the source control repository.
+
+[TIP]
+====
+If you prefer to install packages using Yarn, run this command instead:
+
+ $ yarn
+====
 
 === Preview the UI
 
 The default UI project is configured to preview offline.
-That's what the files in the [.path]_preview-src/_ folder are for.
-This folder contains HTML file fragments that provide a representative sample of content from the site.
+The files in the [.path]_preview-src/_ folder provide the sample content that allow you to see the UI in action.
+In this folder, you'll primarily find pages written in AsciiDoc.
+These pages provide a representative sample and kitchen sink of content from the real site.
 
 To build the UI and preview it in a local web server, run the `preview` command:
 
@@ -136,13 +154,12 @@ To build the UI and preview it in a local web server, run the `preview` command:
 You'll see a URL listed in the output of this command:
 
 ....
-[12:59:28] Starting 'preview:serve'...
-[12:59:28] Starting server...
-[12:59:28] Server started http://localhost:5252
-[12:59:28] Running server
+[12:00:00] Starting server...
+[12:00:00] Server started http://localhost:5252
+[12:00:00] Running server
 ....
 
-Navigate to that URL to view the preview site.
+Navigate to this URL to preview the site locally.
 
 While this command is running, any changes you make to the source files will be instantly reflected in the browser.
 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.
@@ -151,12 +168,14 @@ Press kbd:[Ctrl+C] to stop the preview server and end the continuous build.
 
 === Package for Use with Antora
 
-If you need to bundle the UI in order to preview the UI on the real site in local development, run the following command:
+If you need to package the UI so you can use it to generate the documentation site locally, run the following command:
 
  $ gulp bundle
 
-The UI bundle will be available at [.path]_build/ui-bundle.zip_.
-You can then point Antora at this bundle using the `--ui-bundle-url` command-line option.
+If any errors are reported by lint, you'll need to fix them.
+
+When the command completes successfully, the UI bundle will be available at [.path]_build/ui-bundle.zip_.
+You can point Antora at this bundle using the `--ui-bundle-url` command-line option.
 
 If you have the preview running, and you want to bundle without causing the preview to be clobbered, use:
 
@@ -166,7 +185,7 @@ The UI bundle will again be available at [.path]_build/ui-bundle.zip_.
 
 == Copyright and License
 
-Copyright (C) 2017-2018 OpenDevise Inc. and the Antora Project.
+Copyright (C) 2017-2019 OpenDevise Inc. and the Antora Project.
 
 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).
 See link:LICENSE[] to find the full license text.

docs/modules/ROOT/nav.adoc

@@ -4,6 +4,7 @@
 * xref:development-workflow.adoc[UI Development Workflow]
 * xref:templates.adoc[Work with the Handlebars Templates]
 * xref:stylesheets.adoc[Work with the CSS Stylesheets]
+ ** xref:add-fonts.adoc[Add Fonts]
 * xref:style-guide.adoc[UI Element Styles]
 ** xref:inline-text-styles.adoc[Inline Text]
 ** xref:admonition-styles.adoc[Admonitions]

docs/modules/ROOT/pages/add-fonts.adoc

@@ -0,0 +1,102 @@
+= Add Fonts
+
+This page explains how to add new fonts to your UI.
+These instructions assume you've forked the default UI and are able to customize it.
+
+There are two steps involved:
+
+. Add the font to your UI project
+. Add a font-face declaration to your stylesheet
+
+You can then reference the font family in your stylesheet.
+
+How you reference the font file in the font-face declaration depends on how you decide to manage it.
+You can manage the font with npm or download it manually and add it directly to your UI project.
+The following sections describe each approach in turn.
+
+== npm managed
+
+You can use npm (or Yarn) to manage the font.
+This approach saves you from having to store the font file directly in your UI project.
+Here are the steps involved.
+
+. Use npm (or Yarn) to install the font files from a package (e.g., https://www.npmjs.com/package/typeface-open-sans[typeface-open-sans])
+
+ $ npm install --save typeface-open-sans
+
+. In [.path]_src/css_, add a corresponding CSS file (e.g., [.path]_typeface-open-sans.css_)
+. In that file, declare the font face:
++
+[source,css]
+----
+@font-face {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ local("Open Sans"),
+ local("Open Sans-Regular"),
+ url(~typeface-open-sans/files/open-sans-latin-400.woff) format("woff")
+}
+----
++
+The Gulp build recognizes the `~` URL prefix and copies the font from the npm package to the build folder (and hence bundle).
+
+. Repeat the previous step for each font style and weight you want to use from that package.
+. Change the CSS to use your newly imported font:
++
+[source,css]
+----
+html {
+ font-family: "Open Sans", sans;
+}
+----
+
+. Test the new font by previewing your UI:
+
+ $ gulp preview
+
+If you see the new font, you've now successfully added it to your UI.
+If you aren't sure, look for the https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts[All fonts on page] section in your browser's developer tools to see whether the font was loaded.
+
+== Manual
+
+A simpler approach to adding fonts is to store them directly in your project.
+Here are the steps involved.
+
+. Download the font files and add them to the [.path]_src/font_ folder.
+Create this folder if it does not exist.
+. In [.path]_src/css_, add a corresponding CSS file (e.g., [.path]_typeface-open-sans.css_)
+. In that file, declare the font face:
++
+[source,css]
+----
+@font-face {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ local("Open Sans"),
+ local("Open Sans-Regular"),
+ url(../font/open-sans-latin-400.woff) format("woff")
+}
+----
++
+Note that the path is a relative path starting from the [.path]_src/css_ folder to the [.path]_src/font_ folder.
+
+. Repeat the previous step for each font style and weight you want to use.
+. Change the CSS to use your newly imported font:
++
+[source,css]
+----
+html {
+ font-family: "Open Sans", sans;
+}
+----
+
+. Test the new font by previewing your UI:
+
+ $ gulp preview
+
+If you see the new font, you've now successfully added it to your UI.
+If you aren't sure, look for the https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts[All fonts on page] section in your browser's developer tools to see whether the font was loaded.