Skip to content

Commit 667470f

Browse files
committed
Merge Antora Default UI into main
This commit contains an altered version of the Antora Default UI.
2 parents bb6d265 + 67366af commit 667470f

File tree

120 files changed

+25263
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+25263
-0
lines changed

.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

.eslintrc

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"extends": "standard",
3+
"rules": {
4+
"arrow-parens": ["error", "always"],
5+
"comma-dangle": ["error", {
6+
"arrays": "always-multiline",
7+
"objects": "always-multiline",
8+
"imports": "always-multiline",
9+
"exports": "always-multiline"
10+
}],
11+
"max-len": [1, 120, 2],
12+
"spaced-comment": "off"
13+
}
14+
}

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/build/
2+
/node_modules/
3+
/public/

.gitlab-ci.yml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
image: node:10.14.2-stretch
2+
stages: [setup, verify, deploy]
3+
install:
4+
stage: setup
5+
cache:
6+
paths:
7+
- .cache/npm
8+
script:
9+
- &npm_install
10+
npm install --quiet --no-progress --cache=.cache/npm
11+
lint:
12+
stage: verify
13+
cache: &pull_cache
14+
policy: pull
15+
paths:
16+
- .cache/npm
17+
script:
18+
- *npm_install
19+
- node_modules/.bin/gulp lint
20+
bundle-stable:
21+
stage: deploy
22+
only:
23+
- master@antora/antora-ui-default
24+
cache: *pull_cache
25+
script:
26+
- *npm_install
27+
- node_modules/.bin/gulp bundle
28+
artifacts:
29+
paths:
30+
- build/ui-bundle.zip
31+
bundle-dev:
32+
stage: deploy
33+
except:
34+
- master
35+
cache: *pull_cache
36+
script:
37+
- *npm_install
38+
- node_modules/.bin/gulp bundle
39+
artifacts:
40+
expire_in: 1 day # unless marked as keep from job page
41+
paths:
42+
- build/ui-bundle.zip
43+
pages:
44+
stage: deploy
45+
only:
46+
- master@antora/antora-ui-default
47+
cache: *pull_cache
48+
script:
49+
- *npm_install
50+
- node_modules/.bin/gulp preview:build
51+
# FIXME figure out a way to avoid copying these files to preview site
52+
- rm -rf public/_/{helpers,layouts,partials}
53+
artifacts:
54+
paths:
55+
- public

.gulp.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"description": "Build tasks for the Antora default UI project",
3+
"flags.tasksDepth": 1
4+
}

.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
10

.stylelintrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "stylelint-config-standard",
3+
"rules": {
4+
"comment-empty-line-before": null,
5+
"no-descending-specificity": null,
6+
}
7+
}

README.adoc

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
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].

docs/antora.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
name: antora-ui-default
2+
title: Antora Default UI
3+
version: master
4+
nav:
5+
- modules/ROOT/nav.adoc

docs/modules/ROOT/nav.adoc

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
* xref:prerequisites.adoc[UI Development Prerequisites]
2+
* xref:set-up-project.adoc[Set up a UI Project]
3+
* xref:build-preview-ui.adoc[Build and Preview the UI]
4+
* xref:development-workflow.adoc[UI Development Workflow]
5+
* xref:templates.adoc[Work with the Handlebars Templates]
6+
* xref:stylesheets.adoc[Work with the CSS Stylesheets]
7+
** xref:add-fonts.adoc[Add Fonts]
8+
* xref:style-guide.adoc[UI Element Styles]
9+
** xref:inline-text-styles.adoc[Inline Text]
10+
** xref:admonition-styles.adoc[Admonitions]
11+
** xref:list-styles.adoc[Lists]
12+
** xref:sidebar-styles.adoc[Sidebars]
13+
** xref:ui-macro-styles.adoc[UI Macros]

0 commit comments

Comments
 (0)