Merge pull request just-the-docs#19 from pmarsceill/task-lists

Task lists

Author: pmarsceill

_config.yml

@@ -21,6 +21,9 @@ baseurl: "/just-the-docs/" # the subpath of your site, e.g. /blog
 permalink: pretty
 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
+
 # Aux links for the upper right navigation
 aux_links:
   "Just the Docs on GitHub":

_includes/head.html

@@ -4,7 +4,9 @@
 
   <title>{{ page.title }} - {{ site.title }}</title>
   <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>
+  {% endif %}
   <script type="text/javascript" src="{{ "/assets/js/just-the-docs.js" | absolute_url }}"></script>
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

_layouts/default.html

@@ -16,16 +16,18 @@
     </div>
     <div class="main-content-wrap">
       <div class="page-header">
-        <div class="main-content pb-0">
+        <div class="main-content">
+          {% 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">
               <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>
           </div>
+          {% endif %}
           {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small mt-md-2 pb-4 pb-md-0 js-aux-nav aux-nav">
+            <ul class="list-style-none text-small mt-md-1 mb-md-1 pb-4 pb-md-0 js-aux-nav aux-nav">
               {% for link in site.aux_links %}
                 <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
               {% endfor %}

_sass/content.scss

@@ -56,6 +56,23 @@
     }
   }
 
+  .task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+  }
+
   hr + * {
     margin-top: 0;
   }

_sass/layout.scss

@@ -79,17 +79,18 @@
 
   @include mq(md) {
     background-color: $white;
-    border-bottom: $border $border-color;
-
   }
 
   .main-content {
     padding-top: 0;
 
     @include mq(md) {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
+      height: 60px;
       padding-top: $sp-4;
+      padding-bottom: $sp-4;
+      border-bottom: $border $border-color;
     }
   }
 }

_sass/navigation.scss

@@ -14,7 +14,7 @@
     z-index: 101;
     height: 60px;
     padding-top: $sp-4;
-    box-shadow: inset 0 -1px 0 $border-color;
+    border-bottom: $border $border-color;
   }
 }
 

_sass/search.scss

@@ -17,7 +17,7 @@
     display: block;
     padding-top: $sp-1;
     padding-right: 0;
-    padding-bottom: $sp-4;
+    padding-bottom: 0;
     padding-left: 0;
     margin-bottom: 0;
     background-color: transparent;

assets/js/just-the-docs.js

@@ -155,7 +155,9 @@ function initSearch() {
 
 function ready(){
   toggleNav();
-  initSearch();
+  if (typeof lunr !== 'undefined') {
+    initSearch();
+  }
 }
 
 // in case the document is already rendered

docs/configuration.md

@@ -0,0 +1,25 @@
+---
+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"
+```

docs/customization.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Customization
-nav_order: 5
+nav_order: 6
 ---
 
 # Customization

docs/index-test.md

@@ -94,6 +94,12 @@ end
   - 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)

docs/navigation-structure.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Navigation Structure
-nav_order: 4
+nav_order: 5
 ---
 
 # Navigation Structure

docs/search.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Search
-nav_order: 6
+nav_order: 7
 ---
 
 # Search
@@ -12,7 +12,9 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte
 - Page content
 - Page URL
 
-## Setup search
+## Set up search
+
+### 1. 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`
@@ -41,3 +43,12 @@ your search index. Alternatively, you can create the file manually in the
 ```
 
 _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
+
+In your site's `_config.yml` enable search:
+
+```yml
+# Enable or disable the site search
+search_enabled: true
+```

docs/ui-components/code.md

@@ -2,7 +2,7 @@
 layout: default
 title: Code
 parent: UI Components
-nav_order: 5
+nav_order: 6
 ---
 
 # Code

docs/ui-components/lists.md

@@ -0,0 +1,98 @@
+---
+layout: default
+title: Lists
+parent: UI Components
+nav_order: 5
+---
+
+# Lists
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+Most lists can be rendered with pure markdown...
+
+## Unordered list
+<div class="code-example" markdown="1">
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+</div>
+```markdown
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+```
+
+
+## Ordered list
+<div class="code-example" markdown="1">
+1. Item 1
+1. Item 2
+1. Item 3
+</div>
+  ```markdown
+1. Item 1
+1. Item 2
+1. Item 3
+  ```
+## Task list
+
+<div class="code-example" markdown="1">
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+</div>
+  ```markdown
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+  ```
+
+## Definition list
+
+Definition lists require HTML syntax and aren't supported with the GitHub flavored markdown compiler.
+
+<div class="code-example" markdown="1">
+<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>
+</div>
+```html
+<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>
+```
+

docs/ui-components/ui-components.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: UI Components
-nav_order: 2
+nav_order: 3
 has_children: true
 parent: UI Components
 permalink: /ui-components

docs/utilities/utilities.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Utilities
-nav_order: 3
+nav_order: 4
 parent: Utilities
 has_children: true
 permalink: /utilities