mirror of
https://github.com/boostorg/unordered-ui-bundle.git
synced 2026-01-19 04:42:15 +00:00
switch from Yarn to npm
This commit is contained in:
@@ -1,21 +1,21 @@
|
||||
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 --no-audit
|
||||
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
|
||||
@@ -23,7 +23,7 @@ bundle-stable:
|
||||
- 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}
|
||||
|
||||
105
README.adoc
105
README.adoc
@@ -9,25 +9,28 @@
|
||||
: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:
|
||||
@@ -35,21 +38,24 @@ ui:
|
||||
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.
|
||||
|
||||
== Quickstart
|
||||
Read on to learn how to custom the default UI for your own documentation.
|
||||
|
||||
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.
|
||||
== Development Quickstart
|
||||
|
||||
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.
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
:uri-preview: https://antora.gitlab.io/antora-ui-default
|
||||
:uri-hbs: http://handlebarsjs.com
|
||||
:uri-gulp: http://gulpjs.com
|
||||
:uri-yarn: https://yarnpkg.com
|
||||
:uri-npm: https://npmjs.com
|
||||
:uri-node: https://nodejs.org
|
||||
:uri-nvm: https://github.com/creationix/nvm
|
||||
@@ -53,20 +52,20 @@ Gulp (script file: [.path]_gulpfile.js/index.js_)::
|
||||
{uri-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.
|
||||
|
||||
Yarn (command: `yarn`)::
|
||||
{uri-yarn}[Yarn] manages software packages (i.e., software dependencies) that it downloads from {uri-npm}.
|
||||
npm (command: `npm`)::
|
||||
npm manages software packages (i.e., software dependencies) that it downloads from {uri-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.
|
||||
(While npm itself is often used to install Yarn, we do not use npm for any other purpose).
|
||||
npm is part of Node.js.
|
||||
|
||||
package.json:::
|
||||
This file keeps track of the dependencies (described using fuzzy versions) that Yarn should fetch.
|
||||
This file keeps track of the dependencies (described using fuzzy versions) that npm (or Yarn) should fetch.
|
||||
|
||||
yarn.lock:::
|
||||
This file contains a report of which dependencies Yarn resolved.
|
||||
This information ensures that the dependency resolution is reproducible.
|
||||
package-lock.json:::
|
||||
This file contains a report of which dependencies npm resolved.
|
||||
This information ensures that dependency resolution is reproducible.
|
||||
|
||||
node_modules/:::
|
||||
A local cache of resolved dependencies that Yarn (or npm) fetches.
|
||||
A local cache of resolved dependencies that npm (or Yarn) fetches.
|
||||
|
||||
PostCSS::
|
||||
This project does not use a CSS preprocessor such as Sass or LESS.
|
||||
@@ -96,7 +95,7 @@ gulpfile.js/
|
||||
lib/
|
||||
tasks/
|
||||
package.json
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
src/
|
||||
css/
|
||||
base.css
|
||||
|
||||
@@ -6,18 +6,16 @@
|
||||
:url-nvm: https://github.com/creationix/nvm
|
||||
:url-node: https://nodejs.org
|
||||
:url-gulp: http://gulpjs.com
|
||||
:url-yarn: https://yarnpkg.com
|
||||
:url-git: https://git-scm.com
|
||||
:url-git-dl: {url-git}/downloads
|
||||
:url-node-releases: https://nodejs.org/en/about/releases/
|
||||
// These prerequisite instructions are less detailed than Antora's prerequisite instructions, I don't know if this is a concern or not.
|
||||
|
||||
An Antora UI project is based on tools built atop Node.js (aka Node), namely:
|
||||
An Antora UI project is based on tools built atop Node.js, namely:
|
||||
|
||||
* {url-node}[Node] (command: `node`)
|
||||
* {url-node}[Node.js] (commands: `node` and `npm`)
|
||||
** {url-nvm}[nvm] (optional, but strongly recommended)
|
||||
* {url-gulp}[Gulp] (command: `gulp`)
|
||||
* {url-yarn}[Yarn] (command: `yarn`)
|
||||
* {url-gulp}[Gulp CLI] (command: `gulp`)
|
||||
|
||||
You also need {url-git}[git] (command: `git`) to pull down the project and push updates to it.
|
||||
|
||||
@@ -29,26 +27,26 @@ First, make sure you have git installed.
|
||||
|
||||
If not, {url-git-dl}[download and install] the git package for your system.
|
||||
|
||||
== Node
|
||||
== Node.js
|
||||
|
||||
You need Node installed on your machine to use Antora, including the default UI.
|
||||
Antora follows Node's release schedule, so we advise that you choose an active long term support (LTS) release of Node.
|
||||
We recommend using the latest active Node LTS version.
|
||||
While you can use other versions of Node, Antora is only tested against LTS releases.
|
||||
You need Node.js installed on your machine to use Antora, including the default UI.
|
||||
Antora follows the Node.js release schedule, so we advise that you choose an active long term support (LTS) release of Node.js.
|
||||
We recommend using the latest active Node.js LTS version.
|
||||
While you can use other versions of Node.js, Antora is only tested against LTS releases.
|
||||
|
||||
To check whether you have Node installed, and which version, open a terminal and type:
|
||||
To check whether you have Node.js installed, and which version, open a terminal and type:
|
||||
|
||||
$ node --version
|
||||
|
||||
You should see a version string, such as:
|
||||
|
||||
v10.14.2
|
||||
v10.15.3
|
||||
|
||||
If the command fails with an error, it means you don't have Node installed.
|
||||
The best way to install Node is to use nvm (Node Version Manager).
|
||||
Refer to xref:antora:install:linux-requirements.adoc#install-nvm[Install nvm and Node (Linux)], xref:antora:install:macos-requirements.adoc#install-nvm[Install nvm and Node (macOS)], or xref:antora:install:windows-requirements.adoc#install-nvm[Install nvm and Node (Windows)] for instructions.
|
||||
If the command fails with an error, it means you don't have Node.js installed.
|
||||
The best way to install Node.js is to use nvm (Node Version Manager).
|
||||
Refer to xref:antora:install:linux-requirements.adoc#install-nvm[Install nvm and Node.js (Linux)], xref:antora:install:macos-requirements.adoc#install-nvm[Install nvm and Node.js (macOS)], or xref:antora:install:windows-requirements.adoc#install-nvm[Install nvm and Node.js (Windows)] for instructions.
|
||||
|
||||
Once you have Node installed, you can proceed with installing Gulp's CLI and Yarn.
|
||||
Once you have Node.js installed, you can proceed with installing the Gulp CLI.
|
||||
|
||||
== Gulp CLI
|
||||
|
||||
@@ -58,16 +56,4 @@ You should install the Gulp CLI globally (which resolves to a location in your u
|
||||
|
||||
$ npm install -g gulp-cli
|
||||
|
||||
== Yarn
|
||||
|
||||
Finally, you'll need Yarn, which is the preferred package manager for the Node ecosystem.
|
||||
You'll need to use the `npm` command to install Yarn, though this is the last time you'll use the `npm` command.
|
||||
You should install Yarn globally (which resolves to a location in your user directory if you're using nvm) using the following command:
|
||||
|
||||
$ npm install -g yarn
|
||||
|
||||
Verify Yarn is installed by checking the version:
|
||||
|
||||
$ yarn --version
|
||||
|
||||
Now that you have Node, Yarn, and Gulp installed, you're ready to set up the project.
|
||||
Now that you have Node.js and Gulp installed, you're ready to set up the project.
|
||||
|
||||
@@ -17,28 +17,28 @@ To start, 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 in order to initialize the project using npm.
|
||||
|
||||
== Install dependencies
|
||||
|
||||
Next, you'll need to initialize the project.
|
||||
Initializing the project essentially means downloading and installing the dependencies into the project.
|
||||
That's the job of Yarn.
|
||||
That's the job of npm.
|
||||
|
||||
In your terminal, execute the following command (while inside the project folder):
|
||||
|
||||
$ 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.
|
||||
The folder is safe to delete, though Yarn does a great job of managing it.
|
||||
The folder is safe to delete, though npm does a great job of managing it.
|
||||
|
||||
You'll notice another file which seems to be relevant here, [.path]_yarn.lock_.
|
||||
Yarn uses this file to determine which specific version of a dependency to use, since versions in [.path]_package.json_ are typically just a range.
|
||||
You'll notice another file which seems to be relevant here, [.path]_package-lock.json_.
|
||||
npm uses this file to determine which concrete version of a dependency to use, since versions in [.path]_package.json_ are typically just a range.
|
||||
The information in this file makes the build reproducible across different machines and runs.
|
||||
|
||||
If a new dependency must be resolved that isn't yet listed in [.path]_yarn.lock_, Yarn will update this file with the new information when you run `yarn install`.
|
||||
Therefore, you're advised to commit this file into the repository whenever it changes.
|
||||
If a new dependency must be resolved that isn't yet listed in [.path]_package-lock.json_, npm will update this file with the new information when you run `npm install`.
|
||||
Therefore, you're advised to commit the [.path]_package-lock.json_ file into the repository whenever it changes.
|
||||
|
||||
== Supported build tasks
|
||||
|
||||
|
||||
11604
package-lock.json
generated
Normal file
11604
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user