From bb3297e0b936cc2144cafeaddb855c84380d32dd Mon Sep 17 00:00:00 2001 From: Andrew Tomaka Date: Mon, 12 Oct 2015 12:34:29 -0400 Subject: [PATCH] Initial commit --- .bowerrc | 3 + .editorconfig | 10 ++ .gitignore | 6 + .jshintrc | 19 +++ .yo-rc.json | 10 ++ Gruntfile.coffee | 162 ++++++++++++++++++++++++ bower.json | 8 ++ css/source/theme.scss | 53 ++++++++ css/theme.css | 267 ++++++++++++++++++++++++++++++++++++++++ js/loadhtmlslides.js | 44 +++++++ package.json | 24 ++++ resources/.gitkeep | 1 + slides/index.md | 4 + slides/list.json | 1 + templates/_index.html | 88 +++++++++++++ templates/_section.html | 5 + 16 files changed, 705 insertions(+) create mode 100644 .bowerrc create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 .yo-rc.json create mode 100644 Gruntfile.coffee create mode 100644 bower.json create mode 100644 css/source/theme.scss create mode 100644 css/theme.css create mode 100644 js/loadhtmlslides.js create mode 100644 package.json create mode 100644 resources/.gitkeep create mode 100644 slides/index.md create mode 100644 slides/list.json create mode 100644 templates/_index.html create mode 100644 templates/_section.html diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..69fad35 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "bower_components" +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0ea0cc4 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6065d09 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +bower_components +dist +*.log +.sass-cache +index.html diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..855a9ef --- /dev/null +++ b/.jshintrc @@ -0,0 +1,19 @@ +{ + "esnext": true, + "bitwise": true, + "camelcase": true, + "curly": true, + "eqeqeq": true, + "immed": true, + "indent": 4, + "latedef": true, + "newcap": true, + "noarg": true, + "quotmark": "single", + "undef": true, + "unused": true, + "strict": true, + "trailing": true, + "smarttabs": true, + "white": true +} diff --git a/.yo-rc.json b/.yo-rc.json new file mode 100644 index 0000000..2ce81ac --- /dev/null +++ b/.yo-rc.json @@ -0,0 +1,10 @@ +{ + "generator-reveal": { + "presentationTitle": "Let's Talk APIs", + "packageVersion": "0.0.0", + "useSass": true, + "deployToGithubPages": true, + "githubUsername": "atomaka", + "githubRepository": "lets-talk-apis" + } +} \ No newline at end of file diff --git a/Gruntfile.coffee b/Gruntfile.coffee new file mode 100644 index 0000000..1431948 --- /dev/null +++ b/Gruntfile.coffee @@ -0,0 +1,162 @@ +# Generated on 2015-10-12 using generator-reveal 0.5.3 +module.exports = (grunt) -> + + grunt.initConfig + + watch: + + livereload: + options: + livereload: true + files: [ + 'index.html' + 'slides/{,*/}*.{md,html}' + 'js/*.js' + 'css/*.css' + 'resources/**' + ] + + index: + files: [ + 'templates/_index.html' + 'templates/_section.html' + 'slides/list.json' + ] + tasks: ['buildIndex'] + + coffeelint: + files: ['Gruntfile.coffee'] + tasks: ['coffeelint'] + + jshint: + files: ['js/*.js'] + tasks: ['jshint'] + + sass: + files: ['css/source/theme.scss'] + tasks: ['sass'] + + sass: + + theme: + files: + 'css/theme.css': 'css/source/theme.scss' + + connect: + + livereload: + options: + port: 9000 + # Change hostname to '0.0.0.0' to access + # the server from outside. + hostname: 'localhost' + base: '.' + open: true + livereload: true + + coffeelint: + + options: + indentation: + value: 4 + max_line_length: + level: 'ignore' + + all: ['Gruntfile.coffee'] + + jshint: + + options: + jshintrc: '.jshintrc' + + all: ['js/*.js'] + + copy: + + dist: + files: [{ + expand: true + src: [ + 'slides/**' + 'bower_components/**' + 'js/**' + 'css/*.css' + 'resources/**' + ] + dest: 'dist/' + },{ + expand: true + src: ['index.html'] + dest: 'dist/' + filter: 'isFile' + }] + + + buildcontrol: + + options: + dir: 'dist' + commit: true + push: true + message: 'Built from %sourceCommit% on branch %sourceBranch%' + pages: + options: + remote: 'git@github.com:atomaka/lets-talk-apis.git' + branch: 'gh-pages' + + + + # Load all grunt tasks. + require('load-grunt-tasks')(grunt) + + grunt.registerTask 'buildIndex', + 'Build index.html from templates/_index.html and slides/list.json.', + -> + indexTemplate = grunt.file.read 'templates/_index.html' + sectionTemplate = grunt.file.read 'templates/_section.html' + slides = grunt.file.readJSON 'slides/list.json' + + html = grunt.template.process indexTemplate, data: + slides: + slides + section: (slide) -> + grunt.template.process sectionTemplate, data: + slide: + slide + grunt.file.write 'index.html', html + + grunt.registerTask 'test', + '*Lint* javascript and coffee files.', [ + 'coffeelint' + 'jshint' + ] + + grunt.registerTask 'serve', + 'Run presentation locally and start watch process (living document).', [ + 'buildIndex' + 'sass' + 'connect:livereload' + 'watch' + ] + + grunt.registerTask 'dist', + 'Save presentation files to *dist* directory.', [ + 'test' + 'sass' + 'buildIndex' + 'copy' + ] + + + grunt.registerTask 'deploy', + 'Deploy to Github Pages', [ + 'dist' + 'buildcontrol' + ] + + + # Define default task. + grunt.registerTask 'default', [ + 'test' + 'serve' + ] diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..f85d462 --- /dev/null +++ b/bower.json @@ -0,0 +1,8 @@ +{ + "name": "let-s-talk-apis", + "version": "0.0.0", + "dependencies": { + "reveal.js": "~3.1.0", + "highlightjs": "~8.5.0" + } +} diff --git a/css/source/theme.scss b/css/source/theme.scss new file mode 100644 index 0000000..7c4a1ac --- /dev/null +++ b/css/source/theme.scss @@ -0,0 +1,53 @@ +/** + * Black theme for reveal.js. This is the opposite of the 'white' theme. + * + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + */ + + // This file has been copied over from + // ../../bower_components/reveal.js/css/theme/source/black.scss + + // See ../../bower_components/reveal.js/css/theme/README.md + // for further explanations on how to create a custom reveal.js theme. + +// Default mixins and settings ----------------- +@import "../../bower_components/reveal.js/css/theme/template/mixins"; +@import "../../bower_components/reveal.js/css/theme/template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(../bower_components/reveal.js/lib/font/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../../bower_components/reveal.js/css/theme/template/settings.scss) +$backgroundColor: #222; + +$mainColor: #fff; +$headingColor: #fff; + +$mainFontSize: 38px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #42affa; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +section.has-light-background { + &, h1, h2, h3, h4, h5, h6 { + color: #222; + } +} + +// Theme template ------------------------------ +@import "../../bower_components/reveal.js/css/theme/template/theme"; +// --------------------------------------------- diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000..f5373b8 --- /dev/null +++ b/css/theme.css @@ -0,0 +1,267 @@ +@import url(../bower_components/reveal.js/lib/font/source-sans-pro/source-sans-pro.css); +/** + * Black theme for reveal.js. This is the opposite of the 'white' theme. + * + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + */ +section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { + color: #222; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #222; + background-color: #222; } + +.reveal { + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 38px; + font-weight: normal; + color: #fff; } + +::selection { + color: #fff; + background: #bee4fd; + text-shadow: none; } + +.reveal .slides > section, .reveal .slides > section > section { + line-height: 1.3; + font-weight: inherit; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { + margin: 0 0 20px 0; + color: #fff; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-weight: 600; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 2.5em; } + +.reveal h2 { + font-size: 1.6em; } + +.reveal h3 { + font-size: 1.3em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } + +.reveal blockquote p:first-child, .reveal blockquote p:last-child { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; + background: #3F3F3F; + color: #DCDCDC; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.reveal table th[align="center"], .reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], .reveal table td[align="right"] { + text-align: right; } + +.reveal table tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #42affa; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #8dcffc; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #068ee9; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } + +.reveal a img { + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + transition: all 0.15s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #42affa; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #42affa; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #42affa; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #42affa; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #42affa; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #8dcffc; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #8dcffc; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #8dcffc; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #8dcffc; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #42affa; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #42affa; } diff --git a/js/loadhtmlslides.js b/js/loadhtmlslides.js new file mode 100644 index 0000000..aad46f3 --- /dev/null +++ b/js/loadhtmlslides.js @@ -0,0 +1,44 @@ +// Modified from markdown.js from Hakim to handle external html files +(function () { + /*jslint loopfunc: true, browser: true*/ + /*globals alert*/ + 'use strict'; + + var querySlidingHtml = function () { + var sections = document.querySelectorAll('[data-html]'), + section, j, jlen; + + for (j = 0, jlen = sections.length; j < jlen; j++) { + section = sections[j]; + + if (section.getAttribute('data-html').length) { + + var xhr = new XMLHttpRequest(), + url = section.getAttribute('data-html'), + cb = function () { + if (xhr.readyState === 4) { + if ( + (xhr.status >= 200 && xhr.status < 300) || + xhr.status === 0 // file protocol yields status code 0 (useful for local debug, mobile applications etc.) + ) { + section.innerHTML = xhr.responseText; + } else { + section.outerHTML = '
ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + '. Check your browser\'s JavaScript console for more details.

