diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc index e549a14..1af8968 100644 --- a/docs/modules/ROOT/nav.adoc +++ b/docs/modules/ROOT/nav.adoc @@ -1,13 +1,16 @@ -* xref:prerequisites.adoc[UI Development Prerequisites] -* xref:set-up-project.adoc[Set up a UI Project] -* xref:build-preview-ui.adoc[Build and Preview the UI] -* 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] -** xref:list-styles.adoc[Lists] -** xref:sidebar-styles.adoc[Sidebars] -** xref:ui-macro-styles.adoc[UI Macros] +* xref:prerequisites.adoc[] +* xref:set-up-project.adoc[] +* xref:build-preview-ui.adoc[] +* xref:development-workflow.adoc[] +* xref:templates.adoc[] + ** xref:create-helper.adoc[] +* xref:add-static-files.adoc[] +* xref:stylesheets.adoc[] + ** xref:add-fonts.adoc[] +* xref:copy-to-clipboard.adoc[] +* xref:style-guide.adoc[] + ** xref:inline-text-styles.adoc[] + ** xref:admonition-styles.adoc[] + ** xref:list-styles.adoc[] + ** xref:sidebar-styles.adoc[] + ** xref:ui-macro-styles.adoc[] diff --git a/docs/modules/ROOT/pages/add-static-files.adoc b/docs/modules/ROOT/pages/add-static-files.adoc new file mode 100644 index 0000000..a5ddb79 --- /dev/null +++ b/docs/modules/ROOT/pages/add-static-files.adoc @@ -0,0 +1,99 @@ += Add Static Files + +A static UI file is any file provided by the UI that is added directly to your site. +A common example of a static file is a favicon image. +One way to add static files is by using the xref:antora:playbook:ui-supplemental-files.adoc[supplemental UI], which is defined in your Antora playbook. +This document explains how to add static files using a UI bundle instead. + +== Set up the static files folder + +You'll first need a place to store the static files in the UI project. +Let's create a folder under [.path]_src_ named [.path]_static_ for this purpose. + + $ mkdir src/static + +You can add static files, such as a favicon image (e.g., [.path]_favicon.ico_), to this folder. +The UI build will add files in this folder to the root of the UI bundle, dropping the [.path]_static_ folder prefix from the path. + +Antora automatically passes through static files in the bundle to the UI output folder (`+_+` by default), ignoring any hidden files (i.e., files that begin with a dot). +A static file is any file that's not designated as a layout, partial, or helper. +That means our favicon image file will end up at the path [.path]_++_/favicon.ico++_. + +.Contents of site +.... +_/ + favicon.ico + css/ + site.css + ... +sitemap.xml +... +.... + +If that's where you want the file to go, there's nothing else you have to do. +Otherwise, you have the option of promoting select static files to the site root. + +== Promote static files + +If you want to promote certain static files out of the UI output folder, you need to identify them. +Antora looks for a file named [.path]_ui.yml_, the UI descriptor, in the UI bundle to configure the behavior of the UI. + +Start by creating the file [.path]_src/ui.yml_ in your UI project. +The UI build copies this file, if present, to the root of the UI bundle. + +This file does not have any required keys. +The key we're interested in is `static_files`. +This key identifies files by relative path in the UI bundle that should be promoted from the UI output folder to the site root. +The files must be specified as an array, where each entry is either a relative paths or a path glob. +Unlike other static files, promoted static files can begin with a dot. + +Here's how to configure the UI descriptor to promote the favicon image file to the site root. + +.src/ui.yml +[,yaml] +---- +static_files: +- favicon.ico +---- + +If you have multiple favicon files with different file extensions, you can match all of them using a glob. + +.src/ui.yml +[,yaml] +---- +static_files: +- favicon* +---- + +With this configuration in place, Antora will read the favicon image from the UI bundle and copy it to the root of the site. + +.Contents of site +.... +_/ + css/ + site.css + ... +favicon.ico +sitemap.xml +... +.... + +Let's now look at how to put the static files to use. + +== Use the static files + +Often when you add static files to your site, you need to reference them somewhere. +In the case of a favicon image, it must be referenced in the `` of the HTML page. +If you are referencing a promoted static file, you'll use the prefix `+{{{siteRootPath}}}+`. +Otherwise, you'll use the prefix `+{{{uiRootPath}}}+`. + +Let's update the [.path]_src/partials/head-icons.hbs_ partial to reference the favicon image at the root of the site. + +.src/partials/head-icons.hbs +[,yaml] +---- + +---- + +Rebuild the UI with `gulp bundle`. +You should now see that your site has a favicon image that's provided by the UI bundle. diff --git a/docs/modules/ROOT/pages/admonition-styles.adoc b/docs/modules/ROOT/pages/admonition-styles.adoc index 292203f..28bef0d 100644 --- a/docs/modules/ROOT/pages/admonition-styles.adoc +++ b/docs/modules/ROOT/pages/admonition-styles.adoc @@ -1,4 +1,5 @@ = Admonition Styles +:navtitle: Admonitions An xref:antora:asciidoc:admonitions.adoc[admonition], also known as a notice, helps draw attention to content with a special label or icon. diff --git a/docs/modules/ROOT/pages/build-preview-ui.adoc b/docs/modules/ROOT/pages/build-preview-ui.adoc index 36251a3..f55cdd7 100644 --- a/docs/modules/ROOT/pages/build-preview-ui.adoc +++ b/docs/modules/ROOT/pages/build-preview-ui.adoc @@ -1,4 +1,5 @@ = Build a UI Project for Local Preview +:navtitle: Build and Preview the UI == Build Preview Site diff --git a/docs/modules/ROOT/pages/copy-to-clipboard.adoc b/docs/modules/ROOT/pages/copy-to-clipboard.adoc new file mode 100644 index 0000000..0eaf058 --- /dev/null +++ b/docs/modules/ROOT/pages/copy-to-clipboard.adoc @@ -0,0 +1,48 @@ += Copy to clipboard + +This page describes the copy to clipboard feature added to source blocks when using the default UI. + +== Source blocks + +The default UI provides JavaScript that adds a clipboard button to all source blocks. +The clipboard button shows up next to the language label when the mouse is hovered over the block. +When the user clicks the clipboard button, the contents of the source block will be copied to the user's clipboard. + +You can try this behavior below: + +[,ruby] +---- +puts 'Take me to your clipboard!' +---- + +IMPORTANT: Copy to clipboard only works for a local site or if the site is hosted over https (SSL). +The copy to clipboard does not work on an insecure site (http) since the clipboard API is not available in that environment. +In that case, the behavior gracefully degrades so the user will not see the clipboard button or an error. + +== Console blocks + +The default UI also adds a clipboard button to all console blocks. +A console block is either a literal paragraph that begins with a `$` or a source block with the language `console`. + +The script provided by the default UI will automatically strip the `$` prompt at the beginning of each line and join the lines with `&&`. +In <>, since the language is `console` and each line begins with a `$`, the console copy-paste logic is triggered. + +.Copy to clipboard for a multi-line console command +[#ex-console-copy-paste] +------ +[,console] +---- +$ mkdir example +$ cd example +---- +------ + +When a user uses the copy-to-clipboard button, they will copy the combined command `mkdir example && cd example` instead of the literal text shown. +This can be useful for tutorial examples that a user is expected to copy-paste to run. +You can try this behavior below: + +[,console] +---- +$ mkdir example +$ cd example +---- diff --git a/docs/modules/ROOT/pages/create-helper.adoc b/docs/modules/ROOT/pages/create-helper.adoc new file mode 100644 index 0000000..284ec18 --- /dev/null +++ b/docs/modules/ROOT/pages/create-helper.adoc @@ -0,0 +1,177 @@ += Create a UI Helper + +This page explains how to create a UI helper for use in a page template (layout or partial). +A helper is a JavaScript function that's invoked by Handlebars when it comes across a helper call in a template. + +== Helper anatomy + +A helper must be defined as a JavaScript file in the [.path]_helpers_ directory of the UI bundle. +The basename of the file without the file extension will be used as the function name. +For example, if the helper is located at [.path]_helpers/join.js_, the name of the function will be `join`. + +You don't have to register the helper as Antora does that for you automatically. +This automatic behavior replaces this Handlebars API call (which you *don't* have to do): + +[,js] +---- +Handlebars.registerHelper('join', function () { ... }) +---- + +The helper file should export exactly one default function. +The name of the function in the file does not matter. + +Here's a template of a helper function you can use as a starting point: + +.new-helper.js +[,js] +---- +'use strict' + +module.exports = () => { + return true +} +---- + +The return value of the function will be used in the logic in the template. +If the helper is used in a conditional, it should return a boolean value (as in the previous example). +If the helper is used to create output, it should return a string. +If the helper is used in an iteration loop, it should return a collection. + +We can now use our conditional helper in a template as follows: + +[,hbs] +---- +{{#if (new-helper)}} +always true! +{{/if}} +---- + +The round brackets are always required around a helper function call (except in cases when they're implied by Handlebars). + +The helper can access top-level variables in the template by accepting the template context as the final parameter. +The top-level variables are stored in in the `data.root` property of this object. + +.new-helper.js +[,js] +---- +'use strict' + +module.exports = ({ data: { root } }) => { + return root.site.url === 'https://docs.example.org' +} +---- + +Now our condition will change: + +[,hbs] +---- +{{#if (new-helper)}} +Only true if the site URL is https://docs.example.org. +{{/if}} +---- + +A helper can also accept input parameters. +These parameters get inserted in the parameter list before the context object. +Handlebars only calls the function with the input parameters passed by the template, so it's important to use a fixed number of them. +Otherwise, the position of the context object will jump around. + +.new-helper.js +[,js] +---- +'use strict' + +module.exports = (urlToCheck, { data: { root } }) => { + return root.site.url === urlToCheck +} +---- + +Now we can accept the URL to check as an input parameter: + +[,hbs] +---- +{{#if (new-helper 'https://docs.example.org')}} +Only true if the site URL matches the one specified. +{{/if}} +---- + +You can consult the https://handlebarsjs.com/guide/[Handlebars language guide] for more information about creating helpers. + +== Use the content catalog in a helper + +You can work directly with Antora's content catalog in a helper to work with other pages and resources. +Let's define a helper that assembles a collection of pages that have a given tag defined in the `page-tags` attribute. +The helper call will look something like this: + +[,hbs] +---- +{{#each (pages-with-tag 'tutorial')}} +---- + +We'll start by defining the helper in a file named [.path]_pages-with-tag.js_. +In this first iteration, we'll have it return a collection of raw virtual file objects from Antora's content catalog. +Populate the file with the following contents: + +.pages-with-tag.js +[,js] +---- +'use strict' + +module.exports = (tag, { data }) => { + const { contentCatalog } = data.root + return contentCatalog.getPages(({ asciidoc, out }) => { + if (!out || !asciidoc) return + const pageTags = asciidoc.attributes['page-tags'] + return pageTags && pageTags.split(', ').includes(tag) + }) +} +---- + +Here we're obtaining a reference to the content catalog, then filtering the pages by our criteria using the `getPage()` method. +It's always good to check for the presence of the `out` property to ensure the page is publishable. + +Here's how this helper is used in the template: + +[,hbs] +---- +{{#each (pages-with-tag 'tutorial')}} +{{{./asciidoc.doctitle}}} +{{/each}} +---- + +You'll notice that the page objects in the collection differ from the typical page UI model. +We can convert each page to a page UI model before returning the collection. +Let's write the extension again, this time running each page through Antora's `buildPageUiModel` function: + +.pages-with-tag.js +[,js] +---- +'use strict' + +module.exports = (tag, { data }) => { + const { contentCatalog, site } = data.root + const pages = contentCatalog.getPages(({ asciidoc, out }) => { + if (!out || !asciidoc) return + const pageTags = asciidoc.attributes['page-tags'] + return pageTags && pageTags.split(', ').includes(tag) + }) + const { buildPageUiModel } = module.parent.require('@antora/page-composer/build-ui-model') + return pages.map((page) => buildPageUiModel(site, page, contentCatalog)) +} +---- + +In this case, the usage of the item object is simpler and more familiar: + +[,hbs] +---- +{{#each (pages-with-tag 'tutorial')}} +{{{./doctitle}}} +{{/each}} +---- + +Using this helper as a foundation, you can implement a variety of customizations and custom collections. + +CAUTION: Keep in mind that any helper you will use will be called for each page that uses the template. +This can impact performance. +If it's called on every page in your site, be sure that the operation is efficient to avoid slowing down site generation. + +As an alternative to using a helper, you may want to consider whether writing an Antora extension is a better option. diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc index 3101517..9370391 100644 --- a/docs/modules/ROOT/pages/index.adoc +++ b/docs/modules/ROOT/pages/index.adoc @@ -107,8 +107,8 @@ src/ caret.svg ... layouts/ - default.hbs 404.hbs + default.hbs partials/ article.hbs breadcrumbs.hbs @@ -151,8 +151,8 @@ img/ caret.svg ... layouts/ - default.hbs 404.hbs + default.hbs partials/ article.hbs breadcrumbs.hbs @@ -170,7 +170,43 @@ Since these optimizations are only applied to the pre-compiled files, they don't == UI compilation and generator consumption overview -The purpose of an Antora UI project is to get the UI files into a state that Antora can use and to make it reusable. +The purpose of an Antora UI project is to assemble the UI files into a reusable distribution that Antora can use to compose the HTML pages and the assets they require. + +The only required file in the UI bundle is the default Handlebars layout for pages (i.e., [.path]_layouts/default.hbs_). +If the 404 page is enabled, the Handlebars layout for the 404 page is also required (i.e., [.path]_layouts/404.hbs_). + +The layout files must be located in the [.path]_layouts_ folder in the UI bundle. +The name of the layout is the stem of the file, which is the file's basename with a file extension (e.g., [.path]_layouts/default.hbs_ becomes `default`). + +[.output] +.... +layouts/ + 404.hbs + default.hbs +.... + +There are no other required files in a UI bundle. +Any additional files are only required because they are referenced by a layout, either when generating the HTML (partial or helper) or assets referenced by the HTML (CSS or JavaScript) that are served to the browser. +Antora does not copy layouts, partials, or helpers to the generated site. + +If the layout looks for a partial, that partial must be located in the [.path]_partials_ directory. +The name of the partial is the stem of the file (e.g,. [.path]_partials/body.hbs_] becomes `body` and used as `> body`). +If the partial is inside a folder, the name of that folder is not used in the partial's name. +Additionally, any JavaScript files found in the [.path]_helpers_ directory are automatically registered as template helpers. +The name of the helper function matches the stem of the file (e.g., [.path]_heleprs/concat.js_ becomes `concat`). + +Here's how a UI would be structured if it had layouts, partials, and helpers: + +[.output] +.... +helpers/ + concat.js +layouts/ + 404.hbs + default.hbs +partials/ + body.hbs +.... The UI is served statically in a production site, but the UI's assets live in a source form in a UI project to accommodate development and simplify maintenance. When handed off to the Antora pipeline, the UI is in an interim, pre-compiled state. diff --git a/docs/modules/ROOT/pages/inline-text-styles.adoc b/docs/modules/ROOT/pages/inline-text-styles.adoc index 653b345..61bddc8 100644 --- a/docs/modules/ROOT/pages/inline-text-styles.adoc +++ b/docs/modules/ROOT/pages/inline-text-styles.adoc @@ -1,4 +1,5 @@ = Inline Text Styles +:navtitle: Inline Text :example-caption!: //// diff --git a/docs/modules/ROOT/pages/list-styles.adoc b/docs/modules/ROOT/pages/list-styles.adoc index 5fff9c7..414bb7a 100644 --- a/docs/modules/ROOT/pages/list-styles.adoc +++ b/docs/modules/ROOT/pages/list-styles.adoc @@ -1,4 +1,5 @@ = List Styles +:navtitle: Lists == Ordered list numeration diff --git a/docs/modules/ROOT/pages/sidebar-styles.adoc b/docs/modules/ROOT/pages/sidebar-styles.adoc index 9ce0ca6..7a16d43 100644 --- a/docs/modules/ROOT/pages/sidebar-styles.adoc +++ b/docs/modules/ROOT/pages/sidebar-styles.adoc @@ -1,4 +1,5 @@ = Sidebar Styles +:navtitle: Sidebars This page describes the in-page sidebar block styles, not the styles for the navigation sidebar. diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc index d23ff60..24c245e 100644 --- a/docs/modules/ROOT/pages/style-guide.adoc +++ b/docs/modules/ROOT/pages/style-guide.adoc @@ -1,4 +1,5 @@ = UI Element Style Guide +:navtitle: UI Element Styles When creating a UI theme for Antora, there are certain elements in the UI that require support from the CSS to work correctly. This list includes elements in the shell (i.e., frame) and in the document content. diff --git a/docs/modules/ROOT/pages/templates.adoc b/docs/modules/ROOT/pages/templates.adoc index a236933..24c22cd 100644 --- a/docs/modules/ROOT/pages/templates.adoc +++ b/docs/modules/ROOT/pages/templates.adoc @@ -146,7 +146,7 @@ If there's only a single version of the component, the canonical URL is the qual This value is derived automatically for the hosts github.com, gitlab.com, pagure.io, and bitbucket.org, even if the repository is private. If the host is not recognized, or you want to customize the value, you can use the `edit_url` key on the content source in the playbook. -The default UI shows an "Edit this Page" link that points to this URL unless the repository is private (i.e., `page.origin.private` is true) or `page.fileUri` is set. +The default UI shows an "Edit this Page" link that points to this URL unless the repository is private (i.e., `page.origin.private` is truthy) or `page.fileUri` is set. You can force this link to be shown by setting the environment variable `FORCE_SHOW_EDIT_PAGE_LINK` (e.g., `FORCE_SHOW_EDIT_PAGE_LINK=true`) or by customizing the logic in the UI template. | page.fileUri @@ -156,9 +156,9 @@ If this property is set, the default UI shows an "Edit this Page" link that poin When the `CI` environment variable is set, the default UI ignores this property (since linking to a local file:// URI in a published site doesn't make any sense). | page.origin.private -| This value will be true if the repository requires authentication or the repository URL embeds credentials. -In the default UI, if this value is `true`, the "Edit this Page" link is disabled. -A quick way to force this property to be `true` (even if the repository is public) is to begin the content source URL in the playbook with empty credentials, as in `\https://@`. +| This value will be `auth-required` if the git server requests authentication credentials, otherwise `auth-embedded` if credentials are embedded in the content source URL in the playbook, otherwise unset. +In the default UI, if this value is truthy, the "Edit this Page" link is not shown. +A quick way to force this property to be truthy (even if the repository is public) is to begin the content source URL in the playbook with empty credentials, as in `\https://@`. Then, the "Edit the Page" link will not appear. | page.home diff --git a/docs/modules/ROOT/pages/ui-macro-styles.adoc b/docs/modules/ROOT/pages/ui-macro-styles.adoc index 8a58017..eaa4e17 100644 --- a/docs/modules/ROOT/pages/ui-macro-styles.adoc +++ b/docs/modules/ROOT/pages/ui-macro-styles.adoc @@ -1,4 +1,5 @@ = UI Macro Styles +:navtitle: UI Macros Asciidoctor supports xref:antora:asciidoc:ui-macros.adoc[three UI element representations] out of the box, which are made from corresponding inline UI macros. diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js index 70957a7..1d9593e 100644 --- a/gulp.d/tasks/build-preview-pages.js +++ b/gulp.d/tasks/build-preview-pages.js @@ -21,7 +21,12 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) => merge(compileLayouts(src), registerPartials(src), registerHelpers(src), copyImages(previewSrc, previewDest)) ), ]) - .then(([baseUiModel, { layouts }]) => [{ ...baseUiModel, env: process.env }, layouts]) + .then(([baseUiModel, { layouts }]) => { + const { asciidoc: { extensions = [] } = {} } = baseUiModel + delete baseUiModel.asciidoc + extensions.forEach((request) => require(request).register()) + return [{ ...baseUiModel, env: process.env }, layouts] + }) .then(([baseUiModel, layouts]) => vfs .src('**/*.adoc', { base: previewSrc, cwd: previewSrc }) diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js index a386b91..a7e85bc 100644 --- a/gulp.d/tasks/build.js +++ b/gulp.d/tasks/build.js @@ -46,7 +46,9 @@ module.exports = (src, dest, preview) => () => { }, }, ]), - postcssVar({ preserve: true }), + postcssVar({ preserve: preview }), + // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one + //postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }), preview ? postcssCalc : () => {}, autoprefixer, preview ? () => {} : cssnano({ preset: 'default' }), @@ -54,6 +56,8 @@ module.exports = (src, dest, preview) => () => { ] return merge( + vfs + .src('ui.yml', { ...opts, allowEmpty: true }), vfs .src('js/+([0-9])-*.js', { ...opts, sourcemaps }) .pipe(uglify()) @@ -94,7 +98,7 @@ module.exports = (src, dest, preview) => () => { vfs .src('js/vendor/*.min.js', opts) .pipe(map((file, enc, next) => next(null, Object.assign(file, { extname: '' }, { extname: '.js' })))), - // NOTE use this statement to bundle a JavaScript library that cannot be browserified, like jQuery + // NOTE use the next line to bundle a JavaScript library that cannot be browserified, like jQuery //vfs.src(require.resolve(''), opts).pipe(concat('js/vendor/.js')), vfs .src('node_modules/font-awesome/css/font-awesome.css') @@ -150,7 +154,8 @@ module.exports = (src, dest, preview) => () => { })), vfs.src('helpers/*.js', opts), vfs.src('layouts/*.hbs', opts), - vfs.src('partials/*.hbs', opts) + vfs.src('partials/*.hbs', opts), + vfs.src('static/**/*[!~]', { ...opts, base: ospath.join(src, 'static'), dot: true }) ).pipe(vfs.dest(dest, { sourcemaps: sourcemaps && '.' })) } diff --git a/preview-src/index.adoc b/preview-src/index.adoc index 073c257..09d67e6 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -202,6 +202,7 @@ 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. +.Ordered list with customized numeration [upperalpha] . potenti donec cubilia tincidunt . etiam pulvinar inceptos velit quisque aptent himenaeos @@ -210,6 +211,7 @@ At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus Natum facilisis theophrastus an duo. No sea, at invenire voluptaria mnesarchum has. +.Unordered list with customized marker [square] * ultricies sociosqu tristique integer * lacus volutpat semper porttitor aliquet ornare primis nulla enim @@ -218,6 +220,13 @@ No sea, at invenire voluptaria mnesarchum has. Eu sed antiopam gloriatur. Ea mea agam graeci philosophia. +[circle] +* circles +** circles +*** and more circles! + +At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus. + * [ ] todo * [x] done! @@ -312,7 +321,11 @@ Don't forget this step! ==== 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 + $ npm i -g @antora/cli @antora/site-generator + +Or you can install the metapackage to upgrade both packages at once. + + $ npm i -g antora ==== Nominavi luptatum eos, an vim hinc philosophia intellegebat. diff --git a/src/css/doc.css b/src/css/doc.css index 3a18a29..c1f5ffb 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -519,17 +519,23 @@ } .doc ul.circle { - list-style-type: square; + list-style-type: circle; } .doc ul.disc { - list-style-type: square; + list-style-type: disc; } .doc ul.square { list-style-type: square; } +.doc ul.circle ul:not([class]), +.doc ul.disc ul:not([class]), +.doc ul.square ul:not([class]) { + list-style: inherit; +} + .doc ol.arabic { list-style-type: decimal; } @@ -559,7 +565,7 @@ } .doc ul.checklist { - padding-left: 0.5rem; + padding-left: 1.75rem; } .doc ul.checklist p > i.fa-check-square-o:first-child, @@ -567,6 +573,7 @@ display: inline-flex; justify-content: center; width: 1.25rem; + margin-left: -1.25rem; } .doc ul.checklist i.fa-check-square-o::before { @@ -610,14 +617,24 @@ .doc .tableblock caption { color: var(--caption-font-color); font-size: calc(16 / var(--rem-base) * 1rem); + font-style: var(--caption-font-style); font-weight: var(--caption-font-weight); - font-style: italic; hyphens: none; letter-spacing: 0.01em; padding-bottom: 0.075rem; +} + +.doc .tableblock caption { text-align: left; } +.doc .ulist .title, +.doc .olist .title { + font-style: var(--caption-font-style); + font-weight: var(--caption-font-weight); + margin-bottom: 0.25rem; +} + .doc .imageblock .title { margin-top: 0.5rem; padding-bottom: 0; @@ -729,10 +746,10 @@ box-shadow: inset 0 0 1.75px var(--pre-border-color); display: block; overflow-x: auto; - padding: 0.75rem; + padding: 0.875em; } -.doc pre.highlight { +.doc .listingblock > .content { position: relative; } @@ -744,8 +761,9 @@ right: 0.5rem; color: var(--pre-annotation-font-color); font-family: var(--body-font-family); - font-size: calc(13.5 / var(--rem-base) * 1rem); + font-size: calc(13 / var(--rem-base) * 1rem); line-height: 1; + white-space: nowrap; } .doc .listingblock:hover .source-toolbox { @@ -755,8 +773,6 @@ .doc .source-toolbox .source-lang { text-transform: uppercase; letter-spacing: 0.075em; - font-size: 0.96em; - line-height: 1.0425; } .doc .source-toolbox > :not(:last-child)::after { @@ -769,7 +785,7 @@ display: flex; flex-direction: column; align-items: center; - background: transparent; + background: none; border: none; color: inherit; outline: none; @@ -806,7 +822,7 @@ color: var(--color-white); cursor: auto; opacity: 0; - transition: opacity 0.5s ease 0.75s; + transition: opacity 0.5s ease 0.5s; } .doc .source-toolbox .copy-toast::after { diff --git a/src/css/header.css b/src/css/header.css index dac44c3..278abbe 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -75,6 +75,10 @@ body { color: #4c4c4c; } +#search-input:focus { + outline: none; +} + .navbar-burger { background: none; border: none; @@ -155,6 +159,16 @@ body { padding-right: 1.5rem; } +.navbar-dropdown .navbar-item.has-label { + display: flex; + justify-content: space-between; +} + +.navbar-dropdown .navbar-item small { + color: var(--toolbar-muted-color); + font-size: calc(12 / var(--rem-base) * 1rem); +} + .navbar-divider { background-color: var(--navbar-menu-border-color); border: none; @@ -291,6 +305,11 @@ body { white-space: nowrap; } + .navbar-dropdown .navbar-item small { + position: relative; + right: -2rem; + } + .navbar-dropdown .navbar-item:last-child { border-radius: inherit; } diff --git a/src/css/nav.css b/src/css/nav.css index 379e1fe..6f277b1 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -204,6 +204,7 @@ html.is-clipped--nav { padding: 0.5rem 0.75rem 0 0.75rem; margin: 0; overflow-y: scroll; + overscroll-behavior: none; max-height: 100%; display: block; } diff --git a/src/css/vars.css b/src/css/vars.css index 4fb78fc..985f9ed 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -93,6 +93,7 @@ --admonition-background: var(--panel-background); --admonition-label-font-weight: var(--body-font-weight-bold); --caption-font-color: var(--color-gray-70); + --caption-font-style: italic; --caption-font-weight: var(--body-font-weight-bold); --code-background: var(--panel-background); --code-font-color: var(--body-font-color); diff --git a/src/js/06-copy-to-clipboard.js b/src/js/06-copy-to-clipboard.js index 0631da1..df86df8 100644 --- a/src/js/06-copy-to-clipboard.js +++ b/src/js/06-copy-to-clipboard.js @@ -4,7 +4,11 @@ var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g var TRAILING_SPACE_RX = / +$/gm + var config = (document.getElementById('site-script') || { dataset: {} }).dataset + var uiRootPath = config.uiRootPath == null ? '.' : config.uiRootPath + var svgAs = config.svgAs + var supportsCopy = window.navigator.clipboard ;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) { var code, language, lang, copy, toast, toolbox @@ -28,19 +32,19 @@ } ;(toolbox = document.createElement('div')).className = 'source-toolbox' if (lang) toolbox.appendChild(lang) - if (window.navigator.clipboard) { + if (supportsCopy) { ;(copy = document.createElement('button')).className = 'copy-button' copy.setAttribute('title', 'Copy to clipboard') - if (config.svgAs === 'svg') { + if (svgAs === 'svg') { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') svg.setAttribute('class', 'copy-icon') var use = document.createElementNS('http://www.w3.org/2000/svg', 'use') - use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy') + use.setAttribute('href', uiRootPath + '/img/octicons-16.svg#icon-clippy') svg.appendChild(use) copy.appendChild(svg) } else { var img = document.createElement('img') - img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy' + img.src = uiRootPath + '/img/octicons-16.svg#view-clippy' img.alt = 'copy icon' img.className = 'copy-icon' copy.appendChild(img) @@ -50,7 +54,7 @@ copy.appendChild(toast) toolbox.appendChild(copy) } - pre.appendChild(toolbox) + pre.parentNode.appendChild(toolbox) if (copy) copy.addEventListener('click', writeToClipboard.bind(copy, code)) }) diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs index 266a3ed..3d9b577 100644 --- a/src/partials/footer-scripts.hbs +++ b/src/partials/footer-scripts.hbs @@ -1,4 +1,4 @@ - + {{#if env.SITE_SEARCH_PROVIDER}} {{> search-scripts}}