mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-16 06:13:32 -06:00
Compare commits
71 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e1d226f192 | ||
|
|
2de780bb4b | ||
|
60c82cb518 | ||
|
|
9a4ea76957 | ||
|
|
793ea356c3 | ||
|
|
71ba32e131 | ||
|
37d54f5bf2 | ||
|
|
ce947ae543 | ||
|
|
2218e6e565 | ||
|
|
ae5bcfe361 | ||
|
|
ff49d02f83 | ||
|
|
b3fb5ebd87 | ||
|
|
79a8cda356 | ||
|
ae3f570370 | ||
|
|
f17700afe3 | ||
|
|
269271a8d7 | ||
|
|
09cc61c25f | ||
|
|
06c8acc06b | ||
|
|
a3ae6ad74e | ||
|
|
f264034999 | ||
|
2b0ff701fa | ||
|
|
4a9b4fd5b1 | ||
|
|
d5d1ddbd92 | ||
|
|
39828f0775 | ||
|
|
954e8941bb | ||
|
|
20970ca9e6 | ||
|
|
eaf1247911 | ||
|
|
eb0a6c328f | ||
|
|
ed33ab18ac | ||
|
|
555dfae410 | ||
|
|
309b238400 | ||
|
2caefa4e9e | ||
|
|
e4dd35083a | ||
|
|
80bbdb7be8 | ||
|
|
c5a9be9298 | ||
|
|
5b9cde1dc4 | ||
|
|
1064d50f8c | ||
|
|
b35b697dc2 | ||
|
|
f6003ec47d | ||
|
|
dc47cec4aa | ||
|
|
6b213c2da0 | ||
|
860207d13c | ||
|
|
21990474d0 | ||
|
|
cd55ce0089 | ||
|
|
c20129c32c | ||
|
|
dac6e45451 | ||
|
|
3ecef3be5c | ||
|
|
74b468058a | ||
|
|
960d347f68 | ||
|
|
3573db5d34 | ||
|
|
dc29db592f | ||
|
|
805eadb4bb | ||
|
|
f0bb38e1b8 | ||
|
|
b52f66a2ee | ||
|
|
100b7277b3 | ||
|
|
28bafabd72 | ||
|
|
559e210503 | ||
|
|
4814fbce64 | ||
|
|
2568b05fe7 | ||
|
|
7c24af0745 | ||
|
|
410085dd28 | ||
|
|
bfce0f57d3 | ||
|
|
379a976387 | ||
|
|
6540493df2 | ||
|
|
6ecde7eeec | ||
|
|
8f6f4b761a | ||
|
|
fa40528acd | ||
|
|
ee4759c772 | ||
|
|
3acf927eb7 | ||
|
|
b7db5e73a3 | ||
|
|
9c70c7f081 |
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"ignoreFiles" : [
|
||||
"assets/css/just-the-docs.scss",
|
||||
"assets/css/dark-mode-preview.scss",
|
||||
"_sass/vendor/**/*.scss"
|
||||
],
|
||||
"extends": [
|
||||
|
||||
@@ -6,6 +6,7 @@ env:
|
||||
|
||||
install:
|
||||
- npm install
|
||||
- gem install bundler --version '>=1.17.1'
|
||||
- bundle install
|
||||
|
||||
script:
|
||||
|
||||
11
404.html
Normal file
11
404.html
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: default
|
||||
title: Page not found
|
||||
permalink: /404
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
---
|
||||
|
||||
<h1>Page not found</h1>
|
||||
|
||||
<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled %}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>
|
||||
@@ -4,12 +4,11 @@
|
||||
<br><br>
|
||||
<p align="center">
|
||||
<h1 align="center">Just the Docs</h1>
|
||||
<p align="center">A modern, high customizable, responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub pages with few dependencies.</p>
|
||||
<p align="center"><strong><a href="https://pmarsceill.github.io/just-the-docs">See it in action!</a></strong></p>
|
||||
<p align="center">A modern, high customizable, responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
|
||||
<p align="center"><strong><a href="https://pmarsceill.github.io/just-the-docs/">See it in action!</a></strong></p>
|
||||
<br><br><br>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -19,7 +19,7 @@ baseurl: "/just-the-docs/" # the subpath of your site, e.g. /blog
|
||||
# url: "" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
|
||||
permalink: pretty
|
||||
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
|
||||
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
|
||||
|
||||
# Enable or disable the site search
|
||||
search_enabled: true
|
||||
@@ -28,3 +28,6 @@ search_enabled: true
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: nil
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
{% if page.description %}
|
||||
<meta name="Description" content="{{ page.description }}">
|
||||
{% endif %}
|
||||
|
||||
<title>{{ page.title }} - {{ site.title }}</title>
|
||||
<link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">
|
||||
|
||||
@@ -1,24 +1,44 @@
|
||||
<nav>
|
||||
<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 %}
|
||||
<li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
|
||||
{% if node.parent == nil or node.has_children == true %}
|
||||
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
|
||||
{% if (node.has_children == true and node.parent == page.parent) %}
|
||||
{% 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 | sort:"nav_order" %}
|
||||
<ul class="navigation-list-child-list ">
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == node.parent and child.title != node.title %}
|
||||
<li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
|
||||
{% if child.parent == node.title %}
|
||||
<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 | sort:"nav_order" %}
|
||||
<ul class="navigation-list-child-list">
|
||||
{% for grand_child in grand_children_list %}
|
||||
{% if grand_child.parent == child.title %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
|
||||
<html lang="en-us">
|
||||
{% include head.html %}
|
||||
<body>
|
||||
|
||||
<div class="page-wrap">
|
||||
<div class="side-bar">
|
||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
|
||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
|
||||
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
|
||||
<div class="navigation main-nav js-main-nav">
|
||||
{% include nav.html %}
|
||||
@@ -20,7 +21,7 @@
|
||||
{% if site.search_enabled != nil %}
|
||||
<div class="search js-search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" class="js-search-input search-input" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
||||
<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>
|
||||
@@ -35,21 +36,26 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="main-content js-main-content" tabindex="0">
|
||||
{% unless page.url == "/" %}
|
||||
{% if page.parent != nil and page.parent != page.title %}
|
||||
{% if page.parent %}
|
||||
<nav class="breadcrumb-nav">
|
||||
<ol class="breadcrumb-nav-list">
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
|
||||
{% 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 class="page-content">
|
||||
<div id="main-content" class="page-content" role="main">
|
||||
{{ content }}
|
||||
|
||||
{% if page.has_children == true %}
|
||||
{% 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" %}
|
||||
@@ -67,4 +73,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
_layouts/page.html
Normal file
5
_layouts/page.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -7,6 +7,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
html {
|
||||
@include fs-4;
|
||||
}
|
||||
@@ -16,6 +21,7 @@ body {
|
||||
font-size: inherit;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
p,
|
||||
@@ -64,7 +70,7 @@ a {
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
|
||||
background-image: linear-gradient($border-color 0%, $border-color 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
background-size: 1px 1px;
|
||||
@@ -99,6 +105,6 @@ hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
background-color: $border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $purple-200;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $base-button-color;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $purple-300;
|
||||
color: darken($link-color, 2%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -46,13 +46,13 @@
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: #f4f4f4;
|
||||
background-color: darken($base-button-color, 1%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: #ededed;
|
||||
background-color: darken($base-button-color, 3%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: $blue-100;
|
||||
color: $link-color;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $grey-dk-100;
|
||||
color: darken($link-color, 4%);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
@@ -101,6 +101,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-color($white, $btn-primary-color);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
@@ -6,15 +6,16 @@
|
||||
code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.highlight {
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
background-color: $grey-lt-000;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: $code-background-color;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
@@ -104,7 +105,7 @@ code {
|
||||
.code-example {
|
||||
padding: $sp-3;
|
||||
margin-bottom: $sp-3;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
|
||||
14
_sass/color_schemes/dark.scss
Normal file
14
_sass/color_schemes/dark.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
$body-background-color: $grey-dk-300;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
$body-text-color: $grey-lt-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
|
||||
$link-color: $blue-000;
|
||||
$btn-primary-color: $blue-200;
|
||||
$base-button-color: $grey-dk-250;
|
||||
|
||||
$code-background-color: $grey-dk-250;
|
||||
@@ -1,9 +1,17 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||
|
||||
.page-content {
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
// $grey-dk-000: #959396;
|
||||
// $grey-dk-100: #5c5962;
|
||||
// $grey-dk-200: #44434d;
|
||||
// $grey-dk-250: #302d36 !default;
|
||||
// $grey-dk-300: #27262b;
|
||||
//
|
||||
// $grey-lt-000: #f5f6fa;
|
||||
@@ -39,9 +40,16 @@
|
||||
// $green-200: #009c7b;
|
||||
// $green-300: #026e57;
|
||||
//
|
||||
// $body-text-color: $grey-dk-100;
|
||||
// $body-heading-color: $grey-dk-300;
|
||||
// $link-color: $purple-000;
|
||||
// $body-background-color: $white !default;
|
||||
// $sidebar-color: $grey-lt-000 !default;
|
||||
// $code-background-color: $grey-lt-000 !default;
|
||||
|
||||
// $body-text-color: $grey-dk-100 !default;
|
||||
// $body-heading-color: $grey-dk-300 !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
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
flex-wrap: wrap;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-wrap: nowrap;
|
||||
@@ -74,11 +74,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.js-main-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $white;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@@ -138,6 +142,6 @@ body {
|
||||
position: static;
|
||||
align-self: flex-end;
|
||||
justify-self: end;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
.site-title {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
background-color: $grey-lt-000;
|
||||
color: $body-heading-color;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
@@ -34,7 +35,7 @@
|
||||
list-style: none;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $grey-dk-100;
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@@ -44,13 +45,13 @@
|
||||
position: absolute;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: $grey-dk-000;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $grey-dk-100;
|
||||
color: $body-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -63,6 +64,16 @@
|
||||
@include mq(md) {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.navigation-list-child-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-link {
|
||||
@@ -72,7 +83,7 @@
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $grey-dk-200;
|
||||
color: $body-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -101,6 +112,11 @@
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
.breadcrumb-nav {
|
||||
@include mq(md) {
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
padding-left: 0;
|
||||
|
||||
@@ -39,20 +39,21 @@
|
||||
display: block;
|
||||
width: 300px;
|
||||
margin-top: $gutter-spacing;
|
||||
background: $white;
|
||||
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: $white;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
background-color: $body-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
@@ -64,7 +65,7 @@
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
fill: $purple-000;
|
||||
fill: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,6 +108,7 @@
|
||||
padding-left: $sp-3;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-lt-000;
|
||||
color: $body-heading-color;
|
||||
background-color: darken($body-background-color, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ $white: #fff !default;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-250: #302d36 !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
@@ -49,9 +50,16 @@ $red-100: #f96e65 !default;
|
||||
$red-200: #e94c4c !default;
|
||||
$red-300: #dd2e2e !default;
|
||||
|
||||
$body-background-color: $white !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !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
|
||||
|
||||
@@ -25,7 +25,8 @@ td {
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
border-bottom: $border $grey-lt-000;
|
||||
background-color: lighten($body-background-color, 2%);
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
@@ -16,6 +16,10 @@
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-250 {
|
||||
color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
@@ -130,6 +134,10 @@
|
||||
background-color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-250 {
|
||||
background-color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-300 {
|
||||
background-color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
41
assets/css/dark-mode-preview.scss
Normal file
41
assets/css/dark-mode-preview.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
# this ensures Jekyll reads the file to be transformed into CSS later
|
||||
# only Main files contain this front matter, not partials.
|
||||
---
|
||||
|
||||
//
|
||||
// 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";
|
||||
@@ -4,20 +4,25 @@
|
||||
---
|
||||
|
||||
//
|
||||
// Import dependancies
|
||||
// Import external dependencies
|
||||
//
|
||||
|
||||
@import "./vendor/normalize.scss/normalize.scss";
|
||||
|
||||
//
|
||||
// Import Just the docs scss
|
||||
// Import Just the Docs scss
|
||||
//
|
||||
|
||||
// Support
|
||||
@import "./support/support";
|
||||
|
||||
// Custom overrides
|
||||
@import "./custom/custom";
|
||||
//
|
||||
// Import custom color scheme scss
|
||||
//
|
||||
|
||||
{% if site.color_scheme == "dark" %}
|
||||
@import "./color_schemes/dark.scss";
|
||||
{% endif %}
|
||||
|
||||
// Modules
|
||||
@import "./base";
|
||||
@@ -31,3 +36,8 @@
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
|
||||
//
|
||||
// Import custom overrides
|
||||
//
|
||||
@import "./custom/custom";
|
||||
|
||||
@@ -150,11 +150,18 @@ function initSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
function pageFocus() {
|
||||
var mainContent = document.querySelector('.js-main-content');
|
||||
mainContent.focus();
|
||||
console.log(mainContent)
|
||||
}
|
||||
|
||||
|
||||
// Document ready
|
||||
|
||||
function ready(){
|
||||
toggleNav();
|
||||
pageFocus();
|
||||
if (typeof lunr !== 'undefined') {
|
||||
initSearch();
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
---
|
||||
{
|
||||
{% for page in site.html_pages %}"{{ forloop.index0 }}": {
|
||||
{% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
|
||||
"id": "{{ forloop.index0 }}",
|
||||
"title": "{{ page.title | xml_escape }}",
|
||||
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\', ' ' }}",
|
||||
"url": "{{ page.url | absolute_url | xml_escape }}",
|
||||
"relUrl": "{{ page.url | xml_escape }}"
|
||||
}{% if forloop.last %}{% else %},
|
||||
"title": "{{ page.title | replace: '&', '&' }}",
|
||||
"content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
|
||||
"url": "{{ page.url | absolute_url }}",
|
||||
"relUrl": "{{ page.url }}"
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% endif %}{% endfor %}
|
||||
}
|
||||
|
||||
@@ -6,20 +6,45 @@ nav_order: 2
|
||||
|
||||
# Configuration
|
||||
|
||||
Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `config.yml` file.
|
||||
Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's `_config.yml` file.
|
||||
|
||||
## Search enabled
|
||||
|
||||
```yml
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
search_enabled: true
|
||||
```
|
||||
|
||||
## Aux links
|
||||
|
||||
```yml
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
## Color scheme
|
||||
|
||||
```yaml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
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')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
|
||||
|
||||
@@ -15,11 +15,48 @@ nav_order: 6
|
||||
|
||||
---
|
||||
|
||||
## Visual customization
|
||||
## Color schemes
|
||||
{: .d-inline-block }
|
||||
|
||||
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 out it’s line and change it’s value.
|
||||
New
|
||||
{: .label .label-green }
|
||||
|
||||
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 `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
|
||||
Just the Docs supports two color schemes: light (default), and dark.
|
||||
|
||||
To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
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')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
## Specific visual customization
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```scss
|
||||
// ...
|
||||
@@ -31,14 +68,6 @@ $link-color: $blue-000;
|
||||
// ...
|
||||
```
|
||||
|
||||
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
|
||||
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
|
||||
|
||||
---
|
||||
|
||||
## Themes
|
||||
{: .d-inline-block :}
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow :}
|
||||
|
||||
Hard at work on a dark theme, and more.
|
||||
|
||||
@@ -17,15 +17,18 @@ nav_order: 5
|
||||
|
||||
## Main navigation
|
||||
|
||||
The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children).
|
||||
The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren).
|
||||
|
||||
### Top level pages
|
||||
By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)).
|
||||
|
||||
By default, all pages will appear as top level pages in the main nav.
|
||||
---
|
||||
|
||||
### Ordering pages
|
||||
## Ordering pages
|
||||
|
||||
To specify a page order, use the `nav_order` variable in your pages' YAML front matter.
|
||||
To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
@@ -35,9 +38,28 @@ nav_order: 4
|
||||
---
|
||||
```
|
||||
|
||||
### Pages with children
|
||||
---
|
||||
|
||||
Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like:
|
||||
## Excluding pages
|
||||
|
||||
For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: 404
|
||||
nav_exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pages with children
|
||||
|
||||
Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like:
|
||||
|
||||
```
|
||||
+-- ..
|
||||
@@ -66,51 +88,130 @@ Sometimes you will want to create a page with many children (a section). To acco
|
||||
+-- ..
|
||||
```
|
||||
|
||||
On the parent pages, add 3 YAML front matter variables:
|
||||
- `has_children: true` (tells us that this a parent page)
|
||||
- `parent: ` set this to the title of the parent page (in this case, it's this page's title)
|
||||
- `permalink: ` set this to the directory that the contains the pages
|
||||
On the parent pages, add 2 YAML front matter parameters:
|
||||
- `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 }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
parent: UI Components
|
||||
permalink: /ui-components
|
||||
permalink: /docs/ui-components
|
||||
---
|
||||
```
|
||||
|
||||
Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav.
|
||||
Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav.
|
||||
|
||||
### Child pages
|
||||
{: .text-gamma }
|
||||
|
||||
On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
```
|
||||
|
||||
The Buttons page appears a child of UI Components and appears second in the UI Components section.
|
||||
The Buttons page appears as a child of UI Components and appears second in the UI Components section.
|
||||
|
||||
### Auto-generating Table of Contents
|
||||
|
||||
By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
has_toc: false
|
||||
permalink: /docs/ui-components
|
||||
---
|
||||
```
|
||||
|
||||
### Children with children
|
||||
{: .text-gamma }
|
||||
|
||||
Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages.
|
||||
|
||||
1. Add the `has_children` attribute to the child
|
||||
1. Add the `parent` and `grand_parent` attribute to the grandchild
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
---
|
||||
```
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Buttons Child Page
|
||||
parent: Buttons
|
||||
grand_parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
```
|
||||
|
||||
This would create the following navigation structure:
|
||||
|
||||
```
|
||||
+-- ..
|
||||
|
|
||||
|-- UI Components
|
||||
| |-- ..
|
||||
| |
|
||||
| |-- Buttons
|
||||
| | |-- Button Child Page
|
||||
| |
|
||||
| |-- ..
|
||||
|
|
||||
+-- ..
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Breadcrumbs
|
||||
## Auxiliary Navigation
|
||||
|
||||
Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages.
|
||||
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.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## In-page navigation with Table of Contents
|
||||
|
||||
To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in markdown. This will automatically generate an ordered list of anchor links to various sections of page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, to skip a particular heading use the `{: .no_toc }` CSS class.
|
||||
To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class.
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
@@ -5,8 +5,17 @@ nav_order: 7
|
||||
---
|
||||
|
||||
# Search
|
||||
{: .no_toc }
|
||||
|
||||
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:
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
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
|
||||
@@ -14,41 +23,54 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte
|
||||
|
||||
## Set up search
|
||||
|
||||
### 1. Generate search index
|
||||
### Generate search index
|
||||
|
||||
Before you can use search, you must initialize the feature by running this
|
||||
rake command that comes with the `just-the-docs`
|
||||
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/` of your Jekyll site with this content:
|
||||
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:
|
||||
|
||||
```{% raw %}
|
||||
---
|
||||
```liquid
|
||||
{% raw %}---
|
||||
---
|
||||
{
|
||||
{% for page in site.html_pages %}"{{ forloop.index0 }}": {
|
||||
{% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
|
||||
"id": "{{ forloop.index0 }}",
|
||||
"title": "{{ page.title | xml_escape }}",
|
||||
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}",
|
||||
"url": "{{ page.url | absolute_url | xml_escape }}",
|
||||
"relUrl": "{{ page.url | xml_escape }}"
|
||||
}{% if forloop.last %}{% else %},
|
||||
"title": "{{ page.title | replace: '&', '&' }}",
|
||||
"content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
|
||||
"url": "{{ page.url | absolute_url }}",
|
||||
"relUrl": "{{ page.url }}"
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% 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)._
|
||||
|
||||
### 2. Enable search in configuration
|
||||
### Enable search in configuration
|
||||
|
||||
In your site's `_config.yml` enable search:
|
||||
In your site's `_config.yml`, enable search:
|
||||
|
||||
```yml
|
||||
```yaml
|
||||
# Enable or disable the site search
|
||||
search_enabled: 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:
|
||||
|
||||
#### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
title: Page not found
|
||||
nav_exclude: true
|
||||
search_exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
@@ -21,7 +21,6 @@ nav_order: 2
|
||||
### Links that look like buttons
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
@@ -29,10 +28,8 @@ nav_order: 2
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
@@ -44,13 +41,10 @@ nav_order: 2
|
||||
|
||||
### Button element
|
||||
|
||||
GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this:
|
||||
|
||||
GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
|
||||
|
||||
<div class="code-example">
|
||||
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
|
||||
</div>
|
||||
```html
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
@@ -62,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
|
||||
|
||||
### Button size
|
||||
|
||||
Wrap the button in container that uses the [font-size utility classes]({{
|
||||
site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||
Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
<span class="fs-6">
|
||||
[Big ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
@@ -74,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
<span class="fs-8">
|
||||
@@ -88,10 +79,9 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||
|
||||
### Spacing between buttons
|
||||
|
||||
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
|
||||
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
|
||||
|
||||
|
||||
@@ -18,12 +18,10 @@ nav_order: 6
|
||||
|
||||
## Inline code
|
||||
|
||||
Code can be rendered inline using single ticks by wrapping your code in single back ticks.
|
||||
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.
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
@@ -33,7 +31,7 @@ Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiu
|
||||
|
||||
## Syntax highlighted code blocks
|
||||
|
||||
Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
|
||||
Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
```js
|
||||
@@ -58,7 +56,7 @@ var fun = function lang(l) {
|
||||
|
||||
## Code blocks with rendered examples
|
||||
|
||||
To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
|
||||
To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ nav_order: 3
|
||||
Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
@@ -28,10 +27,8 @@ Coming soon
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
@@ -49,5 +46,4 @@ Coming soon
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
|
||||
```
|
||||
|
||||
@@ -16,9 +16,10 @@ nav_order: 5
|
||||
|
||||
---
|
||||
|
||||
Most lists can be rendered with pure markdown...
|
||||
Most lists can be rendered with pure Markdown.
|
||||
|
||||
## Unordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- Item 1
|
||||
- Item 2
|
||||
@@ -42,8 +43,8 @@ _or_
|
||||
* Item 3
|
||||
```
|
||||
|
||||
|
||||
## Ordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
@@ -54,6 +55,7 @@ _or_
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
```
|
||||
|
||||
## Task list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
@@ -69,7 +71,7 @@ _or_
|
||||
|
||||
## Definition list
|
||||
|
||||
Definition lists require HTML syntax and aren't supported with the GitHub flavored markdown compiler.
|
||||
Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<dl>
|
||||
@@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .code-example }
|
||||
|
||||
For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||
For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||
|
||||
```scss
|
||||
"SFMono-Regular", Menlo, Consolas, Monospace
|
||||
@@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
|
||||
|
||||
## Responsive type scale
|
||||
|
||||
Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a
|
||||
Just the Docs uses a responsive type scale that shifts depending on the viewport size.
|
||||
|
||||
| Selector | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:----------------------|:---------------------------------|:------------------------------|
|
||||
@@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
|
||||
There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
|
||||
|
||||
[View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }
|
||||
|
||||
@@ -3,8 +3,7 @@ layout: default
|
||||
title: UI Components
|
||||
nav_order: 3
|
||||
has_children: true
|
||||
parent: UI Components
|
||||
permalink: /ui-components
|
||||
permalink: /docs/ui-components
|
||||
---
|
||||
|
||||
# UI Components
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: Color
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Color Utilities
|
||||
@@ -16,7 +16,7 @@ parent: Utilities
|
||||
|
||||
---
|
||||
|
||||
All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.
|
||||
All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
|
||||
|
||||
## Light Greys
|
||||
|
||||
@@ -34,6 +34,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
|
||||
|
||||
## Purples
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: Layout
|
||||
nav_order: 2
|
||||
parent: Utilities
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Layout Utilities
|
||||
@@ -56,15 +56,14 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
```markdown
|
||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||
{: .mb-lg-4 }
|
||||
|
||||
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||
{: .px-6 }
|
||||
|
||||
```
|
||||
|
||||
## Vertical Alignment
|
||||
@@ -95,9 +94,9 @@ Use these classes in conjunction with the responsive modifiers.
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
```markdown
|
||||
This button will be hidden until medium screen sizes:
|
||||
|
||||
[ A button ](#url)
|
||||
@@ -110,5 +109,4 @@ These headings will be `inline-block`:
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
```
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: Responsive Modifiers
|
||||
nav_order: 1
|
||||
parent: Utilities
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Responsive modifiers
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Typography Utilities
|
||||
@@ -117,8 +117,6 @@ Use the `lh-` classes to explicitly apply line height to text.
|
||||
| `.lh-tight` | 1.1 | Default for headings |
|
||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||
|
||||
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
No Line height
|
||||
No Line height
|
||||
|
||||
@@ -2,13 +2,12 @@
|
||||
layout: default
|
||||
title: Utilities
|
||||
nav_order: 4
|
||||
parent: Utilities
|
||||
has_children: true
|
||||
permalink: /utilities
|
||||
permalink: docs/utilities
|
||||
---
|
||||
|
||||
# Utilities
|
||||
{: .no_toc }
|
||||
|
||||
CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
|
||||
CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
30
index.md
30
index.md
@@ -2,25 +2,36 @@
|
||||
layout: default
|
||||
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: /
|
||||
---
|
||||
|
||||
|
||||
# Focus on writing good documentation
|
||||
{: .fs-9 }
|
||||
|
||||
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
|
||||
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
|
||||
[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
|
||||
|
||||
---
|
||||
|
||||
## Getting started
|
||||
### Dependencies
|
||||
Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler.
|
||||
|
||||
### Installation
|
||||
### Dependencies
|
||||
|
||||
Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler.
|
||||
|
||||
### Quick start: Use as a GitHub Pages remote theme
|
||||
|
||||
1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/)
|
||||
```yaml
|
||||
remote_theme: pmarsceill/just-the-docs
|
||||
```
|
||||
<small>You must have GitHub Pages enabled on your repo, one or more Markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)</small>
|
||||
|
||||
### Local installation: Use the gem-based theme
|
||||
|
||||
1. Install the Ruby Gem
|
||||
```bash
|
||||
$ gem install just-the-docs
|
||||
@@ -29,7 +40,7 @@ $ gem install just-the-docs
|
||||
# .. or add it to your your Jekyll site’s Gemfile
|
||||
gem "just-the-docs"
|
||||
```
|
||||
2. Add Just the Docs to your Jekyll site’s `config.yml`
|
||||
2. Add Just the Docs to your Jekyll site’s `_config.yml`
|
||||
```yaml
|
||||
theme: "just-the-docs"
|
||||
```
|
||||
@@ -47,6 +58,10 @@ $ bundle exec jekyll serve
|
||||
```
|
||||
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
|
||||
|
||||
### Configure Just the Docs
|
||||
|
||||
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
|
||||
|
||||
---
|
||||
|
||||
## About the project
|
||||
@@ -62,7 +77,6 @@ Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/j
|
||||
When contributing to this repository, please first discuss the change you wish to make via issue,
|
||||
email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing).
|
||||
|
||||
|
||||
### Code of Conduct
|
||||
|
||||
Just the Docs is committed to fostering a welcoming community.
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
|
||||
Gem::Specification.new do |spec|
|
||||
spec.name = "just-the-docs"
|
||||
spec.version = "0.1.6"
|
||||
spec.version = "0.2.1"
|
||||
spec.authors = ["Patrick Marsceill"]
|
||||
spec.email = ["patrick.marsceill@gmail.com"]
|
||||
|
||||
spec.summary = %q{A nice looking, high customizable, responsive Jekyll theme for documention with built-in search.}
|
||||
spec.summary = %q{A nice looking, highly customizable, responsive Jekyll theme for documentation with built-in search.}
|
||||
spec.homepage = "https://github.com/pmarsceill/just-the-docs"
|
||||
spec.license = "MIT"
|
||||
|
||||
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 "jekyll", "~> 3.3"
|
||||
spec.add_runtime_dependency "rake", "~> 10.0"
|
||||
spec.add_runtime_dependency "jekyll", "~> 3.8.5"
|
||||
spec.add_runtime_dependency "rake", "~> 12.3.1"
|
||||
|
||||
spec.add_development_dependency "bundler", "~> 1.12"
|
||||
spec.add_development_dependency "bundler", "~> 2.0.1"
|
||||
end
|
||||
|
||||
@@ -4,7 +4,7 @@ namespace :search do
|
||||
puts 'Creating search data json file...'
|
||||
mkdir_p 'assets/js'
|
||||
touch 'assets/js/search-data.json'
|
||||
content = %Q[{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\\', ' ' }}]
|
||||
content = %Q[{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\\', ' ' | normalize_whitespace }}]
|
||||
puts 'Done.'
|
||||
puts 'Generating content...'
|
||||
|
||||
@@ -12,13 +12,13 @@ namespace :search do
|
||||
f.puts '---
|
||||
---
|
||||
{
|
||||
{% for page in site.html_pages %}"{{ forloop.index0 }}": {
|
||||
{% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
|
||||
"id": "{{ forloop.index0 }}",
|
||||
"title": "{{ page.title | xml_escape }}",
|
||||
"title": "{{ page.title | replace: '&', '&' }}",
|
||||
"content": "'+content+'",
|
||||
"url": "{{ page.url | absolute_url | xml_escape }}",
|
||||
"relUrl": "{{ page.url | xml_escape }}"
|
||||
}{% if forloop.last %}{% else %},
|
||||
"url": "{{ page.url | absolute_url }}",
|
||||
"relUrl": "{{ page.url }}"
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% endif %}{% endfor %}
|
||||
}'
|
||||
end
|
||||
|
||||
5967
package-lock.json
generated
5967
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "just-the-docs",
|
||||
"version": "0.1.6",
|
||||
"version": "0.2.1",
|
||||
"description": "A Jekyll theme for documentation",
|
||||
"repository": "pmarsceill/just-the-docs",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/pmarsceill/just-the-docs/issues",
|
||||
"devDependencies": {
|
||||
"stylelint": "^7.13.0",
|
||||
"stylelint-config-primer": "^2.2.11"
|
||||
"stylelint": "^9.9.0",
|
||||
"stylelint-config-primer": "^3.0.1"
|
||||
},
|
||||
"dependencies": {},
|
||||
"scripts": {
|
||||
|
||||
Reference in New Issue
Block a user