Merge branch 'master' of gitlab.com:antora/antora-ui-default

* document the site.homeUrl property in the UI model; clarify how it differs from site.url and siteRootPath * drop check for outdated siteRootUrl property; document using siteRootPath as fallback for site.url * assume special chars in description and keywords are already escaped; detag description * upgrade UI preview to Asciidoctor.js 2 * fix clone command on set up page so it works with copy to clipboard * update dependency lock file * upgrade gulp-stylelint so dependencies can be installed on Node.js 16 * Style the search bar when disabled * merge !155 * Same format of "videoblack" as "imageblock" (#184) * add vertical-align middle to video iframe; remove margin on video title; add video to preview * merge !157 * resolves #186 add missing highlight.js language definition for none
countableSet · Mar 7, 2022 · 5f23c00 · 5f23c00
2 parents 1973367 + 9c6d248
commit 5f23c00
Show file tree

Hide file tree

Showing 11 changed files with 588 additions and 581 deletions.
diff --git a/docs/modules/ROOT/pages/set-up-project.adoc b/docs/modules/ROOT/pages/set-up-project.adoc
@@ -9,8 +9,8 @@ The sources can be {url-project}[Antora's default UI] or an existing UI project
 To start, clone the default UI project using git:
 
 [subs=attributes+]
- $ git clone {url-project} &&
-   cd "`basename ${_%.git}`"
+ $ git clone {url-project}
+ $ cd "`basename ${_%.git}`"
 
 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 npm.

diff --git a/docs/modules/ROOT/pages/templates.adoc b/docs/modules/ROOT/pages/templates.adoc
@@ -36,6 +36,7 @@ s| [[site]]site
 
 | site.url
 | The base URL of the site, if specified in the playbook.
+If a site start page is defined, the visitor will be redirected from this location to the start page.
 
 | site.path
 | The pathname (i.e., subpath) of the site.url under which the site is hosted (e.g., /docs).
@@ -47,6 +48,9 @@ Can be prepended to `page.url` to create a root-relative URL for a page (e.g., `
 | site.title
 | The title of the site.
 
+| site.homeUrl
+| The URL that points directly to the start (aka home) page of the site.
+
 | site.components
 | A map of all the components in the site, keyed by component name.
 Properties of each component include name, title, url, latest, and versions.
@@ -177,6 +181,8 @@ s| env
 
 s| siteRootPath
 | The relative path to the root of the published site.
+If a site start page is defined, the visitor will be redirected from this location to the start page.
+Can be used as a fallback when a site URL is not set.
 
 s| uiRootPath
 | The relative path to the root directory of the UI.

diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js
@@ -1,12 +1,6 @@
 'use strict'
 
-// NOTE remove patch after upgrading from asciidoctor.js to @asciidoctor/core
-Error.call = (self, ...args) => {
-  const err = new Error(...args)
-  return Object.assign(self, { message: err.message, stack: err.stack })
-}
-
-const asciidoctor = require('asciidoctor.js')()
+const Asciidoctor = require('@asciidoctor/core')()
 const fs = require('fs-extra')
 const handlebars = require('handlebars')
 const merge = require('merge-stream')
@@ -42,7 +36,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
             if (file.stem === '404') {
               uiModel.page = { layout: '404', title: 'Page Not Found' }
             } else {
-              const doc = asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
+              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]) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "last 2 versions"
   ],
   "devDependencies": {
-    "asciidoctor.js": "1.5.9",
+    "@asciidoctor/core": "~2.2",
     "autoprefixer": "~9.7",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",
@@ -34,7 +34,7 @@
     "gulp-eslint": "~6.0",
     "gulp-imagemin": "~6.2",
     "gulp-postcss": "~8.0",
-    "gulp-stylelint": "~11.0",
+    "gulp-stylelint": "~13.0",
     "gulp-uglify": "~3.0",
     "gulp-vinyl-zip": "~2.2",
     "handlebars": "~4.7",

diff --git a/preview-src/index.adoc b/preview-src/index.adoc
@@ -26,7 +26,7 @@ E = mc^2^.
 Eum an doctus <<liber-recusabo,maiestatis efficiantur>>.
 Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
 
-[source,json]
+[,json]
 ----
 {
   "name": "module-name",
@@ -53,7 +53,7 @@ Host: localhost:50010
 ----
 
 .Example paragraph syntax
-[source,asciidoc]
+[,asciidoc]
 ----
 .Optional title
 [example]
@@ -64,24 +64,24 @@ This is an example paragraph.
 [example]
 This is an example paragraph.
 
-++++
-<details>
-<summary class="title">Summary</summary>
-<div class="content">
-<div class="paragraph">
-<p>Details</p>
-</div>
-<details class="result">
-<summary class="title">Summary</summary>
-<div class="content">
-<div class="paragraph">
-<p>Details</p>
-</div>
-</div>
-</details>
-</div>
-</details>
-++++
+.Summary *Spoiler Alert!*
+[%collapsible]
+====
+Details.
+
+Loads of details.
+====
+
+[,asciidoc]
+----
+Voila!
+----
+
+.Result
+[%collapsible.result]
+====
+Voila!
+====
 
 === Some Code
 
@@ -101,19 +101,19 @@ public boolean cool() {
 }
 ----
 
-[source,js]
+[,js]
 ----
 vfs
   .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
-  .pipe(tap((file) => { // <1>
+  .pipe(tap((file) => { // <.>
     file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
   }))
-  .pipe(buffer()) // <2>
+  .pipe(buffer()) // <.>
   .pipe(uglify())
   .pipe(gulp.dest('build'))
 ----
-<1> The `tap` function is used to wiretap the data in the pipe.
-<2> Wrap each streaming file in a buffer so the files can be processed by uglify.
+<.> The `tap` function is used to wiretap the data in the pipe.
+<.> Wrap each streaming file in a buffer so the files can be processed by uglify.
 Uglify can only work with buffers, not streams.
 
 Execute these commands to validate and build your site:
@@ -151,12 +151,22 @@ m|"foo\nbar"
 l|foo
 bar
 a|
-[source,ruby]
+[,ruby]
 ----
 puts "foo\nbar"
 ----
 |===
 
+Here we just have some plain text.
+
+[source]
+----
+plain text
+----
+
+[.rolename]
+=== Liber recusabo
+
 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.
@@ -171,8 +181,6 @@ 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.
@@ -305,13 +313,16 @@ image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive]
 
 Make the switch today!
 
+.Full Circle with Jake Blauvelt
+video::300817511[vimeo,600,300]
+
 [#english+中文]
 == English + 中文
 
 Altera atomorum his ex, has cu elitr melius propriae.
 Eos suscipit scaevola at.
 
-[, 'Famous Person. Cum dicat putant ne.', 'Cum dicat putant ne. https://example.com[Famous Person Website]']
+[,'Famous Person. Cum dicat putant ne.','Cum dicat putant ne. https://example.com[Famous Person Website]']
 ____
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.

diff --git a/src/css/doc.css b/src/css/doc.css
@@ -194,6 +194,7 @@
 .doc .literalblock,
 .doc .sidebarblock,
 .doc .verseblock,
+.doc .videoblock,
 .doc .quoteblock,
 .doc .partintro,
 .doc details,
@@ -392,7 +393,8 @@
   content: attr(title);
 }
 
-.doc .imageblock {
+.doc .imageblock,
+.doc .videoblock {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -414,6 +416,11 @@
   margin-top: -0.2em;
 }
 
+.doc .videoblock iframe {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
 #preamble .abstract blockquote {
   background: var(--abstract-background);
   border-left: 5px solid var(--abstract-border-color);
@@ -575,6 +582,7 @@
 .doc .literalblock .title,
 .doc .listingblock .title,
 .doc .openblock .title,
+.doc .videoblock .title,
 .doc .tableblock caption {
   color: var(--caption-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);

diff --git a/src/css/header.css b/src/css/header.css
@@ -61,6 +61,17 @@ body {
   padding: 0 0.25em;
 }
 
+#search-input:disabled {
+  background-color: #dbdbdb;
+  /* disable cursor */
+  cursor: not-allowed;
+  pointer-events: all !important;
+}
+
+#search-input:disabled::placeholder {
+  color: #4c4c4c;
+}
+
 .navbar-burger {
   background: none;
   border: none;

diff --git a/src/js/vendor/highlight.bundle.js b/src/js/vendor/highlight.bundle.js
@@ -19,6 +19,8 @@
   hljs.registerLanguage('kotlin', require('highlight.js/lib/languages/kotlin'))
   hljs.registerLanguage('less', require('highlight.js/lib/languages/less'))
   hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'))
+  hljs.registerLanguage('nix', require('highlight.js/lib/languages/nix'))
+  hljs.registerLanguage('none', require('highlight.js/lib/languages/plaintext'))
   hljs.registerLanguage('objectivec', require('highlight.js/lib/languages/objectivec'))
   hljs.registerLanguage('properties', require('highlight.js/lib/languages/properties'))
   hljs.registerLanguage('python', require('highlight.js/lib/languages/python'))

diff --git a/src/partials/head-info.hbs b/src/partials/head-info.hbs
@@ -10,11 +10,11 @@
     {{/with}}
     {{/unless}}
     {{#with page.description}}
-    <meta name="description" content="{{this}}">
+    <meta name="description" content="{{{detag this}}}">
     {{/with}}
     {{#with page.keywords}}
-    <meta name="keywords" content="{{this}}">
+    <meta name="keywords" content="{{{this}}}">
     {{/with}}
     {{#with (or antoraVersion site.antoraVersion)}}
-    <meta name="generator" content="Antora {{this}}">
+    <meta name="generator" content="Antora {{{this}}}">
     {{/with}}
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
@@ -1,7 +1,7 @@
 <header class="header">
   <nav class="navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}">{{site.title}}</a>
+      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">{{site.title}}</a>
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">