thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2024-11-20 04:15:55 -05:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

Browse Source
This commit is contained in:
Henrique Vianna 2020-06-27 17:34:59 -03:00
commit 1f492b68f3
55 changed files with 1989 additions and 1210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.github/release-drafter.yml vendored Normal file
View File

@ -0,0 +1,32 @@
name-template: 'v$RESOLVED_VERSION 🌈'
tag-template: 'v$RESOLVED_VERSION'
categories:
- title: '🚀 Features'
labels:
- 'feature'
- 'enhancement'
- title: '🐛 Bug Fixes'
labels:
- 'fix'
- 'bugfix'
- 'bug'
- title: '🧰 Maintenance'
label:
- 'chore'
- 'dependencies'
change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
version-resolver:
major:
labels:
- 'next-major-release'
minor:
labels:
- 'next-minor-release'
patch:
labels:
- 'patch'
default: minor
template: |
## Changes
$CHANGES

4
.github/workflows/ci-master.yml vendored
View File

@ -18,7 +18,7 @@ jobs:
run: |
docker run --rm \
--volume="${{ github.workspace }}:/srv/jekyll" \
jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
jekyll-3-8-5:
name: Build Jekyll site (v3.8.5)
runs-on: ubuntu-latest
@ -30,7 +30,7 @@ jobs:
run: |
docker run --rm \
--volume="${{ github.workspace }}:/srv/jekyll" \
jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
assets:
name: Format and test CSS and JS
runs-on: ubuntu-latest

38
.github/workflows/ci.yml vendored
View File

@ -9,64 +9,36 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/checkout@v2
- name: Build the site in the jekyll/builder container
run: |
docker run --rm \
--volume="${{ github.workspace }}:/srv/jekyll" \
jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
jekyll-3-8-5:
name: Build Jekyll site (v3.8.5)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/checkout@v2
- name: Build the site in the jekyll/builder container
run: |
docker run --rm \
--volume="${{ github.workspace }}:/srv/jekyll" \
jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
assets:
name: Format and test CSS and JS
name: Test CSS and JS
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
# Using this so the this instead of GITHUB_TOKEN so that this workflow can trigger another
with:
token: ${{ secrets.PAT }}
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Extract branch name
shell: bash
run: echo "##[set-output name=branch;]$(echo ${GITHUB_HEAD_REF#refs/heads/})"
id: extract_branch
- run: npm install
- run: npm run format
- name: Add changed files
run: |
echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git"
git config --global user.email $GITHUB_ACTOR@users.noreply.github.com
git config --global user.name $GITHUB_ACTOR
echo "extracted branch is ${{ steps.extract_branch.outputs.branch }}"
git checkout -b ${{ steps.extract_branch.outputs.branch }}
git status
git add .
- name: Are there any updates?
shell: bash
run: echo "##[set-output name=status]$(git status -s)"
id: is_dirty
- name: Commit files
if: steps.is_dirty.outputs.status
run: |
echo ${{ steps.is_dirty.outputs.status }}
git commit -m "🎨 Prettier"
git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }}
- run: npm test

2
.gitignore vendored
View File

@ -1,5 +1,7 @@
*.gem
.bundle
.ruby-version
.jekyll-cache
.sass-cache
_site
Gemfile.lock

5
.prettierignore
View File

@ -1,8 +1,9 @@
package.json
package-lock.json
_site
assets/css/dark-mode-preview.scss
assets/css/just-the-docs.scss
assets/css/just-the-docs-default.scss
assets/css/just-the-docs-light.scss
assets/css/just-the-docs-dark.scss
assets/js/vendor/lunr.min.js
assets/js/search-data.json
assets/js/just-the-docs.js

5
.stylelintrc.json
View File

@ -1,7 +1,8 @@
{
"ignoreFiles": [
"assets/css/just-the-docs.scss",
"assets/css/dark-mode-preview.scss",
"assets/css/just-the-docs-default.scss",
"assets/css/just-the-docs-light.scss",
"assets/css/just-the-docs-dark.scss",
"_sass/vendor/**/*.scss"
],
"extends": ["stylelint-config-primer", "stylelint-config-prettier"],

2
404.html
View File

@ -8,4 +8,4 @@ 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 %}or search {% endif %}to find what you're looking for or go to this <a href="{{ site.url }}{{ site.baseurl }}">site's home page</a>.</p>
<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="{{ '/' | absolute_url }}">site's home page</a>.</p>

60
_config.yml
View File

@ -25,10 +25,31 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
#logo: "/assets/images/just-the-docs.png"
# Enable or disable the site search
# Supports true (default) or false
search_enabled: true
# Set the search token separator for hyphenated-word search:
search_tokenizer_separator: /[\s/]+/
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: 3
# Maximum amount of words to display before a matched word in the preview
# Default: 5
preview_words_before: 5
# Maximum amount of words to display after a matched word in the preview
# Default: 10
preview_words_after: 10
# 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
# Enable or disable heading anchors
heading_anchors: true
@ -38,15 +59,42 @@ aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
# Footer content appears at the bottom of every page's main content
footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
# Makes Aux links open in a new tab. Default is false
aux_links_new_tab: false
# Color scheme currently only supports "dark" or nil (default)
# Sort order for navigation links
nav_sort: case_insensitive # default, equivalent to nil
# nav_sort: case_sensitive # Capital letters sorted before lowercase
# 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: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</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/pmarsceill/just-the-docs" # the github URL for your repo
gh_edit_branch: "master" # the branch that your docs is served 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: nil
# Google Analytics Tracking (optional)
# e.g, UA-1234567-89
ga_tracking: UA-2709176-10
ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default)
plugins:
- jekyll-seo-tag

1
_includes/css/custom.scss.liquid Normal file
View File

@ -0,0 +1 @@
@import "./custom/custom";

7
_includes/css/just-the-docs.scss.liquid Normal file
View File

@ -0,0 +1,7 @@
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
@import "./support/support";
@import "./color_schemes/{{ include.color_scheme }}";
@import "./modules";
{% include css/custom.scss.liquid %}

8
_includes/head.html
View File

@ -2,17 +2,17 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
{% if site.plugins.jekyll-seo == nil %}
{% unless site.plugins contains "jekyll-seo-tag" %}
<title>{{ page.title }} - {{ site.title }}</title>
{% if page.description %}
<meta name="Description" content="{{ page.description }}">
{% endif %}
{% endif %}
{% endunless %}
<link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | absolute_url }}">
{% if site.ga_tracking != nil %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
@ -21,7 +21,7 @@
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', "{{ site.ga_tracking }}");
gtag('config', '{{ site.ga_tracking }}'{% unless site.ga_tracking_anonymize_ip == nil %}, { 'anonymize_ip': true }{% endunless %});
</script>
{% endif %}

95
_includes/nav.html
View File

@ -1,40 +1,55 @@
<nav role="navigation" aria-label="Main navigation">
<ul class="navigation-list">
{%- assign pages_list = site.html_pages | sort:"nav_order" -%}
{%- for node in pages_list -%}
{%- unless node.nav_exclude -%}
{%- if node.parent == nil -%}
<li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
<ul class="navigation-list-child-list ">
{%- for child in children_list -%}
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
<ul class="navigation-list-child-list">
{%- for grand_child in grand_children_list -%}
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
</ul>
</nav>
<ul class="nav-list">
{%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
{%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
{%- if site.nav_sort == 'case_insensitive' -%}
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
{%- else -%}
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
{%- endif -%}
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
{%- for node in pages_list -%}
{%- unless node.nav_exclude -%}
{%- if node.parent == nil and node.title -%}
<li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%}
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
<ul class="nav-list ">
{%- for child in children_list -%}
{%- unless child.nav_exclude -%}
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%}
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
<ul class="nav-list">
{%- for grand_child in grand_children_list -%}
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
</ul>

235
_layouts/default.html
View File

@ -4,99 +4,166 @@ layout: table_wrappers
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="link" viewBox="0 0 16 16">
<symbol id="svg-link" viewBox="0 0 24 24">
<title>Link</title>
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
<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>
<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>
<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>
<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>
<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>
</svg>
<div class="page-wrap">
<div class="side-bar">
<div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
<button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
</div>
<div class="navigation main-nav js-main-nav">
{% include nav.html %}
</div>
<footer class="site-footer">
<p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
</div>
<div class="main-content-wrap js-main-content" tabindex="0">
<div class="main-content">
<div class="page-header js-page-header">
{% if site.search_enabled != false %}
<div class="search">
<div class="search-input-wrap">
<input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
</div>
<div class="js-search-results search-results-wrap"></div>
</div>
{% endif %}
{% if site.aux_links != nil %}
<ul class="list-style-none text-small aux-nav">
{% for link in site.aux_links %}
<li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="page">
{% unless page.url == "/" %}
{% if page.parent %}
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
{% else %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% endif %}
{% endunless %}
<div id="main-content" class="page-content" role="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=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
<hr>
<h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %}
<ul>
{% for child in children_list %}
{% if child.parent == page.title and child.title != page.title %}
<li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% if site.footer_content != nil %}
<hr>
<footer role="contentinfo">
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
</footer>
{% endif %}
</div>
</div>
<div class="side-bar">
<div class="site-header">
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
<a href="#" id="menu-button" class="site-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
</a>
</div>
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %}
</nav>
<footer class="site-footer">
This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
</footer>
</div>
<div class="main" id="top">
<div id="main-header" class="main-header">
{% if site.search_enabled != false %}
<div class="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" 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>
{% endif %}
{% if site.aux_links %}
<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>
{% endif %}
</div>
<div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
{% else %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% endif %}
{% endunless %}
<div id="main-content" class="main-content" role="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" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
<hr>
<h2 class="text-delta">Table of contents</h2>
<ul>
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
{% for child in children_list %}
<li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
<hr>
<footer>
{% if site.back_to_top %}
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
{% endif %}
{% if site.footer_content != nil %}
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
{% endif %}
{% 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 }}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
</p>
{% endif %}
</div>
{% endif %}
</footer>
{% endif %}
</div>
</div>
{% if site.search_enabled != false %}
{% if site.search.button %}
<a href="#" id="search-button" class="search-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
</a>
{% endif %}
<div class="search-overlay"></div>
{% endif %}
</div>
</body>
</html>

2
_layouts/table_wrappers.html
View File

@ -4,4 +4,4 @@ layout: vendor/compress
{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
{{ content_ }}
{{ content_ }}

25
_sass/base.scss
View File

@ -14,6 +14,7 @@
html {
@include fs-4;
scroll-behavior: smooth;
}
body {
@ -24,25 +25,18 @@ body {
background-color: $body-background-color;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
dl,
pre,
address,
blockquote,
dl,
table,
div,
fieldset,
form,
hr,
noscript,
table {
form,
fieldset,
noscript .table-wrapper {
margin-top: 0;
}
@ -52,14 +46,15 @@ h3,
h4,
h5,
h6 {
margin-top: 1.2em;
margin-bottom: 0.8em;
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;
}
@ -86,7 +81,7 @@ a:not([class]) {
code {
font-family: $mono-font-family;
font-size: 12px;
font-size: 0.75em;
line-height: $body-line-height;
}

6
_sass/code.scss
View File

@ -14,9 +14,11 @@ code {
pre.highlight,
figure.highlight {
padding: $sp-3;
margin-top: 0;
margin-bottom: 0;
-webkit-overflow-scrolling: touch;
background-color: $code-background-color;
border-radius: $border-radius;
-webkit-overflow-scrolling: touch;
code {
padding: 0;
@ -26,8 +28,6 @@ figure.highlight {
.highlighter-rouge {
margin-bottom: $sp-3;
overflow: hidden;
border-radius: $border-radius;
}
.highlight .c {

1
_sass/color_schemes/dark.scss
View File

@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
$code-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$table-background-color: $grey-dk-250;
$feedback-color: darken($sidebar-color, 3%);

0
_sass/color_schemes/light.scss Normal file
View File

37
_sass/content.scss
View File

@ -5,9 +5,19 @@
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.page-content {
.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;
@ -19,6 +29,12 @@
padding-left: 1.5em;
}
li {
.highlight {
margin-top: $sp-1;
}
}
ol {
list-style-type: none;
counter-reset: step-counter;
@ -132,7 +148,7 @@
display: inline-block;
width: 100%;
height: 100%;
fill: $link-color;
color: $link-color;
visibility: hidden;
}
}
@ -156,5 +172,22 @@
h5,
h6 {
position: relative;
margin-top: 1.5em;
margin-bottom: 0.25em;
&:first-child {
margin-top: $sp-2;
}
+ table,
+ .table-wrapper,
+ .code-example,
+ .highlighter-rouge {
margin-top: 1em;
}
+ p {
margin-top: 0;
}
}
}

129
_sass/custom/custom.scss
View File

@ -1,129 +0,0 @@
////
//// Typography
////
//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", "segoe ui", helvetica, roboto, noto, arial, sans-serif;
//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
//$root-font-size: 16px; // Base font-size for rems
//$body-line-height: 1.4;
//$content-line-height: 1.5;
//$body-heading-line-height: 1.15;
////
//// Colors
////
//$white: #fff;
//$grey-dk-000: #959396;
//$grey-dk-100: #5c5962;
//$grey-dk-200: #44434d;
//$grey-dk-250: #302d36;
//$grey-dk-300: #27262b;
//$grey-lt-000: #f5f6fa;
//$grey-lt-100: #eeebee;
//$grey-lt-200: #ecebed;
//$grey-lt-300: #e6e1e8;
//$purple-000: #7253ed;
//$purple-100: #5e41d0;
//$purple-200: #4e26af;
//$purple-300: #381885;
//$blue-000: #2c84fa;
//$blue-100: #2869e6;
//$blue-200: #264caf;
//$blue-300: #183385;
//$green-000: #41d693;
//$green-100: #11b584;
//$green-200: #009c7b;
//$green-300: #026e57;
//$yellow-000: #ffeb82;
//$yellow-100: #fadf50;
//$yellow-200: #f7d12e;
//$yellow-300: #e7af06;
//$red-000: #f77e7e;
//$red-100: #f96e65;
//$red-200: #e94c4c;
//$red-300: #dd2e2e;
//$body-background-color: $white;
//$sidebar-color: $grey-lt-000;
//$search-background-color: $white;
//$table-background-color: $white;
//$code-background-color: $grey-lt-000;
//$body-text-color: $grey-dk-100;
//$body-heading-color: $grey-dk-300;
//$search-result-preview-color: $grey-dk-000;
//$nav-child-link-color: $grey-dk-100;
//$link-color: $purple-000;
//$btn-primary-color: $purple-100;
//$base-button-color: #f7f7f7;
////
//// 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
//);
//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
//$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
//$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
//$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
//$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
//$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
//$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
//$sp-9: map-get($spacers, sp-9); // 4 rem == 48px
//$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
////
//// Borders
////
//$border: 1px solid;
//$border-radius: 4px;
//$border-color: $grey-lt-100;
////
//// Grid system
////
//$gutter-spacing: $sp-6;
//$gutter-spacing-sm: $sp-4;
//$nav-width: 264px;
//$nav-width-md: 248px;
//$content-width: 800px;
//$header-height: 60px;
//$search-results-width: 500px;
////
//// Media queries in pixels
////
//$media-queries: (
//xs: 320px,
//sm: 500px,
//md: $content-width,
//lg: $content-width + $nav-width,
//xl: 1400px
//);

9
_sass/labels.scss
View File

@ -6,16 +6,17 @@
.label-blue {
display: inline-block;
padding-top: 0.16em;
padding-right: 0.42em;
padding-right: 0.56em;
padding-bottom: 0.16em;
padding-left: 0.42em;
margin-right: $sp-1;
margin-left: $sp-1;
padding-left: 0.56em;
margin-right: $sp-2;
margin-left: $sp-2;
color: $white;
text-transform: uppercase;
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
border-radius: 12px;
}
.label-green {

95
_sass/layout.scss
View File

@ -2,28 +2,15 @@
// The basic two column layout
//
.page-wrap {
@include mq(md) {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
}
.side-bar {
z-index: 100;
z-index: 0;
display: flex;
flex-wrap: wrap;
background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
position: absolute;
position: fixed;
width: $nav-width-md;
height: 100%;
flex-direction: column;
@ -37,20 +24,7 @@
}
}
.main-content-wrap {
@include mq(md) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
}
}
.main-content {
.main {
@include mq(md) {
position: relative;
max-width: $content-width;
@ -64,11 +38,7 @@
}
}
.js-main-content:focus {
outline: none;
}
.page {
.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@ -79,16 +49,14 @@
}
}
.page-header {
@include container;
.main-header {
z-index: 0;
display: none;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
background-color: $sidebar-color;
@include mq(md) {
display: flex;
justify-content: flex-end;
justify-content: space-between;
height: $header-height;
background-color: $body-background-color;
border-bottom: $border $border-color;
@ -103,7 +71,7 @@
}
}
.navigation,
.site-nav,
.site-header,
.site-footer {
width: 100%;
@ -113,10 +81,15 @@
}
}
.navigation {
@include container;
.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;
@ -130,7 +103,6 @@
align-items: center;
@include mq(md) {
z-index: 101;
height: $header-height;
max-height: $header-height;
border-bottom: $border $border-color;
@ -165,27 +137,42 @@
}
}
.menu-button {
appearance: none;
.site-button {
display: flex;
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
color: $link-color;
text-transform: uppercase;
background: transparent;
border: 0;
}
@include mq(md) {
@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;
@ -202,9 +189,17 @@ body {
left: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
color: $grey-dk-000;
@include fs-2;
@include mq(md) {
position: static;
justify-self: end;
}
}
.icon {
width: $sp-5;
height: $sp-5;
color: $link-color;
}

20
_sass/modules.scss Normal file
View File

@ -0,0 +1,20 @@
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
//
// 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";

200
_sass/navigation.scss
View File

@ -1,89 +1,165 @@
//
// Main nav, breadcrumb, etc...
//
.navigation-list {
// 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;
}
.navigation-list-child-list {
padding-left: $sp-3;
list-style: none;
.navigation-list-link {
color: $nav-child-link-color;
}
.navigation-list-item {
.nav-list-item {
@include fs-4;
position: relative;
margin: 0;
&::before {
@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;
}
}
&.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;
margin-top: 0.3em;
margin-left: -0.8em;
color: rgba($body-text-color, 0.3);
content: "- ";
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
padding-right: #{$nav-list-item-height-sm / 4};
padding-bottom: #{$nav-list-item-height-sm / 4};
padding-left: #{$nav-list-item-height-sm / 4};
color: $link-color;
@include mq(md) {
width: $nav-list-item-height;
height: $nav-list-item-height;
padding-top: #{$nav-list-item-height / 4};
padding-right: #{$nav-list-item-height / 4};
padding-bottom: #{$nav-list-item-height / 4};
padding-left: #{$nav-list-item-height / 4};
}
&: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 {
&::before {
color: $body-text-color;
> .nav-list-expander svg {
@if $nav-list-expander-right {
transform: rotate(-90deg);
} @else {
transform: rotate(90deg);
}
}
> .nav-list {
display: block;
}
}
}
}
.navigation-list-item {
@include fs-4;
margin: 0;
@include mq(md) {
@include fs-3;
}
.navigation-list-child-list {
display: none;
}
&.active {
.navigation-list-child-list {
display: block;
}
}
}
.navigation-list-link {
display: block;
padding-top: $sp-1;
padding-bottom: $sp-1;
&.active {
font-weight: 600;
color: $body-heading-color;
text-decoration: none;
}
}
// Small screen nav
.main-nav {
display: none;
&.nav-open {
display: block;
}
@include mq(md) {
display: block;
}
}
// Aux nav
.aux-nav {
align-self: center;
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;

3
_sass/overrides.scss
View File

@ -1,3 +0,0 @@
//
// Custom overrides from a user.
//

40
_sass/print.scss Normal file
View File

@ -0,0 +1,40 @@
// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
@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: $root-font-size !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;
}
}

252
_sass/search.scss
View File

@ -4,91 +4,115 @@
.search {
position: relative;
z-index: 99;
z-index: 2;
flex-grow: 1;
height: 100%;
margin-bottom: $sp-3;
height: $sp-10;
padding: $sp-2;
transition: padding linear #{$transition-duration / 2};
@include mq(md) {
margin-bottom: 0;
position: relative !important;
width: auto !important;
height: 100% !important;
padding: 0;
transition: none;
}
}
.search-input-wrap {
display: flex;
height: 100%;
padding: $sp-2;
background-color: $search-background-color;
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 / 2};
@include mq(md) {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-color: $body-background-color;
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 {
align-self: center;
position: absolute;
width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
height: 100%;
padding-top: $sp-2;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2;
padding-left: #{$gutter-spacing-sm + $sp-5};
font-size: 16px;
background-color: $search-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
order: 2;
@include fs-4;
border-radius: 0;
@include mq(md) {
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
padding-left: #{$gutter-spacing + $sp-5};
font-size: 14px;
background-color: $body-background-color;
transition: padding-left linear #{$transition-duration / 2};
}
&:focus {
outline: 0;
box-shadow: none;
+ .search-icon {
fill: $link-color;
+ .search-label .search-icon {
color: $link-color;
}
}
}
.search-label {
position: absolute;
display: flex;
height: 100%;
padding-left: $gutter-spacing-sm;
@include mq(md) {
background-color: $body-background-color;
@include fs-3;
padding-left: $gutter-spacing;
transition: padding-left linear #{$transition-duration / 2};
}
.search-icon {
width: #{$sp-4 * 1.2};
height: #{$sp-4 * 1.2};
align-self: center;
color: $grey-dk-000;
}
}
.search-icon {
align-self: center;
margin-right: $sp-2;
fill: $grey-dk-000;
order: 1;
}
.search-results-wrap {
.search-results {
position: absolute;
z-index: 100;
left: 0;
display: none;
width: 100%;
background: $search-background-color;
border-radius: $border-radius;
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);
&.active {
display: block;
}
@include mq(md) {
top: 100%;
width: $search-results-width;
max-height: calc(100vh - 200%) !important;
}
}
.search-results-list {
padding-left: 0;
margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
@include fs-4;
@ -112,31 +136,58 @@
&:hover,
&.active {
background-color: $sidebar-color;
}
@include mq(md) {
padding-right: $sp-4;
padding-left: $sp-4;
background-color: $feedback-color;
}
}
.search-result-title {
display: block;
padding-top: $sp-2;
padding-right: $sp-4;
padding-bottom: $sp-2;
@include mq(sm) {
display: inline-block;
width: 40%;
word-wrap: break-word;
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;
@ -144,12 +195,14 @@
@include fs-1;
}
.search-result-preview {
.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;
@ -157,11 +210,112 @@
@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;
color: $link-color;
}
.search-no-result {
padding-top: $sp-2;
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $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 / 2};
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: #{$sp-4 * 1.25 + $sp-5};
}
}
.search-label {
@include mq(md) {
padding-left: #{$sp-4 * 1.25};
}
}
.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;
}
}
.main-header {
padding-top: $sp-10;
@include mq(md) {
padding-top: 0;
}
}
}

15
_sass/support/_variables.scss
View File

@ -7,8 +7,8 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4 !default;
$content-line-height: 1.5 !default;
$body-heading-line-height: 1.15 !default !default;
$content-line-height: 1.6 !default;
$body-heading-line-height: 1.25 !default;
//
// Colors
@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
@ -94,8 +95,8 @@ $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; // 4 rem == 48px
$sp-10: map-get($spacers, sp-10) !default; // 4.5 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
@ -113,9 +114,13 @@ $gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: 500px !default;
$search-results-width: $content-width - $nav-width !default;
$transition-duration: 400ms;
//
// Media queries in pixels

7
_sass/support/mixins/_typography.scss
View File

@ -25,7 +25,7 @@
}
@mixin fs-4 {
font-size: 14px !important;
font-size: 15px !important;
@include mq(sm) {
font-size: 16px !important;
@ -45,11 +45,13 @@
@include mq(sm) {
font-size: 24px !important;
line-height: $body-heading-line-height;
}
}
@mixin fs-7 {
font-size: 24px !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: 32px !important;
@ -58,6 +60,7 @@
@mixin fs-8 {
font-size: 32px !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: 36px !important;
@ -66,6 +69,7 @@
@mixin fs-9 {
font-size: 36px !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: 42px !important;
@ -74,6 +78,7 @@
@mixin fs-10 {
font-size: 42px !important;
line-height: $body-heading-line-height;
@include mq(sm) {
font-size: 48px !important;

16
_sass/typography.scss
View File

@ -22,7 +22,7 @@ h3,
h4,
.text-delta {
@include fs-2;
font-weight: 300;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
}
@ -39,12 +39,6 @@ h6,
color: $grey-dk-200;
}
li {
.highlight {
margin-top: $sp-2;
}
}
.text-small {
@include fs-2;
}
@ -53,6 +47,14 @@ li {
font-family: $mono-font-family !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}

26
_sass/utilities/_layout.scss
View File

@ -47,6 +47,32 @@
}
}
// 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 {

14
_sass/utilities/_spacing.scss
View File

@ -7,6 +7,11 @@
// 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};
@ -42,11 +47,10 @@
margin-right: -#{$size} !important;
margin-left: -#{$size} !important;
}
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
.mx-#{$scale}-auto {
margin-right: auto !important;
margin-left: auto !important;
}
}
@each $media-query in map-keys($media-queries) {

45
assets/css/dark-mode-preview.scss
View File

@ -1,45 +0,0 @@
---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
//
// Import Just the Docs scss
//
// Support
@import "./support/support";
//
// Import custom color scheme scss
//
@import "./color_schemes/dark.scss";
// 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 custom overrides
//
@import "./custom/custom";

3
assets/css/just-the-docs-dark.scss Normal file
View File

@ -0,0 +1,3 @@
---
---
{% include css/just-the-docs.scss.liquid color_scheme="dark" %}

8
assets/css/just-the-docs-default.scss Normal file
View File

@ -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 %}

3
assets/css/just-the-docs-light.scss Normal file
View File

@ -0,0 +1,3 @@
---
---
{% include css/just-the-docs.scss.liquid color_scheme="light" %}

49
assets/css/just-the-docs.scss
View File

@ -1,49 +0,0 @@
---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
//
// Import Just the Docs scss
//
// Support
@import "./support/support";
//
// Import custom overrides
//
@import "./custom/custom";
//
// Import custom color scheme scss
//
{% if site.color_scheme == "dark" %}
@import "./color_schemes/dark.scss";
{% endif %}
// 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 "./overrides";

25
assets/js/dark-mode-preview.js
View File

@ -1,25 +0,0 @@
document.addEventListener("DOMContentLoaded", function () {
const toggleDarkMode = document.querySelector(".js-toggle-dark-mode")
const cssFile = document.querySelector('[rel="stylesheet"]')
const originalCssRef = cssFile.getAttribute("href")
const darkModeCssRef = originalCssRef.replace(
"just-the-docs.css",
"dark-mode-preview.css"
)
const buttonCopy = ["Return to the light side", "Preview dark color scheme"]
const updateButtonText = function (toggleDarkMode) {
toggleDarkMode.textContent === buttonCopy[0]
? (toggleDarkMode.textContent = buttonCopy[1])
: (toggleDarkMode.textContent = buttonCopy[0])
}
jtd.addEvent(toggleDarkMode, "click", function () {
if (cssFile.getAttribute("href") === originalCssRef) {
cssFile.setAttribute("href", darkModeCssRef)
updateButtonText(toggleDarkMode)
} else {
cssFile.setAttribute("href", originalCssRef)
updateButtonText(toggleDarkMode)
}
})
})

568
assets/js/just-the-docs.js
View File

@ -24,24 +24,47 @@ jtd.onReady = function(ready) {
// Show/hide mobile menu
function initNav() {
const mainNav = document.querySelector('.js-main-nav');
const pageHeader = document.querySelector('.js-page-header');
const navTrigger = document.querySelector('.js-main-nav-trigger');
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.parentNode.classList.toggle('active');
}
});
jtd.addEvent(navTrigger, 'click', function(e){
const siteNav = document.getElementById('site-nav');
const mainHeader = document.getElementById('main-header');
const menuButton = document.getElementById('menu-button');
jtd.addEvent(menuButton, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
mainNav.classList.toggle('nav-open');
pageHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
textToggle = text;
})
if (menuButton.classList.toggle('nav-open')) {
siteNav.classList.add('nav-open');
mainHeader.classList.add('nav-open');
} else {
siteNav.classList.remove('nav-open');
mainHeader.classList.remove('nav-open');
}
});
{%- 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 %}
}
{%- if site.search_enabled != false %}
// Site search
function initSearch() {
@ -50,248 +73,397 @@ function initSearch() {
request.onload = function(){
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
var docs = JSON.parse(request.responseText);
{% if site.search_tokenizer_separator != nil %}
lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
{% else %}
lunr.tokenizer.separator = /[\s\-/]+/
{% endif %}
var index = lunr(function () {
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 });
this.field('url');
{%- if site.search.rel_url != false %}
this.field('relUrl');
{%- endif %}
this.metadataWhitelist = ['position']
for (var i in data) {
for (var i in docs) {
this.add({
id: i,
title: data[i].title,
content: data[i].content,
url: data[i].url
title: docs[i].title,
content: docs[i].content,
{%- if site.search.rel_url != false %}
relUrl: docs[i].relUrl
{%- endif %}
});
}
});
searchResults(index, data);
searchLoaded(index, docs);
} else {
// We reached our target server, but it returned an error
console.log('Error loading ajax request. Request status:' + request.status);
}
};
request.onerror = function(){
// There was a connection error of some sort
console.log('There was a connection error');
};
request.send();
}
function searchResults(index, data) {
var index = index;
var docs = data;
var searchInput = document.querySelector('.js-search-input');
var searchResults = document.querySelector('.js-search-results');
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;
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
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;
}
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;
}
var results = index.query(function (query) {
var tokens = lunr.tokenizer(input)
query.term(tokens, {
boost: 10
});
query.term(tokens, {
wildcard: lunr.Query.wildcard.TRAILING
});
});
jtd.addEvent(searchInput, 'keyup', function(e){
switch (e.keyCode) {
case 27: // When esc key is pressed, hide the results and clear the field
hideResults();
searchInput.value = '';
return;
case 38: // arrow up
case 40: // arrow down
case 13: // enter
e.preventDefault();
return;
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))
});
});
}
}
hideResults();
if (results.length == 0) {
var noResultsDiv = document.createElement('div');
noResultsDiv.classList.add('search-no-result');
noResultsDiv.innerText = 'No results found';
searchResults.appendChild(noResultsDiv);
var input = this.value;
if (input === '') {
} 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);
}
var results = index.query(function (query) {
var tokens = lunr.tokenizer(input)
query.term(tokens, {
boost: 10
});
query.term(tokens, {
wildcard: lunr.Query.wildcard.TRAILING
});
});
function addResult(resultsList, result) {
var doc = docs[result.ref];
if (results.length > 0) {
searchResults.classList.add('active');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
var resultsListItem = document.createElement('li');
resultsListItem.classList.add('search-results-list-item');
resultsList.appendChild(resultsListItem);
for (var i in results) {
var result = results[i];
var doc = docs[result.ref];
var resultLink = document.createElement('a');
resultLink.classList.add('search-result');
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
var resultsListItem = document.createElement('li');
resultsListItem.classList.add('search-results-list-item');
resultsList.appendChild(resultsListItem);
var resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultLink.appendChild(resultTitle);
var resultLink = document.createElement('a');
resultLink.classList.add('search-result');
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
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 resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultTitle.innerText = doc.title;
resultLink.appendChild(resultTitle);
var resultDocTitle = document.createElement('div');
resultDocTitle.classList.add('search-result-doc-title');
resultDocTitle.innerHTML = doc.doc;
resultDoc.appendChild(resultDocTitle);
var resultDocOrSection = resultDocTitle;
var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl;
resultTitle.appendChild(resultRelUrl);
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 contentFound = false;
for (var j in metadata) {
if (metadata[j].title) {
var position = metadata[j].title.position[0];
var start = position[0];
var end = position[0] + position[1];
resultTitle.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length)+'<span class="search-result-rel-url">'+doc.relUrl+'</span>';
} else if (metadata[j].content && !contentFound) {
contentFound = true;
var position = metadata[j].content.position[0];
var start = position[0];
var end = position[0] + position[1];
var previewStart = start;
var previewEnd = end;
var ellipsesBefore = true;
var ellipsesAfter = true;
for (var k = 0; k < 3; 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;
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;
}
for (var k = 0; k < 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;
if (nextSpace < 0) {
previewStart = 0;
ellipsesBefore = false;
break;
}
var preview = doc.content.substring(previewStart, start);
if (ellipsesBefore) {
preview = '... ' + preview;
}
preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
preview += doc.content.substring(end, previewEnd);
if (ellipsesAfter) {
preview += ' ...';
}
var resultPreview = document.createElement('div');
resultPreview.classList.add('search-result-preview');
resultPreview.innerHTML = preview;
resultLink.appendChild(resultPreview);
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
});
}
}
}
});
jtd.addEvent(searchInput, 'blur', function(){
setTimeout(function(){ hideResults() }, 300);
});
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);
}
function pageFocus() {
var mainContent = document.querySelector('.js-main-content');
mainContent.focus();
jtd.setTheme = function(theme) {
var cssFile = document.querySelector('[rel="stylesheet"]');
cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
}
// Document ready
jtd.onReady(function(){
initNav();
pageFocus();
if (typeof lunr !== 'undefined') {
initSearch();
}
{%- if site.search_enabled != false %}
initSearch();
{%- endif %}
});
})(window.jtd = window.jtd || {});

12
assets/js/search-data.json
View File

@ -1,12 +0,0 @@
---
---
{
{% assign comma = false %}
{% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
"title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}",
"url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url }}"
}{% assign comma = true %}
{% endif %}{% endfor %}
}

58
assets/js/zzzz-search-data.json Normal file
View File

@ -0,0 +1,58 @@
---
permalink: /assets/js/search-data.json
---
{
{%- assign i = 0 -%}
{% for page in site.html_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 | absolute_url }}",
"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 | absolute_url }}",
"relUrl": "{{ page.url }}"
}
{%- assign i = i | plus: 1 -%}
{%- endunless -%}
{%- endif -%}
{% endfor %}
}

70
docs/configuration.md
View File

@ -36,9 +36,29 @@ logo: "/assets/images/just-the-docs.png"
# Supports true (default) or false
search_enabled: true
# Enable support for hyphenated search words:
search_tokenizer_separator: /[\s/]+/
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: 3
# Maximum amount of words to display before a matched word in the preview
# Default: 5
preview_words_before: 5
# Maximum amount of words to display after a matched word in the preview
# Default: 10
preview_words_after: 10
# 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
```
## Aux links
@ -48,6 +68,9 @@ search_tokenizer_separator: /[\s/]+/
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
# Makes Aux links open in a new tab. Default is false
aux_links_new_tab: false
```
## Heading anchor links
@ -56,26 +79,56 @@ aux_links:
# Heading anchor links appear on hover over h1-h6 tags in page content
# allowing users to deep link to a particular heading on a page.
#
# Supports true (default) or false/nil
# Supports true (default) or false
heading_anchors: true
```
## Footer content
```yaml
# Footer content appears at the bottom of every page's main content
# Footer content
# appears at the bottom of every page's main content
footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</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/pmarsceill/just-the-docs" # the github URL for your repo
gh_edit_branch: "master" # the branch that your docs is served from
gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
```
- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
- `gh_edit_repository` is the URL of the project's GitHub repository
- `gh_edit_branch` is the branch that the docs site is served from; defaults to `master`
- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode
## Color scheme
```yaml
# Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark"
# Color scheme supports "light" (default) and "dark"
color_scheme: dark
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (jtd.getTheme() === 'dark') {
jtd.setTheme('light');
toggleDarkMode.textContent = 'Preview dark color scheme';
} else {
jtd.setTheme('dark');
toggleDarkMode.textContent = 'Return to the light side';
}
});
</script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
@ -85,4 +138,5 @@ See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more
# Google Analytics Tracking (optional)
# e.g, UA-1234567-89
ga_tracking: UA-5555555-55
ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default)
```

68
docs/customization.md
View File

@ -29,37 +29,77 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf
{: .no_toc }
```yaml
# Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark"
# Color scheme supports "light" (default) and "dark"
color_scheme: dark
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
## Specific visual customization
jtd.addEvent(toggleDarkMode, 'click', function(){
if (jtd.getTheme() === 'dark') {
jtd.setTheme('light');
toggleDarkMode.textContent = 'Preview dark color scheme';
} else {
jtd.setTheme('dark');
toggleDarkMode.textContent = 'Return to the light side';
}
});
</script>
To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.
## Custom schemes
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
### Define a custom scheme
You can add custom schemes.
If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name)
where you override theme variables to change colors, fonts, spacing, etc.
Available variables are listed in the [_variables.scss](https://github.com/pmarsceill/just-the-docs/tree/master/_sass/support/_variables.scss) file.
For example, to change the link color from the purple default to blue, include the following inside your scheme file:
#### Example
{: .no_toc }
```scss
// ...
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
$link-color: $blue-000;
//
// ...
```
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
Please use scheme files.
## Override styles
### Use a custom scheme
For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
```yaml
color_scheme: foo
```
### Switchable custom scheme
If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name)
with the following content:`
{% raw %}
---
---
{% include css/just-the-docs.scss.liquid color_scheme="foo" %}
{% endraw %}
This allows you to switch the scheme via the following javascript.
```js
jtd.setTheme('foo');
```
## Override and completely custom styles
For styles that aren't defined as variables, you may want to modify specific CSS classes.
Additionally, you may want to add completely custom CSS specific to your content.
To do this, put your styles in the file `_sass/custom/custom.scss`.
This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
For example, if you'd like to add your own styles for printing a page, you could add the following styles.

11
docs/navigation-structure.md
View File

@ -38,6 +38,13 @@ nav_order: 4
---
```
The specified `nav_order` parameters on a site should be all integers or all strings.
Pages without a `nav_order` parameter are ordered alphabetically by their `title`,
and appear after the explicitly-ordered pages at each level.
By default, all Capital letters are sorted before all lowercase letters;
adding `nav_sort: case_insensitive` in the configuration file ignores case
when sorting strings (but also sorts numbers lexicographically: `10` comes before `1`).
---
## Excluding pages
@ -190,9 +197,9 @@ This would create the following navigation structure:
---
## Auxiliary Navigation
## Auxiliary Links
To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file.
To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file.
#### Example
{: .no_toc }

108
docs/search.md
View File

@ -15,62 +15,90 @@ nav_order: 7
---
Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points:
Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates.
All search results are shown in an auto-complete style interface (there is no search results page).
By default, all generated HTML pages are indexed using the following data points:
- Page title
- Page content
- Page URL
## Set up search
### Generate search index
Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
```bash
$ bundle exec just-the-docs rake search:init
```
This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
```liquid
{% raw %}---
---
{
{% assign comma = false %}
{% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
"title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}",
"url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url }}"
}{% assign comma = true %}
{% endif %}{% endfor %}
}{% endraw %}
```
_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._
### Enable search in configuration
## Enable search in configuration
In your site's `_config.yml`, enable search:
```yaml
# Enable or disable the site search
# Supports true (default) or false
search_enabled: true
```
### Search granularity
Pages are split into sections that can be searched individually.
The sections are defined by the headings on the page.
Each section is displayed in a separate search result.
```yaml
# Split pages into sections that can be searched individually
# Supports 1 - 6, default: 2
search.heading_level: 2
```
### Search previews
A search result can contain previews that show where the search words are found in the specific section.
```yaml
# Maximum amount of previews per search result
# Default: 3
search.previews: 3
# Maximum amount of words to display before a matched word in the preview
# Default: 5
search.preview_words_before: 5
# Maximum amount of words to display after a matched word in the preview
# Default: 10
search.preview_words_after: 10
```
### Search tokenizer
The default is for hyphens to separate tokens in search terms:
`gem-based` is equivalent to `gem based`, matching either word.
To allow search for hyphenated words:
```yaml
# Set the search token separator
search_tokenizer_separator: /[\s/]+/
# Default: /[\s\-/]+/
# Example: enable support for hyphenated search words
search.tokenizer_separator: /[\s/]+/
```
### Display URL in search results
```yaml
# Display the relative url in search results
# Supports true (default) or false
search.rel_url: false
```
### Display search button
The search button displays in the bottom right corner of the screen and triggers the search input when clicked.
```yaml
# Enable or disable the search button that appears in the bottom right corner of every page
# Supports true or false (default)
search.button: true
```
## Hiding pages from search
Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page.
To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
#### Example
{: .no_toc }
@ -83,3 +111,17 @@ nav_exclude: true
search_exclude: true
---
```
## Generate search index when used as a gem
If you use Just the Docs as a remote theme, you do not need the following steps.
If you use the theme as a gem, you must initialize the search by running this `rake` command that comes with `just-the-docs`:
```bash
$ bundle exec just-the-docs rake search:init
```
This command creates the `assets/js/zzzz-search-data.json` file that Jekyll uses to create your search index.
Alternatively, you can create the file manually with [this content]({{ site.github.repository_url }}/blob/master/assets/js/zzzz-search-data.json).

5
docs/ui-components/code.md
View File

@ -22,9 +22,14 @@ Code can be rendered inline by wrapping it in single back ticks.
<div class="code-example" markdown="1">
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Heading with `<inline code snippet>` in it.
{: .no_toc }
</div>
```markdown
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Heading with `<inline code snippet>` in it.
```
---

1
docs/utilities/color.md
View File

@ -2,7 +2,6 @@
layout: default
title: Color
parent: Utilities
nav_order: 3
---
# Color Utilities

17
docs/utilities/layout.md
View File

@ -2,7 +2,6 @@
layout: default
title: Layout
parent: Utilities
nav_order: 2
---
# Layout Utilities
@ -52,6 +51,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
| `6` | 2rem | 32px |
| `7` | 2.5rem | 40px |
| `8` | 3rem | 48px |
| `auto` | auto | auto |
Use `mx-auto` to horizontally center elements.
#### Examples
{: .no_toc }
@ -66,6 +68,19 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree
{: .px-6 }
```
## Horizontal Alignment
| Classname | What it does |
|:------------------------|:---------------------------------|
| `.float-left` | `float: left` |
| `.float-right` | `float: right` |
| `.flex-justify-start` | `justify-content: flex-start` |
| `.flex-justify-end` | `justify-content: flex-end` |
| `.flex-justify-between` | `justify-content: space-between` |
| `.flex-justify-around` | `justify-content: space-around` |
_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
## Vertical Alignment
| Classname | What it does |

1
docs/utilities/responsive-modifiers.md
View File

@ -2,7 +2,6 @@
layout: default
title: Responsive Modifiers
parent: Utilities
nav_order: 1
---
# Responsive modifiers

11
docs/utilities/typography.md
View File

@ -2,7 +2,6 @@
layout: default
title: Typography
parent: Utilities
nav_order: 4
---
# Typography Utilities
@ -145,3 +144,13 @@ Default line height
Default line height
{: .fh-default }
```
## Text justification
By default text is justified left. Use these `text-` classes to override settings:
| Class | What it does |
|:---------------|:---------------------|
| `.text-left` | `text-align: left` |
| `.text-right` | `text-align: right` |
| `.text-center` | `text-align: center` |

3
index.md
View File

@ -4,6 +4,7 @@ title: Home
nav_order: 1
description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub Pages."
permalink: /
last_modified_date: 2020-04-27T17:54:08+0000
---
# Focus on writing good documentation
@ -68,7 +69,7 @@ If you're hosting your site on GitHub Pages, [set up GitHub Pages and Jekyll loc
## About the project
Just the Docs is &copy; 2017-2019 by [Patrick Marsceill](http://patrickmarsceill.com).
Just the Docs is &copy; 2017-{{ "now" | date: "%Y" }} by [Patrick Marsceill](http://patrickmarsceill.com).
### License

8
just-the-docs.gemspec
View File

@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "just-the-docs"
spec.version = "0.2.8"
spec.version = "0.3.0"
spec.authors = ["Patrick Marsceill"]
spec.email = ["patrick.marsceill@gmail.com"]
@ -12,9 +12,9 @@ Gem::Specification.new do |spec|
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) }
spec.executables << 'just-the-docs'
spec.add_runtime_dependency "bundler", "~> 2.1.4"
spec.add_runtime_dependency "jekyll", ">= 3.8.5", "< 4.1.0"
spec.add_development_dependency "bundler", "~> 2.1.4"
spec.add_runtime_dependency "jekyll", ">= 3.8.5"
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
spec.add_runtime_dependency "rake", ">= 12.3.1", "< 13.1.0"

63
lib/tasks/search.rake
View File

@ -3,23 +3,68 @@ namespace :search do
task :init do
puts 'Creating search data json file...'
mkdir_p 'assets/js'
touch 'assets/js/search-data.json'
content = %Q[{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}]
touch 'assets/js/zzzz-search-data.json'
puts 'Done.'
puts 'Generating content...'
File.open('assets/js/search-data.json', 'w') do |f|
File.open('assets/js/zzzz-search-data.json', 'w') do |f|
f.puts '---
permalink: /assets/js/search-data.json
---
{
{% assign comma = false %}
{% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
"title": "{{ page.title | replace: \'&amp;\', \'&\' }}",
"content": "\'+content+\'",
{%- assign i = 0 -%}
{% for page in site.html_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 | absolute_url }}",
"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 | absolute_url }}",
"relUrl": "{{ page.url }}"
}{% assign comma = true %}
{% endif %}{% endfor %}
}
{%- assign i = i | plus: 1 -%}
{%- endunless -%}
{%- endif -%}
{% endfor %}
}'
end
puts 'Done.'

663
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -1,15 +1,15 @@
{
"name": "just-the-docs",
"version": "0.2.8",
"version": "0.3.0",
"description": "A modern Jekyll theme for documentation",
"repository": "pmarsceill/just-the-docs",
"license": "MIT",
"bugs": "https://github.com/pmarsceill/just-the-docs/issues",
"devDependencies": {
"@primer/css": "^14.3.0",
"@primer/css": "^14.4.0",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-prettier": "^8.0.1",
"stylelint": "^13.6.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-primer": "^9.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-selector-no-utility": "^4.0.0"