diff --git a/_config.yml b/_config.yml
index d34af7c6f7b3a116f830318e8b84f1bca5cc182e..a09067082833b73ec56343a3d45170ce95c9c2af 100644
--- a/_config.yml
+++ b/_config.yml
@@ -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
diff --git a/_includes/title.html b/_includes/title.html
index f6d566937aa74477f4d6ea6409fce0e039ce3d33..8bd3fa83dada15bedce25228bb166f451c97cd79 100644
--- a/_includes/title.html
+++ b/_includes/title.html
@@ -1 +1,5 @@
-{{ site.title }}
\ No newline at end of file
+{% if site.logo %}
+ <div class="site-logo"></div>
+{% else %}
+ {{ site.title }}
+{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index d414234e070616e4c6182ef30307c91a3b70bc36..b1d3c72435399b13422a79b7a36b51258cb5e8cf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -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 %}
diff --git a/_sass/content.scss b/_sass/content.scss
index 0ed47fc7e8fe4000290c4e48ea012610fa8f2247..2940286ff1387a1c32257fedcdfb514039942b0a 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -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,
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 4c214ea44e75562c109a45cebb00c38b680c0ce8..6644dc3e8b21c01e361ad6e609212104011f201b 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -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 {
diff --git a/_sass/overrides.scss b/_sass/overrides.scss
new file mode 100644
index 0000000000000000000000000000000000000000..21e9527d20b4b72ccec57bde40b1217a645420b8
--- /dev/null
+++ b/_sass/overrides.scss
@@ -0,0 +1,3 @@
+//
+// Custom overrides from a user.
+//
diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss
index 8b77da6a86422fb0fea410952175c34f65525478..c524e81286d4c220a73882b5f4dd6978714d2d8e 100644
--- a/assets/css/dark-mode-preview.scss
+++ b/assets/css/dark-mode-preview.scss
@@ -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
//
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index 6a2eefa5ca319368e85410163b74139dacb98eb0..199ad89ca35b896e91c96c8db41639ef28553355 100644
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -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";
diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..addfb27ccf9c02b52934d24d2f6ea8a8180eda53
--- /dev/null
+++ b/assets/js/dark-mode-preview.js
@@ -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)
+ }
+ })
+})
\ No newline at end of file
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index aadbf82670d9386ccf8315378d4be7265bb87ff6..2f6cea0eb55fc0b64dd21b1e77098c34b6c13852 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -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 });
diff --git a/assets/js/search-data.json b/assets/js/search-data.json
index 6f728cda154c8940884e25104dcecdd3955e6fd2..0532f7c6b72d2c25a3767ff2c119bb5841d38b75 100644
--- a/assets/js/search-data.json
+++ b/assets/js/search-data.json
@@ -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: '&', '&' }}",
"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 %}
-}
+}
\ No newline at end of file
diff --git a/docs/configuration.md b/docs/configuration.md
index 14422fdfa64bcc58eec9f6ee8cbce802d5a4104e..eb43a086f9572ed1fb249ab1fc483eeb0929dba3 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -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.
diff --git a/docs/customization.md b/docs/customization.md
index eccb4bc2791e3e1867d9aa06dbbcda139e66f9db..8411b6914c2e9afd88f4db74a71069e4ac2a0a99 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -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;}
+}
+```
diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md
index 98107cfcc3807de00ccbbcd73a8566019f8c8879..a4fef75ef4a46d8e6bd5684652febb99c90f3e74 100644
--- a/docs/navigation-structure.md
+++ b/docs/navigation-structure.md
@@ -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
---
```
diff --git a/package-lock.json b/package-lock.json
index 1d6b72ad00318834d2b4d6bc6a00cd99e1cfc323..d240d07674d4b2012917dec32f69264aca93172e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 0c5a8ea2a2a2253a804d5d69b300df107250465f..e4deedf5ab92e8e15fb9dccc9620092675b55edb 100644
--- a/package.json
+++ b/package.json
@@ -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'"