Commit e5711ccf authored by Dan Allen's avatar Dan Allen

merge !67

resolves #73 add support for writing preview pages in AsciiDoc
parents 24f42972 f8980ea2
......@@ -126,7 +126,7 @@ This folder does not get included in the UI bundle.
=== Preview the UI
The default UI project is configured to preview offline.
That's what the files in the [.path]_preview-site-src/_ folder are for.
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.
To build the UI and preview it in a local web server, run the `preview` command:
......@@ -162,6 +162,8 @@ If you have the preview running, and you want to bundle without causing the prev
$ gulp bundle:pack
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.
......
......@@ -10,7 +10,7 @@ endif::[]
== Build Preview Site
Once you've modified the site UI, the first thing you'll want to do is check out how it looks.
That's what the files in the [.path]_preview-site-src/_ folder are for.
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 preview saves you from having to generate the whole site just to test the UI.
These files should give you an idea of how the UI will look when applied to the actual site.
......@@ -24,7 +24,7 @@ The next two sections explain how to use these modes.
=== Build Once
To build the UI once for preview, then stop, execute the `build-preview` task using the following command:
To build the UI once for preview, then stop, execute the following command:
$ gulp preview:build
......@@ -33,7 +33,7 @@ To view the preview pages, navigate to the HTML pages in the [.path]_public_ dir
=== Build Continuously
To avoid the need to run the `preview:build` task over and over, you can use the `preview` command instead to have it run continuously.
To avoid the need to run the `preview:build` task over and over while developing, you can use the `preview` command instead to have it run continuously.
This task also launches a local HTTP server so updates get synchronized with the browser (i.e., "`live reload`").
To launch the preview server, execute the following command:
......@@ -65,3 +65,9 @@ The `bundle` command also invokes the `lint` command to check that the CSS and J
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 you have the preview running, and you want to bundle without causing the preview to be clobbered, use:
$ gulp bundle:pack
The UI bundle will again be available at [.path]_build/ui-bundle.zip_.
......@@ -93,7 +93,8 @@ Here's how the files are structured in the UI project:
README.adoc
gulpfile.js/
index.js
...
lib/
tasks/
package.json
yarn.lock
src/
......@@ -122,7 +123,7 @@ src/
...
vendor/
highlight.js
preview-site-src/
preview-src/
index.html
ui-model.yml
....
......
......@@ -5,7 +5,7 @@ const task = require('./lib/task')
const bundleName = 'ui'
const buildDir = 'build'
const previewSrcDir = 'preview-site-src'
const previewSrcDir = 'preview-src'
const previewDestDir = 'public'
const srcDir = 'src'
const destDir = `${previewDestDir}/_`
......
......@@ -60,7 +60,12 @@ module.exports = (src, dest, preview) => () => {
.pipe(uglify()),
vfs.src('css/site.css', opts).pipe(postcss(postcssPlugins)),
vfs.src('font/*.woff*(2)', opts),
vfs.src('img/**/*.{jpg,ico,png,svg}', opts).pipe(imagemin()),
vfs.src('img/**/*.{jpg,ico,png,svg}', opts).pipe(imagemin([
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng(),
imagemin.svgo({ plugins: [{ removeViewBox: false }] }),
])),
vfs.src('helpers/*.js', opts),
vfs.src('layouts/*.hbs', opts),
vfs.src('partials/*.hbs', opts)
......
'use strict'
const asciidoctor = require('asciidoctor.js')()
const fs = require('fs-extra')
const handlebars = require('handlebars')
const { obj: map } = require('through2')
const merge = require('merge-stream')
const path = require('path')
const ospath = require('path')
const path = ospath.posix
const requireFromString = require('require-from-string')
const vfs = require('vinyl-fs')
const yaml = require('js-yaml')
module.exports = (src, dest, siteSrc, siteDest, sink = () => map((_0, _1, next) => next()), layouts = {}) => () =>
const ASCIIDOC_ATTRIBUTES = {
experimental: '',
icons: 'font',
sectanchors: '',
'source-highlighter': 'highlight.js',
}
module.exports = (src, dest, siteSrc, siteDest, sink = () => map(), layouts = {}) => () =>
Promise.all([
loadSampleUiModel(siteSrc),
toPromise(merge(compileLayouts(src, layouts), registerPartials(src), registerHelpers(src))),
]).then(([uiModel]) =>
]).then(([baseUiModel]) => Object.assign(baseUiModel, { env: process.env })).then((baseUiModel) =>
vfs
.src('**/*.html', { base: siteSrc, cwd: siteSrc })
.src('**/*.adoc', { base: siteSrc, cwd: siteSrc })
.pipe(
map((file, enc, next) => {
const compiledLayout = layouts[file.stem === '404' ? '404.hbs' : 'default.hbs']
const siteRootPath = path.relative(path.dirname(file.path), path.resolve(siteSrc))
uiModel.env = process.env
const siteRootPath = path.relative(ospath.dirname(file.path), ospath.resolve(siteSrc))
const uiModel = Object.assign({}, baseUiModel)
uiModel.page = Object.assign({}, uiModel.page)
uiModel.siteRootPath = siteRootPath
uiModel.siteRootUrl = path.join(siteRootPath, 'index.html')
uiModel.uiRootPath = path.join(siteRootPath, '_')
uiModel.page.contents = file.contents.toString().trim()
file.contents = Buffer.from(compiledLayout(uiModel))
if (file.stem === '404') {
uiModel.page = { layout: '404', title: 'Page Not Found' }
} else {
const doc = asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
uiModel.page.attributes = Object.entries(doc.getAttributes())
.filter(([name, val]) => name.startsWith('page-'))
.reduce((accum, [name, val]) => {
accum[name.substr(5)] = val
return accum
}, {})
uiModel.page.layout = doc.getAttribute('page-layout', 'default')
uiModel.page.title = doc.getDocumentTitle()
uiModel.page.contents = Buffer.from(doc.convert())
}
file.extname = '.html'
file.contents = Buffer.from(layouts[uiModel.page.layout](uiModel))
next(null, file)
})
)
......@@ -34,7 +57,7 @@ module.exports = (src, dest, siteSrc, siteDest, sink = () => map((_0, _1, next)
)
function loadSampleUiModel (siteSrc) {
return fs.readFile(path.join(siteSrc, 'ui-model.yml'), 'utf8').then((contents) => yaml.safeLoad(contents))
return fs.readFile(ospath.join(siteSrc, 'ui-model.yml'), 'utf8').then((contents) => yaml.safeLoad(contents))
}
function registerPartials (src) {
......@@ -58,7 +81,7 @@ function registerHelpers (src) {
function compileLayouts (src, layouts) {
return vfs.src('layouts/*.hbs', { base: src, cwd: src }).pipe(
map((file, enc, next) => {
layouts[file.basename] = handlebars.compile(file.contents.toString(), { preventIndent: true })
layouts[file.stem] = handlebars.compile(file.contents.toString(), { preventIndent: true })
next()
})
)
......
......@@ -11,6 +11,7 @@
"node": ">= 8.0.0"
},
"devDependencies": {
"asciidoctor.js": "1.5.9",
"autoprefixer": "~9.4",
"browserify": "~16.2",
"cssnano": "~4.1",
......
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>Platonem complectitur mediocritatem ea eos.
Ei nonumy deseruisse ius.
Mel id omnes verear.
Vis no velit audiam, sonet <a href="#dependencies">praesent</a> eum ne.
<strong>Prompta eripuit</strong> nec ad.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="cu-solet"><a class="anchor" href="#cu-solet"></a>Cu solet</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Nominavi luptatum eos, an vim hinc philosophia intellegebat.
Lorem <code>expetenda</code> pertinacia et nec, wisi illud sonet qui ea.
Eum an doctus <a href="#liber-recusabo">maiestatis efficiantur</a>.
Eu mea inani iriure.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"name": "module-name",
"version": "10.0.1",
"description": "An example module to illustrate the usage of package.json",
"author": "Author Name &lt;author@example.com&gt;",
"scripts": {
"test": "mocha",
"lint": "eslint"
}
}</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Example paragraph syntax</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">.Optional title
[example]
This is an example paragraph.</code></pre>
</div>
</div>
<div class="exampleblock">
<div class="title">Optional title</div>
<div class="content">
This is an example paragraph.
</div>
</div>
<div class="paragraph">
<p>How about some code?</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-js hljs" data-lang="js">vfs
.src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
.pipe(tap((file) =&gt; { <i class="conum" data-value="1"></i><b>(1)</b>
file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
}))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('build'))</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>The tap function is used to wiretap the data in the pipe.</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Cum dicat <mark>putant</mark> ne.
Est in <a href="#inline">reque</a> homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
<div class="literalblock">
<div class="content">
<pre>pom.xml
src/
main/
java/
HelloWorld.java
test/
java/
HelloWorldTest.java</pre>
</div>
</div>
<div class="paragraph">
<p>Select <span class="menuseq"><b class="menu">File</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Open Project</b></span> to open the project in your IDE.
Per ea <b class="button">Cancel</b> inimicus.
Ferri <kbd>F11</kbd> tacimates constituam sed ex, eu mea munere vituperata <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>T</kbd></span> constituam.</p>
</div>
<div class="sidebarblock">
<div class="content">
<div class="title">Sidebar</div>
<div class="paragraph">
<p>Platonem complectitur mediocritatem ea eos.
Ei nonumy deseruisse ius.
Mel id omnes verear.</p>
</div>
<div class="paragraph">
<p>Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="liber-recusabo"><a class="anchor" href="#liber-recusabo"></a>Liber recusabo</h3>
<div class="paragraph">
<p>No sea, at invenire voluptaria mnesarchum has.
Ex nam suas nemore dignissim, vel apeirian democritum et.
At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>potenti donec cubilia tincidunt</p>
</li>
<li>
<p>etiam pulvinar inceptos velit quisque aptent himenaeos</p>
</li>
<li>
<p>lacus volutpat semper porttitor aliquet ornare primis nulla enim</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Natum facilisis theophrastus an duo.
No sea, at invenire voluptaria mnesarchum has.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>ultricies sociosqu tristique integer</p>
</li>
<li>
<p>lacus volutpat semper porttitor aliquet ornare primis nulla enim</p>
</li>
<li>
<p>etiam pulvinar inceptos velit quisque aptent himenaeos</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Eu sed antiopam gloriatur.
Ea mea agam graeci philosophia.</p>
</div>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p><i class="fa fa-square-o"></i> todo</p>
</li>
<li>
<p><i class="fa fa-check-square-o"></i> done!</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Vis veri graeci legimus ad.</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">sed</dt>
<dd>
<p>splendide sed</p>
</dd>
<dt class="hdlist1">mea</dt>
<dd>
<p>agam graeci</p>
</dd>
</dl>
</div>
<div class="paragraph">
<p>At ornatus splendide sed.</p>
</div>
<table id="dependencies" class="tableblock frame-all grid-all">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Library</th>
<th class="tableblock halign-left valign-top">Version</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">eslint</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^1.7.3</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">eslint-config-gulp</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^2.0.0</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">expect</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^1.20.2</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">istanbul</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^0.4.3</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">istanbul-coveralls</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^1.0.3</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">jscs</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">^2.3.5</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
This oughta do it!
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>You&#8217;ve been down <em>this</em> road before.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Watch out!</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock caution">
<table>
<tr>
<td class="icon">
<i class="fa icon-caution" title="Caution"></i>
</td>
<td class="content">
<div class="paragraph">
<p><span id="inline">I wouldn&#8217;t try that if I were you.</span></p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Don&#8217;t forget this step!</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">Key Points to Remember</div>
<div class="paragraph">
<p>If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command.</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npm i -g @antora/cli @antora/site-generator-default</pre>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Nominavi luptatum eos, an vim hinc philosophia intellegebat.
Eu mea inani iriure.</p>
</div>
<h2 id="voluptua-singulis" class="discrete">Voluptua singulis</h2>
<div class="paragraph">
<p>Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.</p>
</div>
</div>
</div>
</div>
\ No newline at end of file
= Hardware and Software Requirements
Author Name
:idprefix:
:idseparator: -
:!example-caption:
Platonem complectitur mediocritatem ea eos.
Ei nonumy deseruisse ius.
Mel id omnes verear.
Vis no velit audiam, sonet <<dependencies,praesent>> eum ne.
*Prompta eripuit* nec ad.
== Cu solet
Nominavi luptatum eos, an vim hinc philosophia intellegebat.
Lorem `expetenda` pertinacia et nec, wisi illud sonet qui ea.
Eum an doctus <<liber-recusabo,maiestatis efficiantur>>.
Eu mea inani iriure.
[source,json]
----
{
"name": "module-name",
"version": "10.0.1",
"description": "An example module to illustrate the usage of package.json",
"author": "Author Name <author@example.com>",
"scripts": {
"test": "mocha",
"lint": "eslint"
}
}
----
.Example paragraph syntax
[source,asciidoc]
----
.Optional title
[example]
This is an example paragraph.
----
.Optional title
[example]
This is an example paragraph.
How about some code?
[source,js]
----
vfs
.src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
.pipe(tap((file) => { // <1>
file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
}))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('build'))
----
<1> The tap function is used to wiretap the data in the pipe.
Cum dicat #putant# ne.
Est in <<inline,reque>> homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
....
pom.xml
src/
main/
java/
HelloWorld.java
test/
java/
HelloWorldTest.java
....
Select menu:File[Open Project] to open the project in your IDE.
Per ea btn:[Cancel] inimicus.
Ferri kbd:[F11] tacimates constituam sed ex, eu mea munere vituperata kbd:[Ctrl,T] constituam.
.Sidebar
****
Platonem complectitur mediocritatem ea eos.
Ei nonumy deseruisse ius.
Mel id omnes verear.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
****
=== Liber recusabo
No sea, at invenire voluptaria mnesarchum has.
Ex nam suas nemore dignissim, vel apeirian democritum et.
At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.
. potenti donec cubilia tincidunt
. etiam pulvinar inceptos velit quisque aptent himenaeos
. lacus volutpat semper porttitor aliquet ornare primis nulla enim
Natum facilisis theophrastus an duo.
No sea, at invenire voluptaria mnesarchum has.
* ultricies sociosqu tristique integer
* lacus volutpat semper porttitor aliquet ornare primis nulla enim
* etiam pulvinar inceptos velit quisque aptent himenaeos
Eu sed antiopam gloriatur.
Ea mea agam graeci philosophia.
* [ ] todo
* [x] done!
Vis veri graeci legimus ad.
sed::
splendide sed
mea::
agam graeci
At ornatus splendide sed.
[#dependencies%autowidth]
|===
|Library |Version
|eslint
|^1.7.3
|eslint-config-gulp
|^2.0.0
|expect
|^1.20.2
|istanbul
|^0.4.3
|istanbul-coveralls
|^1.0.3
|jscs
|^2.3.5
|===
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[TIP]
This oughta do it!
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[NOTE]
====
You've been down _this_ road before.
====
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[WARNING]
====
Watch out!
====
[CAUTION]
====
[#inline]#I wouldn't try that if I were you.#
====
[IMPORTANT]
====
Don't forget this step!
====
.Key Points to Remember
[TIP]
====
If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command.
$ npm i -g @antora/cli @antora/site-generator-default
====
Nominavi luptatum eos, an vim hinc philosophia intellegebat.
Eu mea inani iriure.
[discrete]
== Voluptua singulis
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
......@@ -463,6 +463,13 @@ asap@~2.0.6:
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
asciidoctor.js@1.5.9:
version "1.5.9"
resolved "https://registry.yarnpkg.com/asciidoctor.js/-/asciidoctor.js-1.5.9.tgz#28f8e8ee134b82627f0240e9b6a201b3d15d9524"
integrity sha512-k5JgwyV82TsiCpnYbDPReuHhzf/vRUt6NaZ+OGywkDDGeGG/CPfvN2Gd1MJ0iIZKDyuk4iJHOdY/2x1KBrWMzA==
dependencies:
opal-runtime "1.0.11"
asn1.js@^4.0.0:
version "4.10.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
......@@ -3015,6 +3022,17 @@ glob-watcher@^5.0.0: