Merge branch 'v0.2.7-release' into mathjax

This commit is contained in:
Patrick Marsceill 2019-09-09 16:30:59 -04:00 committed by GitHub
commit b44ebe6cb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 147 additions and 65 deletions

View File

@ -21,9 +21,15 @@ url: "https://pmarsceill.github.io" # the base hostname & protocol for your site
permalink: pretty
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
# Set a path/url to a logo that will be displayed instead of the title
#logo: "/assets/images/just-the-docs.png"
# Enable or disable the site search
search_enabled: true
# Set the search token separator for hyphenated-word search:
search_tokenizer_separator: /[\s/]+/
# Enable or disable heading anchors
heading_anchors: true

View File

@ -1 +1,5 @@
{{ site.title }}
{% if site.logo %}
<div class="site-logo"></div>
{% else %}
{{ site.title }}
{% endif %}

View File

@ -7,6 +7,12 @@ layout: table_wrappers
<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">
<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>
</symbol>
</svg>
<div class="page-wrap">
<div class="side-bar">
@ -60,7 +66,7 @@ layout: table_wrappers
{% 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 class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><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>" anchorClass="anchor-heading" %}
{% 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 %}
@ -73,7 +79,7 @@ layout: table_wrappers
{% 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>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
</li>
{% endif %}
{% endfor %}

View File

@ -116,26 +116,37 @@
.anchor-heading {
position: absolute;
right: -$sp-3;
right: -$sp-4;
width: $sp-5;
height: 100%;
padding-right: $sp-1;
padding-left: $sp-1;
overflow: visible;
fill: $link-color;
visibility: hidden;
@include mq(md) {
right: auto;
left: -$sp-5;
}
svg {
display: inline-block;
width: 100%;
height: 100%;
fill: $link-color;
visibility: hidden;
}
}
.anchor-heading:hover,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
h4:hover > .anchor-heading,
h5:hover > .anchor-heading,
h6:hover > .anchor-heading {
visibility: visible;
svg {
visibility: visible;
}
}
h1,

View File

@ -125,12 +125,12 @@
.site-header {
display: flex;
min-height: $header-height;
align-items: center;
@include mq(md) {
z-index: 101;
height: $header-height;
min-height: $header-height;
max-height: $header-height;
border-bottom: $border $border-color;
}
@ -142,10 +142,26 @@
display: flex;
height: 100%;
align-items: center;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
padding-top: $sp-3;
padding-bottom: $sp-3;
color: $body-heading-color;
@include fs-6;
@include mq(md) {
padding-top: $sp-2;
padding-bottom: $sp-2;
}
}
@if variable-exists(logo) {
.site-logo {
width: 100%;
height: 100%;
background-image: url($logo);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
}
.menu-button {

3
_sass/overrides.scss Normal file
View File

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

View File

@ -3,6 +3,10 @@
# only Main files contain this front matter, not partials.
---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
//
// Import external dependencies
//

View File

@ -3,6 +3,10 @@
# only Main files contain this front matter, not partials.
---
{% if site.logo %}
$logo: "{{ site.logo | absolute_url }}";
{% endif %}
//
// Import external dependencies
//
@ -42,3 +46,4 @@
@import "./tables";
@import "./code";
@import "./utilities/utilities";
@import "./overrides";

View File

@ -0,0 +1,23 @@
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]
}
addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
updateButtonText(toggleDarkMode)
} else {
cssFile.setAttribute('href', originalCssRef)
updateButtonText(toggleDarkMode)
}
})
})

View File

@ -52,8 +52,13 @@ function initSearch() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = 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 () {
this.ref('id');
this.field('title', { boost: 200 });

View File

@ -1,11 +1,12 @@
---
---
{
{% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
{% 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 }}"
}{% unless forloop.last %},{% endunless %}
}{% assign comma = true %}
{% endif %}{% endfor %}
}
}

View File

@ -22,12 +22,23 @@ Just the Docs has some specific configuration parameters that can be defined in
View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
## Search enabled
## Site logo
```yaml
# Set a path/url to a logo that will be displayed instead of the title
logo: "/assets/images/just-the-docs.png"
```
## Search
```yaml
# Enable or disable the site search
# Support true (default) or false
# Supports true (default) or false
search_enabled: true
# Enable support for hyphenated search words:
search_tokenizer_separator: /[\s/]+/
```
## Aux links
@ -35,18 +46,17 @@ search_enabled: true
```yaml
# Aux links for the upper right navigation
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
```
## Heading anchor links
```yaml
# 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.
# 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.
#
# Supprts true (default) or false/nil
# Supports true (default) or false/nil
heading_anchors: true
```
@ -65,20 +75,7 @@ color_scheme: "dark"
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script>
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');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

View File

@ -34,20 +34,7 @@ color_scheme: "dark"
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script>
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');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
## Specific visual customization
@ -69,3 +56,20 @@ $link-color: $blue-000;
```
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
## Override styles
To add your own CSS at the end of the cascade, edit `_sass/overrides.scss` to add in your own custom CSS. This will allow for all overrides to be kept in a single file, and allow for any upstream changes to still be allowed.
For example, if you'd like to add your own styles for printing a page, you could add the following styles.
#### Example
{: .no_toc }
```scss
// Print-only styles.
@media print {
.side-bar, .page-header { display: none; }
.main-content { max-width: auto; margin: 1em;}
}
```

View File

@ -67,7 +67,7 @@ Sometimes you will want to create a page with many children (a section). First,
|
|-- docs
| |-- ui-components
| | |-- ui-components.md (parent page)
| | |-- index.md (parent page)
| | |-- buttons.md
| | |-- code.md
| | |-- labels.md
@ -75,7 +75,7 @@ Sometimes you will want to create a page with many children (a section). First,
| | +-- typography.md
| |
| |-- utilities
| | |-- utilities.md (parent page)
| | |-- index.md (parent page)
| | |-- color.md
| | |-- layout.md
| | |-- responsive-modifiers.md
@ -88,9 +88,8 @@ Sometimes you will want to create a page with many children (a section). First,
+-- ..
```
On the parent pages, add 2 YAML front matter parameters:
On the parent pages, add this YAML front matter parameter:
- `has_children: true` (tells us that this is a parent page)
- `permalink:` set this to the site directory that contains the child pages
#### Example
{: .no_toc }
@ -101,7 +100,6 @@ layout: default
title: UI Components
nav_order: 2
has_children: true
permalink: /docs/ui-components
---
```
@ -140,7 +138,6 @@ title: UI Components
nav_order: 2
has_children: true
has_toc: false
permalink: /docs/ui-components
---
```

16
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "just-the-docs",
"version": "0.2.5",
"version": "0.2.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -177,11 +177,11 @@
"dev": true
},
"@primer/css": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/@primer/css/-/css-12.6.0.tgz",
"integrity": "sha512-GzQr/MPCbTlgvAd4bEXy4RA5cZvz7k/wkCzG7sOmjB9g9EtGnkzmLz6aS58EBRJsxfe6QU/iZ2/N/66/Bn5eZA==",
"version": "12.7.0",
"resolved": "https://registry.npmjs.org/@primer/css/-/css-12.7.0.tgz",
"integrity": "sha512-EVqfwX1jxKWQoV9IxxCJQG7HlyKefdkYTJdnDV43Rr1cyidUTkQN9W0uMuN+RD9cmAzip/40b2E+7gsvsFDmBA==",
"requires": {
"@primer/octicons": "9.1.1"
"@primer/octicons": "^9.1.1"
}
},
"@primer/octicons": {
@ -2776,9 +2776,9 @@
}
},
"mixin-deep": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
"integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
"dev": true,
"requires": {
"for-in": "^1.0.2",

View File

@ -11,7 +11,7 @@
"stylelint-selector-no-utility": "^4.0.0"
},
"dependencies": {
"@primer/css": "^12.6.0"
"@primer/css": "^12.7.0"
},
"scripts": {
"test": "stylelint '**/*.scss'"