Skip to content
Snippets Groups Projects
Unverified Commit f4bd41a2 authored by Patrick Marsceill's avatar Patrick Marsceill Committed by GitHub
Browse files

Merge branch 'v0.2.6-release' into dependabot/npm_and_yarn/stylelint-config-primer-7.0.1

parents 9682368e 2db3f973
No related branches found
No related tags found
No related merge requests found
//
// Main nav, breadcrumb, etc...
//
.site-title {
display: block;
flex: 1 1 auto;
color: $body-heading-color;
background-color: $sidebar-color;
@include mq(md) {
position: absolute;
top: 0;
right: 0;
z-index: 101;
height: 60px;
padding-top: $sp-4;
border-bottom: $border $border-color;
}
}
.navigation-list {
padding: 0;
margin-top: $sp-4;
margin-top: 0;
margin-bottom: 0;
list-style: none;
@include mq(md) {
margin-top: 0;
}
}
.navigation-list-child-list {
......@@ -90,8 +68,7 @@
// Small screen nav
.main-nav,
.aux-nav {
.main-nav {
display: none;
&.nav-open {
......@@ -102,13 +79,8 @@
}
}
.navigation-list-toggle {
position: absolute;
right: $sp-4;
@include mq(md) {
display: none !important;
}
.aux-nav {
align-self: center;
}
// Breadcrumb nav
......
......@@ -5,60 +5,46 @@
.search {
position: relative;
z-index: 99;
display: none;
flex-grow: 1;
padding: $sp-2;
height: 100%;
margin-bottom: $sp-3;
background-color: $white;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
@include mq(md) {
display: block;
padding-top: $sp-1;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin-bottom: 0;
background-color: transparent;
box-shadow: none;
}
&.nav-open {
display: block;
}
}
.search-results-wrap {
display: none;
&.active {
position: absolute;
top: $sp-1;
z-index: 100;
display: block;
width: 300px;
margin-top: $gutter-spacing;
background: lighten($body-background-color, 1%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
}
}
.search-input-wrap {
display: flex;
background-color: $body-background-color;
height: 100%;
padding: $sp-2;
background-color: $search-background-color;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
@include mq(md) {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-color: $body-background-color;
border-radius: 0;
box-shadow: none;
}
}
.search-input {
align-self: center;
width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
background-color: $body-background-color;
background-color: $search-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
order: 2;
@include fs-4;
&:focus {
outline: 0;
......@@ -69,14 +55,9 @@
}
}
@include fs-5;
@include mq(sm) {
@include fs-3;
}
@include mq(md) {
@include fs-2;
background-color: $body-background-color;
@include fs-3;
}
}
......@@ -87,12 +68,34 @@
order: 1;
}
.search-results-wrap {
position: absolute;
z-index: 100;
display: none;
width: 100%;
background: $search-background-color;
border-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) {
width: $search-results-width;
}
}
.search-results-list {
padding-left: 0;
margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
@include fs-3;
@include fs-4;
@include mq(md) {
@include fs-3;
}
}
.search-results-list-item {
......@@ -100,15 +103,65 @@
margin: 0;
}
.search-results-link {
.search-result {
display: block;
padding-top: $sp-1;
padding-right: $sp-3;
padding-bottom: $sp-1;
padding-left: $sp-3;
&:hover {
color: $body-heading-color;
background-color: darken($body-background-color, 2%);
&:hover,
&.active {
background-color: $sidebar-color;
}
@include mq(md) {
padding-right: $sp-4;
padding-left: $sp-4;
}
}
.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;
vertical-align: top;
}
}
.search-result-rel-url {
display: block;
overflow: hidden;
color: $search-result-preview-color;
text-overflow: ellipsis;
white-space: nowrap;
@include fs-1;
}
.search-result-preview {
display: block;
padding-top: $sp-2;
padding-bottom: $sp-2;
padding-left: $sp-4;
color: $search-result-preview-color;
border-left: $border;
border-left-color: $border-color;
@include fs-2;
@include mq(sm) {
display: inline-block;
width: 60%;
vertical-align: top;
}
}
.search-result-highlight {
font-weight: bold;
color: $link-color;
}
......@@ -6,6 +6,7 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetic
$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;
//
......@@ -52,27 +53,18 @@ $red-300: #dd2e2e !default;
$body-background-color: $white !default;
$sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$search-result-preview-color: $grey-dk-000 !default;
$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
sm: 500px,
md: 740px,
lg: 1120px,
xl: 1400px
) !default;
//
// Spacing
//
......@@ -118,13 +110,20 @@ $border-color: $grey-lt-100 !default;
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 232px !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: 500px !default;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
sm: 500px,
md: 740px,
lg: 800px,
xl: 1316px
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px
) !default;
......@@ -3,18 +3,20 @@
//
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
table {
.table-wrapper {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: $sp-5;
overflow-x: auto;
border-collapse: separate;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
}
@include mq(sm) {
display: table;
}
table {
display: table;
min-width: 100%;
border-collapse: separate;
}
th,
......@@ -25,7 +27,7 @@ td {
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
background-color: lighten($body-background-color, 2%);
background-color: $table-background-color;
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
......@@ -34,38 +36,16 @@ td {
}
}
thead,
tbody:first-child {
tr {
&:first-of-type {
th,
td {
&:first-of-type {
border-top-left-radius: $border-radius;
}
&:last-of-type {
border-top-right-radius: $border-radius;
}
}
}
}
}
tbody {
tr {
&:last-of-type {
th,
td {
border-bottom: 0;
}
&:first-of-type {
border-bottom-left-radius: $border-radius;
}
&:last-of-type {
border-bottom-right-radius: $border-radius;
}
td {
padding-bottom: $sp-3;
}
}
}
......@@ -73,6 +53,6 @@ tbody {
thead {
th {
border-bottom: 1px solid $border-color;
border-bottom: $border $border-color;
}
}
---
---
(function (jtd, undefined) {
// Event handling
function addEvent(el, type, handler) {
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
jtd.addEvent = function(el, type, handler) {
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
}
jtd.removeEvent = function(el, type, handler) {
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
}
function removeEvent(el, type, handler) {
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
jtd.onReady = function(ready) {
// in case the document is already rendered
if (document.readyState!='loading') ready();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') ready();
});
}
// Show/hide mobile menu
function toggleNav(){
const nav = document.querySelector('.js-main-nav');
const auxNav = document.querySelector('.js-aux-nav');
function initNav() {
const mainNav = document.querySelector('.js-main-nav');
const pageHeader = document.querySelector('.js-page-header');
const navTrigger = document.querySelector('.js-main-nav-trigger');
const search = document.querySelector('.js-search');
addEvent(navTrigger, 'click', function(){
jtd.addEvent(navTrigger, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
nav.classList.toggle('nav-open');
auxNav.classList.toggle('nav-open');
mainNav.classList.toggle('nav-open');
pageHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
search.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
textToggle = text;
......@@ -32,119 +45,230 @@ function toggleNav(){
// Site search
function initSearch() {
var index = lunr(function () {
this.ref('id');
this.field('title', { boost: 20 });
this.field('content', { boost: 10 });
this.field('url');
});
// Get the generated search_data.json file so lunr.js can search it locally.
sc = document.getElementsByTagName("script");
source = '';
for(idx = 0; idx < sc.length; idx++)
{
s = sc.item(idx);
if(s.src && s.src.match(/just-the-docs\.js$/))
{ source = s.src; }
}
jsPath = source.replace('just-the-docs.js', '');
jsonPath = jsPath + 'search-data.json';
var request = new XMLHttpRequest();
request.open('GET', jsonPath, true);
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
request.onload = function() {
request.onload = function(){
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
var keys = Object.keys(data);
for(var i in data) {
index.add({
id: data[i].id,
title: data[i].title,
content: data[i].content,
url: data[i].url
});
}
searchResults(data);
lunr.tokenizer.separator = /[\s\-/]+/
var index = lunr(function () {
this.ref('id');
this.field('title', { boost: 200 });
this.field('content', { boost: 2 });
this.field('url');
this.metadataWhitelist = ['position']
for (var i in data) {
this.add({
id: i,
title: data[i].title,
content: data[i].content,
url: data[i].url
});
}
});
searchResults(index, data);
} else {
// We reached our target server, but it returned an error
console.log('Error loading ajax request. Request status:' + request.status);
}
};
request.onerror = function() {
request.onerror = function(){
// There was a connection error of some sort
console.log('There was a connection error');
};
request.send();
function searchResults(dataStore) {
function searchResults(index, data) {
var index = index;
var docs = data;
var searchInput = document.querySelector('.js-search-input');
var searchResults = document.querySelector('.js-search-results');
var store = dataStore;
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
}
addEvent(searchInput, 'keyup', function(e){
var query = this.value;
searchResults.innerHTML = '';
searchResults.classList.remove('active');
if (query === '') {
hideResults();
} else {
var results = index.search(query);
if (results.length > 0) {
searchResults.classList.add('active');
var resultsList = document.createElement('ul');
searchResults.appendChild(resultsList);
for (var i in results) {
var resultsListItem = document.createElement('li');
var resultsLink = document.createElement('a');
var resultsUrlDesc = document.createElement('span');
var resultsUrl = store[results[i].ref].url;
var resultsRelUrl = store[results[i].ref].relUrl;
var resultsTitle = store[results[i].ref].title;
resultsLink.setAttribute('href', resultsUrl);
resultsLink.innerText = resultsTitle;
resultsUrlDesc.innerText = resultsRelUrl;
resultsList.classList.add('search-results-list');
resultsListItem.classList.add('search-results-list-item');
resultsLink.classList.add('search-results-link');
resultsUrlDesc.classList.add('fs-2','text-grey-dk-000','d-block');
resultsList.appendChild(resultsListItem);
resultsListItem.appendChild(resultsLink);
resultsLink.appendChild(resultsUrlDesc);
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;
}
});
// When esc key is pressed, hide the results and clear the field
if (e.keyCode == 27) {
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;
}
hideResults();
var input = this.value;
if (input === '') {
return;
}
var results = index.query(function (query) {
var tokens = lunr.tokenizer(input)
query.term(tokens, {
boost: 10
});
query.term(tokens, {
wildcard: lunr.Query.wildcard.TRAILING
});
});
if (results.length > 0) {
searchResults.classList.add('active');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
for (var i in results) {
var result = results[i];
var doc = docs[result.ref];
var resultsListItem = document.createElement('li');
resultsListItem.classList.add('search-results-list-item');
resultsList.appendChild(resultsListItem);
var resultLink = document.createElement('a');
resultLink.classList.add('search-result');
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
var resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultTitle.innerText = doc.title;
resultLink.appendChild(resultTitle);
var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl;
resultTitle.appendChild(resultRelUrl);
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;
}
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;
}
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);
}
}
}
}
});
addEvent(searchInput, 'blur', function(){
jtd.addEvent(searchInput, 'blur', function(){
setTimeout(function(){ hideResults() }, 300);
});
}
......@@ -155,22 +279,16 @@ function pageFocus() {
mainContent.focus();
}
// Document ready
function ready(){
toggleNav();
jtd.onReady(function(){
initNav();
pageFocus();
if (typeof lunr !== 'undefined') {
initSearch();
}
}
// in case the document is already rendered
if (document.readyState!='loading') ready();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') ready();
});
})(window.jtd = window.jtd || {});
{% include js/custom.js %}
......@@ -2,9 +2,8 @@
---
{
{% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
"id": "{{ forloop.index0 }}",
"title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
"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 %}
......
This diff is collapsed.
......@@ -26,6 +26,7 @@ View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/
```yaml
# Enable or disable the site search
# Support true (default) or false
search_enabled: true
```
......@@ -38,6 +39,24 @@ aux_links:
- "//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.
#
# Supprts true (default) or false/nil
heading_anchors: true
```
## Footer content
```yaml
# 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>"
```
## Color scheme
```yaml
......@@ -47,16 +66,16 @@ 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')
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');
addEvent(toggleDarkMode, 'click', function(){
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef)
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
......
......@@ -35,16 +35,16 @@ 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')
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');
addEvent(toggleDarkMode, 'click', function(){
jtd.addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
cssFile.setAttribute('href', darkModeCssRef);
} else {
cssFile.setAttribute('href', originalCssRef)
cssFile.setAttribute('href', originalCssRef);
}
})
</script>
......@@ -69,5 +69,3 @@ $link-color: $blue-000;
```
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
---
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment