Add files
This commit is contained in:
+33
@@ -0,0 +1,33 @@
|
||||
# Not sure what a .gitignore is?
|
||||
# See: https://git-scm.com/docs/gitignore
|
||||
|
||||
# The first files are directly copied from Jekyll's first-party docs on `.gitignore` files:
|
||||
# https://jekyllrb.com/tutorials/using-jekyll-with-bundler/#commit-to-source-control
|
||||
|
||||
# Ignore the default location of the built site, and caches and metadata generated by Jekyll
|
||||
_site/
|
||||
.sass-cache/
|
||||
.jekyll-cache/
|
||||
.jekyll-metadata
|
||||
|
||||
# Ignore folders generated by Bundler
|
||||
.bundle/
|
||||
vendor/
|
||||
|
||||
# These next files are used by Just the Docs developers. They are not necessary for end users of the theme, only developers.
|
||||
|
||||
# We use Stylelint and Prettier, JavaScript tools, to lint and format our own code.
|
||||
# We use Node.js as our runtime, so we ignore node_modules
|
||||
node_modules
|
||||
|
||||
# .DS_Store is a macOS-only metadata file about directories. Convention is to not commit them.
|
||||
# See: https://en.wikipedia.org/wiki/.DS_Store
|
||||
.DS_Store
|
||||
|
||||
# These are legacy globs that typically target Ruby theme developers. We may change these at a later date.
|
||||
*.gem
|
||||
.bundle
|
||||
.ruby-version
|
||||
|
||||
|
||||
Gemfile.lock
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: default
|
||||
title: 404
|
||||
permalink: /404
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
---
|
||||
|
||||
<h1>Page not found</h1>
|
||||
|
||||
<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | relative_url }}">site's home page</a>.</p>
|
||||
+1873
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
source "https://rubygems.org"
|
||||
gemspec
|
||||
|
||||
gem "base64"
|
||||
gem "csv"
|
||||
|
||||
gem "jekyll-github-metadata", ">= 2.15"
|
||||
|
||||
gem "jekyll-include-cache", group: :jekyll_plugins
|
||||
gem "jekyll-sitemap", group: :jekyll_plugins
|
||||
|
||||
gem "html-proofer", "~> 5.0", :group => :development
|
||||
|
||||
|
||||
|
||||
# Some extra stuff that wasn't part of the just-the-docs template #
|
||||
gem 'jekyll_download_link'
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Patrick Marsceill
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
+533
@@ -0,0 +1,533 @@
|
||||
<!-- ---
|
||||
title: Migration and Upgrading
|
||||
layout: default
|
||||
---
|
||||
|
||||
# Migrating and Upgrading
|
||||
|
||||
Summary
|
||||
: A site that uses `just-the-docs` (as a theme or as a remote theme) automatically
|
||||
switches to a new release, unless it is pinned to a previous version.
|
||||
|
||||
This migration guide draws attention to:
|
||||
|
||||
- changes that might break your site,
|
||||
- features added in the latest release, and
|
||||
- features that have become deprecated (and are likely to be removed in a future release).
|
||||
|
||||
This document contains instructions on how to migrate and upgrade Just the Docs sites from every minor or major version bump, starting from `v0.3.3` to `v0.4.0`.
|
||||
|
||||
<details open markdown="block">
|
||||
<summary>
|
||||
Table of contents
|
||||
</summary>
|
||||
{: .text-delta }
|
||||
- TOC
|
||||
{:toc}
|
||||
</details>
|
||||
|
||||
{::options toc_levels="2..4" /}
|
||||
|
||||
{: .warning }
|
||||
> If your configuration states `remote_theme: just-the-docs/just-the-docs`, your
|
||||
> website is built using the current `main` branch of the theme, which may include
|
||||
> changes made after the latest release; see the [CHANGELOG].
|
||||
>
|
||||
> If your configuration states `theme: just_the_docs` and your `Gemfile` specifies
|
||||
> `gem "just-the-docs"`, your website is always built using the latest release.
|
||||
|
||||
{: .note }
|
||||
> If you have cloned/forked and customised the theme repo,
|
||||
> and pull the changes of a new release to your clone,
|
||||
> you may need to resolve merge conflicts.
|
||||
|
||||
[CHANGELOG]: {% link CHANGELOG.md %}
|
||||
|
||||
## v0.9.x - v0.10.0
|
||||
|
||||
There are no potentially-breaking changes in v0.10.0.
|
||||
|
||||
## v0.8.x - v0.9.0
|
||||
|
||||
There are no potentially-breaking changes in v0.9.0.
|
||||
|
||||
## v0.7.x - v0.8.0
|
||||
|
||||
There are no potentially-breaking changes in v0.8.0.
|
||||
|
||||
## v0.6.x - v0.7.0
|
||||
|
||||
### POTENTIALLY-BREAKING CHANGES in v0.7.0
|
||||
|
||||
There are some *very minor* potentially-breaking changes for users in version `v0.7.0`. **They do not affect the vast majority of users**; however, this may affect users of (undocumented) internal theme structure. They concern:
|
||||
|
||||
1. the movement of `_includes/nav.html`, which has moved to `_includes/components/nav.html`
|
||||
- **explicit migration only necessary if users have overridden `_includes/nav.html`**
|
||||
2. the addition of `<script>` tags with `id`s `jtd-nav-activation` and `jtd-head-nav-stylesheet`
|
||||
- **explicit migration only necessary if users have existing elements with those IDs**
|
||||
|
||||
#### Moved Include
|
||||
|
||||
Version `v0.7.0` has moved (and changed the contents of) `_includes/nav.html`; it is now in `_includes/components/nav.html`. This means that user overrides for the component will *no longer be loaded*, reverting to the Just the Docs default.
|
||||
|
||||
Users who have overridden this `_includes` should:
|
||||
|
||||
1. copy in the new upstream `_includes/components/nav.html` into their site
|
||||
2. port over any changes from their custom `_includes/nav.html`
|
||||
|
||||
No other changes are necessary.
|
||||
|
||||
#### New Script IDs
|
||||
|
||||
Version `v0.7.0` adds the `id`s `jtd-nav-activation` and `jtd-head-nav-stylesheet` to some existing script tags. This will cause errors for users that have their own custom components with those IDs.
|
||||
|
||||
Users who have elements with those `id`s should rename their elements to avoid a collision.
|
||||
|
||||
## v0.5.x - v0.6.0
|
||||
|
||||
### POTENTIALLY-BREAKING CHANGES in v0.6.0
|
||||
|
||||
There are some *very minor* potentially-breaking changes for users in version `v0.6.0`. **They do not affect the vast majority of users**; however, this may affect users of (undocumented) internal theme structure. They concern:
|
||||
|
||||
1. the addition of new `_includes/favicon.html`, `_includes/head_nav.html`, and `_includes/css/activation.scss.liquid`
|
||||
- **explicit migration only necessary if users have defined a custom file with the same name**
|
||||
2. removing `id="main-content-wrap` from wrapper `div` elements in default layouts
|
||||
- **explicit migration only necessary if users have written code that depends on `#main-content-wrap`**
|
||||
3. loading the new `$color-scheme` variable (from the light scheme by default)
|
||||
- **explicit migration only necessary if users have overridden the base light theme**
|
||||
4. caching the favicon for the entire site
|
||||
- **explicit migration only necessary if users have different favicons for different pages**
|
||||
|
||||
#### New Includes
|
||||
|
||||
Version `v0.6.0` introduces three new `_includes` files:
|
||||
|
||||
- `_includes/favicon.html`, which now contains logic previously in `_includes/head.html`: loading `favicon.ico` if no favicon is specified
|
||||
- `_includes/head_nav.html`, which generates CSS used for the new efficient navigation implementation
|
||||
- `_includes/css/activation.scss.liquid`, which is used by `head_nav` for navigation implementation
|
||||
|
||||
If users have existing `_includes` files with this name, they should be renamed (and imported with their new name) prior to upgrading to `0.6.0`. No other change is necessary.
|
||||
|
||||
#### Removed `#main-content-wrap`
|
||||
|
||||
In `_layouts/default.html` and `_layouts/minimal.html`, the `id="main-content-wrap"` has been removed from the wrapper div (in part due to a bug with multiple `id`s on one element). Internally, our theme *does not use* these `id`s; for most users, this does not require any action.
|
||||
|
||||
However, code that relies on this `id` must be changed. Each of the related elements still has the unique class `.main-content-wrap`, and can be selected with this class. For example, in CSS:
|
||||
|
||||
```css
|
||||
/* OLD */
|
||||
#main-content-wrap { /* ... */ }
|
||||
|
||||
/* NEW */
|
||||
.main-content-wrap { /* ... */ }
|
||||
```
|
||||
|
||||
Or in JS:
|
||||
|
||||
```js
|
||||
// OLD
|
||||
document.getElementById("main-content-wrap");
|
||||
|
||||
// NEW
|
||||
document.getElementsByClassName("main-content-wrap")[0];
|
||||
```
|
||||
|
||||
#### New `$color-scheme` variable
|
||||
|
||||
The theme now properly sets the `color-scheme` property. To do so, the new `$color-scheme` SCSS variable has been created. The variable has been added to the default `light` scheme, which is *always* loaded by Just the Docs.
|
||||
|
||||
Migration is only needed if:
|
||||
|
||||
- the packaged `light` scheme has been *overridden* (this is *not* the same as using a custom scheme)
|
||||
- or, the scheme logic to always load `light` has been changed
|
||||
|
||||
(neither of these behaviours are recommended by Just the Docs)
|
||||
|
||||
In either of these cases, users should add a `$color-scheme` SCSS variable to their active scheme with the appropriate value (see: [MDN docs on `color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)).
|
||||
|
||||
```scss
|
||||
$color-scheme: light !default;
|
||||
```
|
||||
|
||||
#### Cached favicon
|
||||
|
||||
Version `v0.6.0` adds a new `_include` that caches the favicon for the entire site. This significantly improves page build times for large sites.
|
||||
|
||||
However, some users may load different favicons for each page (and/or dynamically change the first favicon load). In this case, they should override the logic in `_includes/favicon.html` by **replacing** it with an empty file (this is *different* from deleting it). No further migration is necessary.
|
||||
|
||||
## v0.4.x - v0.5.0
|
||||
|
||||
### POTENTIALLY-BREAKING CHANGES in v0.5.0
|
||||
|
||||
There is one potentially-breaking change for users migrating from `v0.4.2` to `v0.5.0` concerning `setup.scss`. To provide context:
|
||||
|
||||
1. `setup.scss` was introduced in `v0.4.0`
|
||||
2. in `v0.4.0` and `v0.4.1`, `setup.scss` was imported *before* color scheme SCSS code
|
||||
3. in `v0.4.2`, we adjusted the order to import `setup.scss` *after* color scheme SCSS code
|
||||
4. in `v0.5.0`, we have reverted the previous change: `setup.scss` is now again imported *before* color scheme SCSS code
|
||||
|
||||
This does not affect most users. Users who did not migrate to `v0.4.2` or who do not have a custom `setup.scss` are guaranteed no breaking changes.
|
||||
|
||||
Explicit migration steps are only needed if:
|
||||
|
||||
1. a custom `setup.scss` has been defined,
|
||||
2. **and** the `setup.scss` depends on variables or functions defined in color scheme SCSS code; this change was only possible on `v0.4.2`
|
||||
|
||||
For those users, we suggest moving those variables and functions to each relevant color scheme.
|
||||
## v0.3.3 … v0.4.x
|
||||
|
||||
### REPOSITORY CHANGES
|
||||
|
||||
#### Just the Docs
|
||||
|
||||
The theme repo is now at <https://github.com/just-the-docs/just-the-docs>.
|
||||
The name of its default branch is now `main`.
|
||||
|
||||
The theme docs website is now published at <https://just-the-docs.github.io/just-the-docs>. We've also retroactively published the theme docs website for version `v0.3.3` at <https://v0-3-3-docs.just-the-docs.com/>.
|
||||
|
||||
GitHub provides access to previous versions of the theme repo.
|
||||
You can browse [previous versions of the theme docs website] on the [Internet Archive].
|
||||
|
||||
[previous versions of the theme docs website]: https://web.archive.org/web/20220000000000*/https://just-the-docs.github.io/just-the-docs
|
||||
[Internet Archive]: https://web.archive.org/
|
||||
|
||||
The [README] page on the theme repo repeats much of the information from the [home page],
|
||||
formatted for browsing on GitHub.
|
||||
It also explains how to install the theme as a Ruby Gem, without creating a new site.
|
||||
|
||||
[README]: https://github.com/just-the-docs/just-the-docs/blob/main/README.md
|
||||
[home page]: https://just-the-docs.com
|
||||
|
||||
#### Deploy previews
|
||||
|
||||
When a PR builds successfully, Netlify provides a preview of how the theme docs website will look if the PR is merged.
|
||||
You can find links to the preview near the bottom of the Conversation tab of the PR.
|
||||
|
||||
#### Just the Docs Template
|
||||
|
||||
The template at <https://github.com/just-the-docs/just-the-docs-template>
|
||||
creates a repo with the minimal source files for a Just the Docs website.
|
||||
After configuring the relevant parameters, you can build and serve the website
|
||||
both locally and on GitHub Pages – using either Jekyll 3 or Jekyll 4!
|
||||
|
||||
#### Just the Docs Tests
|
||||
|
||||
The tests website at <https://just-the-docs.github.io/just-the-docs-tests>
|
||||
consists mainly of regression tests for bug fixes and new features.
|
||||
|
||||
The test source files at <https://github.com/just-the-docs/just-the-docs-tests>
|
||||
illustrate the use of many Markdown and Jekyll features,
|
||||
including some that are not included in the theme docs.
|
||||
|
||||
For example, see how to add support for rendering TeX/LaTeX [math formulas] with KaTeX and MathJax.
|
||||
|
||||
[math formulas]: https://just-the-docs.github.io/just-the-docs-tests/components/math/index/
|
||||
|
||||
### POTENTIALLY-BREAKING CHANGES in v0.4.0
|
||||
|
||||
If switching to a new release of the theme breaks your website,
|
||||
check that you don't have any files in the `_includes`, `_layouts`, and `_sass`
|
||||
directories with the same names as files provided by the theme.
|
||||
|
||||
If your repo has a customised copy of `_layouts/default.html` from a previous release,
|
||||
try removing it, or replace it by a fresh copy of the theme file.
|
||||
|
||||
{: .warning }
|
||||
The following changes made in v0.4.0 *might* break or adversely affect your website
|
||||
when you next rebuild it, unless you have pinned it!
|
||||
|
||||
#### New includes and SCSS
|
||||
|
||||
Version 0.4.0 introduces many new `_includes` files. If you already have an existing include with the same name as a new addition, you will need to migrate or update that include. The new files are (relative to the `_includes` folder):
|
||||
|
||||
- `mermaid_config.js`
|
||||
- `nav_footer_custom`
|
||||
- `search_placeholder_custom`
|
||||
- `toc_heading_custom`
|
||||
- the entire `components/` folder:
|
||||
- `aux_nav`, `breadcrumbs`, `children_nav`, `footer`, `header`, `mermaid`, `search_footer`, `search_header`, `sidebar`
|
||||
- the entire `icons/` folder
|
||||
- `code_copy`, `document`, `expand`, `external_link`, `icons`, `link`, `menu`, `search`
|
||||
- the entire `lunr/` folder
|
||||
- `custom-data.json`, `custom-index.js`
|
||||
|
||||
We have removed some code in `_sass/vendor` and added a new file at `_sass/custom/setup.scss`.
|
||||
|
||||
#### favicons
|
||||
|
||||
The file `_includes/favicon.html` is now ignored by the theme.
|
||||
If you're using it, your website's favicon is no longer displayed by browsers.
|
||||
|
||||
To fix: Move the content of `_includes/favicon.html` to `_includes/head_custom.html`.
|
||||
|
||||
#### Custom callout colors
|
||||
|
||||
The file `_sass/custom/custom.scss` is now imported last: _after_ the configuration of callouts.
|
||||
If you've defined custom color variables for callouts in `_sass/custom/custom.scss`
|
||||
(and used them when configuring your callouts in `_config.yml`)
|
||||
you will not be able to rebuild your website.
|
||||
|
||||
To fix: Move custom color variables for callouts in `_sass/custom/custom.scss` to `_sass/custom/variables.scss`.
|
||||
|
||||
#### Pages and collections
|
||||
|
||||
Links to ordinary pages now appear in the navigation on sites that use collections.
|
||||
You might want the navigation of your site to consist entirely of collections.
|
||||
|
||||
To fix: Add the front matter `nav_exclude: true` to pages that the navigation should not display.
|
||||
|
||||
#### Relative URLs
|
||||
|
||||
All generated URLs are now relative.
|
||||
This is a bug fix, and unlikely to break any site.
|
||||
|
||||
Relative links to pages within a website support deployment to different servers.
|
||||
|
||||
#### Navigation order
|
||||
|
||||
The order in which the navigation panel lists pages has been simplified.
|
||||
All pages with `nav_order` values now come before all pages that are ordered by `title`.
|
||||
|
||||
If your website has a group of *sibling* pages where some siblings have `nav_order`
|
||||
string values, and others are ordered by numerical `title` values,
|
||||
the former now come before the latter.
|
||||
|
||||
To fix: Add numerical `nav_order` values to the pages with numerical `title` values.
|
||||
|
||||
### DEPRECATIONS
|
||||
|
||||
{: .warning }
|
||||
The following features are deprecated, and to be removed in a future release.
|
||||
|
||||
#### Jekyll 3
|
||||
|
||||
You can still use Jekyll 3 (3.8.5 or later) to build websites using v0.4.0 of the theme.
|
||||
However, future releases of the theme may require the use of Jekyll 4.
|
||||
|
||||
You can already use Jekyll 4 to build your website *locally*.
|
||||
It should look exactly the same as when built with Jekyll 3.[^Jekyll4]
|
||||
|
||||
[^Jekyll4]:
|
||||
Jekyll 4 depends on more recent versions of other gems than Jekyll 3,
|
||||
and the differences between those versions may affect the files of your built site.
|
||||
|
||||
To use Jekyll 4 when building your website *on GitHub Pages*, you need to run GitHub Actions.
|
||||
The simplest way of setting that up in a new repo is to create the repo using the Just the Docs template.
|
||||
To start running Jekyll 4 to build an existing repo on GitHub Pages,
|
||||
you can create a new repo with the template, then copy its `.github/workflows` directory,
|
||||
and update your repo settings to use Actions.
|
||||
|
||||
#### Footer content configuration
|
||||
|
||||
Currently, if your configuration sets `footer_content` to some text,
|
||||
the theme displays that text at the bottom of the main section of each page.
|
||||
|
||||
The file `_includes/footer_custom.html` provides a more general way of customizing
|
||||
not only the text but also the markup for the page footer area.
|
||||
|
||||
You can replicate the current display of `TEXT` in the footer using the following markup:
|
||||
|
||||
```html
|
||||
<p class="text-small text-grey-dk-100 mb-0">TEXT</p>
|
||||
```
|
||||
|
||||
### THEME WEBSITE CHANGES
|
||||
|
||||
The website now uses *callouts*[^callouts] to draw attention to important information.
|
||||
|
||||
[^callouts]:
|
||||
The theme website configuration defines the callout titles and colors used there.
|
||||
Websites that use the theme have to configure their own callout titles and colors.
|
||||
|
||||
The theme uses [semantic versioning].
|
||||
A normal version number takes the form X.Y.Z,
|
||||
where X is the major version, Y is the minor version, and Z is the patch version.
|
||||
The theme uses version X.Y.Z.rcN for pre-release N of version X.Y.Z.
|
||||
When referring to version numbers on GitHub, we usually prefix them by 'v'.
|
||||
|
||||
[semantic versioning]: https://semver.org
|
||||
|
||||
Major version zero (0.Y.Z) is for initial development, where anything *may* change at any time.
|
||||
In practice, we increment the patch version Z for bug fixes and backwards compatible changes;
|
||||
we increment the minor version Y for changes that could break websites using the theme
|
||||
without pinning it to a specific version.
|
||||
|
||||
The label `NEW` in the theme website indicates a feature that has been changed or added
|
||||
since the release of the previous *minor* version.
|
||||
For example, after the release of v0.4.Z, the theme website should label `NEW` all features that
|
||||
we have changed or added since v0.3.0 – not just since v0.3.3.
|
||||
When we release v0.5.0, we will remove all those labels, and add labels on features since v0.4.0.
|
||||
|
||||
The theme docs website is not itself versioned.
|
||||
It changes incrementally, independently of theme releases.
|
||||
|
||||
#### Home page
|
||||
|
||||
The theme home page now focuses on the simplest ways of using the theme.
|
||||
It also notes the different behaviour of `theme` and `remote_theme` in connection
|
||||
with interim versions of the theme, such as pre-releases.
|
||||
|
||||
#### CHANGELOG
|
||||
|
||||
The CHANGELOG page lists the changes made in all previous releases and pre-releases of new versions of the theme gem.
|
||||
|
||||
It also lists changes made to the `main` branch of the theme since the latest release or pre-release.
|
||||
|
||||
For changes since v0.3.3, the log usually references the merged PR that made the change and its author.
|
||||
|
||||
### NON-BREAKING CHANGES (OUTLINE ONLY)
|
||||
|
||||
#### Accessibility
|
||||
|
||||
- Skip to main content: the first keyboard-navigatable item is now a link to skip over the sidebar and header to the main content of the page. PR: [#949].
|
||||
- Aria-labels: improved `aria-label`s have been added to various site elements. PRs: [#950], ...
|
||||
- Other general improvements: gradual changes have improved tab focusability, contrast, and semantic elements. More work still to come. PRs: [#498], [#846]
|
||||
|
||||
#### Configuration
|
||||
|
||||
- Mermaid support: first-class support for [Mermaid](https://mermaid.js.org/) - a JavaScript-based diagram and charting tool supported by GitHub - has been added to the theme. **This feature is opt-in.** See the new doc subsections in [Configuration]({% link docs/configuration.md %}#mermaid-diagrams) and [Code]({% link docs/ui-components/code/index.md %}#mermaid-diagram-code-blocks) for more.
|
||||
- Multiple Google Analytics tags are now supported. PR: [#1029]
|
||||
|
||||
#### Customization
|
||||
|
||||
- all user-facing text is now customizable; previously, several elements (ex search placeholder) were hardwired into the theme. Now, users can blend custom includes and layouts to internationalize their sites.
|
||||
- we've clarified the role of `custom.scss` to be imported last; to allow users to define custom or override variables, we've added a new file `setup.scss`. PR: [#1135]
|
||||
|
||||
#### Custom Includes
|
||||
|
||||
We've added several custom `_includes` to provide users with more customization options for different site elements. We've also added a section to [Configuration]({% link docs/customization.md %}#override-includes) to outline these.
|
||||
|
||||
All of these are opt-in by default; however, **these may be breaking if you have existing `_includes` with the same name**.
|
||||
|
||||
Each item is listed with the relevant file and PR.
|
||||
|
||||
- TOC heading: `toc_heading_custom.html`, PR: [#980]
|
||||
- Navigation panel footer: `nav_footer_custom.html`, PR: [#474]
|
||||
- Search placeholder: `search_placeholder_custom.html`, PR: [#613]
|
||||
- Modular site components: `components/` and `icons/`, PR: [#1058]
|
||||
- Custom search indices: `lunr/`, PR: [#1068]
|
||||
|
||||
In a future (version 1) release, we may rename the custom include files.
|
||||
|
||||
#### Modular Components
|
||||
|
||||
We've broken up the default layout (`_layouts/default.html`) into multiple reusable components. This should have no impact on most users; however, it should make it easier to implement custom layouts.
|
||||
|
||||
For more, see [Custom layouts and includes]({% link docs/customization.md %}#custom-layouts-and-includes). PR: [#1058].
|
||||
|
||||
#### Navigation
|
||||
|
||||
- Collections: nav panel shows links to ordinary pages before collections
|
||||
- Collection folding; part of "Combination". PR: [#578]
|
||||
- Scrolling to show link to selected page. PR: [#639]
|
||||
- External nav links are now supported. PR: [#876]
|
||||
- Child nav order: sort navigation pages with `child_nav_order`. PR: [#726]
|
||||
- Order when mixing different ways of specifying nav order
|
||||
|
||||
#### Search
|
||||
|
||||
In addition to customizing the search placeholder, we've also added the ability to provide custom content to the search index. for more, see [Custom content for search index]({% link docs/search.md %}#custom-content-for-search-index). PR: [#1068].
|
||||
|
||||
#### Styling
|
||||
|
||||
- Code copying: code blocks now allow users to easily copy their contents. PR: [#945]
|
||||
- Blockquote: shows vertical bar on left. PR: [#965]
|
||||
- Links wrap. PR: [#905]
|
||||
- Callouts: a new component similar to alerts or banners. See [UI Components - Callouts]({% link docs/ui-components/callouts.md %}). PR: [#466]
|
||||
|
||||
----
|
||||
|
||||
[#856]: https://github.com/just-the-docs/just-the-docs/pull/856
|
||||
[#806]: https://github.com/just-the-docs/just-the-docs/pull/806
|
||||
[#555]: https://github.com/just-the-docs/just-the-docs/pull/555
|
||||
[#814]: https://github.com/just-the-docs/just-the-docs/pull/814
|
||||
[#778]: https://github.com/just-the-docs/just-the-docs/pull/778
|
||||
[#221]: https://github.com/just-the-docs/just-the-docs/pull/221
|
||||
[#782]: https://github.com/just-the-docs/just-the-docs/pull/782
|
||||
[#549]: https://github.com/just-the-docs/just-the-docs/pull/549
|
||||
[#554]: https://github.com/just-the-docs/just-the-docs/pull/554
|
||||
[#499]: https://github.com/just-the-docs/just-the-docs/pull/499
|
||||
[#473]: https://github.com/just-the-docs/just-the-docs/pull/473
|
||||
[#835]: https://github.com/just-the-docs/just-the-docs/pull/835
|
||||
[#891]: https://github.com/just-the-docs/just-the-docs/pull/891
|
||||
[#906]: https://github.com/just-the-docs/just-the-docs/pull/906
|
||||
|
||||
[#578]: https://github.com/just-the-docs/just-the-docs/pull/578
|
||||
[#463]: https://github.com/just-the-docs/just-the-docs/pull/463
|
||||
[#448]: https://github.com/just-the-docs/just-the-docs/pull/448
|
||||
[#466]: https://github.com/just-the-docs/just-the-docs/pull/466
|
||||
[#477]: https://github.com/just-the-docs/just-the-docs/pull/477
|
||||
[#495]: https://github.com/just-the-docs/just-the-docs/pull/495
|
||||
[#496]: https://github.com/just-the-docs/just-the-docs/pull/496
|
||||
[#498]: https://github.com/just-the-docs/just-the-docs/pull/498
|
||||
[#494]: https://github.com/just-the-docs/just-the-docs/pull/494
|
||||
[#639]: https://github.com/just-the-docs/just-the-docs/pull/639
|
||||
[#544]: https://github.com/just-the-docs/just-the-docs/pull/544
|
||||
[#364]: https://github.com/just-the-docs/just-the-docs/pull/364
|
||||
[#498]: https://github.com/just-the-docs/just-the-docs/pull/498
|
||||
[#613]: https://github.com/just-the-docs/just-the-docs/pull/613
|
||||
[#726]: https://github.com/just-the-docs/just-the-docs/pull/726
|
||||
[#474]: https://github.com/just-the-docs/just-the-docs/pull/474
|
||||
[#829]: https://github.com/just-the-docs/just-the-docs/pull/829
|
||||
[#857]: https://github.com/just-the-docs/just-the-docs/pull/857
|
||||
[#876]: https://github.com/just-the-docs/just-the-docs/pull/876
|
||||
[#909]: https://github.com/just-the-docs/just-the-docs/pull/909
|
||||
[#519]: https://github.com/just-the-docs/just-the-docs/pull/519
|
||||
[#855]: https://github.com/just-the-docs/just-the-docs/pull/855
|
||||
[#686]: https://github.com/just-the-docs/just-the-docs/pull/686
|
||||
[#495]: https://github.com/just-the-docs/just-the-docs/pull/495
|
||||
[#846]: https://github.com/just-the-docs/just-the-docs/pull/846
|
||||
[#727]: https://github.com/just-the-docs/just-the-docs/pull/727
|
||||
[#889]: https://github.com/just-the-docs/just-the-docs/pull/889
|
||||
[#893]: https://github.com/just-the-docs/just-the-docs/pull/893
|
||||
[#905]: https://github.com/just-the-docs/just-the-docs/pull/905
|
||||
[#898]: https://github.com/just-the-docs/just-the-docs/pull/898
|
||||
|
||||
[#950]: https://github.com/just-the-docs/just-the-docs/pull/950
|
||||
[#944]: https://github.com/just-the-docs/just-the-docs/pull/944
|
||||
[#939]: https://github.com/just-the-docs/just-the-docs/pull/939
|
||||
[#949]: https://github.com/just-the-docs/just-the-docs/pull/949
|
||||
[#941]: https://github.com/just-the-docs/just-the-docs/pull/941
|
||||
[#956]: https://github.com/just-the-docs/just-the-docs/pull/956
|
||||
[#935]: https://github.com/just-the-docs/just-the-docs/pull/935
|
||||
[#940]: https://github.com/just-the-docs/just-the-docs/pull/940
|
||||
[#951]: https://github.com/just-the-docs/just-the-docs/pull/951
|
||||
[#955]: https://github.com/just-the-docs/just-the-docs/pull/955
|
||||
[#937]: https://github.com/just-the-docs/just-the-docs/pull/937
|
||||
|
||||
[#965]: https://github.com/just-the-docs/just-the-docs/pull/965
|
||||
[#960]: https://github.com/just-the-docs/just-the-docs/pull/960
|
||||
[#962]: https://github.com/just-the-docs/just-the-docs/pull/962
|
||||
[#964]: https://github.com/just-the-docs/just-the-docs/pull/964
|
||||
[#967]: https://github.com/just-the-docs/just-the-docs/pull/967
|
||||
[#974]: https://github.com/just-the-docs/just-the-docs/pull/974
|
||||
[#980]: https://github.com/just-the-docs/just-the-docs/pull/980
|
||||
[#985]: https://github.com/just-the-docs/just-the-docs/pull/985
|
||||
[#986]: https://github.com/just-the-docs/just-the-docs/pull/986
|
||||
[#992]: https://github.com/just-the-docs/just-the-docs/pull/992
|
||||
|
||||
[#945]: https://github.com/just-the-docs/just-the-docs/pull/945
|
||||
[#999]: https://github.com/just-the-docs/just-the-docs/pull/999
|
||||
[#1000]: https://github.com/just-the-docs/just-the-docs/pull/1000
|
||||
[#1001]: https://github.com/just-the-docs/just-the-docs/pull/1001
|
||||
[#1010]: https://github.com/just-the-docs/just-the-docs/pull/1010
|
||||
[#1015]: https://github.com/just-the-docs/just-the-docs/pull/1015
|
||||
[#1018]: https://github.com/just-the-docs/just-the-docs/pull/1018
|
||||
[#1019]: https://github.com/just-the-docs/just-the-docs/pull/1019
|
||||
[#1021]: https://github.com/just-the-docs/just-the-docs/pull/1021
|
||||
[#1027]: https://github.com/just-the-docs/just-the-docs/pull/1027
|
||||
[#1029]: https://github.com/just-the-docs/just-the-docs/pull/1029
|
||||
[#1040]: https://github.com/just-the-docs/just-the-docs/pull/1040
|
||||
[#1061]: https://github.com/just-the-docs/just-the-docs/pull/1061
|
||||
[#1065]: https://github.com/just-the-docs/just-the-docs/pull/1065
|
||||
[#1071]: https://github.com/just-the-docs/just-the-docs/pull/1071
|
||||
[#1074]: https://github.com/just-the-docs/just-the-docs/pull/1074
|
||||
[#1076]: https://github.com/just-the-docs/just-the-docs/pull/1076
|
||||
[#1077]: https://github.com/just-the-docs/just-the-docs/pull/1077
|
||||
[#1090]: https://github.com/just-the-docs/just-the-docs/pull/1090
|
||||
[#1091]: https://github.com/just-the-docs/just-the-docs/pull/1091
|
||||
[#1092]: https://github.com/just-the-docs/just-the-docs/pull/1092
|
||||
[#1095]: https://github.com/just-the-docs/just-the-docs/pull/1095
|
||||
|
||||
[#1068]: https://github.com/just-the-docs/just-the-docs/pull/1068
|
||||
[#1135]: https://github.com/just-the-docs/just-the-docs/pull/1135 -->
|
||||
@@ -0,0 +1,7 @@
|
||||
# Pizza2d1's Webpage
|
||||
I made this webpage off the template that was provided by the [just-the-docs repository](https://github.com/just-the-docs/just-the-docs-template)
|
||||
|
||||
## Purpose
|
||||
I wanted to make this webpage so that I could easily share notes and guides that I've made these past few months and so that I can get better at using both HTML and markdown
|
||||
|
||||
To access, go to https://pizza2d1.github.io
|
||||
+208
@@ -0,0 +1,208 @@
|
||||
# Welcome to Jekyll!
|
||||
#
|
||||
# This config file is meant for settings that affect your whole site, values
|
||||
# which you are expected to set up once and rarely edit after that. If you find
|
||||
# yourself editing these this file very often, consider using Jekyll's data files
|
||||
# feature for the data you need to update frequently.
|
||||
#
|
||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||
# 'jekyll serve'. If you change this file, please restart the server process.
|
||||
|
||||
# Site settings
|
||||
# These are used to personalize your new site. If you look in the HTML files,
|
||||
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
|
||||
# You can create any custom variable you would like, and they will be accessible
|
||||
# in the templates via {{ site.myvariable }}.
|
||||
title: Pizza2d1's Webpage
|
||||
description: A Jekyll theme for documentation
|
||||
baseurl: "" # the subpath of your site, e.g. /blog
|
||||
url: "https://pizza2d1.github.io" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
repository: pizza2d1/pizza2d1.github.io # for github-metadata
|
||||
|
||||
permalink: pretty
|
||||
|
||||
defaults:
|
||||
- scope:
|
||||
path: "docs" # an empty string here means all files in the project
|
||||
type: "pages"
|
||||
values:
|
||||
layout: "default"
|
||||
|
||||
exclude:
|
||||
# from https://github.com/jekyll/jekyll/blob/master/lib/site_template/_config.yml:
|
||||
- .sass-cache/
|
||||
- .jekyll-cache/
|
||||
- gemfiles/
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- node_modules/
|
||||
- vendor/bundle/
|
||||
- vendor/cache/
|
||||
- vendor/gems/
|
||||
- vendor/ruby/
|
||||
# specific to the theme website:
|
||||
- bin/
|
||||
- lib/
|
||||
- "*.gemspec"
|
||||
- "*.gem"
|
||||
- LICENSE.txt
|
||||
- package.json
|
||||
- package-lock.json
|
||||
- Rakefile
|
||||
- README.md
|
||||
- CODE_OF_CONDUCT.md
|
||||
- docker-compose.yml
|
||||
- Dockerfile
|
||||
# theme test code
|
||||
- fixtures/
|
||||
|
||||
# Set a path/url to a logo that will be displayed instead of the title
|
||||
#logo: "/assets/images/just-the-docs.png"
|
||||
|
||||
# Enable or disable the site search
|
||||
# Supports true (default) or false
|
||||
search_enabled: true
|
||||
search:
|
||||
# Split pages into sections that can be searched individually
|
||||
# Supports 1 - 6, default: 2
|
||||
heading_level: 2
|
||||
# Maximum amount of previews per search result
|
||||
# Default: 3
|
||||
previews: 2
|
||||
# Maximum amount of words to display before a matched word in the preview
|
||||
# Default: 5
|
||||
preview_words_before: 3
|
||||
# Maximum amount of words to display after a matched word in the preview
|
||||
# Default: 10
|
||||
preview_words_after: 3
|
||||
# Set the search token separator
|
||||
# Default: /[\s\-/]+/
|
||||
# Example: enable support for hyphenated search words
|
||||
tokenizer_separator: /[\s/]+/
|
||||
# Display the relative url in search results
|
||||
# Supports true (default) or false
|
||||
rel_url: true
|
||||
# Enable or disable the search button that appears in the bottom right corner of every page
|
||||
# Supports true or false (default)
|
||||
button: false
|
||||
# Focus the search input by pressing `ctrl + focus_shortcut_key` (or `cmd + focus_shortcut_key` on macOS)
|
||||
focus_shortcut_key: "k"
|
||||
|
||||
# For copy button on code
|
||||
enable_copy_code_button: true
|
||||
|
||||
# By default, consuming the theme as a gem leaves mermaid disabled; it is opt-in
|
||||
mermaid:
|
||||
# Version of mermaid library
|
||||
# Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
|
||||
version: "9.1.6"
|
||||
# Put any additional configuration, such as setting the theme, in _includes/mermaid_config.js
|
||||
# See also docs/ui-components/code
|
||||
# To load mermaid from a local library, also use the `path` key to specify the location of the library; e.g.
|
||||
# for (v10+):
|
||||
# path: "/assets/js/mermaid.esm.min.mjs"
|
||||
# for (<v10):
|
||||
# path: "/assets/js/mermaid.min.js"
|
||||
# Note: copy both `mermaid.esm.min.mjs` (v10+) or `mermaid.min.js` (<v10) and the associated `.map` file from the specified version of `mermaid/dist` to `/assets/js/`.
|
||||
|
||||
# Enable or disable heading anchors
|
||||
heading_anchors: true
|
||||
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"HOMEPAGE":
|
||||
- "https://pizza2d1.github.io"
|
||||
"My Github":
|
||||
- "https://github.com/pizza2d1/"
|
||||
|
||||
|
||||
# Makes Aux links open in a new tab. Default is false
|
||||
aux_links_new_tab: false
|
||||
|
||||
# Enable or disable the side/mobile menu globally
|
||||
# Nav menu can also be selectively enabled or disabled using page variables or the minimal layout
|
||||
nav_enabled: true
|
||||
|
||||
# Sort order for navigation links
|
||||
# nav_sort: case_insensitive # default, equivalent to nil
|
||||
nav_sort: case_sensitive # Capital letters sorted before lowercase
|
||||
|
||||
# External navigation links
|
||||
nav_external_links:
|
||||
- title: King Terry the Terrible
|
||||
url: https://en.wikipedia.org/wiki/Terry_A._Davis
|
||||
|
||||
# Show navigation error report
|
||||
nav_error_report: true # default is false/nil.
|
||||
|
||||
liquid:
|
||||
error_mode: strict
|
||||
strict_filters: true
|
||||
|
||||
# Footer content
|
||||
# appears at the bottom of every page's main content
|
||||
|
||||
# Back to top link
|
||||
back_to_top: true
|
||||
back_to_top_text: "Back to top"
|
||||
|
||||
footer_content: 'Distributed by an <a href="https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt">MIT license.</a> <a href="https://www.netlify.com/">This site is powered by Netlify.</a>'
|
||||
|
||||
# Footer last edited timestamp
|
||||
last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
|
||||
last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
|
||||
|
||||
# # Footer "Edit this page on GitHub" link text
|
||||
# gh_edit_link: true # show or hide edit this page link
|
||||
# gh_edit_link_text: "Edit this page on GitHub"
|
||||
# gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo
|
||||
# gh_edit_branch: "main" # the branch that your docs is served from
|
||||
# # gh_edit_source: docs # the source that your files originate from
|
||||
# gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
|
||||
|
||||
# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
|
||||
color_scheme: dark
|
||||
|
||||
callouts_level: quiet # or loud
|
||||
callouts:
|
||||
highlight:
|
||||
color: yellow
|
||||
important:
|
||||
title: Important
|
||||
color: blue
|
||||
new:
|
||||
title: New
|
||||
color: green
|
||||
note:
|
||||
title: Note
|
||||
color: purple
|
||||
warning:
|
||||
title: Warning
|
||||
color: red
|
||||
|
||||
# Google Analytics Tracking (optional)
|
||||
# Supports a CSV of tracking ID strings (eg. "UA-1234567-89,G-1AB234CDE5")
|
||||
# Note: the main Just the Docs site does *not* use Google Analytics.
|
||||
# ga_tracking: UA-2709176-10,G-5FG1HLH3XQ
|
||||
# ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default)
|
||||
|
||||
plugins:
|
||||
- jekyll-seo-tag
|
||||
- jekyll-github-metadata
|
||||
- jekyll-include-cache
|
||||
- jekyll-sitemap
|
||||
|
||||
kramdown:
|
||||
syntax_highlighter_opts:
|
||||
block:
|
||||
line_numbers: false
|
||||
|
||||
compress_html:
|
||||
clippings: all
|
||||
comments: all
|
||||
endings: all
|
||||
startings: []
|
||||
blanklines: false
|
||||
profile: false
|
||||
# ignore:
|
||||
# envs: all
|
||||
@@ -0,0 +1,15 @@
|
||||
<nav aria-label="Auxiliary" class="aux-nav">
|
||||
<ul class="aux-nav-list">
|
||||
{% for link in site.aux_links %}
|
||||
<li class="aux-nav-list-item">
|
||||
<a href="{{ link.last }}" class="site-button"
|
||||
{% if site.aux_links_new_tab %}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
{% endif %}
|
||||
>
|
||||
{{ link.first }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -0,0 +1,96 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/breadcrumbs.html -%}
|
||||
Depends on: page, site.
|
||||
Includes: components/site_nav.html.
|
||||
Results in: HTML for the breadcrumbs component.
|
||||
Overwrites:
|
||||
nav_list_link, site_nav, nav_list_simple, nav_list_link_class, nav_category,
|
||||
nav_anchor_splits, nav_breadcrumbs, nav_split, nav_split_next, nav_split_test,
|
||||
nav_breadcrumb_link, nav_list_end_less, nav_list_end_count, nav_end_index, nav_breadcrumb.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- if page.url != "/" and page.parent and page.title -%}
|
||||
|
||||
{%- capture site_nav -%}
|
||||
{%- include_cached components/site_nav.html all=true -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_list_link -%}
|
||||
<a href="{{ page.url | relative_url }}" class="nav-list-link">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_list_simple -%}
|
||||
<ul class="nav-list">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_list_link_class %} class="nav-list-link">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_category -%}
|
||||
<div class="nav-category">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign nav_anchor_splits =
|
||||
site_nav | split: nav_list_link |
|
||||
first | split: nav_category |
|
||||
last | split: "</a>" -%}
|
||||
|
||||
{%- comment -%}
|
||||
The ordinary pages (if any) and the collections pages (if any) are separated by
|
||||
occurrences of nav_category.
|
||||
|
||||
Any ancestor nav-links of the page are contained in the last group of pages,
|
||||
immediately preceding nav-lists. After splitting at "</a>", the anchor that
|
||||
was split is a potential ancestor link when the following split starts with
|
||||
a nav-list.
|
||||
|
||||
The array nav_breadcrumbs is the stack of current potential ancestors of the
|
||||
current page. A split that contains one or more "</ul>"s requires that number
|
||||
of potential ancestors to be popped from the stack.
|
||||
|
||||
The number of occurrences of a string in nav_split_next is computed by removing
|
||||
them all, then dividing the resulting size difference by the length of the string.
|
||||
{%- endcomment %}
|
||||
|
||||
{%- assign nav_breadcrumbs = "" | split: "" -%}
|
||||
|
||||
{%- for nav_split in nav_anchor_splits -%}
|
||||
{%- unless forloop.last -%}
|
||||
|
||||
{%- assign nav_split_next = nav_anchor_splits[forloop.index] | strip -%}
|
||||
|
||||
{%- assign nav_split_test =
|
||||
nav_split_next | remove_first: nav_list_simple | prepend: nav_list_simple -%}
|
||||
{%- if nav_split_test == nav_split_next -%}
|
||||
{%- assign nav_breadcrumb_link =
|
||||
nav_split | split: "<a " | last | prepend: "<a " |
|
||||
replace: nav_list_link_class, ">" | append: "</a>" -%}
|
||||
{%- assign nav_breadcrumbs = nav_breadcrumbs | push: nav_breadcrumb_link -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if nav_split_next contains "</ul>" -%}
|
||||
{%- assign nav_list_end_less = nav_split_next | remove: "</ul>" -%}
|
||||
{%- assign nav_list_end_count =
|
||||
nav_split_next.size | minus: nav_list_end_less.size | divided_by: 5 -%}
|
||||
{% for nav_end_index in (1..nav_list_end_count) %}
|
||||
{%- assign nav_breadcrumbs = nav_breadcrumbs | pop -%}
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- endunless -%}
|
||||
{%- endfor -%}
|
||||
|
||||
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
||||
<ol class="breadcrumb-nav-list">
|
||||
{%- for nav_breadcrumb in nav_breadcrumbs %}
|
||||
<li class="breadcrumb-nav-list-item">{{ nav_breadcrumb }}</li>
|
||||
{%- endfor %}
|
||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{% if site.nav_error_report %}
|
||||
{{ nav_error_report }}
|
||||
{% endif %}
|
||||
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,90 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/children_nav.html -%}
|
||||
Depends on: page, site, nav_breadcrumbs.
|
||||
Results in: HTML for the children-navigation component.
|
||||
Includes: components/nav/sorted.html, toc_heading_custom.html.
|
||||
Overwrites:
|
||||
nav_ancestor_links, nav_top_node_titles, nav_child_candidates, nav_children,
|
||||
nav_child, nav_child_ok, nav_child_ancestor, nav_sorted.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- comment -%}
|
||||
Whether a page has any children is checked efficiently by inspecting the cached
|
||||
site_nav. If the page has no children, nav_children is set to an empty array;
|
||||
otherwise nav_children is left unset. (The site_nav is rendered the first time
|
||||
it is included, and that may overwrite various variables.)
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- if page.has_children == false -%}
|
||||
{%- assign nav_children = "" | split: "" -%}
|
||||
{%- else -%}
|
||||
|
||||
{%- capture site_nav -%}
|
||||
{%- include_cached components/site_nav.html all=true -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign nav_children = nil -%}
|
||||
|
||||
{%- capture nav_list_link -%}
|
||||
<a href="{{ page.url | relative_url }}" class="nav-list-link">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_list_simple -%}
|
||||
<ul class="nav-list">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign nav_child_start = site_nav
|
||||
| split: nav_list_link | last
|
||||
| split: "</a>" | slice: 1 | first -%}
|
||||
|
||||
{%- assign nav_child_test = nav_child_start
|
||||
| remove_first: nav_list_simple | prepend: nav_list_simple -%}
|
||||
|
||||
{%- if nav_child_start != nav_child_test -%}
|
||||
{%- assign nav_children = "" | split: "" -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- unless nav_children -%}
|
||||
|
||||
{%- comment -%}
|
||||
The layout is assumed to include components/breadcrumbs.html before this file,
|
||||
otherwise it needs to be included here.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign nav_ancestors = "" | split: "" -%}
|
||||
{%- for nav_link in nav_breadcrumbs -%}
|
||||
{%- assign nav_title = nav_link | split: ">" | slice: 1 | first | append: ">" | remove: "</a>" -%}
|
||||
{%- assign nav_ancestors = nav_ancestors | push: nav_title -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign nav_parenthood = site[page.collection] | default: site.html_pages
|
||||
| where_exp: "item", "item.title != nil" | group_by: "parent" -%}
|
||||
|
||||
{%- assign nav_top_nodes = nav_parenthood
|
||||
| where_exp: "item", "item.name == ''" | map: "items" | first -%}
|
||||
|
||||
{% assign nav_top_node_titles = nav_top_nodes | map: "title" -%}
|
||||
|
||||
{%- include components/nav/children.html node=page ancestors=nav_ancestors all=true -%}
|
||||
|
||||
{%- endunless -%}
|
||||
|
||||
{%- if nav_children.size >= 1 -%}
|
||||
|
||||
{%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
|
||||
{%- assign nav_children = nav_children | reverse -%}
|
||||
{%- endif -%}
|
||||
|
||||
<hr>
|
||||
{% include toc_heading_custom.html %}
|
||||
<ul>
|
||||
{% for nav_child in nav_children %}
|
||||
<li>
|
||||
<a href="{{ nav_child.url | relative_url }}">{{ nav_child.title }}</a>{% if nav_child.summary %} - {{ nav_child.summary }}{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,34 @@
|
||||
{% capture footer_custom %}
|
||||
{%- include footer_custom.html -%}
|
||||
{% endcapture %}
|
||||
{% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link or site.back_to_top %}
|
||||
<hr>
|
||||
<footer>
|
||||
{% if site.back_to_top %}
|
||||
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
|
||||
{% endif %}
|
||||
|
||||
{{ footer_custom }}
|
||||
|
||||
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
||||
<div class="d-flex mt-2">
|
||||
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
|
||||
<p class="text-small text-grey-dk-000 mb-0 mr-2">
|
||||
Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if
|
||||
site.gh_edit_link and
|
||||
site.gh_edit_link_text and
|
||||
site.gh_edit_repository and
|
||||
site.gh_edit_branch and
|
||||
site.gh_edit_view_mode
|
||||
%}
|
||||
<p class="text-small text-grey-dk-000 mb-0">
|
||||
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}{% if page.collection and site.collections_dir %}/{{ site.collections_dir }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div id="main-header" class="main-header">
|
||||
{% if site.search_enabled != false %}
|
||||
{% include components/search_header.html %}
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
{% include header_custom.html %}
|
||||
{% if site.aux_links %}
|
||||
{% include components/aux_nav.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
{% comment %}
|
||||
The complexity of this file comes from a breaking change in Mermaid v10; mermaid.init has been deprecated (and supposedly, didn't work earlier?).
|
||||
|
||||
So, we check whether the user's Mermaid version is >= 10; if not, we fall back to the previous init syntax.
|
||||
|
||||
If a user is using a custom mermaid file and doesn't specify a version, we default to the < v10 behaviour. Users who use version v10 or above should specify this in the version key.
|
||||
{% endcomment %}
|
||||
|
||||
{% if site.mermaid.version %}
|
||||
{% assign mermaid_major_version = site.mermaid.version | split: "." | first | plus: 0 %}
|
||||
{% else %}
|
||||
{% assign mermaid_major_version = 9 %}
|
||||
{% endif %}
|
||||
|
||||
{% if mermaid_major_version > 9 %}
|
||||
|
||||
<script type="module">
|
||||
{% if site.mermaid.path %}
|
||||
import mermaid from '{{ site.mermaid.path | relative_url }}';
|
||||
{% else %}
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.esm.min.mjs';
|
||||
{% endif %}
|
||||
|
||||
var config = {% include mermaid_config.js %};
|
||||
mermaid.initialize(config);
|
||||
mermaid.run({
|
||||
querySelector: '.language-mermaid',
|
||||
});
|
||||
</script>
|
||||
|
||||
{% else %}
|
||||
|
||||
{% if site.mermaid.path %}
|
||||
<script src="{{ site.mermaid.path | relative_url }}"></script>
|
||||
{% else %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"></script>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
var config = {% include mermaid_config.js %};
|
||||
mermaid.initialize(config);
|
||||
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
@@ -0,0 +1,48 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/nav/children.html node=node ancestors=title_array all=bool -%}
|
||||
Depends on: include.node, include.ancestors, include.all, nav_parenthood, nav_top_node_titles.
|
||||
Includes: components/nav/sorted.html.
|
||||
Assigns to: nav_children.
|
||||
Overwrites:
|
||||
nav_candidates, nav_child, nav_child_ok.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign nav_children = "" | split: "" -%}
|
||||
|
||||
{%- if include.all == true or include.node.has_children != false -%}
|
||||
|
||||
{%- assign nav_candidates = nav_parenthood
|
||||
| where: "name", include.node.title | map: "items" | first -%}
|
||||
|
||||
{%- for nav_child in nav_candidates -%}
|
||||
{%- assign nav_child_ok = true -%}
|
||||
|
||||
{%- if nav_child.grand_parent and nav_child.grand_parent != include.node.parent -%}
|
||||
{%- assign nav_child_ok = false -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if nav_child.ancestor and nav_child.ancestor != include.node.title -%}
|
||||
{%- unless include.ancestors contains nav_child.ancestor -%}
|
||||
{%- assign nav_child_ok = false -%}
|
||||
{%- endunless -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- comment -%}
|
||||
The following check rejects nav_child as 3rd-level when include.node is 2nd-level
|
||||
and nav_child can also be 2nd-level. This is for backwards compatibility with
|
||||
existing 3-level sites.
|
||||
{%- endcomment -%}
|
||||
{%- if nav_child.grand_parent == nil and nav_child.ancestor == nil and
|
||||
nav_top_node_titles contains nav_child.parent and include.ancestors.size >= 1 -%}
|
||||
{%- assign nav_child_ok = false -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if nav_child_ok -%}
|
||||
{%- assign nav_children = nav_children | push: nav_child -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- include components/nav/sorted.html pages=nav_children -%}
|
||||
{%- assign nav_children = nav_sorted -%}
|
||||
@@ -0,0 +1,53 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/nav/links.html pages=page_array ancestors=title_array all=bool -%}
|
||||
Depends on: include.pages, include.ancestors, include.all.
|
||||
Results in: HTML for the main navigation when all is nil or false;
|
||||
includes links to pages excluded from the main navigation when all is true.
|
||||
Includes: components/nav/sorted.html, components/nav/children.html, components/nav/links.html.
|
||||
Overwrites:
|
||||
node, nav_children, nav_ancestors.
|
||||
{%- endcomment -%}
|
||||
|
||||
<ul class="nav-list">
|
||||
{%- for node in include.pages -%}
|
||||
{%- if include.all == true or node.nav_exclude != true -%}
|
||||
|
||||
{%- if include.ancestors contains node.title -%}
|
||||
|
||||
<li class="nav-list-item">
|
||||
<a href="{{ node.url | relative_url }}" class="nav-list-link"> ∞ </a>
|
||||
</li>
|
||||
{%- capture nav_error_report -%}
|
||||
<blockquote class="warning">
|
||||
A page has the same title as its parent page or one of its ancestral pages!<br>
|
||||
This causes an incorrect link in the main navigation panel.<br>
|
||||
Page title: <code>{{ node.title }}</code>, location: <code>{{ node.path }}</code>.
|
||||
</blockquote>
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- else -%}
|
||||
|
||||
{%- include components/nav/children.html node=node ancestors=include.ancestors all=include.all -%}
|
||||
|
||||
<li class="nav-list-item">
|
||||
{%- if nav_children.size >= 1 -%}
|
||||
<button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="false">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
<a href="{{ node.url | relative_url }}" class="nav-list-link">{{ node.title }}</a>
|
||||
{%- if nav_children.size >= 1 -%}
|
||||
{%- if node.child_nav_order == 'desc' or node.child_nav_order == 'reversed' -%}
|
||||
{%- assign nav_children = nav_children | reverse -%}
|
||||
{%- endif -%}
|
||||
{%- assign nav_ancestors = include.ancestors | push: node.title -%}
|
||||
{%- include components/nav/links.html pages=nav_children ancestors=nav_ancestors all=include.all -%}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- comment -%}{%- endcomment -%}
|
||||
@@ -0,0 +1,23 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/nav/pages.html pages=page_array all=bool -%}
|
||||
Depends on: include.pages.
|
||||
Results in: HTML for the main navigation when all is nil or false;
|
||||
adds links to pages excluded from the main navigation when all is true.
|
||||
Includes: components/nav/links.html
|
||||
Assigns to:
|
||||
nav_parenthood, nav_top_nodes, nav_top_node_titles, nav_ancestors.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign nav_parenthood = include.pages
|
||||
| where_exp: "item", "item.title != nil" | group_by: "parent" -%}
|
||||
|
||||
{%- assign nav_top_nodes = nav_parenthood
|
||||
| where_exp: "item", "item.name == ''" | map: "items" | first -%}
|
||||
|
||||
{%- include components/nav/sorted.html pages=nav_top_nodes -%}
|
||||
|
||||
{% assign nav_top_node_titles = nav_top_nodes | map: "title" -%}
|
||||
|
||||
{%- assign nav_ancestors = "" | split: "" -%}
|
||||
|
||||
{%- include components/nav/links.html pages=nav_sorted ancestors=nav_ancestors all=include.all -%}
|
||||
@@ -0,0 +1,109 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/nav/sorted.html pages=page_array -%}
|
||||
Depends on: include.pages.
|
||||
Assigns to: nav_sorted.
|
||||
Overwrites:
|
||||
nav_order_pages, title_order_pages, double_quote, empty_array,
|
||||
nav_number_pages, nav_string_pages, nav_order_groups, group,
|
||||
title_number_pages, title_string_pages, title_order_groups.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- comment -%}
|
||||
The `nav_order` values of pages affect the order in which they are shown in
|
||||
the navigation panel and in the automatically generated tables of contents.
|
||||
Sibling pages with the same `nav_order` value may be shown in any order.
|
||||
Sibling pages with no `nav_order` value are shown after all pages that have
|
||||
explicit `nav_order` values, ordered by their `title` values.
|
||||
|
||||
The `nav_order` and `title` values can be numbers or strings. To avoid build
|
||||
failures, we sort numbers and strings separately. We sort numbers by their
|
||||
values, and strings lexicographically. The case-sensitivity of string sorting
|
||||
is determined by the configuration setting of `nav_sort`. Pages with no `title`
|
||||
value are excluded from the navigation.
|
||||
|
||||
Note: Numbers used as `title` or `nav_order` values should not be in quotes,
|
||||
unless you intend them to be lexicographically ordered. Numbers are written
|
||||
without spaces or thousands-separators. Negative numbers are preceded by `-`.
|
||||
Floats are written with the integral and fractional parts separated by `.`.
|
||||
(Bounds on the magnitude and precision are presumably the same as in Liquid.)
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign nav_order_pages = include.pages
|
||||
| where_exp: "item", "item.nav_order != nil" -%}
|
||||
{%- assign title_order_pages = include.pages
|
||||
| where_exp: "item", "item.nav_order == nil" -%}
|
||||
|
||||
{%- comment -%}
|
||||
First, filter `nav_order_pages` and `title_order_pages` according to the type
|
||||
of value to be used for sorting.
|
||||
|
||||
The first character of the result of filtering with `jsonify` is `"` only for
|
||||
strings. Removing `"` from its `slice : 0` has size 0 for strings and 1 for
|
||||
numbers, so grouping the pages gives at most two groups.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign double_quote = '"' -%}
|
||||
{%- assign empty_array = "" | split: "" -%}
|
||||
|
||||
{%- assign nav_string_pages = empty_array -%}
|
||||
{%- assign nav_number_pages = empty_array -%}
|
||||
{%- unless nav_order_pages == empty -%}
|
||||
{%- assign nav_order_groups = nav_order_pages
|
||||
| group_by_exp: "item",
|
||||
"item.nav_order | jsonify | slice: 0 | remove: double_quote | size" -%}
|
||||
{%- for group in nav_order_groups -%}
|
||||
{%- if group.name == 0 -%}
|
||||
{%- assign nav_string_pages = group.items -%}
|
||||
{%- elsif group.name == 1 -%}
|
||||
{%- assign nav_number_pages = group.items -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- assign title_string_pages = empty_array -%}
|
||||
{%- assign title_number_pages = empty_array -%}
|
||||
{%- unless title_order_pages == empty -%}
|
||||
{%- assign title_order_groups = title_order_pages
|
||||
| group_by_exp: "item",
|
||||
"item.title | jsonify | slice: 0 | remove: double_quote | size" -%}
|
||||
{%- for group in title_order_groups -%}
|
||||
{%- if group.name == 0 -%}
|
||||
{%- assign title_string_pages = group.items -%}
|
||||
{%- elsif group.name == 1 -%}
|
||||
{%- assign title_number_pages = group.items -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- comment -%}
|
||||
Now sort each array of pages separately, then concatenate the sorted arrays.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- unless nav_number_pages == empty -%}
|
||||
{%- assign nav_number_pages = nav_number_pages | sort: "nav_order" -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- unless nav_string_pages == empty -%}
|
||||
{%- if site.nav_sort == 'case_insensitive' -%}
|
||||
{%- assign nav_string_pages = nav_string_pages | sort_natural: "nav_order" -%}
|
||||
{%- else -%}
|
||||
{%- assign nav_string_pages = nav_string_pages | sort: "nav_order" -%}
|
||||
{%- endif -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- unless title_number_pages == empty -%}
|
||||
{%- assign title_number_pages = title_number_pages | sort: "title" -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- unless title_string_pages == empty -%}
|
||||
{%- if site.nav_sort == 'case_insensitive' -%}
|
||||
{%- assign title_string_pages = title_string_pages | sort_natural: "title" -%}
|
||||
{%- else -%}
|
||||
{%- assign title_string_pages = title_string_pages | sort: "title" -%}
|
||||
{%- endif -%}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- assign nav_sorted = nav_number_pages
|
||||
| concat: nav_string_pages
|
||||
| concat: title_number_pages
|
||||
| concat: title_string_pages -%}
|
||||
@@ -0,0 +1,7 @@
|
||||
{% if site.search.button %}
|
||||
<button id="search-button" class="search-button btn-reset" aria-label="Focus on search">
|
||||
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<div class="search-overlay"></div>
|
||||
@@ -0,0 +1,9 @@
|
||||
{% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
|
||||
|
||||
<div class="search" role="search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
|
||||
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
||||
</div>
|
||||
<div id="search-results" class="search-results"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include components/sidebar.html -%}
|
||||
Depends on: page(?), site.
|
||||
Results in: HTML for the side bar.
|
||||
Includes:
|
||||
title.html, components/site_nav.html, nav_footer_custom.html
|
||||
Overwrites:
|
||||
nav_footer_custom.
|
||||
Should not be cached, because nav_footer_custom.html might depend on page.
|
||||
{%- endcomment -%}
|
||||
|
||||
<div class="side-bar">
|
||||
<div class="site-header" role="banner">
|
||||
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
||||
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
|
||||
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% include_cached components/site_nav.html %}
|
||||
|
||||
{% capture nav_footer_custom %}
|
||||
{%- include nav_footer_custom.html -%}
|
||||
{% endcapture %}
|
||||
{% if nav_footer_custom != "" %}
|
||||
{{ nav_footer_custom }}
|
||||
{% else %}
|
||||
<footer class="site-footer">
|
||||
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
||||
</footer>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,72 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include_cached components/site_nav.html all=bool -%}
|
||||
Depends on: site.
|
||||
Results in: cached HTML for the main navigation when `all` is nil or false;
|
||||
includes links to pages excluded from the main navigation when `all` is true.
|
||||
Includes:
|
||||
components/nav/pages.html
|
||||
Overwrites:
|
||||
pages_top_size, collections_size, collection_entry,
|
||||
collection_key, collection_value, collection.
|
||||
{%- endcomment -%}
|
||||
|
||||
<nav aria-label="Main" id="site-nav" class="site-nav">
|
||||
{% assign pages_top_size = site.html_pages
|
||||
| where_exp:"item", "item.title != nil"
|
||||
| where_exp:"item", "item.parent == nil"
|
||||
| where_exp:"item", "item.nav_exclude != true"
|
||||
| size %}
|
||||
{% if pages_top_size > 0 %}
|
||||
{% include components/nav/pages.html pages=site.html_pages all=include.all %}
|
||||
{% endif %}
|
||||
{%- if site.nav_external_links -%}
|
||||
<ul class="nav-list">
|
||||
{%- for node in site.nav_external_links -%}
|
||||
<li class="nav-list-item external">
|
||||
<a href="{{ node.url | absolute_url }}" class="nav-list-link external"
|
||||
{% if node.opens_in_new_tab or node.opens_in_new_tab == nil and site.nav_external_links_new_tab %}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
{% endif %}
|
||||
>
|
||||
{{ node.title }}
|
||||
{% unless node.hide_icon %}<svg viewBox="0 0 24 24" aria-labelledby="svg-external-link-title"><use xlink:href="#svg-external-link"></use></svg>{% endunless %}
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{% if site.just_the_docs.collections %}
|
||||
{% assign collections_size = site.just_the_docs.collections | size %}
|
||||
{% for collection_entry in site.just_the_docs.collections %}
|
||||
{% assign collection_key = collection_entry[0] %}
|
||||
{% assign collection_value = collection_entry[1] %}
|
||||
{% assign collection = site[collection_key] %}
|
||||
{% if collection_value.nav_exclude != true %}
|
||||
{% if collections_size > 1 or pages_top_size > 0 %}
|
||||
{% if collection_value.nav_fold == true %}
|
||||
<ul class="nav-list nav-category-list">
|
||||
<li class="nav-list-item">
|
||||
{%- if collection.size > 0 -%}
|
||||
<button class="nav-list-expander btn-reset" aria-label="Toggle collection {{ collection_value.name }}" aria-pressed="false">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
<div class="nav-category">{{ collection_value.name }}</div>
|
||||
{% include components/nav/pages.html pages=collection all=include.all %}
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="nav-category">{{ collection_value.name }}</div>
|
||||
{% include components/nav/pages.html pages=collection all=include.all %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include components/nav/pages.html pages=collection all=include.all %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if site.nav_error_report %}
|
||||
{{ nav_error_report }}
|
||||
{%- endif %}
|
||||
@@ -0,0 +1,325 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include css/activation.scss.liquid -%}
|
||||
Depends on: page.
|
||||
Results in: page-dependent CSS rules for inclusion in a style element,
|
||||
which needs to be disabled when JS is enabled.
|
||||
Includes: components/site_nav.html.
|
||||
Overwrites:
|
||||
activation_no_nav_link, nav_list_link, site_nav,
|
||||
nav_list, nav_list_end, nav_list_item, nav_category_list,
|
||||
nav_list_link_prefix, nav_splits, nav_split, nav_levels,
|
||||
nav_list_less, nav_list_count, nav_end_less, nav_end_count,
|
||||
nav_index, nav_slice_size,
|
||||
activation_collection_prefix, activation_other_collection_prefix.
|
||||
Should not be cached, because it depends on page.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- comment -%}
|
||||
The CSS rules in activation_no_nav_link are for use on pages excluded from the main navigation.
|
||||
- The first rule ensures that no nav-link has a background image.
|
||||
- The other two rules ensure that all folding collections are expanded.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- capture site_nav -%}
|
||||
{%- include_cached components/site_nav.html -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture activation_no_nav_link %}
|
||||
.site-nav ul li a {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
{%- if site.just_the_docs.collections %}
|
||||
.site-nav > ul.nav-category-list > li > button svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list {
|
||||
display: block;
|
||||
}
|
||||
{%- endif %}
|
||||
{% endcapture -%}
|
||||
|
||||
{%- capture nav_list_link -%}
|
||||
<a href="{{ page.url | relative_url }}" class="nav-list-link">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- if site_nav contains nav_list_link -%}
|
||||
|
||||
{%- capture nav_list -%}
|
||||
<ul class="nav-list
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign nav_list_end = "</ul>" -%}
|
||||
|
||||
{%- capture nav_list_item -%}
|
||||
<li class="nav-list-item
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture nav_category_list -%}
|
||||
<ul class="nav-list nav-category-list">
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign nav_list_link_prefix =
|
||||
site_nav | split: nav_list_link | first | append: nav_list_link -%}
|
||||
|
||||
{%- assign nav_splits =
|
||||
nav_list_link_prefix | split: nav_list_item | pop -%}
|
||||
|
||||
{%- assign nav_levels = "" | split: "" | push: 1 -%}
|
||||
|
||||
{%- comment -%}
|
||||
The pattern of occurrences of list and list-item tags in the site_nav string
|
||||
is included in the language defined by the following context-free grammar:
|
||||
|
||||
site_nav = PAGES? EXTERNALS? COLLECTION*
|
||||
|
||||
PAGES = nav_list (nav_list_item PAGES?)+ nav_list_end
|
||||
|
||||
EXTERNALS = nav_list nav_list_item+ nav_list_end
|
||||
|
||||
COLLECTION = nav_list (nav_list_item PAGES?)* nav_list_end
|
||||
| nav_category_list
|
||||
nav_list_item nav_list (nav_list_item PAGES?)* nav_list_end
|
||||
nav_list_end
|
||||
|
||||
To determine the path in the site_nav to the nav_list_link for the current page,
|
||||
the prefix of nav_list_link in site_nav is split at each nav_list_item to give
|
||||
an array of nav_splits.
|
||||
|
||||
In site_nav, occurrences of nav_list must be separated by at least one
|
||||
nav_list_item or nav_list_end. Moreover, when a nav_list_end is followed by a
|
||||
nav_list without an intervening nav_list_item, that nav_list must start either
|
||||
a list of external links or a collection. And when a nav_list is followed by a
|
||||
nav_list_end without an intervening nav_list_item, they form an empty collection.
|
||||
|
||||
nav_levels is the path determined by the previously inspected nav_splits.
|
||||
How many times nav_list and nav_list_end occur in the current nav_split
|
||||
determines how to update the path.
|
||||
|
||||
A nav_split can contain any number of empty non-foldable collections.
|
||||
The path element produced by the outer nav_list of a foldable collection is
|
||||
irrelevant; it is set to zero and subsequently removed.
|
||||
|
||||
The number of occurrences of a string in a nav_split is computed by removing
|
||||
them all, then dividing the resulting size difference by the length of the string.
|
||||
|
||||
Case analysis on (nav_list_count, nav_list_end_count):
|
||||
|
||||
- when (0, 0), the nav_split was between two nav_list_items at the same level;
|
||||
|
||||
- when (0, N+1), all the nav_list_ends in the nav_split are in PAGES or in one
|
||||
COLLECTION;
|
||||
|
||||
- when (M+1, 0), M must be 0 (because two nav_lists in the same nav_split must
|
||||
be separated by at least one nav_list_end);
|
||||
|
||||
- when (M+1, N+1), the nav_split must contain either:
|
||||
- the end of PAGES followed by the start of EXTERNALS, or
|
||||
- the end of PAGES followed by the start of a COLLECTION, or
|
||||
- the end of EXTERNALS followed by the start of a COLLECTION, or
|
||||
- the end of one COLLECTION followed by the start of another, or
|
||||
- (in the first nav_split) one or more empty non-foldable COLLECTIONS
|
||||
followed by the start of a COLLECTION.
|
||||
In general, nav_levels[0] here needs to be incremented by nav_list_count.
|
||||
However, a nav_split that contains the end of an empty foldable collection
|
||||
followed by the just the start of a collection has two occurrences of nav_list,
|
||||
and the increment needs to be one less; similarly when the first nav_split
|
||||
starts with an empty non-foldable collection.
|
||||
{%- endcomment %}
|
||||
|
||||
{%- for nav_split in nav_splits -%}
|
||||
|
||||
{%- assign nav_list_less = nav_split | remove: nav_list -%}
|
||||
{%- assign nav_list_count =
|
||||
nav_split.size | minus: nav_list_less.size |
|
||||
divided_by: nav_list.size -%}
|
||||
|
||||
{%- assign nav_list_end_less = nav_split | remove: nav_list_end -%}
|
||||
{%- assign nav_list_end_count =
|
||||
nav_split.size | minus: nav_list_end_less.size |
|
||||
divided_by: nav_list_end.size -%}
|
||||
|
||||
{%- if nav_list_count == 0 and nav_list_end_count == 0 -%}
|
||||
|
||||
{%- assign nav_index = nav_levels[-1] | plus: 1 -%}
|
||||
{%- assign nav_levels = nav_levels | pop | push: nav_index -%}
|
||||
|
||||
{%- elsif nav_list_count == 0 and nav_list_end_count >= 1 -%}
|
||||
|
||||
{%- assign nav_slice_size = nav_levels.size | minus: nav_list_end_count -%}
|
||||
{%- assign nav_levels = nav_levels | slice: 0, nav_slice_size -%}
|
||||
{%- assign nav_index = nav_levels[-1] | plus: 1 -%}
|
||||
{%- assign nav_levels = nav_levels | pop | push: nav_index -%}
|
||||
|
||||
{%- elsif nav_list_count == 1 and nav_list_end_count == 0 -%}
|
||||
|
||||
{%- if nav_split contains nav_category_list -%}
|
||||
{%- assign nav_levels = nav_levels | push: 0 -%}
|
||||
{%- else -%}
|
||||
{%- assign nav_levels = nav_levels | push: 1 -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- elsif nav_list_count >= 1 and nav_list_end_count >= 1 -%}
|
||||
|
||||
{%- assign nav_index = nav_levels[0] | plus: nav_list_count -%}
|
||||
{%- if nav_levels[-1] == 0 or forloop.first -%}
|
||||
{%- assign nav_index = nav_index | minus: 1 -%}
|
||||
{%- endif -%}
|
||||
{%- assign nav_levels = nav_levels | slice: 0, 0 | push: nav_index -%}
|
||||
{%- if nav_split contains nav_category_list -%}
|
||||
{%- assign nav_levels = nav_levels | push: 0 -%}
|
||||
{%- else -%}
|
||||
{%- assign nav_levels = nav_levels | push: 1 -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign nav_levels = nav_levels | where_exp: "item", "item >= 1" -%}
|
||||
|
||||
{%- comment -%}
|
||||
The generated CSS depends on the position of the current page in each level in
|
||||
the navigation.
|
||||
|
||||
nav_page_level is the depth of the navigation hierarchy (ignoring collections).
|
||||
In existing 3-level sites, nav_page_level <= 3.
|
||||
In multi-level sites, nav_page_level is unbounded.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign nav_page_level = nav_levels.size | minus: 1 -%}
|
||||
{%- assign nav_page_parent_level = nav_page_level | minus: 1 -%}
|
||||
{%- assign nav_page_grandparent_level = nav_page_level | minus: 2 -%}
|
||||
|
||||
{%- comment -%}
|
||||
The site-nav is:
|
||||
- an optional ul.nav-list with li.nav-list-items for non-collection top-level pages
|
||||
- an optional ul.nav-list with li.nav-list-item.externals
|
||||
- any number of just-the-docs.collections
|
||||
|
||||
A non-foldable collection is:
|
||||
- a div.nav-category with the collection name, followed by:
|
||||
- a ul.nav-list with li.nav-list-items for its top-level pages
|
||||
|
||||
A foldable collection is:
|
||||
- a ul.nav-list.nav-category-list with a single li.nav-list-item containing:
|
||||
- an optional button with the expander svg
|
||||
- a div.nav-category with the collection name
|
||||
- a ul.nav-list with li.nav-list-items for its top-level pages
|
||||
|
||||
The generated CSS uses:
|
||||
- activation_collection_prefix, to select the site-nav > ul.nav-list for the page
|
||||
- activation_other_collection_prefix, to select all the other site-nav > ul.nav-lists
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- if page.collection == nil -%}
|
||||
|
||||
{%- capture activation_collection_prefix -%}
|
||||
.site-nav > ul.nav-list:first-child
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture activation_other_collection_prefix -%}
|
||||
.site-nav > ul.nav-list:not(:first-child)
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- else -%}
|
||||
|
||||
{%- capture activation_collection_prefix -%}
|
||||
.site-nav > ul:nth-of-type({{ nav_levels[0] }})
|
||||
{%- if site.just_the_docs.collections[page.collection].nav_fold %} > li > ul
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture activation_other_collection_prefix -%}
|
||||
.site-nav > ul:not(:nth-of-type({{ nav_levels[0] }}))
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- comment -%}
|
||||
The required background image of the link to the current page may involve SCSS.
|
||||
To avoid page-dependent SCSS, all nav links initially have that background image.
|
||||
The following rule removes the image from the links to all parents, siblings,
|
||||
and children of the current page.
|
||||
{%- endcomment %}
|
||||
|
||||
{% if nav_page_level >= 2 -%}
|
||||
{%- for i in (1..nav_page_parent_level) -%}
|
||||
{{ activation_collection_prefix }} >
|
||||
{%- for j in (2..i) %} li > ul >
|
||||
{%- endfor %} li > a,
|
||||
{% endfor -%}
|
||||
{%- endif %}
|
||||
{{ activation_collection_prefix }} >
|
||||
{%- for i in (1..nav_page_parent_level) %} li > ul >
|
||||
{%- endfor %} li:not(:nth-child({{ nav_levels[nav_page_level] }})) > a,
|
||||
{{ activation_collection_prefix }} >
|
||||
{%- for i in (1..nav_page_level) %} li > ul >
|
||||
{%- endfor %} li a {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
{%- comment -%}
|
||||
The following rule removes the image from the links to pages in other collections.
|
||||
{%- endcomment %}
|
||||
|
||||
{{ activation_other_collection_prefix }} a,
|
||||
.site-nav li.external a {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
{%- comment -%}
|
||||
The following rule styles the link to the current page.
|
||||
{%- endcomment %}
|
||||
|
||||
{{ activation_collection_prefix }} > li:nth-child({{ nav_levels[1] }})
|
||||
{%- for i in (2..nav_page_level) %} > ul > li:nth-child({{ nav_levels[i] }})
|
||||
{%- endfor %} > a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
{%- comment -%}
|
||||
The following rules unfold all collections, and display the links to any children
|
||||
of the current page.
|
||||
|
||||
To avoid dependence on the SCSS variable nav-list-expander-right, the direction
|
||||
of the rotation of the expander icon is fixed, and corresponds to the appearance
|
||||
when nav-list-expander-right is true. This results in a minor visual difference
|
||||
between the appearance of active expander icons when JS is enabled/disabled and
|
||||
nav-list-expander-right is false, which seems unavoidable.
|
||||
{%- endcomment %}
|
||||
|
||||
{%- if site.just_the_docs.collections %}
|
||||
.site-nav > ul.nav-category-list > li > button svg,
|
||||
{% endif -%}
|
||||
{{ activation_collection_prefix }} > li:nth-child({{ nav_levels[1] }}) > button svg
|
||||
{%- for i in (2..nav_page_level) %},
|
||||
{{ activation_collection_prefix }} > li:nth-child({{ nav_levels[1] }}) >
|
||||
{%- for j in (2..i) %} ul > li:nth-child({{ nav_levels[j] }}) >
|
||||
{%- endfor %} button svg
|
||||
{%- endfor %} {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
{%- if site.just_the_docs.collections %}
|
||||
.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list,
|
||||
{% endif -%}
|
||||
{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ nav_levels[1] }}) > ul.nav-list
|
||||
{%- for i in (2..nav_page_level) %},
|
||||
{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ nav_levels[1] }}) >
|
||||
{%- for j in (2..i) %} ul.nav-list > li.nav-list-item:nth-child({{ nav_levels[j] }}) >
|
||||
{%- endfor %} ul.nav-list
|
||||
{%- endfor %} {
|
||||
display: block;
|
||||
}
|
||||
|
||||
{%- else -%}
|
||||
|
||||
{%- comment -%}
|
||||
not site_nav contains nav_list_link
|
||||
{%- endcomment -%}
|
||||
|
||||
{{ activation_no_nav_link }}
|
||||
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,93 @@
|
||||
{%- comment -%}
|
||||
{% include css/callouts.scss.liquid color_scheme = string %}
|
||||
produces SCSS for all the callouts in site.callouts. For the "dark"
|
||||
color scheme, the levels of the text and background colors are reversed.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign callout_background_hue = "000" -%}
|
||||
{%- assign callout_color_hue = "300" -%}
|
||||
{%- if site.callouts_level == "loud" or include.color_scheme == "dark" and site.callouts_level != "quiet" -%}
|
||||
{%- assign callout_background_hue = "300" -%}
|
||||
{%- assign callout_color_hue = "000" -%}
|
||||
{%- endif -%}
|
||||
|
||||
div.opaque {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
{%- for callout in site.callouts %}
|
||||
|
||||
{%- assign callout_opacity = callout[1].opacity | default: site.callouts_opacity | default: 0.2 -%}
|
||||
|
||||
p.{{ callout[0] }}, blockquote.{{ callout[0] }} {
|
||||
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
|
||||
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
padding: .8rem;
|
||||
{% if callout[1].title %}
|
||||
&::before {
|
||||
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
||||
content: "{{ callout[1].title }}";
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: .75em;
|
||||
padding-bottom: .125rem;
|
||||
}
|
||||
{% endif %}
|
||||
> .{{ callout[0] }}-title {
|
||||
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: .75em;
|
||||
padding-bottom: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
p.{{ callout[0] }}-title, blockquote.{{ callout[0] }}-title {
|
||||
background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
|
||||
border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
padding: .8rem;
|
||||
> p:first-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: ${{ callout[1].color }}-{{ callout_color_hue }};
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: .75em;
|
||||
padding-bottom: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.{{ callout[0] }} {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
> p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.{{ callout[0] }}-title {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
> p:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
{% endfor -%}
|
||||
@@ -0,0 +1 @@
|
||||
@import "./custom/custom";
|
||||
@@ -0,0 +1,12 @@
|
||||
{% if site.logo %}
|
||||
$logo: "{{ site.logo | relative_url }}";
|
||||
{% endif %}
|
||||
@import "./support/support";
|
||||
@import "./custom/setup";
|
||||
@import "./color_schemes/light";
|
||||
{% unless include.color_scheme == "light" %}
|
||||
@import "./color_schemes/{{ include.color_scheme }}";
|
||||
{% endunless %}
|
||||
@import "./modules";
|
||||
{% include css/callouts.scss.liquid color_scheme = include.color_scheme %}
|
||||
{% include css/custom.scss.liquid %}
|
||||
@@ -0,0 +1,23 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include_cached favicon.html -%}
|
||||
Depends on: site.static_files.
|
||||
Results in: HTML for a link to an existing `favicon.ico` file.
|
||||
Overwrites:
|
||||
file.
|
||||
|
||||
The endoflife.date site has 226 pages and 3410 static files. @marcwrobel pointed
|
||||
out that the time taken by evaluating the code in this file on every page when
|
||||
building that site was significant, and suggested making it optional. As it is
|
||||
page-independent, it can easily be cached. Doing that reduced the time taken by
|
||||
rendering `_includes/head.html` from 15.294s to 10.760s, thereby reducing the
|
||||
total build time from 26.074s to 21.656s -- a saving of about 17%.
|
||||
{%- endcomment -%}
|
||||
|
||||
{% for file in site.static_files %}
|
||||
{% if file.path == site.favicon_ico or file.path == '/favicon.ico' %}
|
||||
{% assign favicon = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if favicon %}
|
||||
<link rel="icon" href="{{ site.favicon_ico | default: '/favicon.ico' | relative_url }}" type="image/x-icon">
|
||||
{% endif %}
|
||||
@@ -0,0 +1,73 @@
|
||||
{%- comment -%}
|
||||
This file was previously used to "fix" the HTML produced by Jekyll for
|
||||
highlighted code with line numbers. While it often resolves layout issues
|
||||
from the missing HTML tags, it still generates invalid HTML (by placing
|
||||
a `<table>` element within a `<code>` block). As such, we no longer
|
||||
recommend using this workaround. For more information, see the
|
||||
"Code snippets with line numbers" docs page:
|
||||
https://just-the-docs.com/docs/ui-components/code/line-numbers/
|
||||
(or, docs/ui-components/line-nos.md/)
|
||||
|
||||
The next portion of this file, including the comments and the workaround,
|
||||
are preserved for backwards comptability.
|
||||
|
||||
ACKNOWLEDGEMENTS
|
||||
|
||||
The implementation was derived from the workaround provided by
|
||||
Dmitry Hrabrov (DeXP) at
|
||||
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
|
||||
|
||||
EXPLANATION (OLD)
|
||||
|
||||
The HTML produced by Rouge highlighting with line numbers is of the form
|
||||
`code table`. Jekyll always wraps the highlighted HTML
|
||||
with `pre`. This wrapping is not only unnecessary, but also transforms
|
||||
the conforming HTML produced by Rouge to non-conforming HTML, which
|
||||
results in HTML validation error reports.
|
||||
|
||||
The fix removes the outer `pre` tags whenever they contain the pattern
|
||||
`<table class="rouge-table">`.
|
||||
|
||||
Apart from avoiding HTML validation errors, the fix allows the use of
|
||||
the [Jekyll layout for compressing HTML](http://jch.penibelst.de),
|
||||
which relies on `pre` tags not being nested, according to
|
||||
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-172069842
|
||||
|
||||
USAGE
|
||||
|
||||
(Any names can be used for `some_var` and `some_language`.)
|
||||
|
||||
{% capture some_var %}
|
||||
{% highlight some_language linenos %}
|
||||
Some code
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
{% include fix_linenos.html code=some_var %}
|
||||
|
||||
For code fences:
|
||||
|
||||
{% capture some_var %}
|
||||
```some_language
|
||||
Some code
|
||||
```
|
||||
{% endcapture %}
|
||||
{% assign some_var = some_var | markdownify %}
|
||||
{% include fix_linenos.html code=some_var %}
|
||||
|
||||
CAVEATS
|
||||
|
||||
The above does not work when `Some code` happens to contain the matched string
|
||||
`<table class="rouge-table">`.
|
||||
|
||||
The use of this file overwrites the variable `fix_linenos_code` with `nil`.
|
||||
|
||||
{%- endcomment -%}
|
||||
|
||||
{% assign fix_linenos_code = include.code %}
|
||||
{% if fix_linenos_code contains '<table class="rouge-table">' %}
|
||||
{% assign fix_linenos_code = fix_linenos_code | replace: '<pre class="highlight">', '<pre>' %}
|
||||
{% assign fix_linenos_code = fix_linenos_code | replace: "<pre><code", "<code" %}
|
||||
{% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %}
|
||||
{% endif %}
|
||||
{{ fix_linenos_code }}
|
||||
{% assign fix_linenos_code = nil %}
|
||||
@@ -0,0 +1,3 @@
|
||||
{%- if site.footer_content -%}
|
||||
<p class="text-small text-grey-dk-100 mb-0">{{ site.footer_content }}</p>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,53 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include head.html -%}
|
||||
Depends on: site.ga_tracking, site.ga_tracking_anonymize_ip,
|
||||
site.search_enabled, site.static_files, site.favicon_ico.
|
||||
Results in: HTML for the head element.
|
||||
Includes:
|
||||
css/activation.scss.liquid, head_custom.html.
|
||||
Overwrites:
|
||||
ga_tracking_ids, ga_property, file, favicon.
|
||||
Should not be cached, because included files depend on page.
|
||||
{%- endcomment -%}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-head-nav.css' | relative_url }}" id="jtd-head-nav-stylesheet">
|
||||
|
||||
<style id="jtd-nav-activation">
|
||||
{% include css/activation.scss.liquid %}
|
||||
</style>
|
||||
|
||||
{% if site.ga_tracking != nil %}
|
||||
{% assign ga_tracking_ids = site.ga_tracking | split: "," %}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{ ga_tracking_ids.first }}"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
{% for ga_property in ga_tracking_ids %}
|
||||
gtag('config', '{{ ga_property }}'{% unless site.ga_tracking_anonymize_ip == nil %}, { 'anonymize_ip': true }{% endunless %});
|
||||
{% endfor %}
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.search_enabled != false %}
|
||||
<script src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{% include_cached favicon.html %}
|
||||
|
||||
{% seo %}
|
||||
|
||||
{% include head_custom.html %}
|
||||
|
||||
</head>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
|
||||
<symbol id="svg-copy" viewBox="0 0 16 16">
|
||||
<title>Copy</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="svg-copied" viewBox="0 0 16 16">
|
||||
<title>Copied</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1,6 @@
|
||||
<symbol id="svg-doc" viewBox="0 0 24 24">
|
||||
<title>Document</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
|
||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1,6 @@
|
||||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||||
<title>Expand</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
|
||||
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
|
||||
<title id="svg-external-link-title">(external link)</title>
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</symbol>
|
||||
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
{% include icons/link.html %}
|
||||
{% include icons/menu.html %}
|
||||
{% include icons/expand.html %}
|
||||
{% include icons/external_link.html %}
|
||||
{% if site.search_enabled != false %}
|
||||
{% include icons/document.html %}
|
||||
{% include icons/search.html %}
|
||||
{% endif %}
|
||||
{% if site.enable_copy_code_button != false %}
|
||||
{% include icons/code_copy.html %}
|
||||
{% endif %}
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@@ -0,0 +1,6 @@
|
||||
<symbol id="svg-link" viewBox="0 0 24 24">
|
||||
<title>Link</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1,6 @@
|
||||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||||
<title>Menu</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1,6 @@
|
||||
<symbol id="svg-search" viewBox="0 0 24 24">
|
||||
<title>Search</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
|
||||
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</symbol>
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1 @@
|
||||
Search {{site.title}}
|
||||
@@ -0,0 +1,5 @@
|
||||
{% if site.logo %}
|
||||
<div class="site-logo" role="img" aria-label="{{ site.title }}"></div>
|
||||
{% else %}
|
||||
{{ site.title }}
|
||||
{% endif %}
|
||||
@@ -0,0 +1 @@
|
||||
<h2 class="text-delta">Table of contents</h2>
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
layout: table_wrappers
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="{{ site.lang | default: 'en-US' }}">
|
||||
{% include head.html %}
|
||||
<body>
|
||||
<a class="skip-to-main" href="#main-content">Skip to main content</a>
|
||||
{% include icons/icons.html %}
|
||||
{% if page.nav_enabled == true %}
|
||||
{% include components/sidebar.html %}
|
||||
{% elsif layout.nav_enabled == true and page.nav_enabled == nil %}
|
||||
{% include components/sidebar.html %}
|
||||
{% elsif site.nav_enabled != false and layout.nav_enabled == nil and page.nav_enabled == nil %}
|
||||
{% include components/sidebar.html %}
|
||||
{% endif %}
|
||||
<div class="main" id="top">
|
||||
{% include components/header.html %}
|
||||
<div class="main-content-wrap">
|
||||
{% include components/breadcrumbs.html %}
|
||||
<div id="main-content" class="main-content">
|
||||
<main>
|
||||
{% if site.heading_anchors != false %}
|
||||
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
|
||||
{% if page.has_toc != false %}
|
||||
{% include components/children_nav.html %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include components/footer.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% if site.search_enabled != false %}
|
||||
{% include components/search_footer.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if site.mermaid %}
|
||||
{% include components/mermaid.html %}
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
nav_enabled: false
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: vendor/compress
|
||||
---
|
||||
|
||||
{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
|
||||
{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
|
||||
{{ content_ }}
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
// Base element style overrides
|
||||
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
:root {
|
||||
color-scheme: $color-scheme;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
background-color: $body-background-color;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
table,
|
||||
div,
|
||||
hr,
|
||||
form,
|
||||
fieldset,
|
||||
noscript .table-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
#toctitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 500;
|
||||
line-height: $body-heading-line-height;
|
||||
color: $body-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $border-color;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: rgba($link-color, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $mono-font-family;
|
||||
font-size: 0.75em;
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
figure,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// adds a GitHub-style sidebar to blockquotes
|
||||
blockquote {
|
||||
margin: 10px 0;
|
||||
|
||||
// resets user-agent stylesheets for blockquotes
|
||||
margin-block-start: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-left: 1rem;
|
||||
border-left: 3px solid $border-color;
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
// Buttons and things that look like buttons
|
||||
// stylelint-disable color-named
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em 1em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: $base-button-color;
|
||||
border-width: 0;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: darken($link-color, 2%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: darken($base-button-color, 1%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($base-button-color, 3%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#dcdcdc, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
cursor: default;
|
||||
background-color: rgba(229, 229, 229, 0.5);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: $link-color;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: darken($link-color, 4%);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $grey-dk-100,
|
||||
0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-color($white, $btn-primary-color);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include btn-color($white, $blue-000);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include btn-color($white, $green-100);
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
text-align: inherit;
|
||||
font: inherit;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
}
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
// Code and syntax highlighting
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty
|
||||
|
||||
// {% raw %}
|
||||
|
||||
// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
|
||||
:not(pre, figure) {
|
||||
& > code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid appearance of dark border around visited code links in Safari
|
||||
a:visited code {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
// Content structure for highlighted code blocks using fences or Liquid
|
||||
//
|
||||
// ```[LANG]...```, no kramdown line_numbers:
|
||||
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
|
||||
//
|
||||
// ```[LANG]...```, kramdown line_numbers = true:
|
||||
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
|
||||
// > div.table-wrapper > table.rouge-table > tbody > tr
|
||||
// > td.rouge-gutter.gl > pre.lineno
|
||||
// | td.rouge-code > pre
|
||||
//
|
||||
// {% highlight LANG %}...{% endhighlight %}:
|
||||
// figure.highlight > pre > code.language-LANG
|
||||
//
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
// figure.highlight > pre > code.language-LANG
|
||||
// > div.table-wrapper > table.rouge-table > tbody > tr
|
||||
// > td.gutter.gl > pre.lineno
|
||||
// | td.code > pre
|
||||
//
|
||||
// ----...---- (AsciiDoc)
|
||||
// div.listingblock > div.content > pre.rouge.highlight
|
||||
//
|
||||
// fix_linenos removes the outermost pre when it encloses table.rouge-table
|
||||
//
|
||||
// See docs/index-test.md for some tests.
|
||||
//
|
||||
// No kramdown line_numbers: fences and Liquid highlighting look the same.
|
||||
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
|
||||
|
||||
// ```[LANG]...```
|
||||
// or in AsciiDoc:
|
||||
//
|
||||
// ----
|
||||
// ...
|
||||
// ----
|
||||
|
||||
// the code may appear with 3 different types:
|
||||
// container \ case: default case, code with line number, code with html rendering
|
||||
// top level: div.highlighter-rouge, figure.highlight, figure.highlight
|
||||
// second level: div.highlight, div.table-wrapper, pre.highlight
|
||||
// third level: pre.highlight, td.code, absent
|
||||
// last level: code, pre, code (optionality)
|
||||
// highlighter level: span, span, span
|
||||
// the spacing are only in the second level for case 1, 3 and in the third level for case 2
|
||||
// in AsciiDoc, there is a parent container that contains optionally a title and the content.
|
||||
|
||||
// select top level container
|
||||
div.highlighter-rouge,
|
||||
div.listingblock > div.content,
|
||||
figure.highlight {
|
||||
margin-top: 0;
|
||||
margin-bottom: $sp-3;
|
||||
background-color: $code-background-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
// copy button (or other button)
|
||||
// the button appear only when there is a hover on the code or focus on button
|
||||
> button {
|
||||
width: $sp-3;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: $sp-3 solid $code-background-color;
|
||||
background-color: $code-background-color;
|
||||
color: $body-text-color;
|
||||
box-sizing: content-box;
|
||||
|
||||
svg {
|
||||
fill: $body-text-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// the button can be seen by doing a simple hover in the code, there is no need to go over the location of the button
|
||||
&:hover {
|
||||
> button {
|
||||
cursor: copy;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// setting the spacing and scrollbar on the second level for the first case
|
||||
// remove all space on the second and third level
|
||||
// this is a mixin to accommodate for the slightly different structures generated via Markdown vs AsciiDoc
|
||||
@mixin scroll-and-spacing($code-div, $pre-select) {
|
||||
#{$code-div} {
|
||||
overflow-x: auto;
|
||||
padding: $sp-3;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#{$pre-select},
|
||||
code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// for Markdown
|
||||
div.highlighter-rouge {
|
||||
@include scroll-and-spacing("div.highlight", "pre.highlight");
|
||||
}
|
||||
|
||||
// for AsciiDoc. we also need to fix the margins for its parent container.
|
||||
div.listingblock {
|
||||
margin-top: 0;
|
||||
margin-bottom: $sp-3;
|
||||
|
||||
@include scroll-and-spacing("div.content", "div.content > pre");
|
||||
}
|
||||
|
||||
// {% highlight LANG %}...{% endhighlight %},
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
|
||||
// setting the spacing and scrollbar on the second level for the thirt case
|
||||
// the css rule are apply only to the last code enviroment
|
||||
// setting the scroolbar
|
||||
figure.highlight {
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
overflow-x: auto;
|
||||
padding: $sp-3;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ```[LANG]...```, kramdown line_numbers = true,
|
||||
// {% highlight LANG linenos %}...{% endhighlight %}:
|
||||
|
||||
// setting the spacing and scrollbar on the thirt level for the second case
|
||||
.highlight .table-wrapper {
|
||||
padding: $sp-3 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
td,
|
||||
pre {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background-color: $code-background-color;
|
||||
border: 0;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
td.gl {
|
||||
width: 1em;
|
||||
padding-right: $sp-3;
|
||||
padding-left: $sp-3;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Code examples: html render of a code
|
||||
.code-example,
|
||||
.listingblock > .title {
|
||||
padding: $sp-3;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: auto;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ .sectionbody .listingblock,
|
||||
+ .content,
|
||||
+ figure.highlight {
|
||||
position: relative;
|
||||
margin-top: -$sp-4;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-left: 1px solid $border-color;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Mermaid diagram code blocks should be left unstyled.
|
||||
code.language-mermaid {
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Override OneDarkJekyll Colors for Code Blocks
|
||||
.highlight,
|
||||
pre.highlight {
|
||||
background: $code-background-color; // Code Background
|
||||
// For Backwards Compatibility Before $code-linenumber-color was added
|
||||
@if variable-exists(code-linenumber-color) {
|
||||
color: $code-linenumber-color; // Code Line Numbers
|
||||
} @else {
|
||||
color: $body-text-color; // Code Line Numbers
|
||||
}
|
||||
}
|
||||
|
||||
// Override OneDarkJekyll Colors for Code Blocks
|
||||
.highlight pre {
|
||||
background: $code-background-color; // Code Background
|
||||
}
|
||||
|
||||
// {% endraw %}
|
||||
@@ -0,0 +1,18 @@
|
||||
$color-scheme: dark;
|
||||
$body-background-color: $grey-dk-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$body-text-color: $grey-lt-300;
|
||||
$link-color: $blue-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$base-button-color: $grey-dk-250;
|
||||
$btn-primary-color: $blue-200;
|
||||
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
|
||||
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
|
||||
$feedback-color: darken($sidebar-color, 3%);
|
||||
$table-background-color: $grey-dk-250;
|
||||
$search-background-color: $grey-dk-250;
|
||||
$search-result-preview-color: $grey-dk-000;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
@import "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme
|
||||
@@ -0,0 +1,208 @@
|
||||
// Moved from _sass/code.scss
|
||||
|
||||
.highlight .c {
|
||||
color: #586e75;
|
||||
} // comment //
|
||||
.highlight .err {
|
||||
color: #93a1a1;
|
||||
} // error //
|
||||
.highlight .g {
|
||||
color: #93a1a1;
|
||||
} // generic //
|
||||
.highlight .k {
|
||||
color: #859900;
|
||||
} // keyword //
|
||||
.highlight .l {
|
||||
color: #93a1a1;
|
||||
} // literal //
|
||||
.highlight .n {
|
||||
color: #93a1a1;
|
||||
} // name //
|
||||
.highlight .o {
|
||||
color: #859900;
|
||||
} // operator //
|
||||
.highlight .x {
|
||||
color: #cb4b16;
|
||||
} // other //
|
||||
.highlight .p {
|
||||
color: #93a1a1;
|
||||
} // punctuation //
|
||||
.highlight .cm {
|
||||
color: #586e75;
|
||||
} // comment.multiline //
|
||||
.highlight .cp {
|
||||
color: #859900;
|
||||
} // comment.preproc //
|
||||
.highlight .c1 {
|
||||
color: #586e75;
|
||||
} // comment.single //
|
||||
.highlight .cs {
|
||||
color: #859900;
|
||||
} // comment.special //
|
||||
.highlight .gd {
|
||||
color: #2aa198;
|
||||
} // generic.deleted //
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
color: #93a1a1;
|
||||
} // generic.emph //
|
||||
.highlight .gr {
|
||||
color: #dc322f;
|
||||
} // generic.error //
|
||||
.highlight .gh {
|
||||
color: #cb4b16;
|
||||
} // generic.heading //
|
||||
.highlight .gi {
|
||||
color: #859900;
|
||||
} // generic.inserted //
|
||||
.highlight .go {
|
||||
color: #93a1a1;
|
||||
} // generic.output //
|
||||
.highlight .gp {
|
||||
color: #93a1a1;
|
||||
} // generic.prompt //
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
color: #93a1a1;
|
||||
} // generic.strong //
|
||||
.highlight .gu {
|
||||
color: #cb4b16;
|
||||
} // generic.subheading //
|
||||
.highlight .gt {
|
||||
color: #93a1a1;
|
||||
} // generic.traceback //
|
||||
.highlight .kc {
|
||||
color: #cb4b16;
|
||||
} // keyword.constant //
|
||||
.highlight .kd {
|
||||
color: #268bd2;
|
||||
} // keyword.declaration //
|
||||
.highlight .kn {
|
||||
color: #859900;
|
||||
} // keyword.namespace //
|
||||
.highlight .kp {
|
||||
color: #859900;
|
||||
} // keyword.pseudo //
|
||||
.highlight .kr {
|
||||
color: #268bd2;
|
||||
} // keyword.reserved //
|
||||
.highlight .kt {
|
||||
color: #dc322f;
|
||||
} // keyword.type //
|
||||
.highlight .ld {
|
||||
color: #93a1a1;
|
||||
} // literal.date //
|
||||
.highlight .m {
|
||||
color: #2aa198;
|
||||
} // literal.number //
|
||||
.highlight .s {
|
||||
color: #2aa198;
|
||||
} // literal.string //
|
||||
.highlight .na {
|
||||
color: #555;
|
||||
} // name.attribute //
|
||||
.highlight .nb {
|
||||
color: #b58900;
|
||||
} // name.builtin //
|
||||
.highlight .nc {
|
||||
color: #268bd2;
|
||||
} // name.class //
|
||||
.highlight .no {
|
||||
color: #cb4b16;
|
||||
} // name.constant //
|
||||
.highlight .nd {
|
||||
color: #268bd2;
|
||||
} // name.decorator //
|
||||
.highlight .ni {
|
||||
color: #cb4b16;
|
||||
} // name.entity //
|
||||
.highlight .ne {
|
||||
color: #cb4b16;
|
||||
} // name.exception //
|
||||
.highlight .nf {
|
||||
color: #268bd2;
|
||||
} // name.function //
|
||||
.highlight .nl {
|
||||
color: #555;
|
||||
} // name.label //
|
||||
.highlight .nn {
|
||||
color: #93a1a1;
|
||||
} // name.namespace //
|
||||
.highlight .nx {
|
||||
color: #555;
|
||||
} // name.other //
|
||||
.highlight .py {
|
||||
color: #93a1a1;
|
||||
} // name.property //
|
||||
.highlight .nt {
|
||||
color: #268bd2;
|
||||
} // name.tag //
|
||||
.highlight .nv {
|
||||
color: #268bd2;
|
||||
} // name.variable //
|
||||
.highlight .ow {
|
||||
color: #859900;
|
||||
} // operator.word //
|
||||
.highlight .w {
|
||||
color: #93a1a1;
|
||||
} // text.whitespace //
|
||||
.highlight .mf {
|
||||
color: #2aa198;
|
||||
} // literal.number.float //
|
||||
.highlight .mh {
|
||||
color: #2aa198;
|
||||
} // literal.number.hex //
|
||||
.highlight .mi {
|
||||
color: #2aa198;
|
||||
} // literal.number.integer //
|
||||
.highlight .mo {
|
||||
color: #2aa198;
|
||||
} // literal.number.oct //
|
||||
.highlight .sb {
|
||||
color: #586e75;
|
||||
} // literal.string.backtick //
|
||||
.highlight .sc {
|
||||
color: #2aa198;
|
||||
} // literal.string.char //
|
||||
.highlight .sd {
|
||||
color: #93a1a1;
|
||||
} // literal.string.doc //
|
||||
.highlight .s2 {
|
||||
color: #2aa198;
|
||||
} // literal.string.double //
|
||||
.highlight .se {
|
||||
color: #cb4b16;
|
||||
} // literal.string.escape //
|
||||
.highlight .sh {
|
||||
color: #93a1a1;
|
||||
} // literal.string.heredoc //
|
||||
.highlight .si {
|
||||
color: #2aa198;
|
||||
} // literal.string.interpol //
|
||||
.highlight .sx {
|
||||
color: #2aa198;
|
||||
} // literal.string.other //
|
||||
.highlight .sr {
|
||||
color: #dc322f;
|
||||
} // literal.string.regex //
|
||||
.highlight .s1 {
|
||||
color: #2aa198;
|
||||
} // literal.string.single //
|
||||
.highlight .ss {
|
||||
color: #2aa198;
|
||||
} // literal.string.symbol //
|
||||
.highlight .bp {
|
||||
color: #268bd2;
|
||||
} // name.builtin.pseudo //
|
||||
.highlight .vc {
|
||||
color: #268bd2;
|
||||
} // name.variable.class //
|
||||
.highlight .vg {
|
||||
color: #268bd2;
|
||||
} // name.variable.global //
|
||||
.highlight .vi {
|
||||
color: #268bd2;
|
||||
} // name.variable.instance //
|
||||
.highlight .il {
|
||||
color: #2aa198;
|
||||
} // literal.number.integer.long //
|
||||
@@ -0,0 +1,16 @@
|
||||
$color-scheme: light !default;
|
||||
$body-background-color: $white !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
$nav-child-link-color: $grey-dk-100 !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$base-button-color: #f7f7f7 !default;
|
||||
$btn-primary-color: $purple-100 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
$feedback-color: darken($sidebar-color, 3%) !default;
|
||||
$table-background-color: $white !default;
|
||||
$search-background-color: $white !default;
|
||||
$search-result-preview-color: $grey-dk-000 !default;
|
||||
|
||||
@import "./vendor/OneLightJekyll/syntax";
|
||||
@@ -0,0 +1,239 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
.main-content {
|
||||
line-height: $content-line-height;
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
.table-wrapper {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: -1.6em;
|
||||
color: $grey-dk-000;
|
||||
content: counter(step-counter);
|
||||
counter-increment: step-counter;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(sm) {
|
||||
top: 0.11em;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: sub-counter;
|
||||
|
||||
> li {
|
||||
&::before {
|
||||
content: counter(sub-counter, lower-alpha);
|
||||
counter-increment: sub-counter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
margin-left: -1.4em;
|
||||
color: $grey-dk-000;
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-right: 0.6em;
|
||||
margin-left: -1.4em;
|
||||
|
||||
// The same margin-left is used above for ul > li::before
|
||||
}
|
||||
|
||||
hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template: auto / 10em 1fr;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
grid-column: 1;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
grid-column: 2;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1em;
|
||||
|
||||
blockquote,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul,
|
||||
.table-wrapper {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd,
|
||||
ol,
|
||||
ul {
|
||||
dl:first-child {
|
||||
dt:first-child,
|
||||
dd:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-heading {
|
||||
position: absolute;
|
||||
right: -$sp-4;
|
||||
width: $sp-5;
|
||||
height: 100%;
|
||||
padding-right: $sp-1;
|
||||
padding-left: $sp-1;
|
||||
overflow: visible;
|
||||
|
||||
@include mq(md) {
|
||||
right: auto;
|
||||
left: -$sp-5;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $link-color;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-heading:hover,
|
||||
.anchor-heading:focus,
|
||||
h1:hover > .anchor-heading,
|
||||
h2:hover > .anchor-heading,
|
||||
h3:hover > .anchor-heading,
|
||||
h4:hover > .anchor-heading,
|
||||
h5:hover > .anchor-heading,
|
||||
h6:hover > .anchor-heading {
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
#toctitle {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
+ table,
|
||||
+ .table-wrapper,
|
||||
+ .code-example,
|
||||
+ .highlighter-rouge,
|
||||
+ .sectionbody .listingblock {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
+ p:not(.label) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> h1:first-child,
|
||||
> h2:first-child,
|
||||
> h3:first-child,
|
||||
> h4:first-child,
|
||||
> h5:first-child,
|
||||
> h6:first-child,
|
||||
> .sect1:first-child > h2,
|
||||
> .sect2:first-child > h3,
|
||||
> .sect3:first-child > h4,
|
||||
> .sect4:first-child > h5,
|
||||
> .sect5:first-child > h6 {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// custom SCSS (or CSS) goes here
|
||||
@@ -0,0 +1 @@
|
||||
// custom setup code goes here
|
||||
@@ -0,0 +1,37 @@
|
||||
// Labels (not the form kind)
|
||||
|
||||
// this :not() prevents a style clash with Mermaid.js's
|
||||
// diagram labels, which also use .label
|
||||
// for more, see https://github.com/just-the-docs/just-the-docs/issues/1272
|
||||
// and the accompanying PR
|
||||
.label:not(g),
|
||||
.label-blue:not(g) {
|
||||
display: inline-block;
|
||||
padding: 0.16em 0.56em;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
background-color: $blue-100;
|
||||
border-radius: 12px;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.label-green:not(g) {
|
||||
background-color: $green-200;
|
||||
}
|
||||
|
||||
.label-purple:not(g) {
|
||||
background-color: $purple-100;
|
||||
}
|
||||
|
||||
.label-red:not(g) {
|
||||
background-color: $red-200;
|
||||
}
|
||||
|
||||
.label-yellow:not(g) {
|
||||
color: $grey-dk-200;
|
||||
background-color: $yellow-200;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
// The basic two column layout
|
||||
|
||||
.side-bar {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-flow: column nowrap;
|
||||
position: fixed;
|
||||
width: $nav-width-md;
|
||||
height: 100%;
|
||||
border-right: $border $border-color;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
min-width: $nav-width;
|
||||
}
|
||||
|
||||
& + .main {
|
||||
@include mq(md) {
|
||||
margin-left: $nav-width-md;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
// stylelint-disable function-name-case
|
||||
// disable for Max(), we want to use the CSS max() function
|
||||
margin-left: Max(
|
||||
#{$nav-width},
|
||||
calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
|
||||
);
|
||||
// stylelint-enable function-name-case
|
||||
}
|
||||
|
||||
.main-header {
|
||||
display: none;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: auto;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
max-width: $content-width;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
z-index: 0;
|
||||
border-bottom: $border $border-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav,
|
||||
.site-header,
|
||||
.site-footer {
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
width: $nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-8;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
min-height: $header-height;
|
||||
align-items: center;
|
||||
|
||||
@include mq(md) {
|
||||
height: $header-height;
|
||||
max-height: $header-height;
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-top: $sp-3;
|
||||
padding-bottom: $sp-3;
|
||||
color: $body-heading-color;
|
||||
|
||||
@include container;
|
||||
|
||||
@include fs-6;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
@if variable-exists(logo) {
|
||||
.site-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url($logo);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.site-button {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: $gutter-spacing-sm;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
.site-header .site-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.site-button:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-bottom: $sp-10;
|
||||
overflow-y: scroll;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-enable selector-max-type
|
||||
|
||||
.site-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: $sp-4;
|
||||
padding-bottom: $sp-4;
|
||||
color: $grey-dk-000;
|
||||
|
||||
@include container;
|
||||
|
||||
@include fs-2;
|
||||
|
||||
@include mq(md) {
|
||||
position: static;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $sp-5;
|
||||
height: $sp-5;
|
||||
color: $link-color;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Import external dependencies
|
||||
@import "./vendor/normalize.scss/normalize";
|
||||
|
||||
// Modules
|
||||
@import "./base";
|
||||
@import "./layout";
|
||||
@import "./content";
|
||||
@import "./navigation";
|
||||
@import "./typography";
|
||||
@import "./labels";
|
||||
@import "./buttons";
|
||||
@import "./search";
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
@import "./print";
|
||||
@import "./skiptomain";
|
||||
@@ -0,0 +1,235 @@
|
||||
// Main nav, breadcrumb, etc...
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
@include fs-4;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.nav-list-link {
|
||||
display: block;
|
||||
min-height: $nav-list-item-height-sm;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
|
||||
@if $nav-list-expander-right {
|
||||
padding-right: $nav-list-item-height-sm;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
} @else {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-left: $nav-list-item-height-sm;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
min-height: $nav-list-item-height;
|
||||
line-height: #{$nav-list-item-height - 2 * $sp-1};
|
||||
@if $nav-list-expander-right {
|
||||
padding-right: $nav-list-item-height;
|
||||
padding-left: $gutter-spacing;
|
||||
} @else {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $nav-list-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.external > svg {
|
||||
width: $sp-4;
|
||||
height: $sp-4;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list-expander {
|
||||
position: absolute;
|
||||
@if $nav-list-expander-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
width: $nav-list-item-height-sm;
|
||||
height: $nav-list-item-height-sm;
|
||||
padding: #{$nav-list-item-height-sm * 0.25};
|
||||
color: $link-color;
|
||||
|
||||
@include mq(md) {
|
||||
width: $nav-list-item-height;
|
||||
height: $nav-list-item-height;
|
||||
padding: #{$nav-list-item-height * 0.25};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@if $nav-list-expander-right {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: none;
|
||||
padding-left: $sp-3;
|
||||
list-style: none;
|
||||
|
||||
.nav-list-item {
|
||||
position: relative;
|
||||
|
||||
.nav-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.nav-list-expander {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-list-expander svg {
|
||||
@if $nav-list-expander-right {
|
||||
transform: rotate(-90deg);
|
||||
} @else {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-category {
|
||||
padding: $sp-2 $gutter-spacing-sm;
|
||||
font-weight: 600;
|
||||
text-align: start;
|
||||
text-transform: uppercase;
|
||||
border-bottom: $border $border-color;
|
||||
@include fs-2;
|
||||
|
||||
@include mq(md) {
|
||||
padding: $sp-2 $gutter-spacing;
|
||||
margin-top: $gutter-spacing-sm;
|
||||
text-align: start;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list.nav-category-list {
|
||||
> .nav-list-item {
|
||||
margin: 0;
|
||||
|
||||
> .nav-list {
|
||||
padding: 0;
|
||||
|
||||
> .nav-list-item {
|
||||
> .nav-list-link {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
> .nav-list-expander {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Aux nav
|
||||
|
||||
.aux-nav {
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
@include fs-2;
|
||||
|
||||
.aux-nav-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.aux-nav-list-item {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
|
||||
.breadcrumb-nav {
|
||||
@include mq(md) {
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
padding-left: 0;
|
||||
margin-bottom: $sp-3;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list-item {
|
||||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
color: $grey-dk-000;
|
||||
content: "/";
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type
|
||||
|
||||
@media print {
|
||||
.site-footer,
|
||||
.site-button,
|
||||
#edit-this-page,
|
||||
#back-to-top,
|
||||
.site-nav,
|
||||
.main-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
// Search input and autocomplete
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-grow: 1;
|
||||
height: $sp-10;
|
||||
padding: $sp-2;
|
||||
transition: padding linear #{$transition-duration * 0.5};
|
||||
|
||||
@include mq(md) {
|
||||
position: relative !important;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $sp-8;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
transition: height linear #{$transition-duration * 0.5};
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: $search-results-width;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: width ease $transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
|
||||
font-size: 1rem;
|
||||
color: $body-text-color;
|
||||
background-color: $search-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(md) {
|
||||
padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
|
||||
font-size: 0.875rem;
|
||||
background-color: $body-background-color;
|
||||
transition: padding-left linear #{$transition-duration * 0.5};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
+ .search-label .search-icon {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: $gutter-spacing;
|
||||
transition: padding-left linear #{$transition-duration * 0.5};
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: #{$sp-4 * 1.2};
|
||||
height: #{$sp-4 * 1.2};
|
||||
align-self: center;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-height: calc(100% - #{$sp-10});
|
||||
overflow-y: auto;
|
||||
background-color: $search-background-color;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
@include mq(md) {
|
||||
top: 100%;
|
||||
width: $search-results-width;
|
||||
max-height: calc(100vh - 200%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-4;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: block;
|
||||
padding: $sp-1 $sp-3;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $feedback-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-title {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
padding-right: $sp-2;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-doc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.search-result-doc-parent {
|
||||
opacity: 0.5;
|
||||
@include fs-3;
|
||||
|
||||
@include mq(md) {
|
||||
@include fs-2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: $sp-4;
|
||||
height: $sp-4;
|
||||
margin-right: $sp-2;
|
||||
color: $link-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-result-doc-title {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-section {
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.search-result-rel-url {
|
||||
display: block;
|
||||
margin-left: #{$sp-4 + $sp-2};
|
||||
overflow: hidden;
|
||||
color: $search-result-preview-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.search-result-previews {
|
||||
display: block;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-4;
|
||||
margin-left: $sp-2;
|
||||
color: $search-result-preview-color;
|
||||
word-wrap: break-word;
|
||||
border-left: $border;
|
||||
border-left-color: $border-color;
|
||||
@include fs-2;
|
||||
|
||||
@include mq(sm) {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
padding-left: $sp-2;
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-preview + .search-result-preview {
|
||||
margin-top: $sp-1;
|
||||
}
|
||||
|
||||
.search-result-highlight {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-no-result {
|
||||
padding: $sp-2 $sp-3;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: fixed;
|
||||
right: $sp-4;
|
||||
bottom: $sp-4;
|
||||
display: flex;
|
||||
width: $sp-9;
|
||||
height: $sp-9;
|
||||
background-color: $search-background-color;
|
||||
border: 1px solid rgba($link-color, 0.3);
|
||||
border-radius: #{$sp-9 * 0.5};
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity ease $transition-duration,
|
||||
width 0s $transition-duration,
|
||||
height 0s $transition-duration;
|
||||
}
|
||||
|
||||
.search-active {
|
||||
.search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
height: $sp-10;
|
||||
border-radius: 0;
|
||||
|
||||
@include mq(md) {
|
||||
width: $search-results-width;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background-color: $search-background-color;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: 2.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-label {
|
||||
@include mq(md) {
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity ease $transition-duration,
|
||||
width 0s,
|
||||
height 0s;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
.main {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding-top: $sp-10;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Skipnav
|
||||
// Skip to main content
|
||||
|
||||
a.skip-to-main {
|
||||
left: -999px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -999;
|
||||
}
|
||||
|
||||
a.skip-to-main:focus,
|
||||
a.skip-to-main:active {
|
||||
color: $link-color;
|
||||
background-color: $body-background-color;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
margin: 10px 35%;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
border: 4px solid $btn-primary-color;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
z-index: 999;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
// Typography
|
||||
|
||||
// prettier-ignore
|
||||
$body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
|
||||
roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
|
||||
$mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
|
||||
$root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
|
||||
$body-line-height: 1.4 !default;
|
||||
$content-line-height: 1.6 !default;
|
||||
$body-heading-line-height: 1.25 !default;
|
||||
|
||||
// Font size
|
||||
// `-sm` suffix is the size at the small (and above) media query
|
||||
|
||||
$font-size-1: 0.5625rem !default;
|
||||
$font-size-1-sm: 0.625rem !default;
|
||||
$font-size-2: 0.6875rem !default; // h4 - uppercased!, h6 not uppercased, text-small
|
||||
$font-size-3: 0.75rem !default; // h5
|
||||
$font-size-4: 0.875rem !default;
|
||||
$font-size-5: 1rem !default; // h3
|
||||
$font-size-6: 1.125rem !default; // h2
|
||||
$font-size-7: 1.5rem !default;
|
||||
$font-size-8: 2rem !default; // h1
|
||||
$font-size-9: 2.25rem !default;
|
||||
$font-size-10: 2.625rem !default;
|
||||
$font-size-10-sm: 3rem !default;
|
||||
|
||||
// Colors
|
||||
|
||||
$white: #fff !default;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-250: #302d36 !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
$grey-lt-100: #eeebee !default;
|
||||
$grey-lt-200: #ecebed !default;
|
||||
$grey-lt-300: #e6e1e8 !default;
|
||||
$purple-000: #7253ed !default;
|
||||
$purple-100: #5e41d0 !default;
|
||||
$purple-200: #4e26af !default;
|
||||
$purple-300: #381885 !default;
|
||||
$blue-000: #2c84fa !default;
|
||||
$blue-100: #2869e6 !default;
|
||||
$blue-200: #264caf !default;
|
||||
$blue-300: #183385 !default;
|
||||
$green-000: #41d693 !default;
|
||||
$green-100: #11b584 !default;
|
||||
$green-200: #009c7b !default;
|
||||
$green-300: #026e57 !default;
|
||||
$yellow-000: #ffeb82 !default;
|
||||
$yellow-100: #fadf50 !default;
|
||||
$yellow-200: #f7d12e !default;
|
||||
$yellow-300: #e7af06 !default;
|
||||
$red-000: #f77e7e !default;
|
||||
$red-100: #f96e65 !default;
|
||||
$red-200: #e94c4c !default;
|
||||
$red-300: #dd2e2e !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacing-unit: 1rem; // 1rem == 16px
|
||||
|
||||
$spacers: (
|
||||
sp-0: 0,
|
||||
sp-1: $spacing-unit * 0.25,
|
||||
sp-2: $spacing-unit * 0.5,
|
||||
sp-3: $spacing-unit * 0.75,
|
||||
sp-4: $spacing-unit,
|
||||
sp-5: $spacing-unit * 1.5,
|
||||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3,
|
||||
sp-9: $spacing-unit * 3.5,
|
||||
sp-10: $spacing-unit * 4,
|
||||
) !default;
|
||||
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
|
||||
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
|
||||
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
|
||||
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
|
||||
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
|
||||
|
||||
// Borders
|
||||
|
||||
$border: 1px solid !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-color: $grey-lt-100 !default;
|
||||
|
||||
// Grid system
|
||||
|
||||
$gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 16.5rem !default;
|
||||
$nav-width-md: 15.5rem !default;
|
||||
$nav-list-item-height: $sp-6 !default;
|
||||
$nav-list-item-height-sm: $sp-8 !default;
|
||||
$nav-list-expander-right: true;
|
||||
$content-width: 50rem !default;
|
||||
$header-height: 3.75rem !default;
|
||||
$search-results-width: $content-width - $nav-width !default;
|
||||
$transition-duration: 400ms;
|
||||
|
||||
// Media queries in pixels
|
||||
|
||||
$media-queries: (
|
||||
xs: 20rem,
|
||||
sm: 31.25rem,
|
||||
md: $content-width,
|
||||
lg: $content-width + $nav-width,
|
||||
xl: 87.5rem,
|
||||
) !default;
|
||||
@@ -0,0 +1,29 @@
|
||||
// Colored button
|
||||
|
||||
@mixin btn-color($fg, $bg) {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 2%);
|
||||
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.25),
|
||||
0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $fg;
|
||||
background-color: darken($bg, 4%);
|
||||
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($bg, 5%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
// Usage:
|
||||
// @include mq(md) {
|
||||
// ..medium and up styles
|
||||
// }
|
||||
@mixin mq($name) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($media-queries, $name);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "No value could be retrieved from `#{$media-query}`. Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive container
|
||||
|
||||
@mixin container {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
@mixin fs-1 {
|
||||
& {
|
||||
font-size: $font-size-1 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-1-sm !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
& {
|
||||
font-size: $font-size-2 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
& {
|
||||
font-size: $font-size-3 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
& {
|
||||
font-size: $font-size-4 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
& {
|
||||
font-size: $font-size-5 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
& {
|
||||
font-size: $font-size-6 !important;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-7 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
& {
|
||||
font-size: $font-size-7 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
& {
|
||||
font-size: $font-size-8 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
& {
|
||||
font-size: $font-size-9 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-10 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
& {
|
||||
font-size: $font-size-10 !important;
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: $font-size-10-sm !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./variables";
|
||||
@import "./mixins/mixins";
|
||||
@@ -0,0 +1,56 @@
|
||||
// Tables
|
||||
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $sp-5;
|
||||
overflow-x: auto;
|
||||
border-radius: $border-radius;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
min-width: 100%;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
min-width: 7.5rem;
|
||||
padding: $sp-2 $sp-3;
|
||||
background-color: $table-background-color;
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
@include fs-3;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-bottom: $sp-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: $border $border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// Typography
|
||||
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
font-weight: 300;
|
||||
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
h2,
|
||||
.text-beta,
|
||||
#toctitle {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
h3,
|
||||
.text-gamma {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
h4,
|
||||
.text-delta {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
h4 code {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5,
|
||||
.text-epsilon {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
// Utility classes for colors
|
||||
|
||||
// Text colors
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-250 {
|
||||
color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-100 {
|
||||
color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-200 {
|
||||
color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-300 {
|
||||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-blue-000 {
|
||||
color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.text-blue-100 {
|
||||
color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.text-blue-200 {
|
||||
color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.text-blue-300 {
|
||||
color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.text-green-000 {
|
||||
color: $green-000 !important;
|
||||
}
|
||||
|
||||
.text-green-100 {
|
||||
color: $green-100 !important;
|
||||
}
|
||||
|
||||
.text-green-200 {
|
||||
color: $green-200 !important;
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
color: $green-300 !important;
|
||||
}
|
||||
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.text-yellow-000 {
|
||||
color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.text-yellow-100 {
|
||||
color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.text-yellow-200 {
|
||||
color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.text-yellow-300 {
|
||||
color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.text-red-000 {
|
||||
color: $red-000 !important;
|
||||
}
|
||||
|
||||
.text-red-100 {
|
||||
color: $red-100 !important;
|
||||
}
|
||||
|
||||
.text-red-200 {
|
||||
color: $red-200 !important;
|
||||
}
|
||||
|
||||
.text-red-300 {
|
||||
color: $red-300 !important;
|
||||
}
|
||||
|
||||
// Background colors
|
||||
|
||||
.bg-grey-dk-000 {
|
||||
background-color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-100 {
|
||||
background-color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-200 {
|
||||
background-color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-250 {
|
||||
background-color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-300 {
|
||||
background-color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-000 {
|
||||
background-color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-100 {
|
||||
background-color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-200 {
|
||||
background-color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-lt-300 {
|
||||
background-color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.bg-blue-000 {
|
||||
background-color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
background-color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.bg-blue-200 {
|
||||
background-color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
background-color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.bg-green-000 {
|
||||
background-color: $green-000 !important;
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: $green-100 !important;
|
||||
}
|
||||
|
||||
.bg-green-200 {
|
||||
background-color: $green-200 !important;
|
||||
}
|
||||
|
||||
.bg-green-300 {
|
||||
background-color: $green-300 !important;
|
||||
}
|
||||
|
||||
.bg-purple-000 {
|
||||
background-color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.bg-purple-100 {
|
||||
background-color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.bg-purple-200 {
|
||||
background-color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
background-color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-000 {
|
||||
background-color: $yellow-000 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
background-color: $yellow-100 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-200 {
|
||||
background-color: $yellow-200 !important;
|
||||
}
|
||||
|
||||
.bg-yellow-300 {
|
||||
background-color: $yellow-300 !important;
|
||||
}
|
||||
|
||||
.bg-red-000 {
|
||||
background-color: $red-000 !important;
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
background-color: $red-100 !important;
|
||||
}
|
||||
|
||||
.bg-red-200 {
|
||||
background-color: $red-200 !important;
|
||||
}
|
||||
|
||||
.bg-red-300 {
|
||||
background-color: $red-300 !important;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// Utility classes for layout
|
||||
|
||||
// Display
|
||||
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .d-sm-block, .d-md-none, .d-lg-inline
|
||||
.d-#{$media-query}-block {
|
||||
display: block !important;
|
||||
}
|
||||
.d-#{$media-query}-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
.d-#{$media-query}-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.d-#{$media-query}-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.d-#{$media-query}-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal alignment
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.flex-justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.flex-justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.flex-justify-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.flex-justify-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
// Vertical alignment
|
||||
|
||||
.v-align-baseline {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
.v-align-bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.v-align-middle {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.v-align-text-bottom {
|
||||
vertical-align: text-bottom !important;
|
||||
}
|
||||
|
||||
.v-align-text-top {
|
||||
vertical-align: text-top !important;
|
||||
}
|
||||
|
||||
.v-align-top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// Utility classes for lists
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
.list-style-none {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
// Utility classes for margins and padding
|
||||
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-0, .m-1, .m-2...
|
||||
.m-#{$scale} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
.mt-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
}
|
||||
.mr-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
.mb-#{$scale} {
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
.ml-#{$scale} {
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.mx-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
.mx-#{$scale}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
.m-#{$media-query}-#{$scale} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
.mt-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
}
|
||||
.mr-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
.mb-#{$media-query}-#{$scale} {
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
.ml-#{$media-query}-#{$scale} {
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.mx-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$media-query}-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Padding spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-0, .p-1, .p-2...
|
||||
.p-#{$scale} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
.pt-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
}
|
||||
.pr-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
.pb-#{$scale} {
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
.pl-#{$scale} {
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.px-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
.p-#{$media-query}-#{$scale} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
.pt-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
}
|
||||
.pr-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
.pb-#{$media-query}-#{$scale} {
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
.pl-#{$media-query}-#{$scale} {
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.px-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// Utility classes for typography
|
||||
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
@include fs-7;
|
||||
}
|
||||
|
||||
.fs-8 {
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
.fs-9 {
|
||||
@include fs-9;
|
||||
}
|
||||
|
||||
.fs-10 {
|
||||
@include fs-10;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.lh-0 {
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.lh-default {
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
.ls-5 {
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
.ls-10 {
|
||||
letter-spacing: 0.1em !important;
|
||||
}
|
||||
|
||||
.ls-0 {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./typography";
|
||||
@import "./lists";
|
||||
@import "./spacing";
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
---
|
||||
{% include css/just-the-docs.scss.liquid color_scheme="dark" %}
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
---
|
||||
{% if site.color_scheme and site.color_scheme != "nil" %}
|
||||
{% assign color_scheme = site.color_scheme %}
|
||||
{% else %}
|
||||
{% assign color_scheme = "light" %}
|
||||
{% endif %}
|
||||
{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
---
|
||||
{%- if site.color_scheme and site.color_scheme != "nil" -%}
|
||||
{%- assign color_scheme = site.color_scheme -%}
|
||||
{%- else -%}
|
||||
{%- assign color_scheme = "light" -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- capture newline %}
|
||||
{% endcapture -%}
|
||||
|
||||
{%- capture scss -%}
|
||||
{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}
|
||||
.site-nav ul li a {
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
{%- endcapture -%}
|
||||
|
||||
{{ scss | scssify | split: newline | slice: -3, 3 | join: newline }}
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
---
|
||||
{% include css/just-the-docs.scss.liquid color_scheme="light" %}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 709 KiB |
@@ -0,0 +1,618 @@
|
||||
---
|
||||
layout: null
|
||||
---
|
||||
(function (jtd, undefined) {
|
||||
|
||||
// Event handling
|
||||
|
||||
jtd.addEvent = function(el, type, handler) {
|
||||
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
|
||||
}
|
||||
jtd.removeEvent = function(el, type, handler) {
|
||||
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
|
||||
}
|
||||
jtd.onReady = function(ready) {
|
||||
// in case the document is already rendered
|
||||
if (document.readyState!='loading') ready();
|
||||
// modern browsers
|
||||
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
|
||||
// IE <= 8
|
||||
else document.attachEvent('onreadystatechange', function(){
|
||||
if (document.readyState=='complete') ready();
|
||||
});
|
||||
}
|
||||
|
||||
// Show/hide mobile menu
|
||||
|
||||
function initNav() {
|
||||
jtd.addEvent(document, 'click', function(e){
|
||||
var target = e.target;
|
||||
while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.ariaPressed = target.parentNode.classList.toggle('active');
|
||||
}
|
||||
});
|
||||
|
||||
const siteNav = document.getElementById('site-nav');
|
||||
const mainHeader = document.getElementById('main-header');
|
||||
const menuButton = document.getElementById('menu-button');
|
||||
|
||||
disableHeadStyleSheets();
|
||||
|
||||
jtd.addEvent(menuButton, 'click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
if (menuButton.classList.toggle('nav-open')) {
|
||||
siteNav.classList.add('nav-open');
|
||||
mainHeader.classList.add('nav-open');
|
||||
menuButton.ariaPressed = true;
|
||||
} else {
|
||||
siteNav.classList.remove('nav-open');
|
||||
mainHeader.classList.remove('nav-open');
|
||||
menuButton.ariaPressed = false;
|
||||
}
|
||||
});
|
||||
|
||||
{%- if site.search_enabled != false and site.search.button %}
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchButton = document.getElementById('search-button');
|
||||
|
||||
jtd.addEvent(searchButton, 'click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
mainHeader.classList.add('nav-open');
|
||||
searchInput.focus();
|
||||
});
|
||||
{%- endif %}
|
||||
}
|
||||
|
||||
// The <head> element is assumed to include the following stylesheets:
|
||||
// - a <link> to /assets/css/just-the-docs-head-nav.css,
|
||||
// with id 'jtd-head-nav-stylesheet'
|
||||
// - a <style> containing the result of _includes/css/activation.scss.liquid.
|
||||
// To avoid relying on the order of stylesheets (which can change with HTML
|
||||
// compression, user-added JavaScript, and other side effects), stylesheets
|
||||
// are only interacted with via ID
|
||||
|
||||
function disableHeadStyleSheets() {
|
||||
const headNav = document.getElementById('jtd-head-nav-stylesheet');
|
||||
if (headNav) {
|
||||
headNav.disabled = true;
|
||||
}
|
||||
|
||||
const activation = document.getElementById('jtd-nav-activation');
|
||||
if (activation) {
|
||||
activation.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
{%- if site.search_enabled != false %}
|
||||
// Site search
|
||||
|
||||
function initSearch() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', '{{ "assets/js/search-data.json" | relative_url }}', true);
|
||||
|
||||
request.onload = function(){
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var docs = JSON.parse(request.responseText);
|
||||
|
||||
lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
|
||||
|
||||
var index = lunr(function(){
|
||||
this.ref('id');
|
||||
this.field('title', { boost: 200 });
|
||||
this.field('content', { boost: 2 });
|
||||
{%- if site.search.rel_url != false %}
|
||||
this.field('relUrl');
|
||||
{%- endif %}
|
||||
this.metadataWhitelist = ['position']
|
||||
|
||||
for (var i in docs) {
|
||||
{% include lunr/custom-index.js %}
|
||||
this.add({
|
||||
id: i,
|
||||
title: docs[i].title,
|
||||
content: docs[i].content,
|
||||
{%- if site.search.rel_url != false %}
|
||||
relUrl: docs[i].relUrl
|
||||
{%- endif %}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
searchLoaded(index, docs);
|
||||
} else {
|
||||
console.log('Error loading ajax request. Request status:' + request.status);
|
||||
}
|
||||
};
|
||||
|
||||
request.onerror = function(){
|
||||
console.log('There was a connection error');
|
||||
};
|
||||
|
||||
request.send();
|
||||
}
|
||||
|
||||
function searchLoaded(index, docs) {
|
||||
var index = index;
|
||||
var docs = docs;
|
||||
var searchInput = document.getElementById('search-input');
|
||||
var searchResults = document.getElementById('search-results');
|
||||
var mainHeader = document.getElementById('main-header');
|
||||
var currentInput;
|
||||
var currentSearchIndex = 0;
|
||||
|
||||
{%- if site.search.focus_shortcut_key %}
|
||||
// add event listener on ctrl + <focus_shortcut_key> for showing the search input
|
||||
jtd.addEvent(document, 'keydown', function (e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === '{{ site.search.focus_shortcut_key }}') {
|
||||
e.preventDefault();
|
||||
|
||||
mainHeader.classList.add('nav-open');
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
{%- endif %}
|
||||
|
||||
function showSearch() {
|
||||
document.documentElement.classList.add('search-active');
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
document.documentElement.classList.remove('search-active');
|
||||
}
|
||||
|
||||
function update() {
|
||||
currentSearchIndex++;
|
||||
|
||||
var input = searchInput.value;
|
||||
if (input === '') {
|
||||
hideSearch();
|
||||
} else {
|
||||
showSearch();
|
||||
// scroll search input into view, workaround for iOS Safari
|
||||
window.scroll(0, -1);
|
||||
setTimeout(function(){ window.scroll(0, 0); }, 0);
|
||||
}
|
||||
if (input === currentInput) {
|
||||
return;
|
||||
}
|
||||
currentInput = input;
|
||||
searchResults.innerHTML = '';
|
||||
if (input === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
var results = index.query(function (query) {
|
||||
var tokens = lunr.tokenizer(input)
|
||||
query.term(tokens, {
|
||||
boost: 10
|
||||
});
|
||||
query.term(tokens, {
|
||||
wildcard: lunr.Query.wildcard.TRAILING
|
||||
});
|
||||
});
|
||||
|
||||
if ((results.length == 0) && (input.length > 2)) {
|
||||
var tokens = lunr.tokenizer(input).filter(function(token, i) {
|
||||
return token.str.length < 20;
|
||||
})
|
||||
if (tokens.length > 0) {
|
||||
results = index.query(function (query) {
|
||||
query.term(tokens, {
|
||||
editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (results.length == 0) {
|
||||
var noResultsDiv = document.createElement('div');
|
||||
noResultsDiv.classList.add('search-no-result');
|
||||
noResultsDiv.innerText = 'No results found';
|
||||
searchResults.appendChild(noResultsDiv);
|
||||
|
||||
} else {
|
||||
var resultsList = document.createElement('ul');
|
||||
resultsList.classList.add('search-results-list');
|
||||
searchResults.appendChild(resultsList);
|
||||
|
||||
addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
|
||||
}
|
||||
|
||||
function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
|
||||
if (searchIndex != currentSearchIndex) {
|
||||
return;
|
||||
}
|
||||
for (var i = start; i < (start + batchSize); i++) {
|
||||
if (i == results.length) {
|
||||
return;
|
||||
}
|
||||
addResult(resultsList, results[i]);
|
||||
}
|
||||
setTimeout(function() {
|
||||
addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex);
|
||||
}, batchMillis);
|
||||
}
|
||||
|
||||
function addResult(resultsList, result) {
|
||||
var doc = docs[result.ref];
|
||||
|
||||
var resultsListItem = document.createElement('li');
|
||||
resultsListItem.classList.add('search-results-list-item');
|
||||
resultsList.appendChild(resultsListItem);
|
||||
|
||||
var resultLink = document.createElement('a');
|
||||
resultLink.classList.add('search-result');
|
||||
resultLink.setAttribute('href', doc.url);
|
||||
resultsListItem.appendChild(resultLink);
|
||||
|
||||
var resultTitle = document.createElement('div');
|
||||
resultTitle.classList.add('search-result-title');
|
||||
resultLink.appendChild(resultTitle);
|
||||
|
||||
// note: the SVG svg-doc is only loaded as a Jekyll include if site.search_enabled is true; see _includes/icons/icons.html
|
||||
var resultDoc = document.createElement('div');
|
||||
resultDoc.classList.add('search-result-doc');
|
||||
resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
|
||||
resultTitle.appendChild(resultDoc);
|
||||
|
||||
var resultDocTitle = document.createElement('div');
|
||||
resultDocTitle.classList.add('search-result-doc-title');
|
||||
resultDocTitle.innerHTML = doc.doc;
|
||||
resultDoc.appendChild(resultDocTitle);
|
||||
var resultDocOrSection = resultDocTitle;
|
||||
|
||||
if (doc.doc != doc.title) {
|
||||
resultDoc.classList.add('search-result-doc-parent');
|
||||
var resultSection = document.createElement('div');
|
||||
resultSection.classList.add('search-result-section');
|
||||
resultSection.innerHTML = doc.title;
|
||||
resultTitle.appendChild(resultSection);
|
||||
resultDocOrSection = resultSection;
|
||||
}
|
||||
|
||||
var metadata = result.matchData.metadata;
|
||||
var titlePositions = [];
|
||||
var contentPositions = [];
|
||||
for (var j in metadata) {
|
||||
var meta = metadata[j];
|
||||
if (meta.title) {
|
||||
var positions = meta.title.position;
|
||||
for (var k in positions) {
|
||||
titlePositions.push(positions[k]);
|
||||
}
|
||||
}
|
||||
if (meta.content) {
|
||||
var positions = meta.content.position;
|
||||
for (var k in positions) {
|
||||
var position = positions[k];
|
||||
var previewStart = position[0];
|
||||
var previewEnd = position[0] + position[1];
|
||||
var ellipsesBefore = true;
|
||||
var ellipsesAfter = true;
|
||||
for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
|
||||
var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
||||
var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
|
||||
if ((nextDot >= 0) && (nextDot > nextSpace)) {
|
||||
previewStart = nextDot + 1;
|
||||
ellipsesBefore = false;
|
||||
break;
|
||||
}
|
||||
if (nextSpace < 0) {
|
||||
previewStart = 0;
|
||||
ellipsesBefore = false;
|
||||
break;
|
||||
}
|
||||
previewStart = nextSpace + 1;
|
||||
}
|
||||
for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
|
||||
var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
|
||||
var nextDot = doc.content.indexOf('. ', previewEnd + 1);
|
||||
if ((nextDot >= 0) && (nextDot < nextSpace)) {
|
||||
previewEnd = nextDot;
|
||||
ellipsesAfter = false;
|
||||
break;
|
||||
}
|
||||
if (nextSpace < 0) {
|
||||
previewEnd = doc.content.length;
|
||||
ellipsesAfter = false;
|
||||
break;
|
||||
}
|
||||
previewEnd = nextSpace;
|
||||
}
|
||||
contentPositions.push({
|
||||
highlight: position,
|
||||
previewStart: previewStart, previewEnd: previewEnd,
|
||||
ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (titlePositions.length > 0) {
|
||||
titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
|
||||
resultDocOrSection.innerHTML = '';
|
||||
addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
|
||||
}
|
||||
|
||||
if (contentPositions.length > 0) {
|
||||
contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
|
||||
var contentPosition = contentPositions[0];
|
||||
var previewPosition = {
|
||||
highlight: [contentPosition.highlight],
|
||||
previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
|
||||
ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
|
||||
};
|
||||
var previewPositions = [previewPosition];
|
||||
for (var j = 1; j < contentPositions.length; j++) {
|
||||
contentPosition = contentPositions[j];
|
||||
if (previewPosition.previewEnd < contentPosition.previewStart) {
|
||||
previewPosition = {
|
||||
highlight: [contentPosition.highlight],
|
||||
previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
|
||||
ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
|
||||
}
|
||||
previewPositions.push(previewPosition);
|
||||
} else {
|
||||
previewPosition.highlight.push(contentPosition.highlight);
|
||||
previewPosition.previewEnd = contentPosition.previewEnd;
|
||||
previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
|
||||
}
|
||||
}
|
||||
|
||||
var resultPreviews = document.createElement('div');
|
||||
resultPreviews.classList.add('search-result-previews');
|
||||
resultLink.appendChild(resultPreviews);
|
||||
|
||||
var content = doc.content;
|
||||
for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
|
||||
var position = previewPositions[j];
|
||||
|
||||
var resultPreview = document.createElement('div');
|
||||
resultPreview.classList.add('search-result-preview');
|
||||
resultPreviews.appendChild(resultPreview);
|
||||
|
||||
if (position.ellipsesBefore) {
|
||||
resultPreview.appendChild(document.createTextNode('... '));
|
||||
}
|
||||
addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
|
||||
if (position.ellipsesAfter) {
|
||||
resultPreview.appendChild(document.createTextNode(' ...'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{%- if site.search.rel_url != false %}
|
||||
var resultRelUrl = document.createElement('span');
|
||||
resultRelUrl.classList.add('search-result-rel-url');
|
||||
resultRelUrl.innerText = doc.relUrl;
|
||||
resultTitle.appendChild(resultRelUrl);
|
||||
{%- endif %}
|
||||
}
|
||||
|
||||
function addHighlightedText(parent, text, start, end, positions) {
|
||||
var index = start;
|
||||
for (var i in positions) {
|
||||
var position = positions[i];
|
||||
var span = document.createElement('span');
|
||||
span.innerHTML = text.substring(index, position[0]);
|
||||
parent.appendChild(span);
|
||||
index = position[0] + position[1];
|
||||
var highlight = document.createElement('span');
|
||||
highlight.classList.add('search-result-highlight');
|
||||
highlight.innerHTML = text.substring(position[0], index);
|
||||
parent.appendChild(highlight);
|
||||
}
|
||||
var span = document.createElement('span');
|
||||
span.innerHTML = text.substring(index, end);
|
||||
parent.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
jtd.addEvent(searchInput, 'focus', function(){
|
||||
setTimeout(update, 0);
|
||||
});
|
||||
|
||||
jtd.addEvent(searchInput, 'keyup', function(e){
|
||||
switch (e.keyCode) {
|
||||
case 27: // When esc key is pressed, hide the results and clear the field
|
||||
searchInput.value = '';
|
||||
break;
|
||||
case 38: // arrow up
|
||||
case 40: // arrow down
|
||||
case 13: // enter
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
update();
|
||||
});
|
||||
|
||||
jtd.addEvent(searchInput, 'keydown', function(e){
|
||||
switch (e.keyCode) {
|
||||
case 38: // arrow up
|
||||
e.preventDefault();
|
||||
var active = document.querySelector('.search-result.active');
|
||||
if (active) {
|
||||
active.classList.remove('active');
|
||||
if (active.parentElement.previousSibling) {
|
||||
var previous = active.parentElement.previousSibling.querySelector('.search-result');
|
||||
previous.classList.add('active');
|
||||
}
|
||||
}
|
||||
return;
|
||||
case 40: // arrow down
|
||||
e.preventDefault();
|
||||
var active = document.querySelector('.search-result.active');
|
||||
if (active) {
|
||||
if (active.parentElement.nextSibling) {
|
||||
var next = active.parentElement.nextSibling.querySelector('.search-result');
|
||||
active.classList.remove('active');
|
||||
next.classList.add('active');
|
||||
}
|
||||
} else {
|
||||
var next = document.querySelector('.search-result');
|
||||
if (next) {
|
||||
next.classList.add('active');
|
||||
}
|
||||
}
|
||||
return;
|
||||
case 13: // enter
|
||||
e.preventDefault();
|
||||
var active = document.querySelector('.search-result.active');
|
||||
if (active) {
|
||||
active.click();
|
||||
} else {
|
||||
var first = document.querySelector('.search-result');
|
||||
if (first) {
|
||||
first.click();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
jtd.addEvent(document, 'click', function(e){
|
||||
if (e.target != searchInput) {
|
||||
hideSearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
{%- endif %}
|
||||
|
||||
// Switch theme
|
||||
|
||||
jtd.getTheme = function() {
|
||||
var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
|
||||
return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
|
||||
}
|
||||
|
||||
jtd.setTheme = function(theme) {
|
||||
var cssFile = document.querySelector('[rel="stylesheet"]');
|
||||
cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
|
||||
}
|
||||
|
||||
// Note: pathname can have a trailing slash on a local jekyll server
|
||||
// and not have the slash on GitHub Pages
|
||||
|
||||
function navLink() {
|
||||
var pathname = document.location.pathname;
|
||||
|
||||
var navLink = document.getElementById('site-nav').querySelector('a[href="' + pathname + '"]');
|
||||
if (navLink) {
|
||||
return navLink;
|
||||
}
|
||||
|
||||
// The `permalink` setting may produce navigation links whose `href` ends with `/` or `.html`.
|
||||
// To find these links when `/` is omitted from or added to pathname, or `.html` is omitted:
|
||||
|
||||
if (pathname.endsWith('/') && pathname != '/') {
|
||||
pathname = pathname.slice(0, -1);
|
||||
}
|
||||
|
||||
if (pathname != '/') {
|
||||
navLink = document.getElementById('site-nav').querySelector('a[href="' + pathname + '"], a[href="' + pathname + '/"], a[href="' + pathname + '.html"]');
|
||||
if (navLink) {
|
||||
return navLink;
|
||||
}
|
||||
}
|
||||
|
||||
return null; // avoids `undefined`
|
||||
}
|
||||
|
||||
// Scroll site-nav to ensure the link to the current page is visible
|
||||
|
||||
function scrollNav() {
|
||||
const targetLink = navLink();
|
||||
if (targetLink) {
|
||||
targetLink.scrollIntoView({ block: "center" });
|
||||
targetLink.removeAttribute('href');
|
||||
}
|
||||
}
|
||||
|
||||
// Find the nav-list-link that refers to the current page
|
||||
// then make it and all enclosing nav-list-item elements active.
|
||||
|
||||
function activateNav() {
|
||||
var target = navLink();
|
||||
if (target) {
|
||||
target.classList.toggle('active', true);
|
||||
}
|
||||
while (target) {
|
||||
while (target && !(target.classList && target.classList.contains('nav-list-item'))) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
if (target) {
|
||||
target.classList.toggle('active', true);
|
||||
target = target.parentNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Document ready
|
||||
|
||||
jtd.onReady(function(){
|
||||
if (document.getElementById('site-nav')) {
|
||||
initNav();
|
||||
activateNav();
|
||||
scrollNav();
|
||||
}
|
||||
{%- if site.search_enabled != false %}
|
||||
initSearch();
|
||||
{%- endif %}
|
||||
});
|
||||
|
||||
// Copy button on code
|
||||
|
||||
|
||||
{%- if site.enable_copy_code_button != false %}
|
||||
|
||||
jtd.onReady(function(){
|
||||
|
||||
if (!window.isSecureContext) {
|
||||
console.log('Window does not have a secure context, therefore code clipboard copy functionality will not be available. For more details see https://web.dev/async-clipboard/#security-and-permissions');
|
||||
return;
|
||||
}
|
||||
|
||||
var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
|
||||
|
||||
// note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html
|
||||
var svgCopied = '<svg viewBox="0 0 24 24" class="copy-icon"><use xlink:href="#svg-copied"></use></svg>';
|
||||
var svgCopy = '<svg viewBox="0 0 24 24" class="copy-icon"><use xlink:href="#svg-copy"></use></svg>';
|
||||
|
||||
codeBlocks.forEach(codeBlock => {
|
||||
var copyButton = document.createElement('button');
|
||||
var timeout = null;
|
||||
copyButton.type = 'button';
|
||||
copyButton.ariaLabel = 'Copy code to clipboard';
|
||||
copyButton.innerHTML = svgCopy;
|
||||
codeBlock.append(copyButton);
|
||||
|
||||
copyButton.addEventListener('click', function () {
|
||||
if(timeout === null) {
|
||||
var code = (codeBlock.querySelector('pre:not(.lineno, .highlight)') || codeBlock.querySelector('code')).innerText;
|
||||
window.navigator.clipboard.writeText(code);
|
||||
|
||||
copyButton.innerHTML = svgCopied;
|
||||
|
||||
var timeoutSetting = 4000;
|
||||
|
||||
timeout = setTimeout(function () {
|
||||
copyButton.innerHTML = svgCopy;
|
||||
timeout = null;
|
||||
}, timeoutSetting);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
{%- endif %}
|
||||
|
||||
})(window.jtd = window.jtd || {});
|
||||
|
||||
{% include js/custom.js %}
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
layout: null
|
||||
permalink: /assets/js/search-data.json
|
||||
---
|
||||
{
|
||||
{%- assign i = 0 -%}
|
||||
{%- assign pages_array = "" | split: "" -%}
|
||||
{%- assign pages_array = pages_array | push: site.html_pages -%}
|
||||
{%- if site.just_the_docs.collections -%}
|
||||
{%- for collection_entry in site.just_the_docs.collections -%}
|
||||
{%- assign collection_key = collection_entry[0] -%}
|
||||
{%- assign collection_value = collection_entry[1] -%}
|
||||
{%- assign collection = site[collection_key] -%}
|
||||
{%- if collection_value.search_exclude != true -%}
|
||||
{%- assign pages_array = pages_array | push: collection -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
{%- for pages in pages_array -%}
|
||||
{%- for page in pages -%}
|
||||
{%- if page.title and page.search_exclude != true -%}
|
||||
{%- assign page_content = page.content -%}
|
||||
{%- assign heading_level = site.search.heading_level | default: 2 -%}
|
||||
{%- for j in (2..heading_level) -%}
|
||||
{%- assign tag = '<h' | append: j -%}
|
||||
{%- assign closing_tag = '</h' | append: j -%}
|
||||
{%- assign page_content = page_content | replace: tag, '<h1' | replace: closing_tag, '</h1' -%}
|
||||
{%- endfor -%}
|
||||
{%- assign parts = page_content | split: '<h1' -%}
|
||||
{%- assign title_found = false -%}
|
||||
{%- for part in parts offset: 1 -%}
|
||||
{%- assign titleAndContent = part | split: '</h1>' -%}
|
||||
{%- assign title = titleAndContent[0] | replace_first: '>', '<h1>' | split: '<h1>' -%}
|
||||
{%- assign title = title[1] | strip_html -%}
|
||||
{%- assign content = titleAndContent[1] -%}
|
||||
{%- assign url = page.url -%}
|
||||
{%- if title == page.title and parts[0] == '' -%}
|
||||
{%- assign title_found = true -%}
|
||||
{%- else -%}
|
||||
{%- assign id = titleAndContent[0] -%}
|
||||
{%- assign id = id | split: 'id="' -%}
|
||||
{%- if id.size == 2 -%}
|
||||
{%- assign id = id[1] -%}
|
||||
{%- assign id = id | split: '"' -%}
|
||||
{%- assign id = id[0] -%}
|
||||
{%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- unless i == 0 -%},{%- endunless -%}
|
||||
"{{ i }}": {
|
||||
"doc": {{ page.title | jsonify }},
|
||||
"title": {{ title | jsonify }},
|
||||
"content": {{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
|
||||
"url": "{{ url | relative_url }}",
|
||||
{% include lunr/custom-data.json page=page %}
|
||||
"relUrl": "{{ url }}"
|
||||
}
|
||||
{%- assign i = i | plus: 1 -%}
|
||||
{%- endfor -%}
|
||||
{%- unless title_found -%}
|
||||
{%- unless i == 0 -%},{%- endunless -%}
|
||||
"{{ i }}": {
|
||||
"doc": {{ page.title | jsonify }},
|
||||
"title": {{ page.title | jsonify }},
|
||||
"content": {{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
|
||||
"url": "{{ page.url | relative_url }}",
|
||||
{% include lunr/custom-data.json page=page %}
|
||||
"relUrl": "{{ page.url }}"
|
||||
}
|
||||
{%- assign i = i | plus: 1 -%}
|
||||
{%- endunless -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor %}
|
||||
}
|
||||
Executable
+16
@@ -0,0 +1,16 @@
|
||||
#!/usr/bin/env ruby
|
||||
|
||||
gem_dir = File.expand_path("..",File.dirname(__FILE__))
|
||||
$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first.
|
||||
exec_type = ARGV[0]
|
||||
|
||||
if exec_type == 'rake' then
|
||||
require 'rake'
|
||||
require 'pp'
|
||||
pwd=Dir.pwd
|
||||
Dir.chdir(gem_dir) # We'll load rakefile from the gem's dir.
|
||||
Rake.application.init
|
||||
Rake.application.load_rakefile
|
||||
Dir.chdir(pwd) # Revert to original pwd for any path args passed to task.
|
||||
Rake.application.invoke_task(ARGV[1])
|
||||
end
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user