Commit 3d4e9f89 authored by Egmont Koblinger's avatar Egmont Koblinger

just-in-docs customization

parent cd48cb2b
# This file is a template, and might need editing before it works on your project.
# Template project: https://gitlab.com/pages/jekyll
# Docs: https://docs.gitlab.com/ce/pages/
image: ruby:2.3
variables:
JEKYLL_ENV: production
before_script:
- bundle install
test:
stage: test
script:
- bundle exec jekyll build -d test
artifacts:
paths:
- test
except:
- master
pages:
stage: deploy
script:
- bundle exec jekyll build -d public
artifacts:
paths:
- public
only:
- master
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at patrick.marsceill@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
This diff is collapsed.
The license information below applies to the "Just the Docs" Jekyll theme
---
The MIT License (MIT)
Copyright (c) 2016 Patrick Marsceill
......
<p align="right">
<a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://travis-ci.com/pmarsceill/just-the-docs"><img src="https://travis-ci.com/pmarsceill/just-the-docs.svg?branch=master" alt="Build status"></a>
</p>
<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>
<br><br><br>
</p>
# BiDi in Terminal Emulators
Read the proposal on its homepage at:
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
## Installation
Add this line to your Jekyll site's Gemfile:
```ruby
gem "just-the-docs"
```
And add this line to your Jekyll site's `_config.yml`:
```yaml
theme: just-the-docs
```
And then execute:
$ bundle
Or install it yourself as:
$ gem install just-the-docs
## Usage
[View the documentation](https://pmarsceill.github.io/just-the-docs/) for usage information.
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsceill/just-the-docs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
### Submitting code changes:
- Open a [Pull Request](https://github.com/pmarsceill/just-the-docs/pulls)
- Ensure all CI tests pass
- Await code review
- Bump the version number in `just-the-docs.gemspec` and `package.json` according to [semantic versioning](https://semver.org/).
### Design and development principles of this theme:
1. As few dependencies as possible
2. No build script needed
3. First class mobile experience
4. Make the content shine
## Development
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.
When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
## License
The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
[https://terminal-wg.pages.freedesktop.org/bidi/](https://terminal-wg.pages.freedesktop.org/bidi/)
......@@ -13,21 +13,21 @@
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Just the Docs
title: BiDi in Terminal Emulators
description: A Jekyll theme for documentation
baseurl: "/just-the-docs/" # the subpath of your site, e.g. /blog
baseurl: "/bidi/" # 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", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
# Enable or disable the site search
search_enabled: true
#search_enabled: true
# Aux links for the upper right navigation
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
#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
......@@ -2,7 +2,8 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>{{ page.title }} - {{ site.title }}</title>
<title>{{ page.title }} – {{ site.title }}</title>
<link rel="shortcut icon" type="image/x-icon" href="{{ "/assets/images/favicon.ico" | absolute_url }}">
<link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">
{% if site.search_enabled != nil %}
<script type="text/javascript" src="{{ "/assets/js/vendor/lunr.min.js" | absolute_url }}"></script>
......
<div class="icon">
<img src="{{ "/assets/images/terminal-rtl.svg" | absolute_url }}" alt="_&lt;" style="width: 160px; height: 160px;"/>
</div>
<span class="summary">A draft proposal for handling RTL and BiDi text in terminal emulators</span>
<nav>
<ul class="navigation-list">
{% assign pages_list = site.html_pages | sort:"nav_order" %}
......
......@@ -10,9 +10,11 @@
<div class="navigation main-nav js-main-nav">
{% include nav.html %}
</div>
<!--
<footer role="contentinfo" class="site-footer">
<p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
-->
</div>
<div class="main-content-wrap">
<div class="page-header">
......@@ -38,6 +40,7 @@
<div class="main-content">
{% unless page.url == "/" %}
{% if page.parent %}
<!--
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
......@@ -49,14 +52,13 @@
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
-->
{% endif %}
{% endunless %}
<div class="page-content">
{{ content }}
{% if page.has_children == true %}
<hr>
<h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %}
<ul>
{% for child in children_list %}
......
......@@ -28,7 +28,7 @@
position: absolute;
width: $nav-width + 16px;
height: 100%;
padding-top: $gutter-spacing * 2;
padding-top: 84px;
padding-bottom: 0;
flex-direction: column;
border-right: $border $border-color;
......@@ -62,7 +62,7 @@
@include mq(md) {
position: relative;
max-width: $content-width;
padding-top: $gutter-spacing;
padding-top: 0;
padding-bottom: $gutter-spacing;
padding-left: $gutter-spacing * 1.5;
margin-left: $nav-width;
......@@ -86,8 +86,7 @@
@include mq(md) {
display: flex;
justify-content: flex-end;
height: 60px;
height: 84px;
padding-top: $sp-4;
padding-bottom: $sp-4;
border-bottom: $border $border-color;
......@@ -110,7 +109,7 @@
.navigation {
@include mq(md) {
padding-top: $sp-8;
padding-top: 0;
overflow-y: auto;
flex: 1 1 auto;
}
......
......@@ -13,14 +13,24 @@
top: 0;
right: 0;
z-index: 101;
height: 60px;
height: 84px;
padding-top: $sp-4;
border-bottom: $border $border-color;
}
}
.icon {
display: flex;
justify-content: center;
padding-bottom: 12px;
}
.summary {
font-style: italic;
}
.navigation-list {
padding: 0;
padding: $sp-6 0 0 0;
margin-top: $sp-4;
margin-bottom: 0;
list-style: none;
......
......@@ -57,7 +57,7 @@ $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;
$link-color: #00b1d1 !default; // bidi, haha
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
......
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg3006" width="128" height="128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id="defs3008">
<linearGradient id="linearGradient2880" x1="16.143" x2="16.143" y1="4" y2="44" gradientTransform="matrix(2.5386 0 0 1.9745 3.0734 -42.388)" gradientUnits="userSpaceOnUse">
<stop id="stop2225-6-4-7-2" style="stop-color:#fff" offset="0"/>
<stop id="stop2229-2-5-5-8" style="stop-color:#fff;stop-opacity:0" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2883" x1="16.626" x2="20.055" y1="15.298" y2="24.628" gradientTransform="matrix(2.5687 0 0 2.7869 2.351 -60.634)" gradientUnits="userSpaceOnUse">
<stop id="stop2687-1-9-0-2" style="stop-color:#fff" offset="0"/>
<stop id="stop2689-5-4-3-1" style="stop-color:#fff;stop-opacity:0" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2886" x1="16" x2="16" y1="27.045" y2="16" gradientTransform="matrix(2.6286 0 0 2.6364 -2.2857 -63.182)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient3680-6"/>
<linearGradient id="linearGradient3680-6">
<stop id="stop3682-4" style="stop-color:#dcdcdc" offset="0"/>
<stop id="stop3684-8" style="stop-color:#fff" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2890" x1="20" x2="20" y1="28" y2="26" gradientTransform="matrix(2.625 0 0 2.5 .74999 -57)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient3680-6"/>
<linearGradient id="linearGradient2894" x1="12.579" x2="12.213" y1="2.9165" y2="47.279" gradientTransform="matrix(2.5977 0 0 2.4848 1.6531 -52.136)" gradientUnits="userSpaceOnUse">
<stop id="stop2240-1-6-7-0" style="stop-color:#fff" offset="0"/>
<stop id="stop2242-7-3-7-2" style="stop-color:#fff;stop-opacity:0" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2897" x1="23.071" x2="23.071" y1="36.047" y2="33.296" gradientTransform="matrix(2.6175 0 0 2.643 1.1955 -47.751)" gradientUnits="userSpaceOnUse">
<stop id="stop2225-6-4-7" style="stop-color:#fff" offset="0"/>
<stop id="stop2229-2-5-5" style="stop-color:#fff;stop-opacity:0" offset="1"/>
</linearGradient>
<radialGradient id="radialGradient2900" cx="7.4957" cy="8.4498" r="20" gradientTransform="matrix(0 4.6588 -7.9722 -1.9658e-7 131.36 -68.244)" gradientUnits="userSpaceOnUse">
<stop id="stop3790-0-0" style="stop-color:#505050" offset="0"/>
<stop id="stop3792-0-2" style="stop-color:#141414" offset="1"/>
</radialGradient>
<linearGradient id="linearGradient2902" x1="16.143" x2="16.143" y1="4" y2="44" gradientTransform="matrix(2.5899 0 0 2.0258 1.8426 -43.619)" gradientUnits="userSpaceOnUse">
<stop id="stop3796-3-0" style="stop-color:#323232" offset="0"/>
<stop id="stop3798-8-6" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2905" x1="24" x2="24" y1="7.96" y2="43.865" gradientTransform="matrix(2.6445 0 0 2.6758 .53145 -64.57)" gradientUnits="userSpaceOnUse">
<stop id="stop4324-9-7" style="stop-color:#f0f0f0" offset="0"/>
<stop id="stop2860-4-4" style="stop-color:#d7d7d8" offset=".085525"/>
<stop id="stop2862-5-9" style="stop-color:#b2b2b3" offset=".92166"/>
<stop id="stop4326-1-1" style="stop-color:#979798" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2907" x1="10.014" x2="10.014" y1="44.96" y2="2.8765" gradientTransform="matrix(2.532 0 0 2.4175 3.232 -53.049)" gradientUnits="userSpaceOnUse">
<stop id="stop4334-7-6" style="stop-color:#595959" offset="0"/>
<stop id="stop4336-8-0" style="stop-color:#b3b3b3" offset="1"/>
</linearGradient>
<radialGradient id="radialGradient2910" cx="605.71" cy="486.65" r="117.14" gradientTransform="matrix(-.11245 0 0 .057647 81.771 24.864)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5060-6-6-5"/>
<linearGradient id="linearGradient5060-6-6-5">
<stop id="stop5062-3-0-3" offset="0"/>
<stop id="stop5064-1-4-9" style="stop-opacity:0" offset="1"/>
</linearGradient>
<radialGradient id="radialGradient2913" cx="605.71" cy="486.65" r="117.14" gradientTransform="matrix(.11245 0 0 .057647 46.229 24.864)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5060-6-6-5"/>
<linearGradient id="linearGradient3004" x1="302.86" x2="302.86" y1="366.65" y2="609.51" gradientTransform="matrix(.2071 0 0 .057647 -10.852 24.864)" gradientUnits="userSpaceOnUse">
<stop id="stop5050-5-6-4" style="stop-opacity:0" offset="0"/>
<stop id="stop5056-9-0-1" offset=".5"/>
<stop id="stop5052-6-9-5" style="stop-opacity:0" offset="1"/>
</linearGradient>
</defs>
<metadata id="metadata3011">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" transform="scale(-1,1) translate(-128,64)">
<rect id="rect2512-9-5" x="14" y="46" width="100" height="14" style="fill:url(#linearGradient3004);opacity:.40206"/>
<path id="path2514-7-4" d="m114 46v13.999c5.7911 0.0263 14-3.1365 14-7.0005 0-3.864-6.4624-6.9987-14-6.9987z" style="fill:url(#radialGradient2913);opacity:.40206"/>
<path id="path2516-8-9" d="m14 46v13.999c-5.7911 0.0263-14-3.1365-14-7.0005 0-3.864 6.4624-6.9987 14-6.9987z" style="fill:url(#radialGradient2910);opacity:.40206"/>
<rect id="rect2551-5-8" x="4.5011" y="-44.499" width="119" height="98.998" rx="3" ry="3" style="fill-rule:evenodd;fill:url(#linearGradient2905);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.0021;stroke:url(#linearGradient2907)"/>
<rect id="rect1314-3-3" x="13.5" y="-34.5" width="101" height="79" rx="0" ry="0" style="color:#000000;fill:url(#radialGradient2900);stroke-linecap:round;stroke-linejoin:round;stroke:url(#linearGradient2902)"/>
<rect id="rect2221-3-8" x="12.501" y="-35.499" width="103" height="80.998" rx="0" ry="0" style="fill:none;opacity:.4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.0021;stroke:url(#linearGradient2897)"/>
<rect id="rect2556-8-5" x="5.5019" y="-43.498" width="117" height="96.996" rx="2" ry="2" style="fill:none;opacity:.8;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.0037;stroke:url(#linearGradient2894)"/>
<path id="path3651-7-2" d="m69 15v-5h-21v5h21z" style="opacity:.4"/>
<path id="path3651-2" d="m69 13v-5h-21v5h21z" style="fill:url(#linearGradient2890)"/>
<path id="path3653-3-2" d="m29.257 10-5.2571-5.2727 11.829-9.2273-11.829-9.2273 5.2571-5.2727 17.743 14.5-17.743 14.5z" style="opacity:.4"/>
<path id="path3653-7" d="m29.257 8-5.2571-5.2727 11.829-9.2273-11.829-9.2273 5.2571-5.2727 17.743 14.5-17.743 14.5z" style="fill:url(#linearGradient2886)"/>
<path id="path3333-3-0" d="m10.619-44c-3.1037 0-5.6191 2.729-5.6191 6.0963v44.59c0.00805 0.37512 0.15876 0.72986 0.41807 0.9781 0.25933 0.24823 0.6026 0.36729 0.94655 0.32824l115.59-19.857c0.59462-0.10173 1.0352-0.65334 1.0436-1.3063v-24.734c0-3.3673-2.5153-6.0963-5.6191-6.0963h-106.76z" style="fill-rule:evenodd;fill:url(#linearGradient2883);opacity:.2"/>
<rect id="rect1314-3-3-9" x="14.5" y="-33.5" width="99" height="77" rx="0" ry="0" style="color:#000000;fill:none;opacity:.1;stroke-linecap:round;stroke-linejoin:round;stroke:url(#linearGradient2880)"/>
</g>
</svg>
---
layout: default
title: Configuration
nav_order: 2
---
# Configuration
Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `_config.yml` file.
## Search enabled
```yml
# Enable or disable the site search
search_enabled: true
```
## Aux links
```yml
# Aux links for the upper right navigation
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
```
## Color scheme
```yml
# 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.
---
layout: default
title: Customization
nav_order: 6
---
# Customization
{:.no_toc}
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Color schemes
{: .d-inline-block :}
New
{: .label .label-green :}
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 }
```yml
# 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 out it’s line and change it’s 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.
#### Example
{: no_toc }
```scss
// ...
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
$link-color: $blue-000;
//
// ...
```
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
---
---
layout: default
title: Markdown kitchen sink
nav_order: 99
---
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](another-page).
There should be whitespace between paragraphs.
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
# [](#header-1)Header 1
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
## [](#header-2)Header 2
> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.
### [](#header-3)Header 3
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
```ruby
# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
```
#### [](#header-4)Header 4
* This is an unordered list following a header.
* This is an unordered list following a header.
* This is an unordered list following a header.
##### [](#header-5)Header 5
1. This is an ordered list following a header.
2. This is an ordered list following a header.
3. This is an ordered list following a header.
###### [](#header-6)Header 6
| head1 | head two | three |
|:-------------|:------------------|:------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
### There's a horizontal rule below this.
* * *
### Here is an unordered list:
* Item foo
* Item bar
* Item baz
* Item zip
### And an ordered list:
1. Item one
1. Item two
1. Item three
1. Item four
### And a nested list:
- level 1 item
- level 2 item
- level 2 item
- level 3 item
- level 3 item
- level 1 item
- level 2 item
- level 2 item
- level 2 item
- level 1 item
- level 2 item
- level 2 item
- level 1 item
### And a task list
- [ ] Hello, this is a TODO item
- [ ] Hello, this is another TODO item
- [x] Goodbye, this item is done
### Small image
![](https://assets-cdn.github.com/images/icons/emoji/octocat.png)
### Large image
![](https://guides.github.com/activities/hello-world/branching.png)
### Definition lists can be used with HTML syntax.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
```
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
```
```
The final element.
```
---
layout: default
title: Navigation Structure
nav_order: 5
---
# Navigation Structure
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## 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 (pages with children and grandchildren).
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)).
---
## Ordering pages
To specify a page order, use the `nav_order` variable in your pages' YAML front matter.
#### Example
{: .no_toc }
```yaml
---
layout: default
title: Customization
nav_order: 4
---
```
---
## 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 is an organization like:
```
+-- ..
|-- (Jekyll files)
|
|-- docs
| |-- ui-components
| | |-- ui-components.md (parent page)
| | |-- buttons.md
| | |-- code.md
| | |-- labels.md
| | |-- tables.md
| | +-- typography.md
| |
| |-- utilities
| | |-- utilities.md (parent page)
| | |-- color.md
| | |-- layout.md
| | |-- responsive-modifiers.md
| | +-- typography.md
| |
| |-- (other md files, pages with no children)
| +-- ..