'; + } + } + }; + + xhr.onreadystatechange = cb; + + xhr.open('GET', url, false); + try { + xhr.send(); + } catch (e) { + alert('Failed to get file' + url + '.' + e); + } + } + } + }; + + querySlidingHtml(); +})(); diff --git a/package.json b/package.json new file mode 100644 index 0000000..5c6c840 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "let-s-talk-apis", + "version": "0.0.0", + "private": true, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-sass": "^0.14.0", + "grunt-contrib-connect": "^0.10.1", + "grunt-contrib-watch": "^0.6.1", + "grunt-contrib-copy": "^0.8.0", + "grunt-contrib-jshint": "^0.11.2", + "load-grunt-tasks": "^3.2.0", + "grunt-build-control": "^0.5.0", + "grunt-coffeelint": "0.0.13", + "coffeelint": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0", + "npm": ">=1.3.7" + }, + "scripts": { + "test": "grunt test" + } +} diff --git a/resources/.gitkeep b/resources/.gitkeep new file mode 100644 index 0000000..dcfea5d --- /dev/null +++ b/resources/.gitkeep @@ -0,0 +1 @@ +Used to store static assets \ No newline at end of file diff --git a/slides/index.md b/slides/index.md new file mode 100644 index 0000000..28a7953 --- /dev/null +++ b/slides/index.md @@ -0,0 +1,4 @@ + +# Let's Talk APIs + +Andrew Tomaka / [@atomaka](https://twitter.com/atomaka) diff --git a/slides/list.json b/slides/list.json new file mode 100644 index 0000000..7aade68 --- /dev/null +++ b/slides/list.json @@ -0,0 +1 @@ +["index.md"] diff --git a/templates/_index.html b/templates/_index.html new file mode 100644 index 0000000..466a80e --- /dev/null +++ b/templates/_index.html @@ -0,0 +1,88 @@ + + + + + + + Let's Talk APIs + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + <% _.forEach(slides, function(slide) { %> + <% if (!_.isArray(slide)) { %> + <%= section(slide) %> + <% } %> + <% if (_.isArray(slide)) { %> +
+ <% _.forEach(slide, function(verticalslide) { %> + <%= section(verticalslide) %> + <% }); %> +
+ <% } %> + <% }); %> +
+ +
+ + + + + + + diff --git a/templates/_section.html b/templates/_section.html new file mode 100644 index 0000000..78cb3d4 --- /dev/null +++ b/templates/_section.html @@ -0,0 +1,5 @@ +<% if (!_.isString(slide) && !_.isArray(slide) && _.isObject(slide)) { %> +
<% if (_.isString(slide.filename)) { %>data-<% if (slide.filename.indexOf('.html') !== -1) { %>html<% } else { %>markdown<% }%>="slides/<%= slide.filename %>"<% } %>>
+<% } %><% if (_.isString(slide)) { %> +
html<% } else { %>markdown<% }%>="slides/<%= slide %>">
+<% } %>