From be0d00cb2a1c42f3deb7b9b0310196639b847a4a Mon Sep 17 00:00:00 2001
From: Patrick Marsceill <patrick.marsceill@gmail.com>
Date: Wed, 8 Nov 2017 11:23:05 -0500
Subject: [PATCH] getting this on GH
---
_config.yml | 7 ++-----
_layouts/default.html | 4 ++--
_sass/layout.scss | 13 +++++++++++--
_sass/navigation.scss | 5 +++--
_sass/search.scss | 3 ++-
assets/js/just-the-docs.js | 4 +++-
docs/search.md | 27 +++++++++++++++++++++++++++
index.md | 6 +++++-
8 files changed, 55 insertions(+), 14 deletions(-)
diff --git a/_config.yml b/_config.yml
index 222a9ee1..218ba9f5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -26,10 +26,7 @@ sass:
permalink: pretty
exclude: ["node_modules/", "*.gemspec", "Gemfile", "Gemfile.lock", "package.json", "script/", "LICENSE.txt", "lib/", "bin/"]
+# Aux links for the upper right navigation
aux_links:
- GitHub:
+ "View it on GitHub":
- "//github.com/pmarsceill/just-the-docs"
- "Support link":
- - "//google.com/turds"
- "Another link":
- - "//yahoo.com"
diff --git a/_layouts/default.html b/_layouts/default.html
index e8c090e7..8cd41d4a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -25,9 +25,9 @@
<div class="js-search-results search-results-wrap"></div>
</div>
{% if site.aux_links != nil %}
- <ul class="list-style-none text-small">
+ <ul class="list-style-none text-small mt-2 js-aux-nav aux-nav">
{% for link in site.aux_links %}
- <li class="d-inline-block{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
+ <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
{% endfor %}
</ul>
{% endif %}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 3124b66b..b83cf8eb 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -73,12 +73,21 @@
}
.page-header {
- border-bottom: $border $border-color;
+ background-color: $grey-lt-000;
@include mq(md) {
- .main-content {
+ background-color: $white;
+ border-bottom: $border $border-color;
+
+ }
+
+ .main-content {
+ padding-top: 0;
+
+ @include mq(md) {
display: flex;
justify-content: space-between;
+ padding-top: $sp-4;
}
}
}
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 9e76e5a0..6eb972f3 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -23,7 +23,7 @@
list-style: none;
@include mq(md) {
- margin-top: $sp-8;
+ margin-top: $sp-10;
}
}
@@ -71,7 +71,8 @@
// Small screen nav
-.main-nav {
+.main-nav,
+.aux-nav {
display: none;
&.nav-open {
diff --git a/_sass/search.scss b/_sass/search.scss
index f57e5be6..96d9bb57 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -9,6 +9,7 @@
position: relative;
z-index: 99;
display: block;
+ flex-grow: 1;
padding-top: $sp-1;
padding-bottom: $gutter-spacing / 2;
}
@@ -35,7 +36,7 @@
}
.search-input {
- width: 200px;
+ width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
border-top: 0;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index ec68f915..cc2ec48d 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -11,6 +11,7 @@ function removeEvent(el, type, handler) {
function toggleNav(){
const nav = document.querySelector('.js-main-nav');
+ const auxNav = document.querySelector('.js-aux-nav');
const navTrigger = document.querySelector('.js-main-nav-trigger');
addEvent(navTrigger, 'click', function(){
@@ -18,6 +19,7 @@ function toggleNav(){
var textToggle = navTrigger.getAttribute('data-text-toggle');
nav.classList.toggle('nav-open');
+ auxNav.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
@@ -30,7 +32,7 @@ function toggleNav(){
function initSearch() {
var index = lunr(function () {
this.ref('id');
- this.field('title');
+ this.field('title', { boost: 20 });
this.field('content');
this.field('url');
});
diff --git a/docs/search.md b/docs/search.md
index 563793cf..cdb85713 100644
--- a/docs/search.md
+++ b/docs/search.md
@@ -12,4 +12,31 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte
- Page content
- Page URL
+## Setup search
+
+Before you can use search, you must initialize the feature by running this
+rake command that comes with the `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
+root of your Jekyll site with this content:
+
+```{% raw %}
+---
+---
+{
+ {% for page in site.html_pages %}"{{ 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 | xml_escape }}"
+ }{% if forloop.last %}{% else %},
+ {% endif %}{% endfor %}
+}{% endraw %}
+```
+
You can modify this by modifying the forloop in `search-data.json` and the javascript in `just-the-docs.js` on line 30.
diff --git a/index.md b/index.md
index bb0c2298..bb7e03dc 100644
--- a/index.md
+++ b/index.md
@@ -6,7 +6,7 @@ nav_order: 1
# Focus on writing good documentation
-{: .fs-9 .mb-md-8 :}
+{: .fs-9 }
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 }
@@ -32,6 +32,10 @@ gem "just-the-docs"
```yaml
theme: "just-the-docs"
```
+3. _Optional:_ Initialize search data (creates `search-data.json`)
+```bash
+$ bundle exec just-the-docs rake search:init
+```
3. Run you local Jekyll server
```bash
$ jekyll serve
--
GitLab