Merge pull request #13 from pmarsceill/add-ci

Add CI for testing

.stylelintrc.json

@@ -1,4 +1,7 @@
 {
+  "ignoreFiles" : [
+    "assets/css/just-the-docs.scss"
+  ],
   "extends": [
     "stylelint-config-primer"
   ]

.travis.yml

@@ -0,0 +1,13 @@
+language: ruby
+rvm:
+  - 2.3.0
+env:
+  - TRAVIS_NODE_VERSION="9.3.0"
+
+install:
+  - npm install
+  - bundle install
+
+script:
+  - npm run test
+  - bundle exec jekyll build

README.md

@@ -1,6 +1,6 @@
 # Just the Docs
 
-A nice looking, high customizable, responsive Jekyll theme for documention with built-in search. Easily hosted on GitHub pages.
+A nice looking, high customizable, responsive Jekyll theme for documentation with built-in search. Easily hosted on GitHub pages.
 
 ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
 
@@ -35,6 +35,13 @@ Or install it yourself as:
 
 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/).
+
 ## Development
 
 To set up your environment to develop this theme, run `bundle install`.
@@ -43,16 +50,6 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 
 When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
 
-
-### When your changes are ready:
-
-- Open a [Pull Request](https://github.com/pmarsceill/just-the-docs/pulls)
-- Await code review
-- Bump the version number in `just-the-docs.gemspec`
-- Run `script/build` to package the gem
-- Run `gem push just-the-docs-<version>.gem` to publish the gem to Rubygems.org
-
 ## License
 
 The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-

_config.yml

@@ -15,7 +15,7 @@
 # in the templates via {{ site.myvariable }}.
 title: Just the Docs
 description: A Jekyll theme for documentation
-baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
+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
 
 sass:

_layouts/about.html

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

_layouts/default.html

@@ -5,7 +5,7 @@
 
   <div class="page-wrap">
     <div class="side-bar">
-      <a href="{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
+      <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
       <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
       <div class="navigation main-nav js-main-nav">
         {% include nav.html %}
@@ -19,7 +19,7 @@
         <div class="main-content pb-0">
           <div class="search js-search">
             <div class="search-input-wrap">
-              <input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+              <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>
@@ -38,7 +38,7 @@
           {% if page.parent != nil and page.parent != page.title %}
             <nav class="breadcrumb-nav">
               <ol class="breadcrumb-nav-list">
-                <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}{{ page.parent | slugify }}">{{ page.parent }}</a></li>
+                <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
                 <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
               </ol>
             </nav>

_layouts/home.html

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

_sass/content.scss

@@ -5,8 +5,7 @@
 
 .page-content {
   ul,
-  ol,
+  ol {
-  dl {
     padding-left: 1.5em;
   }
 
@@ -64,4 +63,27 @@
   h1:first-of-type {
     margin-top: 0.5em;
   }
+
+  dl {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+  }
+
+  dt,
+  dd {
+    margin: 0.25em 0;
+  }
+
+  dt {
+    text-align: right;
+
+    &::after {
+      content: ":";
+    }
+  }
+
+  dd {
+    margin-left: 1em;
+    font-weight: 500;
+  }
 }

_sass/labels.scss

@@ -12,9 +12,9 @@
   margin-right: $sp-1;
   margin-left: $sp-1;
   color: $white;
+  text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
-  text-transform: uppercase;
   @include fs-2;
 }
 

_sass/layout.scss

@@ -17,13 +17,15 @@
 
 .side-bar {
   z-index: 100;
+  display: flex;
+  flex-wrap: wrap;
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
   background-color: $grey-lt-000;
 
   @include mq(md) {
+    flex-wrap: nowrap;
     position: absolute;
-    display: flex;
     width: $nav-width + 16px;
     height: 100%;
     padding-top: $gutter-spacing * 2;
@@ -107,14 +109,13 @@
 
 .navigation {
   @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
     padding-top: $sp-8;
+    overflow-y: auto;
+    flex: 1 1 auto;
   }
 }
 
+// stylelint-disable selector-no-type
 body {
   position: relative;
   padding-bottom: $sp-10;
@@ -124,12 +125,18 @@ body {
     padding-bottom: 0;
   }
 }
+// stylelint-enable selector-no-type
 
 .site-footer {
   position: absolute;
-  bottom: $sp-3;
+  bottom: 0;
+  padding-top: $sp-4;
+  padding-bottom: $sp-4;
 
   @include mq(md) {
-    right: 0;
+    position: static;
+    align-self: flex-end;
+    justify-self: end;
+    background-color: $grey-lt-000;
   }
 }

_sass/navigation.scss

@@ -4,18 +4,16 @@
 
 .site-title {
   display: block;
-  flex-grow: 1;
+  flex: 1 1 auto;
-  flex-shrink: 1;
-  flex-basis: auto;
   background-color: $grey-lt-000;
 
   @include mq(md) {
     position: absolute;
     top: 0;
     right: 0;
+    z-index: 101;
     height: 60px;
     padding-top: $sp-4;
-    z-index: 101;
     box-shadow: inset 0 -1px 0 $border-color;
   }
 }
@@ -27,7 +25,7 @@
   list-style: none;
 
   @include mq(md) {
-    margin-top: $sp-10;
+    margin-top: 0;
   }
 }
 
@@ -91,16 +89,6 @@
   }
 }
 
-.side-bar {
-  display: flex;
-  flex-wrap: wrap;
-
-  @include mq(md) {
-    display: block;
-    overflow-y: auto;
-  }
-}
-
 .navigation-list-toggle {
   position: absolute;
   right: $sp-4;

_sass/search.scss

@@ -7,10 +7,11 @@
   z-index: 99;
   display: none;
   flex-grow: 1;
-  padding-bottom: $gutter-spacing / 2;
-  background-color: $white;
   padding: $sp-2;
   margin-bottom: $sp-3;
+  background-color: $white;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
 
   @include mq(md) {
     display: block;
@@ -20,6 +21,7 @@
     padding-left: 0;
     margin-bottom: 0;
     background-color: transparent;
+    box-shadow: none;
   }
 
   &.nav-open {
@@ -65,6 +67,16 @@
       fill: $purple-000;
     }
   }
+
+  @include fs-5;
+
+  @include mq(sm) {
+    @include fs-3;
+  }
+
+  @include mq(md) {
+    @include fs-2;
+  }
 }
 
 .search-icon {

_sass/support/mixins/_layout.scss

@@ -15,20 +15,22 @@
     @media (min-width: rem($value)) {
       @content;
     }
-  } @else {
+  }
+
+  @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
-        + "Please make sure it is defined in `$media-queries` map.";
+      + "Please make sure it is defined in `$media-queries` map.";
   }
 }
 
 // Responsive container
 
 @mixin container {
-  padding-left: $gutter-spacing-sm;
   padding-right: $gutter-spacing-sm;
+  padding-left: $gutter-spacing-sm;
 
   @include mq(md) {
-    padding-left: $gutter-spacing;
     padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
   }
 }

docs/search.md

@@ -23,7 +23,7 @@ $ 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:
+`assets/js/` of your Jekyll site with this content:
 
 ```{% raw %}
 ---
@@ -39,4 +39,4 @@ root of your Jekyll site with this content:
 }{% endraw %}
 ```
 
-You can modify this by modifying the forloop in `search-data.json` and the javascript in `just-the-docs.js` on line 30.
+_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)._

index.md

@@ -2,6 +2,7 @@
 layout: default
 title: Home
 nav_order: 1
+permalink: /
 ---
 
 

just-the-docs.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.1.3"
+  spec.version       = "0.1.5"
   spec.authors       = ["Patrick Marsceill"]
   spec.email         = ["patrick.marsceill@gmail.com"]
 
@@ -14,7 +14,7 @@ Gem::Specification.new do |spec|
   spec.executables   << 'just-the-docs'
 
   spec.add_runtime_dependency "jekyll", "~> 3.3"
+  spec.add_runtime_dependency "rake", "~> 10.0"
 
   spec.add_development_dependency "bundler", "~> 1.12"
-  spec.add_development_dependency "rake", "~> 10.0"
 end

lib/tasks/search.rake

@@ -2,6 +2,7 @@ namespace :search do
   desc 'Generate the files needed for search functionality'
   task :init do
     puts 'Creating search data json file...'
+    mkdir_p 'assets/js'
     touch 'assets/js/search-data.json'
     content = %Q[{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\\', ' ' }}]
     puts 'Done.'
@@ -15,7 +16,8 @@ namespace :search do
     "id": "{{ forloop.index0 }}",
     "title": "{{ page.title | xml_escape }}",
     "content": "'+content+'",
-    "url": "{{ page.url | xml_escape }}"
+    "url": "{{ page.url | absolute_url | xml_escape }}",
+    "relUrl": "{{ page.url | xml_escape }}"
   }{% if forloop.last %}{% else %},
   {% endif %}{% endfor %}
 }'

package.json

@@ -10,5 +10,8 @@
     "stylelint": "^7.9.0",
     "stylelint-config-primer": "^1.4.0"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "scripts": {
+    "test": "stylelint '**/*.scss'"
+  }
 }