Start on docs generation

.travis.yml

@@ -8,12 +8,19 @@ script:
 after_success:
   - yarn build
 deploy:
-  provider: npm
-  email: rwwagner90@gmail.com
-  skip_cleanup: true
-  api_key:
-    secure: ckPBsSp3sChWtwpDTRW6JSmKMCGpNPxBJaeAXGEeVesSSWqZ2WMWDPSnc85/9/xxAu5jXzDiHotF90wQG9QpZbqHTnJXirjb8dLRJ3fpgUBbLGAcE2XCAJtuRi35aW7bQjkiUy6M5GDiM9LjUDIpj8HGKSywFSmB5DUGiTBuyAg=
-  on:
-    branch: master
-    tags: true
-    repo: shipshapecode/shepherd
+  - provider: npm
+    email: rwwagner90@gmail.com
+    skip_cleanup: true
+    api_key:
+      secure: ckPBsSp3sChWtwpDTRW6JSmKMCGpNPxBJaeAXGEeVesSSWqZ2WMWDPSnc85/9/xxAu5jXzDiHotF90wQG9QpZbqHTnJXirjb8dLRJ3fpgUBbLGAcE2XCAJtuRi35aW7bQjkiUy6M5GDiM9LjUDIpj8HGKSywFSmB5DUGiTBuyAg=
+    on:
+      branch: master
+      tags: true
+      repo: shipshapecode/shepherd
+  - provider: pages
+    skip-cleanup: true
+    github-token:
+      secure: "mEepiSPDRKYAC4tTk/jXqDQOGRvVi4tdcONlU8U/TCWd3ZYg8BStKO8mQlPSVE7kVo2HTscgo256jvt1ee47P0K0Oawe7eyOvH8E+bYt0bu/LqpbtwfkX95a4MiVWc717kU/AX6lKAU3Ggnhdkw4AII8ZDFr9NLMGiL4bVokki8="
+    keep-history: true
+    on:
+      branch: master

docs/intro.md

@@ -1,6 +1,7 @@
-<link rel="stylesheet" href="/shepherd/dist/css/shepherd-theme-arrows.css" />
-<script src="/shepherd/dist/js/popper.js"></script>
-<script src="/shepherd/dist/js/shepherd.min.js"></script>
+<link rel="stylesheet" href="ocean.css" />
+<link rel="stylesheet" href="/dist/css/shepherd-theme-arrows.css" />
+<script src="/dist/js/popper.js"></script>
+<script src="/dist/js/shepherd.min.js"></script>
 
 ## Shepherd
 

docs/ocean.css

@@ -0,0 +1,74 @@
+/* Ocean Dark Theme */
+/* https://github.com/gavsiu */
+/* Original theme - https://github.com/chriskempson/base16 */
+
+/* Ocean Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #65737e;
+}
+
+/* Ocean Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #bf616a;
+}
+
+/* Ocean Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #d08770;
+}
+
+/* Ocean Yellow */
+.hljs-attribute {
+  color: #ebcb8b;
+}
+
+/* Ocean Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #a3be8c;
+}
+
+/* Ocean Blue */
+.hljs-title,
+.hljs-section {
+  color: #8fa1b3;
+}
+
+/* Ocean Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b48ead;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #2b303b;
+  color: #c0c5ce;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

docs/welcome/css/welcome.css

@@ -5,7 +5,6 @@ html, body {
 body {
   margin: 0;
   background-color: #62c462;
-  background-image: -webkit-linear-gradient(135deg, #62c462, #75beaa);
   background-image: linear-gradient(-45deg, #62c462, #75beaa);
   font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
 
@@ -57,8 +56,7 @@ body {
     .hero-outer .hero-inner h1 {
       padding-top: 10px; }
     .hero-outer .hero-inner > * {
-      -webkit-transition: opacity 0.4s;
-              transition: opacity 0.4s;
+      transition: opacity .4s;
       opacity: 0.3;
       pointer-events: none; }
       body:not(.shepherd-active) .hero-outer .hero-inner > * {

gulpfile.js

@@ -4,6 +4,8 @@ const babel = require('gulp-babel');
 const bump = require('gulp-bump');
 const coffee = require('gulp-coffee');
 const header = require('gulp-header');
+const hljs = require('highlight.js');
+const markdown = require('gulp-markdown');
 const prefixer = require('gulp-autoprefixer');
 const rename = require('gulp-rename');
 const uglify = require('gulp-uglify-es').default;
@@ -59,6 +61,27 @@ gulp.task('css', function() {
     .pipe(gulp.dest(distDir + '/css'));
 });
 
+gulp.task('markdown:docs', () => {
+  gulp.src('./docs/intro.md')
+    .pipe(
+      markdown({
+        highlight: function(code, lang) {
+          if (!lang) {
+            return code;
+          }
+          return hljs.highlight(lang, code).value;
+        }
+      })
+    )
+    .pipe(rename(function(path) {
+      path.extname = '.html';
+    }))
+    .pipe(gulp.dest('./docs/'));
+
+  gulp.src('./node_modules/highlight.js/styles/ocean.css')
+    .pipe(gulp.dest('./docs'));
+});
+
 gulp.task('css:docs', function() {
   gulp.src('./docs/welcome/sass/*.sass')
     .pipe(sass())
@@ -105,5 +128,6 @@ gulp.task('watch', ['js', 'css', 'eager'], function() {
 
 // Defaults
 gulp.task('build', ['js', 'css', 'eager', 'copy-popper']);
+gulp.task('docs', ['css:docs', 'markdown:docs']);
 gulp.task('default', ['build']);
 

package.json

@@ -40,10 +40,12 @@
     "gulp-bump": "^3.1.1",
     "gulp-coffee": "^3.0.2",
     "gulp-header": "^2.0.5",
+    "gulp-markdown": "^2.0.1",
     "gulp-rename": "^1.3.0",
     "gulp-sass": "^4.0.1",
     "gulp-uglify-es": "^1.0.4",
-    "gulp-wrap-umd": "^0.2.1"
+    "gulp-wrap-umd": "^0.2.1",
+    "highlight.js": "^9.12.0"
   },
   "engines": {
     "node": ">= 6.*"