Compare commits

...

44 Commits

Author SHA1 Message Date
Patrick Marsceill
e1d226f192 Merge pull request #69 from bmann/patch-1
page layout also used out of the box by Jekyll
2019-01-23 13:51:26 -05:00
Patrick Marsceill
2de780bb4b Merge pull request #70 from EricFromCanada/improve-search
Improve search data generation
2019-01-23 13:19:08 -05:00
EricFromCanada
60c82cb518 Allow for ampersand in title or URL
Because `page.title` (and `page.url`) is already escaped and page titles served by lunrjs do not need escaping, ampersands need to be unescaped to display properly in search results.
2019-01-16 00:31:30 -05:00
EricFromCanada
9a4ea76957 Improve search content generator 2019-01-15 22:54:30 -05:00
EricFromCanada
793ea356c3 Use unless loop for comma
and mention `search_exclude`
2019-01-15 20:48:52 -05:00
EricFromCanada
71ba32e131 Additional text fixes 2019-01-15 20:48:48 -05:00
Boris Mann
37d54f5bf2 page layout also used out of the box by Jekyll
Suggesting page, since `about.md` uses it for new Jekyll installs as well.
2019-01-15 10:52:32 -08:00
Patrick Marsceill
ce947ae543 Merge pull request #67 from EricFromCanada/doc-cleanup
Documentation cleanup
2019-01-15 10:49:04 -05:00
EricFromCanada
2218e6e565 Fix links and syntax
For pages in utilities/, reorder `nav_order` to follow `parent`.
2019-01-14 14:43:33 -05:00
EricFromCanada
ae5bcfe361 Fix grammar and capitalization 2019-01-14 14:43:29 -05:00
EricFromCanada
ff49d02f83 Make spacing consistent 2019-01-14 14:43:16 -05:00
Patrick Marsceill
b3fb5ebd87 Merge pull request #61 from pmarsceill/dependabot/bundler/bundler-tw-2.0.1
Update bundler requirement from ~> 1.17.1 to ~> 2.0.1
2019-01-07 10:44:05 -05:00
Patrick Marsceill
79a8cda356 Merge pull request #44 from pmarsceill/dependabot/npm_and_yarn/stylelint-config-primer-3.0.1
Bump stylelint-config-primer from 3.0.0 to 3.0.1
2019-01-07 10:43:34 -05:00
Patrick Marsceill
ae3f570370 Fix some styling bugs 2019-01-06 15:51:30 -05:00
Patrick Marsceill
f17700afe3 Better search index 2019-01-06 15:51:17 -05:00
Patrick Marsceill
269271a8d7 Add a page description 2019-01-06 15:50:57 -05:00
Patrick Marsceill
09cc61c25f Moar A11y updates 2019-01-06 15:50:31 -05:00
Patrick Marsceill
06c8acc06b Lol we forgot the body tag 2019-01-06 15:50:01 -05:00
Patrick Marsceill
a3ae6ad74e A11y updates 2019-01-06 15:49:26 -05:00
Patrick Marsceill
f264034999 If page has a description use that for meta data 2019-01-06 15:48:58 -05:00
dependabot[bot]
2b0ff701fa Update bundler requirement from ~> 1.17.1 to ~> 2.0.1
Updates the requirements on [bundler](https://github.com/bundler/bundler) to permit the latest version.
- [Release notes](https://github.com/bundler/bundler/releases)
- [Changelog](https://github.com/bundler/bundler/blob/v2.0.1/CHANGELOG.md)
- [Commits](https://github.com/bundler/bundler/commits/v2.0.1)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2019-01-04 10:18:33 +00:00
Patrick Marsceill
4a9b4fd5b1 lint 2018-12-16 15:29:06 -05:00
Patrick Marsceill
d5d1ddbd92 Docs update 2018-12-16 15:27:25 -05:00
Patrick Marsceill
39828f0775 A nicer 404 2018-12-16 15:24:00 -05:00
Patrick Marsceill
954e8941bb Accidental reversal 2018-12-16 15:23:33 -05:00
Patrick Marsceill
20970ca9e6 Better code scrolling for touch 2018-12-16 15:23:18 -05:00
Patrick Marsceill
eaf1247911 Auto focus main content for keyboard scrolling 2018-12-16 15:22:51 -05:00
Patrick Marsceill
eb0a6c328f Allow pages to be excluded from search 2018-12-16 14:47:41 -05:00
Patrick Marsceill
ed33ab18ac Exclude package-lock.json from jekyll build 2018-12-16 14:29:35 -05:00
Patrick Marsceill
555dfae410 Make TOC on parent pages optional 2018-12-16 14:27:44 -05:00
Patrick Marsceill
309b238400 Merge pull request #51 from flut1/master
Fix charset for list item content in scss
2018-12-13 11:16:27 -05:00
Floris Bernard
2caefa4e9e Fix charset for list item content in scss 2018-12-12 14:33:02 +01:00
dependabot[bot]
e4dd35083a Bump stylelint-config-primer from 3.0.0 to 3.0.1
Bumps [stylelint-config-primer](https://github.com/primer/primer) from 3.0.0 to 3.0.1.
- [Release notes](https://github.com/primer/primer/releases)
- [Changelog](https://github.com/primer/primer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/primer/primer/compare/v3.0.0...v3.0.1)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-11-30 10:25:20 +00:00
Patrick Marsceill
80bbdb7be8 Merge pull request #43 from pmarsceill/v0.2.1
v0.2.1 release
2018-11-29 11:43:28 -05:00
Patrick Marsceill
c5a9be9298 Bump JTD version numbers 2018-11-29 11:33:43 -05:00
dependabot[bot]
5b9cde1dc4 Bump stylelint-config-primer from 2.2.11 to 3.0.0
Bumps [stylelint-config-primer](https://github.com/primer/primer) from 2.2.11 to 3.0.0.
- [Release notes](https://github.com/primer/primer/releases)
- [Changelog](https://github.com/primer/primer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/primer/primer/commits/v3.0.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-11-29 11:32:19 -05:00
Patrick Marsceill
1064d50f8c Merge branch 'dependabot/npm_and_yarn/stylelint-9.9.0' into v0.2.1 2018-11-29 11:28:25 -05:00
dependabot[bot]
b35b697dc2 Bump stylelint from 7.13.0 to 9.9.0
Bumps [stylelint](https://github.com/stylelint/stylelint) from 7.13.0 to 9.9.0.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/7.13.0...9.9.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-11-29 16:19:16 +00:00
dependabot[bot]
f6003ec47d [Security] Bump lodash from 4.17.4 to 4.17.11
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.4 to 4.17.11. **This update includes security fixes.**
- [Release notes](https://github.com/lodash/lodash/releases)
- [Changelog](https://github.com/lodash/lodash/blob/master/CHANGELOG)
- [Commits](https://github.com/lodash/lodash/compare/4.17.4...4.17.11)

Signed-off-by: dependabot[bot] <support@dependabot.com>
2018-11-29 11:09:46 -05:00
Patrick Marsceill
dc47cec4aa Merge pull request #29 from folbert/aux-link-documentation-fix
Indented the title for aux_link
2018-11-26 11:29:59 -05:00
Patrick Marsceill
6b213c2da0 Additional ident 2018-11-26 11:26:44 -05:00
Björn Folbert
860207d13c Indented the title for aux_link
The indent is required for the aux links to work.
2018-11-24 00:21:57 +01:00
Patrick Marsceill
21990474d0 Merge pull request #23 from pmarsceill/v0.2.0
v0.2.0 release
2018-11-19 16:34:46 -05:00
Patrick Marsceill
cd55ce0089 Bumb version numbers 2018-11-19 16:33:25 -05:00
34 changed files with 5514 additions and 1012 deletions

11
404.html Normal file
View 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>

View File

@@ -4,12 +4,11 @@
<br><br> <br><br>
<p align="center"> <p align="center">
<h1 align="center">Just the Docs</h1> <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">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"><strong><a href="https://pmarsceill.github.io/just-the-docs/">See it in action!</a></strong></p>
<br><br><br> <br><br><br>
</p> </p>
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif) ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
## Installation ## Installation
@@ -60,7 +59,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsc
To set up your environment to develop this theme, run `bundle install`. To set up your environment to develop this theme, run `bundle install`.
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.

View File

@@ -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 # url: "" # the base hostname & protocol for your site, e.g. http://example.com
permalink: pretty 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 # Enable or disable the site search
search_enabled: true search_enabled: true

View File

@@ -1,6 +1,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <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> <title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}"> <link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">

View File

@@ -1,4 +1,4 @@
<nav> <nav role="navigation" aria-label="Main navigation">
<ul class="navigation-list"> <ul class="navigation-list">
{% assign pages_list = site.html_pages | sort:"nav_order" %} {% assign pages_list = site.html_pages | sort:"nav_order" %}
{% for node in pages_list %} {% for node in pages_list %}

View File

@@ -2,6 +2,7 @@
<html lang="en-us"> <html lang="en-us">
{% include head.html %} {% include head.html %}
<body>
<div class="page-wrap"> <div class="page-wrap">
<div class="side-bar"> <div class="side-bar">
@@ -20,7 +21,7 @@
{% if site.search_enabled != nil %} {% if site.search_enabled != nil %}
<div class="search js-search"> <div class="search js-search">
<div class="search-input-wrap"> <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> <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>
<div class="js-search-results search-results-wrap"></div> <div class="js-search-results search-results-wrap"></div>
@@ -35,7 +36,7 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="main-content"> <div class="main-content js-main-content" tabindex="0">
{% unless page.url == "/" %} {% unless page.url == "/" %}
{% if page.parent %} {% if page.parent %}
<nav class="breadcrumb-nav"> <nav class="breadcrumb-nav">
@@ -51,10 +52,10 @@
</nav> </nav>
{% endif %} {% endif %}
{% endunless %} {% endunless %}
<div class="page-content"> <div id="main-content" class="page-content" role="main">
{{ content }} {{ content }}
{% if page.has_children == true %} {% if page.has_children == true and page.has_toc != false %}
<hr> <hr>
<h2 class="text-delta">Table of contents</h2> <h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %} {% assign children_list = site.pages | sort:"nav_order" %}
@@ -72,4 +73,6 @@
</div> </div>
</div> </div>
</div> </div>
</body>
</html> </html>

5
_layouts/page.html Normal file
View File

@@ -0,0 +1,5 @@
---
layout: default
---
{{ content }}

View File

@@ -14,6 +14,7 @@ code {
pre.highlight { pre.highlight {
padding: $sp-3; padding: $sp-3;
margin-bottom: 0; margin-bottom: 0;
-webkit-overflow-scrolling: touch;
background-color: $code-background-color; background-color: $code-background-color;
code { code {
@@ -104,7 +105,7 @@ pre.highlight {
.code-example { .code-example {
padding: $sp-3; padding: $sp-3;
margin-bottom: $sp-3; margin-bottom: $sp-3;
overflow: scroll; overflow: auto;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;

View File

@@ -1,3 +1,5 @@
@charset "UTF-8";
// //
// Styles for rendered markdown in the .main-content container // Styles for rendered markdown in the .main-content container
// //

View File

@@ -74,6 +74,10 @@
} }
} }
.js-main-content:focus {
outline: none;
}
.page-header { .page-header {
background-color: $sidebar-color; background-color: $sidebar-color;

View File

@@ -10,7 +10,7 @@
@import "./vendor/normalize.scss/normalize.scss"; @import "./vendor/normalize.scss/normalize.scss";
// //
// Import Just the docs scss // Import Just the Docs scss
// //
// Support // Support

View File

@@ -10,7 +10,7 @@
@import "./vendor/normalize.scss/normalize.scss"; @import "./vendor/normalize.scss/normalize.scss";
// //
// Import Just the docs scss // Import Just the Docs scss
// //
// Support // Support

View File

@@ -150,11 +150,18 @@ function initSearch() {
} }
} }
function pageFocus() {
var mainContent = document.querySelector('.js-main-content');
mainContent.focus();
console.log(mainContent)
}
// Document ready // Document ready
function ready(){ function ready(){
toggleNav(); toggleNav();
pageFocus();
if (typeof lunr !== 'undefined') { if (typeof lunr !== 'undefined') {
initSearch(); initSearch();
} }

View File

@@ -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 }}", "id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}", "title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\', ' ' }}", "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
"url": "{{ page.url | absolute_url | xml_escape }}", "url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url | xml_escape }}" "relUrl": "{{ page.url }}"
}{% if forloop.last %}{% else %}, }{% unless forloop.last %},{% endunless %}
{% endif %}{% endfor %} {% endif %}{% endfor %}
} }

View File

@@ -1,7 +1,7 @@
#!/usr/bin/env ruby #!/usr/bin/env ruby
gem_dir = File.expand_path("..",File.dirname(__FILE__)) gem_dir = File.expand_path("..",File.dirname(__FILE__))
$LOAD_PATH.unshift gem_dir# Look in gem directory for resources first. $LOAD_PATH.unshift gem_dir # Look in gem directory for resources first.
exec_type = ARGV[0] exec_type = ARGV[0]
if exec_type == 'rake' then if exec_type == 'rake' then

View File

@@ -6,27 +6,27 @@ nav_order: 2
# Configuration # 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 ## Search enabled
```yml ```yaml
# Enable or disable the site search # Enable or disable the site search
search_enabled: true search_enabled: true
``` ```
## Aux links ## Aux links
```yml ```yaml
# Aux links for the upper right navigation # Aux links for the upper right navigation
aux_links: aux_links:
"Just the Docs on GitHub": "Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs" - "//github.com/pmarsceill/just-the-docs"
``` ```
## Color scheme ## Color scheme
```yml ```yaml
# Color scheme currently only supports "dark" or nil (default) # Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark" color_scheme: "dark"
``` ```
@@ -39,12 +39,12 @@ const originalCssRef = cssFile.getAttribute('href')
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
addEvent(toggleDarkMode, 'click', function(){ addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) { if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef) cssFile.setAttribute('href', darkModeCssRef)
} else { } else {
cssFile.setAttribute('href', originalCssRef) cssFile.setAttribute('href', originalCssRef)
} }
}) })
</script> </script>
See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information. See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

View File

@@ -5,7 +5,7 @@ nav_order: 6
--- ---
# Customization # Customization
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -16,19 +16,19 @@ nav_order: 6
--- ---
## Color schemes ## Color schemes
{: .d-inline-block :} {: .d-inline-block }
New New
{: .label .label-green :} {: .label .label-green }
Just the Docs supports two color schemes: light (default), and dark. 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: To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
#### Example #### Example
{: no_toc } {: .no_toc }
```yml ```yaml
# Color scheme currently only supports "dark" or nil (default) # Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark" color_scheme: "dark"
``` ```
@@ -49,15 +49,14 @@ addEvent(toggleDarkMode, 'click', function(){
}) })
</script> </script>
## Specific visual customization ## Specific visual customization
To customize your sites 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 its line and change its value. To customize your sites 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 out, and change it's value to our `$blue-000` variable, or another shade of your choosing. 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 #### Example
{: no_toc } {: .no_toc }
```scss ```scss
// ... // ...
@@ -69,7 +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.
--- ---

View File

@@ -25,10 +25,11 @@ By default, all pages will appear as top level pages in the main nav unless a pa
## 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 #### Example
{: .no_toc } {: .no_toc }
```yaml ```yaml
--- ---
layout: default layout: default
@@ -41,10 +42,11 @@ nav_order: 4
## Excluding pages ## 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. 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 #### Example
{: .no_toc } {: .no_toc }
```yaml ```yaml
--- ---
layout: default layout: default
@@ -57,7 +59,7 @@ nav_exclude: true
## Pages with children ## 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 is an organization like: 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:
``` ```
+-- .. +-- ..
@@ -86,9 +88,9 @@ Sometimes you will want to create a page with many children (a section). First,
+-- .. +-- ..
``` ```
On the parent pages, add 2 YAML front matter variables: On the parent pages, add 2 YAML front matter parameters:
- `has_children: true` (tells us that this a parent page) - `has_children: true` (tells us that this is a parent page)
- `permalink:` set this to the site directories that the contains the pages - `permalink:` set this to the site directory that contains the child pages
#### Example #### Example
{: .no_toc } {: .no_toc }
@@ -103,7 +105,7 @@ permalink: /docs/ui-components
--- ---
``` ```
Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it 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 ### Child pages
{: .text-gamma } {: .text-gamma }
@@ -112,6 +114,7 @@ On child pages, simply set the `parent:` YAML front matter to whatever the paren
#### Example #### Example
{: .no_toc } {: .no_toc }
```yaml ```yaml
--- ---
layout: default layout: default
@@ -121,12 +124,30 @@ 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 ### Children with children
{: .text-gamma } {: .text-gamma }
Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages. 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 `has_children` attribute to the child
1. Add the `parent` and `grand_parent` attribute to the grandchild 1. Add the `parent` and `grand_parent` attribute to the grandchild
@@ -154,7 +175,7 @@ nav_order: 1
--- ---
``` ```
Would create the following navigation structure: This would create the following navigation structure:
``` ```
+-- .. +-- ..
@@ -179,10 +200,10 @@ To add a auxiliary navigation item to your site (in the upper right on all pages
#### Example #### Example
{: .no_toc } {: .no_toc }
```yml ```yaml
# Aux links for the upper right navigation # Aux links for the upper right navigation
aux_links: aux_links:
"Just the Docs on GitHub": "Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs" - "//github.com/pmarsceill/just-the-docs"
``` ```
@@ -190,7 +211,7 @@ aux_links:
## In-page navigation with Table of Contents ## 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 #### Example
{: .no_toc } {: .no_toc }

View File

@@ -5,8 +5,17 @@ nav_order: 7
--- ---
# Search # 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 title
- Page content - 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 ## Set up search
### 1. Generate search index ### Generate search index
Before you can use search, you must initialize the feature by running this Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
rake command that comes with the `just-the-docs`
```bash ```bash
$ bundle exec just-the-docs rake search:init $ bundle exec just-the-docs rake search:init
``` ```
This command creates the `search-data.json` file that Jekyll uses to create 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:
your search index. Alternatively, you can create the file manually in the
`assets/js/` 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 }}", "id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}", "title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}", "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
"url": "{{ page.url | absolute_url | xml_escape }}", "url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url | xml_escape }}" "relUrl": "{{ page.url }}"
}{% if forloop.last %}{% else %}, }{% unless forloop.last %},{% endunless %}
{% endif %}{% endfor %} {% endif %}{% endfor %}
}{% endraw %} }{% 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)._ _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 # Enable or disable the site search
search_enabled: true 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
---
```

View File

@@ -6,7 +6,7 @@ nav_order: 2
--- ---
# Buttons # Buttons
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -28,7 +28,6 @@ nav_order: 2
[Link button](http://example.com/){: .btn .btn-green } [Link button](http://example.com/){: .btn .btn-green }
[Link button](http://example.com/){: .btn .btn-outline } [Link button](http://example.com/){: .btn .btn-outline }
</div> </div>
```markdown ```markdown
[Link button](http://example.com/){: .btn } [Link button](http://example.com/){: .btn }
@@ -42,13 +41,10 @@ nav_order: 2
### Button element ### 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"> <div class="code-example">
<button type="button" name="button" class="btn">Button element</button> <button type="button" name="button" class="btn">Button element</button>
</div> </div>
```html ```html
<button type="button" name="button" class="btn">Button element</button> <button type="button" name="button" class="btn">Button element</button>
@@ -60,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
### Button size ### Button size
Wrap the button in container that uses the [font-size utility classes]({{ Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
<span class="fs-6"> <span class="fs-6">
[Big ass button](http://example.com/){: .btn } [Big ass button](http://example.com/){: .btn }
</span> </span>
@@ -72,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
<span class="fs-3"> <span class="fs-3">
[Tiny ass button](http://example.com/){: .btn } [Tiny ass button](http://example.com/){: .btn }
</span> </span>
</div> </div>
```markdown ```markdown
<span class="fs-8"> <span class="fs-8">
@@ -86,20 +79,19 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
### Spacing between 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"> <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 }
[Button with space](http://example.com/){: .btn .btn-purple .mr-2} [Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue .mr-2}
[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
[Button ](http://example.com/){: .btn .btn-blue } [Button ](http://example.com/){: .btn .btn-blue }
</div> </div>
```markdown ```markdown
[Button with space](http://example.com/){: .btn .btn-purple .mr-2} [Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button ](http://example.com/){: .btn .btn-blue } [Button ](http://example.com/){: .btn .btn-blue }
[Button with more space](http://example.com/){: .btn .btn-green .mr-4} [Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue } [Button ](http://example.com/){: .btn .btn-blue }
``` ```

View File

@@ -6,7 +6,7 @@ nav_order: 6
--- ---
# Code # Code
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -18,12 +18,10 @@ nav_order: 6
## Inline code ## 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"> <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. Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div> </div>
```markdown ```markdown
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 ## 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"> <div class="code-example" markdown="1">
```js ```js
@@ -58,7 +56,7 @@ var fun = function lang(l) {
## Code blocks with rendered examples ## 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"> <div class="code-example" markdown="1">

View File

@@ -10,42 +10,40 @@ 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. 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"> <div class="code-example" markdown="1">
Default label Default label
{: .label } {: .label }
Blue label Blue label
{: .label .label-blue} {: .label .label-blue }
Stable Stable
{: .label .label-green} {: .label .label-green }
New release New release
{: .label .label-purple} {: .label .label-purple }
Coming soon Coming soon
{: .label .label-yellow} {: .label .label-yellow }
Deprecated Deprecated
{: .label .label-red} {: .label .label-red }
</div> </div>
```markdown ```markdown
Default label Default label
{: .label } {: .label }
Blue label Blue label
{: .label .label-blue} {: .label .label-blue }
Stable Stable
{: .label .label-green} {: .label .label-green }
New release New release
{: .label .label-purple} {: .label .label-purple }
Coming soon Coming soon
{: .label .label-yellow} {: .label .label-yellow }
Deprecated Deprecated
{: .label .label-red} {: .label .label-red }
``` ```

View File

@@ -6,7 +6,7 @@ nav_order: 5
--- ---
# Lists # Lists
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -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 ## Unordered list
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
- Item 1 - Item 1
- Item 2 - Item 2
@@ -42,18 +43,19 @@ _or_
* Item 3 * Item 3
``` ```
## Ordered list ## Ordered list
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
1. Item 1 1. Item 1
1. Item 2 1. Item 2
1. Item 3 1. Item 3
</div> </div>
```markdown ```markdown
1. Item 1 1. Item 1
1. Item 2 1. Item 2
1. Item 3 1. Item 3
``` ```
## Task list ## Task list
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
@@ -61,15 +63,15 @@ _or_
- [ ] hello, this is another todo item - [ ] hello, this is another todo item
- [x] goodbye, this item is done - [x] goodbye, this item is done
</div> </div>
```markdown ```markdown
- [ ] hello, this is a todo item - [ ] hello, this is a todo item
- [ ] hello, this is another todo item - [ ] hello, this is another todo item
- [x] goodbye, this item is done - [x] goodbye, this item is done
``` ```
## Definition list ## 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"> <div class="code-example" markdown="1">
<dl> <dl>
@@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
<dd>Green</dd> <dd>Green</dd>
</dl> </dl>
``` ```

View File

@@ -6,7 +6,7 @@ nav_order: 1
--- ---
# Typography # Typography
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .code-example } {: .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 ```scss
"SFMono-Regular", Menlo, Consolas, Monospace "SFMono-Regular", Menlo, Consolas, Monospace
@@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
## Responsive type scale ## 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` | | Selector | Small screen size `font-size` | Large screen size `font-size` |
|:----------------------|:---------------------------------|:------------------------------| |:----------------------|:---------------------------------|:------------------------------|
@@ -51,7 +51,7 @@ Just the docs uses a responsive type scale that shifts depending on the viewport
| `h3`, `.text-gamma` | 16px | 18px | | `h3`, `.text-gamma` | 16px | 18px |
| `h4`, `.text-delta` | 14px | 16px | | `h4`, `.text-delta` | 14px | 16px |
| `h5`, `.text-epsilon` | 16px | 18px | | `h5`, `.text-epsilon` | 16px | 18px |
| `h6`, `.text-zeta ` | 18px | 24px | | `h6`, `.text-zeta` | 18px | 24px |
| `body` | 14px | 16px | | `body` | 14px | 16px |
--- ---
@@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
## Typographic Utilities ## 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 } [View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }

View File

@@ -1,12 +1,12 @@
--- ---
layout: default layout: default
title: Color title: Color
nav_order: 3
parent: Utilities parent: Utilities
nav_order: 3
--- ---
# Color Utilities # Color Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -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 ## Light Greys

View File

@@ -1,13 +1,12 @@
--- ---
layout: default layout: default
title: Layout title: Layout
nav_order: 2
parent: Utilities parent: Utilities
has_children: true nav_order: 2
--- ---
# Layout Utilities # Layout Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -57,15 +56,14 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
#### Examples #### Examples
{: .no_toc } {: .no_toc }
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes: In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This paragraph will have a margin bottom of 1rem/16px at large screens. This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 } {: .mb-lg-4 }
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes. This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 } {: .px-6 }
``` ```
## Vertical Alignment ## Vertical Alignment
@@ -96,9 +94,9 @@ Use these classes in conjunction with the responsive modifiers.
#### Examples #### Examples
{: .no_toc } {: .no_toc }
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes: In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This button will be hidden until medium screen sizes: This button will be hidden until medium screen sizes:
[ A button ](#url) [ A button ](#url)
@@ -111,5 +109,4 @@ These headings will be `inline-block`:
### heading 3 ### heading 3
{ .d-inline-block } { .d-inline-block }
``` ```

View File

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

View File

@@ -1,12 +1,12 @@
--- ---
layout: default layout: default
title: Typography title: Typography
nav_order: 3
parent: Utilities parent: Utilities
nav_order: 4
--- ---
# Typography Utilities # Typography Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@@ -117,8 +117,6 @@ Use the `lh-` classes to explicitly apply line height to text.
| `.lh-tight` | 1.1 | Default for headings | | `.lh-tight` | 1.1 | Default for headings |
| `.lh-default` | 1.4 | Default for body (paragraphs) | | `.lh-default` | 1.4 | Default for body (paragraphs) |
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
No Line height No Line height
No Line height No Line height

View File

@@ -7,7 +7,7 @@ permalink: docs/utilities
--- ---
# Utilities # Utilities
{:.no_toc} {: .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 } {: .fs-6 .fw-300 }

View File

@@ -2,32 +2,36 @@
layout: default layout: default
title: Home title: Home
nav_order: 1 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: / permalink: /
--- ---
# Focus on writing good documentation # Focus on writing good documentation
{: .fs-9 } {: .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 } {: .fs-6 .fw-300 }
[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 } [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 ## Getting started
### Dependencies ### 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.
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 ### 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/) 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 ```yaml
remote_theme: pmarsceill/just-the-docs 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> <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 ### Local installation: Use the gem-based theme
1. Install the Ruby Gem 1. Install the Ruby Gem
```bash ```bash
$ gem install just-the-docs $ gem install just-the-docs
@@ -55,8 +59,8 @@ $ bundle exec jekyll serve
4. Point your web browser to [http://localhost:4000](http://localhost:4000) 4. Point your web browser to [http://localhost:4000](http://localhost:4000)
### Configure Just the Docs ### Configure Just the Docs
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
--- ---
@@ -73,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, 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). 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 ### Code of Conduct
Just the Docs is committed to fostering a welcoming community. Just the Docs is committed to fostering a welcoming community.

View File

@@ -2,11 +2,11 @@
Gem::Specification.new do |spec| Gem::Specification.new do |spec|
spec.name = "just-the-docs" spec.name = "just-the-docs"
spec.version = "0.1.6" spec.version = "0.2.1"
spec.authors = ["Patrick Marsceill"] spec.authors = ["Patrick Marsceill"]
spec.email = ["patrick.marsceill@gmail.com"] 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.homepage = "https://github.com/pmarsceill/just-the-docs"
spec.license = "MIT" spec.license = "MIT"
@@ -16,5 +16,5 @@ Gem::Specification.new do |spec|
spec.add_runtime_dependency "jekyll", "~> 3.8.5" spec.add_runtime_dependency "jekyll", "~> 3.8.5"
spec.add_runtime_dependency "rake", "~> 12.3.1" spec.add_runtime_dependency "rake", "~> 12.3.1"
spec.add_development_dependency "bundler", "~> 1.17.1" spec.add_development_dependency "bundler", "~> 2.0.1"
end end

View File

@@ -4,7 +4,7 @@ namespace :search do
puts 'Creating search data json file...' puts 'Creating search data json file...'
mkdir_p 'assets/js' mkdir_p 'assets/js'
touch 'assets/js/search-data.json' 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 'Done.'
puts 'Generating content...' puts 'Generating content...'
@@ -12,13 +12,13 @@ namespace :search do
f.puts '--- 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 }}", "id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}", "title": "{{ page.title | replace: '&amp;', '&' }}",
"content": "'+content+'", "content": "'+content+'",
"url": "{{ page.url | absolute_url | xml_escape }}", "url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url | xml_escape }}" "relUrl": "{{ page.url }}"
}{% if forloop.last %}{% else %}, }{% unless forloop.last %},{% endunless %}
{% endif %}{% endfor %} {% endif %}{% endfor %}
}' }'
end end

6129
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,13 +1,13 @@
{ {
"name": "just-the-docs", "name": "just-the-docs",
"version": "0.1.6", "version": "0.2.1",
"description": "A Jekyll theme for documentation", "description": "A Jekyll theme for documentation",
"repository": "pmarsceill/just-the-docs", "repository": "pmarsceill/just-the-docs",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/pmarsceill/just-the-docs/issues", "bugs": "https://github.com/pmarsceill/just-the-docs/issues",
"devDependencies": { "devDependencies": {
"stylelint": "^7.13.0", "stylelint": "^9.9.0",
"stylelint-config-primer": "^2.2.11" "stylelint-config-primer": "^3.0.1"
}, },
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {