├── .gitignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── code ├── Vagrantfile ├── deploy.sh ├── public │ ├── composer.json │ ├── index.php │ └── status.php └── scripts │ ├── cloudwatch.conf │ ├── deploy.sh │ ├── httpd.conf │ ├── latest.tar.bz2 │ └── provision.sh └── slides ├── Gruntfile.js ├── LICENSE ├── css ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── reveal.min.css ├── reveal.scss └── theme │ ├── 18f.css │ ├── source │ └── 18f.scss │ └── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss ├── demo.html ├── fonts ├── 18FNimbusSansL-bold.ttf ├── 18FNimbusSansL-italic.ttf ├── 18FNimbusSansL-regular.ttf └── 18FNimbusSansL.css ├── images ├── 18F.svg ├── chubby.jpg ├── cloudwatch_logs.png ├── ha_aws_system.graffle ├── ha_aws_system.png ├── nosql.png └── oh_noes.png ├── index.html ├── js ├── reveal.js └── reveal.min.js ├── lib ├── css │ └── zenburn.css ├── font │ ├── league-gothic │ │ ├── LICENSE │ │ ├── league-gothic.css │ │ ├── league-gothic.eot │ │ ├── league-gothic.ttf │ │ └── league-gothic.woff │ └── source-sans-pro │ │ ├── LICENSE │ │ ├── source-sans-pro-italic.eot │ │ ├── source-sans-pro-italic.ttf │ │ ├── source-sans-pro-italic.woff │ │ ├── source-sans-pro-regular.eot │ │ ├── source-sans-pro-regular.ttf │ │ ├── source-sans-pro-regular.woff │ │ ├── source-sans-pro-semibold.eot │ │ ├── source-sans-pro-semibold.ttf │ │ ├── source-sans-pro-semibold.woff │ │ ├── source-sans-pro-semibolditalic.eot │ │ ├── source-sans-pro-semibolditalic.ttf │ │ ├── source-sans-pro-semibolditalic.woff │ │ └── source-sans-pro.css └── js │ ├── classList.js │ ├── head.min.js │ └── html5shiv.js ├── package.json ├── plugin ├── highlight │ └── highlight.js ├── markdown │ ├── example.html │ ├── example.md │ ├── markdown.js │ └── marked.js ├── math │ └── math.js ├── multiplex │ ├── client.js │ ├── index.js │ ├── master.js │ └── package.json ├── notes-server │ ├── client.js │ ├── index.js │ └── notes.html ├── notes │ ├── notes.html │ └── notes.js ├── print-pdf │ └── print-pdf.js ├── search │ └── search.js └── zoom-js │ └── zoom.js ├── test ├── examples │ ├── assets │ │ ├── image1.png │ │ └── image2.png │ ├── barebones.html │ ├── embedded-media.html │ ├── math.html │ ├── slide-backgrounds.html │ └── slide-transitions.html ├── qunit-1.12.0.css ├── qunit-1.12.0.js ├── test-markdown-element-attributes.html ├── test-markdown-element-attributes.js ├── test-markdown-slide-attributes.html ├── test-markdown-slide-attributes.js ├── test-markdown.html ├── test-markdown.js ├── test-pdf.html ├── test-pdf.js ├── test.html └── test.js ├── unit2.html ├── unit3.html ├── unit4.html ├── unit5.html └── unit6.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | *.iml 3 | *.iws 4 | *.eml 5 | out/ 6 | .DS_Store 7 | .svn 8 | log/*.log 9 | tmp/** 10 | node_modules/ 11 | .sass-cache 12 | css/reveal.min.css 13 | js/reveal.min.js 14 | 15 | *.tfstate 16 | *.tfstate.backup 17 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Welcome! 2 | 3 | We're so glad you're thinking about contributing to an 18F open source project! If you're unsure about anything, just ask -- or submit the issue or pull request anyway. The worst that can happen is you'll be politely asked to change something. We love all friendly contributions. 4 | 5 | We want to ensure a welcoming environment for all of our projects. Our staff follow the [18F Code of Conduct](https://github.com/18F/code-of-conduct/blob/master/code-of-conduct.md) and all contributors should do the same. 6 | 7 | We encourage you to read this project's CONTRIBUTING policy (you are here), its [LICENSE](LICENSE.md), and its [README](README.md). 8 | 9 | If you have any questions or want to read more, check out the [18F Open Source Policy GitHub repository]( https://github.com/18f/open-source-policy), or just [shoot us an email](mailto:18f@gsa.gov). 10 | 11 | ## Public domain 12 | 13 | This project is in the public domain within the United States, and 14 | copyright and related rights in the work worldwide are waived through 15 | the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 16 | 17 | All contributions to this project will be released under the CC0 18 | dedication. By submitting a pull request, you are agreeing to comply 19 | with this waiver of copyright interest. 20 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Public Domain 2 | 3 | As a work of the United States Government, this project is in the 4 | public domain within the United States. 5 | 6 | Additionally, we waive copyright and related rights in the work 7 | worldwide through the CC0 1.0 Universal public domain dedication. 8 | 9 | ## CC0 1.0 Universal Summary 10 | 11 | This is a human-readable summary of the [Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode). 12 | 13 | ### No Copyright 14 | 15 | The person who associated a work with this deed has dedicated the work to 16 | the public domain by waiving all of his or her rights to the work worldwide 17 | under copyright law, including all related and neighboring rights, to the 18 | extent allowed by law. 19 | 20 | You can copy, modify, distribute and perform the work, even for commercial 21 | purposes, all without asking permission. 22 | 23 | ### Other Information 24 | 25 | In no way are the patent or trademark rights of any person affected by CC0, 26 | nor are the rights that other persons may have in the work or in how the 27 | work is used, such as publicity or privacy rights. 28 | 29 | Unless expressly stated otherwise, the person who associated a work with 30 | this deed makes no warranties about the work, and disclaims liability for 31 | all uses of the work, to the fullest extent permitted by applicable law. 32 | When using or citing the work, you should not imply endorsement by the 33 | author or the affirmer. 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Provisioning and Deploying Cloud Native Systems in AWS with Terraform and Shell Scripts. 2 | 3 | A 1-day hands-on training class in which participants will learn: 4 | 5 | * AWS guest network architecture: regions, availability zones, VPCs, subnets, security groups, routes, gateways. 6 | * Some elements of AWS identity and access management: roles, policies. 7 | * How to configure a simple, highly available AWS application environment with AWS autoscaling groups, load balancers, RDS, and CloudWatch. 8 | * Infrastructure-as-Code with AWS and Terraform: How to configure and manage AWS infrastructure using Terraform. 9 | * Very simple automated deployment using shell scripts and an S3 bucket. 10 | * How to manage and access secrets. 11 | * An introduction to architecture for distributed systems. 12 | 13 | The basic infrastructure we build is shown in this system diagram: 14 | 15 | ![system diagram](https://github.com/18F/cloud-native-aws-terraform-workshop/raw/master/slides/images/ha_aws_system.png) 16 | 17 | ### Prerequisites for Workshop Participants 18 | 19 | * You must bring a laptop with support for bash. Linux, MacOS, or Windows 10 with Windows Subsystem for Linux installed are all fine. Alternatively, you can stand up a virtual linux box using a tool such as [VirtualBox](https://www.virtualbox.org/). 20 | * You must be comfortable using the shell / command-line. 21 | * Please install the [AWS CLI](https://aws.amazon.com/cli/), [Terraform](https://www.terraform.io/) BEFORE coming to class. 22 | * Note, you may also be interested in installing [Vagrant](https://www.vagrantup.com/) but this is *optional.* 23 | 24 | ### Running the slides locally 25 | 26 | The workshop is run as a series of slide decks. The decks are written in HTML, and use [reveal.js](http://lab.hakim.se/reveal-js/#/). To view the slides on your local machine, first go to the [slides](slides) directory. Then install `npm` if you don't already have it, and run the following commands: 27 | 28 | ``` 29 | npm install 30 | grunt serve 31 | ``` 32 | 33 | This should run an http server locally and spawn a browser window with the first slide of the workshop. Check out the [reveal.js documentation](https://github.com/hakimel/reveal.js) for more on using reveal.js. 34 | 35 | ### Instructor Preparation 36 | 37 | This workshop is designed to be scheduled as an 8h class, including a 1h lunch break and two further 20m breaks (in other words, if you ran the material without a break, it would take you about 6-7h). 38 | 39 | Because the class requires hands-on coding, we recommend a maximum of 16 participants per instructor, assuming participants who are comfortable with shell scripting and a text editor. If participants aren't familiar editing and running commands at the shell, you will need a lower ratio of students to instructors, and more time. 40 | 41 | We recommend using an empty AWS account for this workshop. Each participant will set up their own VPC in the course of the workshop, and if you've created a new AWS account you will need to submit a request to raise [the default VPC limit of 5 VPCs per region](http://docs.aws.amazon.com/AmazonVPC/latest/UserGuide/VPC_Appendix_Limits.html). This should be done several days in advance of delivering the class. 42 | 43 | The instructor should upload the contents of the [code/scripts](code/scripts) directory to an S3 bucket. The code and slides assume that the S3 bucket is called `jez-cloud-workshop`, but if you're not running this at 18F, you'll want to upload to your own bucket, and you should change all the references to this S3 bucket in the repo. Find them using `grep -R "jez-cloud-workshop" *` 44 | 45 | ### Acknowledgements 46 | 47 | Charity Majors' [blog posts on Terraform](https://charity.wtf/tag/terraform/) proved valuable in preparing this workshop. Thanks Charity. 48 | 49 | ### Public domain 50 | 51 | This project is in the worldwide [public domain](LICENSE.md). As stated 52 | in [CONTRIBUTING](CONTRIBUTING.md): 53 | 54 | > This project is in the public domain within the United States, and copyright 55 | > and related rights in the work worldwide are waived through the [CC0 1.0 56 | > Universal public domain 57 | > dedication](https://creativecommons.org/publicdomain/zero/1.0/). 58 | > 59 | > All contributions to this project will be released under the CC0 dedication. 60 | > By submitting a pull request, you are agreeing to comply with this waiver of 61 | > copyright interest. 62 | 63 | Note that parts of this project have been taken from the [reveal.js][] 64 | repository, and are Copyright (C) 2016 Hakim El Hattab. 65 | 66 | [reveal.js]: https://github.com/hakimel/reveal.js 67 | [18F branding]: https://pages-staging.18f.gov/brand/ 68 | [visual style guide]: https://pages-staging.18f.gov/brand/visual-style/ 69 | -------------------------------------------------------------------------------- /code/Vagrantfile: -------------------------------------------------------------------------------- 1 | # -*- mode: ruby -*- 2 | # vi: set ft=ruby : 3 | 4 | Vagrant.configure("2") do |config| 5 | 6 | config.vm.box = "scotch/box" 7 | config.vm.network "private_network", ip: "192.168.33.10" 8 | config.vm.hostname = "scotchbox" 9 | config.vm.synced_folder ".", "/var/www", :mount_options => ["dmode=777", "fmode=666"] 10 | config.vm.provider "virtualbox" do |v| 11 | v.memory = 1024 12 | v.cpus = 1 13 | end 14 | 15 | # Optional NFS. Make sure to remove other synced_folder line too 16 | #config.vm.synced_folder ".", "/var/www", :nfs => { :mount_options => ["dmode=777","fmode=666"] } 17 | 18 | end 19 | -------------------------------------------------------------------------------- /code/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | tar -cjf latest.tar.bz2 public 4 | MD5=`openssl md5 -binary latest.tar.bz2 | base64` 5 | aws s3 sync scripts s3://jez-cloud-workshop/ 6 | aws s3api put-object --bucket jez-cloud-workshop --key latest.tar.bz2 --body latest.tar.bz2 --metadata md5chksum=$MD5 7 | -------------------------------------------------------------------------------- /code/public/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "require": { 3 | "aws/aws-sdk-php": "^3" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /code/public/index.php: -------------------------------------------------------------------------------- 1 | Hello, World 2 | -------------------------------------------------------------------------------- /code/public/status.php: -------------------------------------------------------------------------------- 1 | "latest", "region" => "us-east-1"]); 9 | $results = $client->getParametersByPath(['Path' => $path, 'WithDecryption' => true]); 10 | foreach ($results['Parameters'] as $parameter) { 11 | $key = str_replace($path, "", $parameter['Name']); 12 | $parameters[$key] = $parameter['Value']; 13 | } 14 | $connection = new PDO("mysql:host=".$parameters['DB_URI'].";dbname=jezworkshop;charset=utf8", "workshop", $parameters['DB_PASSWORD']); 15 | } catch (Exception $e) { 16 | http_response_code(500); 17 | error_log("Couldn't create database connection. Error: ".$e->getMessage()); 18 | } 19 | ?> 20 | -------------------------------------------------------------------------------- /code/scripts/cloudwatch.conf: -------------------------------------------------------------------------------- 1 | [general] 2 | state_file = /var/lib/awslogs/agent-state 3 | 4 | [/var/log/messages] 5 | file = /var/log/messages 6 | log_group_name = /var/log/messages 7 | log_stream_name = {instance_id} 8 | datetime_format = %b %d %H:%M:%S 9 | 10 | [/var/log/secure] 11 | file = /var/log/secure 12 | log_group_name = /var/log/secure 13 | log_stream_name = {instance_id} 14 | datetime_format = %b %d %H:%M:%S 15 | 16 | [/var/log/httpd/error_log] 17 | file = /var/log/httpd/error_log 18 | log_group_name = /var/log/httpd/error_log 19 | log_stream_name = {instance_id} 20 | datetime_format = %a %b %d %H:%M:%S.%u %Y 21 | -------------------------------------------------------------------------------- /code/scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | LATEST_MD5=`aws s3api head-object --bucket jez-cloud-workshop --key latest.tar.bz2 --output text --query '{MD:Metadata}' | cut -f 2` 2 | CURRENT_MD5=`openssl md5 -binary /var/www/latest.tar.bz2 | base64` 3 | if [[ $LATEST_MD5 != $CURRENT_MD5 ]] 4 | then 5 | STAMP=$(date +%Y%m%d%I%M%S) 6 | aws s3 cp s3://jez-cloud-workshop/latest.tar.bz2 /var/www/ 7 | cd /var/www 8 | mkdir $STAMP 9 | tar -xjf latest.tar.bz2 -C$STAMP --strip-components 1 10 | composer install --no-ansi --no-dev --no-interaction --no-progress --no-scripts --optimize-autoloader --working-dir /var/www/$STAMP 11 | ln -sfT $STAMP html 12 | fi 13 | -------------------------------------------------------------------------------- /code/scripts/httpd.conf: -------------------------------------------------------------------------------- 1 | ServerRoot "/etc/httpd" 2 | Listen 80 3 | Include conf.modules.d/*.conf 4 | User apache 5 | Group apache 6 | ServerTokens OS 7 | KeepAlive On 8 | KeepAliveTimeout 60 9 | 10 | 11 | Require all denied 12 | Options FollowSymLinks 13 | AllowOverride None 14 | 15 | 16 | DocumentRoot "/var/www/html" 17 | 18 | 19 | Require all granted 20 | Options +FollowSymLinks -Indexes -ExecCGI -Includes 21 | AllowOverride None 22 | Header always append X-Frame-Options DENY 23 | Header always append X-XSS-Protection 1 24 | Header always append X-Content-Type-Options nosniff 25 | Header always append Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" 26 | Header unset X-Powered-By 27 | 28 | 29 | 30 | DirectoryIndex index.php 31 | 32 | 33 | 34 | Require all denied 35 | 36 | 37 | 38 | Require all denied 39 | 40 | 41 | ErrorLog "logs/error_log" 42 | LogLevel warn 43 | 44 | 45 | LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined 46 | LogFormat "%h %l %u %t \"%r\" %>s %b" common 47 | 48 | 49 | # You need to enable mod_logio.c to use %I and %O 50 | LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio 51 | 52 | 53 | CustomLog "logs/access_log" combined 54 | 55 | 56 | 57 | AllowOverride None 58 | Options None 59 | Require all granted 60 | 61 | 62 | 63 | TypesConfig /etc/mime.types 64 | AddType application/x-compress .Z 65 | AddType application/x-gzip .gz .tgz 66 | AddType text/html .shtml 67 | AddOutputFilter INCLUDES .shtml 68 | 69 | 70 | AddDefaultCharset UTF-8 71 | 72 | 73 | MIMEMagicFile conf/magic 74 | 75 | 76 | EnableSendfile on 77 | IncludeOptional conf.d/*.conf -------------------------------------------------------------------------------- /code/scripts/latest.tar.bz2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/code/scripts/latest.tar.bz2 -------------------------------------------------------------------------------- /code/scripts/provision.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # install dependencies 4 | amazon-linux-extras install lamp-mariadb10.2-php7.2 5 | yum update -y 6 | yum install -y httpd php php-mysqlnd php-mbstring php-bcmath php-xml awslogs 7 | 8 | export HOME=/root 9 | 10 | # configure apache httpd 11 | rm /etc/httpd/conf.modules.d/00-dav.conf /etc/httpd/conf.modules.d/00-proxy.conf /etc/httpd/conf.modules.d/01-cgi.conf /etc/httpd/conf.modules.d/10-h2.conf /etc/httpd/conf.modules.d/10-proxy_h2.conf 12 | sed -i 's/short_open_tag = Off/short_open_tag = On/' /etc/php.ini 13 | aws s3 cp s3://jez-cloud-workshop/httpd.conf /etc/httpd/conf/httpd.conf 14 | rm -rf /var/www/html 15 | groupadd www 16 | usermod -a -G www apache 17 | chown -R ec2-user:www /var/www 18 | find /var/www -type d -exec chmod 2750 {} + 19 | find /var/www -type f -exec chmod 0640 {} + 20 | 21 | # install php composer 22 | wget -O composer-setup.php https://getcomposer.org/installer 23 | php composer-setup.php --quiet 24 | mv composer.phar /usr/local/bin/composer 25 | ln -s /usr/local/bin/composer /usr/bin/composer 26 | 27 | # install cloudwatch 28 | aws s3 cp s3://jez-cloud-workshop/cloudwatch.conf /etc/awslogs/awslogs.conf 29 | systemctl enable awslogsd.service 30 | systemctl start awslogsd 31 | 32 | # configure autodeploy 33 | aws s3 cp s3://jez-cloud-workshop/deploy.sh /home/ec2-user/deploy.sh 34 | chown ec2-user /home/ec2-user/deploy.sh 35 | chmod +x /home/ec2-user/deploy.sh 36 | su ec2-user -c "/home/ec2-user/deploy.sh" 37 | echo "* * * * * /home/ec2-user/deploy.sh" | crontab -u ec2-user - 38 | 39 | # turn on httpd 40 | systemctl enable httpd.service 41 | systemctl start httpd 42 | -------------------------------------------------------------------------------- /slides/Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* global module:false */ 2 | module.exports = function(grunt) { 3 | var port = grunt.option('port') || 8000; 4 | var base = grunt.option('base') || '.'; 5 | 6 | // Project configuration 7 | grunt.initConfig({ 8 | pkg: grunt.file.readJSON('package.json'), 9 | meta: { 10 | banner: 11 | '/*!\n' + 12 | ' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + 13 | ' * http://lab.hakim.se/reveal-js\n' + 14 | ' * MIT licensed\n' + 15 | ' *\n' + 16 | ' * Copyright (C) 2016 Hakim El Hattab, http://hakim.se\n' + 17 | ' */' 18 | }, 19 | 20 | qunit: { 21 | files: [ 'test/*.html' ] 22 | }, 23 | 24 | uglify: { 25 | options: { 26 | banner: '<%= meta.banner %>\n' 27 | }, 28 | build: { 29 | src: 'js/reveal.js', 30 | dest: 'js/reveal.min.js' 31 | } 32 | }, 33 | 34 | sass: { 35 | core: { 36 | files: { 37 | 'css/reveal.css': 'css/reveal.scss', 38 | } 39 | }, 40 | themes: { 41 | files: [ 42 | { 43 | expand: true, 44 | cwd: 'css/theme/source', 45 | src: ['*.scss'], 46 | dest: 'css/theme', 47 | ext: '.css' 48 | } 49 | ] 50 | } 51 | }, 52 | 53 | autoprefixer: { 54 | dist: { 55 | src: 'css/reveal.css' 56 | } 57 | }, 58 | 59 | cssmin: { 60 | compress: { 61 | files: { 62 | 'css/reveal.min.css': [ 'css/reveal.css' ] 63 | } 64 | } 65 | }, 66 | 67 | jshint: { 68 | options: { 69 | curly: false, 70 | eqeqeq: true, 71 | immed: true, 72 | latedef: true, 73 | newcap: true, 74 | noarg: true, 75 | sub: true, 76 | undef: true, 77 | eqnull: true, 78 | browser: true, 79 | expr: true, 80 | globals: { 81 | head: false, 82 | module: false, 83 | console: false, 84 | unescape: false, 85 | define: false, 86 | exports: false 87 | } 88 | }, 89 | files: [ 'Gruntfile.js', 'js/reveal.js' ] 90 | }, 91 | 92 | connect: { 93 | server: { 94 | options: { 95 | port: port, 96 | base: base, 97 | livereload: true, 98 | open: true 99 | } 100 | } 101 | }, 102 | 103 | zip: { 104 | 'reveal-js-presentation.zip': [ 105 | 'index.html', 106 | 'css/**', 107 | 'js/**', 108 | 'lib/**', 109 | 'images/**', 110 | 'plugin/**', 111 | '**.md' 112 | ] 113 | }, 114 | 115 | watch: { 116 | js: { 117 | files: [ 'Gruntfile.js', 'js/reveal.js' ], 118 | tasks: 'js' 119 | }, 120 | theme: { 121 | files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ], 122 | tasks: 'css-themes' 123 | }, 124 | css: { 125 | files: [ 'css/reveal.scss' ], 126 | tasks: 'css-core' 127 | }, 128 | html: { 129 | files: [ '*.html'] 130 | }, 131 | markdown: { 132 | files: [ '*.md' ] 133 | }, 134 | options: { 135 | livereload: true 136 | } 137 | } 138 | 139 | }); 140 | 141 | // Dependencies 142 | grunt.loadNpmTasks( 'grunt-contrib-qunit' ); 143 | grunt.loadNpmTasks( 'grunt-contrib-jshint' ); 144 | grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); 145 | grunt.loadNpmTasks( 'grunt-contrib-uglify' ); 146 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 147 | grunt.loadNpmTasks( 'grunt-sass' ); 148 | grunt.loadNpmTasks( 'grunt-contrib-connect' ); 149 | grunt.loadNpmTasks( 'grunt-autoprefixer' ); 150 | grunt.loadNpmTasks( 'grunt-zip' ); 151 | 152 | // Default task 153 | grunt.registerTask( 'default', [ 'css', 'js' ] ); 154 | 155 | // JS task 156 | grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] ); 157 | 158 | // Theme CSS 159 | grunt.registerTask( 'css-themes', [ 'sass:themes' ] ); 160 | 161 | // Core framework CSS 162 | grunt.registerTask( 'css-core', [ 'sass:core', 'autoprefixer', 'cssmin' ] ); 163 | 164 | // All CSS 165 | grunt.registerTask( 'css', [ 'sass', 'autoprefixer', 'cssmin' ] ); 166 | 167 | // Package presentation to archive 168 | grunt.registerTask( 'package', [ 'default', 'zip' ] ); 169 | 170 | // Serve presentation locally 171 | grunt.registerTask( 'serve', [ 'connect', 'watch' ] ); 172 | 173 | // Run tests 174 | grunt.registerTask( 'test', [ 'jshint', 'qunit' ] ); 175 | 176 | }; 177 | -------------------------------------------------------------------------------- /slides/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2016 Hakim El Hattab, http://hakim.se 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /slides/css/print/paper.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | @media print { 10 | 11 | /* SECTION 1: Set default width, margin, float, and 12 | background. This prevents elements from extending 13 | beyond the edge of the printed page, and prevents 14 | unnecessary background images from printing */ 15 | html { 16 | background: #fff; 17 | width: auto; 18 | height: auto; 19 | overflow: visible; 20 | } 21 | body { 22 | background: #fff; 23 | font-size: 20pt; 24 | width: auto; 25 | height: auto; 26 | border: 0; 27 | margin: 0 5%; 28 | padding: 0; 29 | overflow: visible; 30 | float: none !important; 31 | } 32 | 33 | /* SECTION 2: Remove any elements not needed in print. 34 | This would include navigation, ads, sidebars, etc. */ 35 | .nestedarrow, 36 | .controls, 37 | .fork-reveal, 38 | .share-reveal, 39 | .state-background, 40 | .reveal .progress, 41 | .reveal .backgrounds { 42 | display: none !important; 43 | } 44 | 45 | /* SECTION 3: Set body font face, size, and color. 46 | Consider using a serif font for readability. */ 47 | body, p, td, li, div { 48 | font-size: 20pt!important; 49 | font-family: Georgia, "Times New Roman", Times, serif !important; 50 | color: #000; 51 | } 52 | 53 | /* SECTION 4: Set heading font face, sizes, and color. 54 | Differentiate your headings from your body text. 55 | Perhaps use a large sans-serif for distinction. */ 56 | h1,h2,h3,h4,h5,h6 { 57 | color: #000!important; 58 | height: auto; 59 | line-height: normal; 60 | font-family: Georgia, "Times New Roman", Times, serif !important; 61 | text-shadow: 0 0 0 #000 !important; 62 | text-align: left; 63 | letter-spacing: normal; 64 | } 65 | /* Need to reduce the size of the fonts for printing */ 66 | h1 { font-size: 28pt !important; } 67 | h2 { font-size: 24pt !important; } 68 | h3 { font-size: 22pt !important; } 69 | h4 { font-size: 22pt !important; font-variant: small-caps; } 70 | h5 { font-size: 21pt !important; } 71 | h6 { font-size: 20pt !important; font-style: italic; } 72 | 73 | /* SECTION 5: Make hyperlinks more usable. 74 | Ensure links are underlined, and consider appending 75 | the URL to the end of the link for usability. */ 76 | a:link, 77 | a:visited { 78 | color: #000 !important; 79 | font-weight: bold; 80 | text-decoration: underline; 81 | } 82 | /* 83 | .reveal a:link:after, 84 | .reveal a:visited:after { 85 | content: " (" attr(href) ") "; 86 | color: #222 !important; 87 | font-size: 90%; 88 | } 89 | */ 90 | 91 | 92 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 93 | ul, ol, div, p { 94 | visibility: visible; 95 | position: static; 96 | width: auto; 97 | height: auto; 98 | display: block; 99 | overflow: visible; 100 | margin: 0; 101 | text-align: left !important; 102 | } 103 | .reveal pre, 104 | .reveal table { 105 | margin-left: 0; 106 | margin-right: 0; 107 | } 108 | .reveal pre code { 109 | padding: 20px; 110 | border: 1px solid #ddd; 111 | } 112 | .reveal blockquote { 113 | margin: 20px 0; 114 | } 115 | .reveal .slides { 116 | position: static !important; 117 | width: auto !important; 118 | height: auto !important; 119 | 120 | left: 0 !important; 121 | top: 0 !important; 122 | margin-left: 0 !important; 123 | margin-top: 0 !important; 124 | padding: 0 !important; 125 | zoom: 1 !important; 126 | 127 | overflow: visible !important; 128 | display: block !important; 129 | 130 | text-align: left !important; 131 | -webkit-perspective: none; 132 | -moz-perspective: none; 133 | -ms-perspective: none; 134 | perspective: none; 135 | 136 | -webkit-perspective-origin: 50% 50%; 137 | -moz-perspective-origin: 50% 50%; 138 | -ms-perspective-origin: 50% 50%; 139 | perspective-origin: 50% 50%; 140 | } 141 | .reveal .slides section { 142 | visibility: visible !important; 143 | position: static !important; 144 | width: auto !important; 145 | height: auto !important; 146 | display: block !important; 147 | overflow: visible !important; 148 | 149 | left: 0 !important; 150 | top: 0 !important; 151 | margin-left: 0 !important; 152 | margin-top: 0 !important; 153 | padding: 60px 20px !important; 154 | z-index: auto !important; 155 | 156 | opacity: 1 !important; 157 | 158 | page-break-after: always !important; 159 | 160 | -webkit-transform-style: flat !important; 161 | -moz-transform-style: flat !important; 162 | -ms-transform-style: flat !important; 163 | transform-style: flat !important; 164 | 165 | -webkit-transform: none !important; 166 | -moz-transform: none !important; 167 | -ms-transform: none !important; 168 | transform: none !important; 169 | 170 | -webkit-transition: none !important; 171 | -moz-transition: none !important; 172 | -ms-transition: none !important; 173 | transition: none !important; 174 | } 175 | .reveal .slides section.stack { 176 | padding: 0 !important; 177 | } 178 | .reveal section:last-of-type { 179 | page-break-after: avoid !important; 180 | } 181 | .reveal section .fragment { 182 | opacity: 1 !important; 183 | visibility: visible !important; 184 | 185 | -webkit-transform: none !important; 186 | -moz-transform: none !important; 187 | -ms-transform: none !important; 188 | transform: none !important; 189 | } 190 | .reveal section img { 191 | display: block; 192 | margin: 15px 0px; 193 | background: rgba(255,255,255,1); 194 | border: 1px solid #666; 195 | box-shadow: none; 196 | } 197 | 198 | .reveal section small { 199 | font-size: 0.8em; 200 | } 201 | 202 | } -------------------------------------------------------------------------------- /slides/css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is used to print reveal.js 3 | * presentations to PDF. 4 | * 5 | * https://github.com/hakimel/reveal.js#pdf-export 6 | */ 7 | 8 | * { 9 | -webkit-print-color-adjust: exact; 10 | } 11 | 12 | body { 13 | margin: 0 auto !important; 14 | border: 0; 15 | padding: 0; 16 | float: none !important; 17 | overflow: visible; 18 | } 19 | 20 | html { 21 | width: 100%; 22 | height: 100%; 23 | overflow: visible; 24 | } 25 | 26 | /* Remove any elements not needed in print. */ 27 | .nestedarrow, 28 | .reveal .controls, 29 | .reveal .progress, 30 | .reveal .playback, 31 | .reveal.overview, 32 | .fork-reveal, 33 | .share-reveal, 34 | .state-background { 35 | display: none !important; 36 | } 37 | 38 | h1, h2, h3, h4, h5, h6 { 39 | text-shadow: 0 0 0 #000 !important; 40 | } 41 | 42 | .reveal pre code { 43 | overflow: hidden !important; 44 | font-family: Courier, 'Courier New', monospace !important; 45 | } 46 | 47 | ul, ol, div, p { 48 | visibility: visible; 49 | position: static; 50 | width: auto; 51 | height: auto; 52 | display: block; 53 | overflow: visible; 54 | margin: auto; 55 | } 56 | .reveal { 57 | width: auto !important; 58 | height: auto !important; 59 | overflow: hidden !important; 60 | } 61 | .reveal .slides { 62 | position: static; 63 | width: 100%; 64 | height: auto; 65 | 66 | left: auto; 67 | top: auto; 68 | margin: 0 !important; 69 | padding: 0 !important; 70 | 71 | overflow: visible; 72 | display: block; 73 | 74 | -webkit-perspective: none; 75 | -moz-perspective: none; 76 | -ms-perspective: none; 77 | perspective: none; 78 | 79 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 80 | -moz-perspective-origin: 50% 50%; 81 | -ms-perspective-origin: 50% 50%; 82 | perspective-origin: 50% 50%; 83 | } 84 | 85 | .reveal .slides section { 86 | page-break-after: always !important; 87 | 88 | visibility: visible !important; 89 | position: relative !important; 90 | display: block !important; 91 | position: relative !important; 92 | 93 | margin: 0 !important; 94 | padding: 0 !important; 95 | box-sizing: border-box !important; 96 | min-height: 1px; 97 | 98 | opacity: 1 !important; 99 | 100 | -webkit-transform-style: flat !important; 101 | -moz-transform-style: flat !important; 102 | -ms-transform-style: flat !important; 103 | transform-style: flat !important; 104 | 105 | -webkit-transform: none !important; 106 | -moz-transform: none !important; 107 | -ms-transform: none !important; 108 | transform: none !important; 109 | } 110 | 111 | .reveal section.stack { 112 | margin: 0 !important; 113 | padding: 0 !important; 114 | page-break-after: avoid !important; 115 | height: auto !important; 116 | min-height: auto !important; 117 | } 118 | 119 | .reveal img { 120 | box-shadow: none; 121 | } 122 | 123 | .reveal .roll { 124 | overflow: visible; 125 | line-height: 1em; 126 | } 127 | 128 | /* Slide backgrounds are placed inside of their slide when exporting to PDF */ 129 | .reveal section .slide-background { 130 | display: block !important; 131 | position: absolute; 132 | top: 0; 133 | left: 0; 134 | width: 100%; 135 | z-index: -1; 136 | } 137 | 138 | /* All elements should be above the slide-background */ 139 | .reveal section>* { 140 | position: relative; 141 | z-index: 1; 142 | } 143 | 144 | /* Display slide speaker notes when 'showNotes' is enabled */ 145 | .reveal .speaker-notes-pdf { 146 | display: block; 147 | width: 100%; 148 | max-height: none; 149 | left: auto; 150 | top: auto; 151 | z-index: 100; 152 | } 153 | 154 | /* Display slide numbers when 'slideNumber' is enabled */ 155 | .reveal .slide-number-pdf { 156 | display: block; 157 | position: absolute; 158 | font-size: 14px; 159 | } 160 | 161 | -------------------------------------------------------------------------------- /slides/css/theme/18f.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 18F theme for reveal.js. Forked from the 'white' theme by 3 | * Hakim El Hattab. 4 | */ 5 | @import url(../../fonts/18FNimbusSansL.css); 6 | 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 { 7 | color: #1c304a; } 8 | 9 | .reveal .logo { 10 | position: fixed; 11 | z-index: 30; 12 | left: 10px; 13 | top: 10px; 14 | -webkit-user-select: none; } 15 | .reveal .logo svg.logo-18f { 16 | width: 75px; 17 | height: 75px; } 18 | 19 | .reveal.has-light-background svg.logo-18f { 20 | fill: #1c304a; } 21 | 22 | svg.logo-18f { 23 | fill: #b3efff; 24 | -webkit-transition: fill .15s ease; 25 | -moz-transition: fill .15s ease; 26 | transition: fill .15s ease; } 27 | 28 | /********************************************* 29 | * GLOBAL STYLES 30 | *********************************************/ 31 | body { 32 | background: #1c304a; 33 | background-color: #1c304a; } 34 | 35 | .reveal { 36 | font-family: "18F Nimbus Sans L", Helvetica, Arial, sans-serif; 37 | font-size: 38px; 38 | font-weight: normal; 39 | color: #b3efff; } 40 | 41 | ::selection { 42 | color: #fff; 43 | background: #80e7ff; 44 | text-shadow: none; } 45 | 46 | .reveal .slides > section, 47 | .reveal .slides > section > section { 48 | line-height: 1.3; 49 | font-weight: inherit; } 50 | 51 | /********************************************* 52 | * HEADERS 53 | *********************************************/ 54 | .reveal h1, 55 | .reveal h2, 56 | .reveal h3, 57 | .reveal h4, 58 | .reveal h5, 59 | .reveal h6 { 60 | margin: 0 0 20px 0; 61 | color: #ffffff; 62 | font-family: "18F Nimbus Sans L", Helvetica, Arial, sans-serif; 63 | font-weight: bold; 64 | line-height: 1.2; 65 | letter-spacing: normal; 66 | text-transform: none; 67 | text-shadow: none; 68 | word-wrap: break-word; } 69 | 70 | .reveal h1 { 71 | font-size: 2.5em; } 72 | 73 | .reveal h2 { 74 | font-size: 1.6em; } 75 | 76 | .reveal h3 { 77 | font-size: 1.3em; } 78 | 79 | .reveal h4 { 80 | font-size: 1em; } 81 | 82 | .reveal h1 { 83 | text-shadow: none; } 84 | 85 | /********************************************* 86 | * OTHER 87 | *********************************************/ 88 | .reveal p { 89 | margin: 20px 0; 90 | line-height: 1.3; } 91 | 92 | /* Ensure certain elements are never larger than the slide itself */ 93 | .reveal img, 94 | .reveal video, 95 | .reveal iframe { 96 | max-width: 95%; 97 | max-height: 95%; } 98 | 99 | .reveal strong, 100 | .reveal b { 101 | font-weight: bold; } 102 | 103 | .reveal em { 104 | font-style: italic; } 105 | 106 | .reveal ol, 107 | .reveal dl, 108 | .reveal ul { 109 | display: inline-block; 110 | text-align: left; 111 | margin: 0 0 0 1em; } 112 | 113 | .reveal ol { 114 | list-style-type: decimal; } 115 | 116 | .reveal ul { 117 | list-style-type: disc; } 118 | 119 | .reveal ul ul { 120 | list-style-type: square; } 121 | 122 | .reveal ul ul ul { 123 | list-style-type: circle; } 124 | 125 | .reveal ul ul, 126 | .reveal ul ol, 127 | .reveal ol ol, 128 | .reveal ol ul { 129 | display: block; 130 | margin-left: 40px; } 131 | 132 | .reveal dt { 133 | font-weight: bold; } 134 | 135 | .reveal dd { 136 | margin-left: 40px; } 137 | 138 | .reveal q, 139 | .reveal blockquote { 140 | quotes: none; } 141 | 142 | .reveal blockquote { 143 | display: block; 144 | position: relative; 145 | width: 70%; 146 | margin: 20px auto; 147 | padding: 5px; 148 | font-style: italic; 149 | background: rgba(255, 255, 255, 0.05); 150 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 151 | 152 | .reveal blockquote p:first-child, 153 | .reveal blockquote p:last-child { 154 | display: inline-block; } 155 | 156 | .reveal q { 157 | font-style: italic; } 158 | 159 | .reveal pre { 160 | display: block; 161 | position: relative; 162 | width: 90%; 163 | margin: 20px auto; 164 | text-align: left; 165 | font-size: 0.55em; 166 | font-family: monospace; 167 | line-height: 1.2em; 168 | word-wrap: break-word; 169 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } 170 | 171 | .reveal code { 172 | font-family: monospace; } 173 | 174 | .reveal pre code { 175 | display: block; 176 | padding: 5px; 177 | overflow: auto; 178 | max-height: 450px; 179 | word-wrap: normal; } 180 | 181 | .reveal table { 182 | margin: auto; 183 | border-collapse: collapse; 184 | border-spacing: 0; } 185 | 186 | .reveal table th { 187 | font-weight: bold; } 188 | 189 | .reveal table th, 190 | .reveal table td { 191 | text-align: left; 192 | padding: 0.2em 0.5em 0.2em 0.5em; 193 | border-bottom: 1px solid; } 194 | 195 | .reveal table th[align="center"], 196 | .reveal table td[align="center"] { 197 | text-align: center; } 198 | 199 | .reveal table th[align="right"], 200 | .reveal table td[align="right"] { 201 | text-align: right; } 202 | 203 | .reveal table tbody tr:last-child th, 204 | .reveal table tbody tr:last-child td { 205 | border-bottom: none; } 206 | 207 | .reveal sup { 208 | vertical-align: super; } 209 | 210 | .reveal sub { 211 | vertical-align: sub; } 212 | 213 | .reveal small { 214 | display: inline-block; 215 | font-size: 0.6em; 216 | line-height: 1.2em; 217 | vertical-align: top; } 218 | 219 | .reveal small * { 220 | vertical-align: top; } 221 | 222 | /********************************************* 223 | * LINKS 224 | *********************************************/ 225 | .reveal a { 226 | color: #00cfff; 227 | text-decoration: none; 228 | -webkit-transition: color .15s ease; 229 | -moz-transition: color .15s ease; 230 | transition: color .15s ease; } 231 | 232 | .reveal a:hover { 233 | color: #4dddff; 234 | text-shadow: none; 235 | border: none; } 236 | 237 | .reveal .roll span:after { 238 | color: #fff; 239 | background: #0091b3; } 240 | 241 | /********************************************* 242 | * IMAGES 243 | *********************************************/ 244 | .reveal section img { 245 | margin: 15px 0px; 246 | background: rgba(255, 255, 255, 0.12); 247 | border: 4px solid #b3efff; 248 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 249 | 250 | .reveal section img.plain { 251 | border: 0; 252 | box-shadow: none; } 253 | 254 | .reveal a img { 255 | -webkit-transition: all .15s linear; 256 | -moz-transition: all .15s linear; 257 | transition: all .15s linear; } 258 | 259 | .reveal a:hover img { 260 | background: rgba(255, 255, 255, 0.2); 261 | border-color: #00cfff; 262 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 263 | 264 | /********************************************* 265 | * NAVIGATION CONTROLS 266 | *********************************************/ 267 | .reveal .controls .navigate-left, 268 | .reveal .controls .navigate-left.enabled { 269 | border-right-color: #00cfff; } 270 | 271 | .reveal .controls .navigate-right, 272 | .reveal .controls .navigate-right.enabled { 273 | border-left-color: #00cfff; } 274 | 275 | .reveal .controls .navigate-up, 276 | .reveal .controls .navigate-up.enabled { 277 | border-bottom-color: #00cfff; } 278 | 279 | .reveal .controls .navigate-down, 280 | .reveal .controls .navigate-down.enabled { 281 | border-top-color: #00cfff; } 282 | 283 | .reveal .controls .navigate-left.enabled:hover { 284 | border-right-color: #4dddff; } 285 | 286 | .reveal .controls .navigate-right.enabled:hover { 287 | border-left-color: #4dddff; } 288 | 289 | .reveal .controls .navigate-up.enabled:hover { 290 | border-bottom-color: #4dddff; } 291 | 292 | .reveal .controls .navigate-down.enabled:hover { 293 | border-top-color: #4dddff; } 294 | 295 | /********************************************* 296 | * PROGRESS BAR 297 | *********************************************/ 298 | .reveal .progress { 299 | background: rgba(0, 0, 0, 0.2); } 300 | 301 | .reveal .progress span { 302 | background: #00cfff; 303 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 304 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 305 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 306 | -------------------------------------------------------------------------------- /slides/css/theme/source/18f.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 18F theme for reveal.js. Forked from the 'white' theme by 3 | * Hakim El Hattab. 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | // Include theme-specific fonts 14 | @import url(../../fonts/18FNimbusSansL.css); 15 | 16 | $whiteColor: #ffffff; 17 | $lightColor: #b3efff; 18 | $brightColor: #00cfff; 19 | $mediumColor: #046b99; 20 | $darkColor: #1c304a; 21 | $blackColor: #000000; 22 | 23 | // Override theme settings (see ../template/settings.scss) 24 | $backgroundColor: $darkColor; 25 | 26 | $mainColor: $lightColor; 27 | $headingColor: $whiteColor; 28 | 29 | $mainFontSize: 38px; 30 | $mainFont: "18F Nimbus Sans L", Helvetica, Arial, sans-serif; 31 | $headingFont: "18F Nimbus Sans L", Helvetica, Arial, sans-serif; 32 | $headingTextShadow: none; 33 | $headingLetterSpacing: normal; 34 | $headingTextTransform: none; 35 | $headingFontWeight: bold; 36 | $linkColor: $brightColor; 37 | $linkColorHover: lighten( $linkColor, 15% ); 38 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 39 | 40 | $heading1Size: 2.5em; 41 | $heading2Size: 1.6em; 42 | $heading3Size: 1.3em; 43 | $heading4Size: 1.0em; 44 | 45 | section.has-light-background { 46 | &, h1, h2, h3, h4, h5, h6 { 47 | color: $darkColor; 48 | } 49 | } 50 | 51 | .reveal .logo { 52 | position: fixed; 53 | z-index: 30; 54 | left: 10px; 55 | top: 10px; 56 | -webkit-user-select: none; 57 | 58 | svg.logo-18f { 59 | width: 75px; 60 | height: 75px; 61 | } 62 | } 63 | 64 | .reveal.has-light-background { 65 | svg.logo-18f { 66 | fill: $darkColor; 67 | } 68 | } 69 | 70 | svg.logo-18f { 71 | fill: $mainColor; 72 | -webkit-transition: fill .15s ease; 73 | -moz-transition: fill .15s ease; 74 | transition: fill .15s ease; 75 | } 76 | 77 | // Theme template ------------------------------ 78 | @import "../template/theme"; 79 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /slides/css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 36px; 10 | $mainColor: #eee; 11 | 12 | // Vertical spacing between blocks of text 13 | $blockMargin: 20px; 14 | 15 | // Headings 16 | $headingMargin: 0 0 $blockMargin 0; 17 | $headingFont: 'League Gothic', Impact, sans-serif; 18 | $headingColor: #eee; 19 | $headingLineHeight: 1.2; 20 | $headingLetterSpacing: normal; 21 | $headingTextTransform: uppercase; 22 | $headingTextShadow: none; 23 | $headingFontWeight: normal; 24 | $heading1TextShadow: $headingTextShadow; 25 | 26 | $heading1Size: 3.77em; 27 | $heading2Size: 2.11em; 28 | $heading3Size: 1.55em; 29 | $heading4Size: 1.00em; 30 | 31 | // Links and actions 32 | $linkColor: #13DAEC; 33 | $linkColorHover: lighten( $linkColor, 20% ); 34 | 35 | // Text selection 36 | $selectionBackgroundColor: #FF5E99; 37 | $selectionColor: #fff; 38 | 39 | // Generates the presentation background, can be overridden 40 | // to return a background image or gradient 41 | @mixin bodyBackground() { 42 | background: $backgroundColor; 43 | } -------------------------------------------------------------------------------- /slides/css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | body { 8 | @include bodyBackground(); 9 | background-color: $backgroundColor; 10 | } 11 | 12 | .reveal { 13 | font-family: $mainFont; 14 | font-size: $mainFontSize; 15 | font-weight: normal; 16 | color: $mainColor; 17 | } 18 | 19 | ::selection { 20 | color: $selectionColor; 21 | background: $selectionBackgroundColor; 22 | text-shadow: none; 23 | } 24 | 25 | .reveal .slides>section, 26 | .reveal .slides>section>section { 27 | line-height: 1.3; 28 | font-weight: inherit; 29 | } 30 | 31 | /********************************************* 32 | * HEADERS 33 | *********************************************/ 34 | 35 | .reveal h1, 36 | .reveal h2, 37 | .reveal h3, 38 | .reveal h4, 39 | .reveal h5, 40 | .reveal h6 { 41 | margin: $headingMargin; 42 | color: $headingColor; 43 | 44 | font-family: $headingFont; 45 | font-weight: $headingFontWeight; 46 | line-height: $headingLineHeight; 47 | letter-spacing: $headingLetterSpacing; 48 | 49 | text-transform: $headingTextTransform; 50 | text-shadow: $headingTextShadow; 51 | 52 | word-wrap: break-word; 53 | } 54 | 55 | .reveal h1 {font-size: $heading1Size; } 56 | .reveal h2 {font-size: $heading2Size; } 57 | .reveal h3 {font-size: $heading3Size; } 58 | .reveal h4 {font-size: $heading4Size; } 59 | 60 | .reveal h1 { 61 | text-shadow: $heading1TextShadow; 62 | } 63 | 64 | 65 | /********************************************* 66 | * OTHER 67 | *********************************************/ 68 | 69 | .reveal p { 70 | margin: $blockMargin 0; 71 | line-height: 1.3; 72 | } 73 | 74 | /* Ensure certain elements are never larger than the slide itself */ 75 | .reveal img, 76 | .reveal video, 77 | .reveal iframe { 78 | max-width: 95%; 79 | max-height: 95%; 80 | } 81 | .reveal strong, 82 | .reveal b { 83 | font-weight: bold; 84 | } 85 | 86 | .reveal em { 87 | font-style: italic; 88 | } 89 | 90 | .reveal ol, 91 | .reveal dl, 92 | .reveal ul { 93 | display: inline-block; 94 | 95 | text-align: left; 96 | margin: 0 0 0 1em; 97 | } 98 | 99 | .reveal ol { 100 | list-style-type: decimal; 101 | } 102 | 103 | .reveal ul { 104 | list-style-type: disc; 105 | } 106 | 107 | .reveal ul ul { 108 | list-style-type: square; 109 | } 110 | 111 | .reveal ul ul ul { 112 | list-style-type: circle; 113 | } 114 | 115 | .reveal ul ul, 116 | .reveal ul ol, 117 | .reveal ol ol, 118 | .reveal ol ul { 119 | display: block; 120 | margin-left: 40px; 121 | } 122 | 123 | .reveal dt { 124 | font-weight: bold; 125 | } 126 | 127 | .reveal dd { 128 | margin-left: 40px; 129 | } 130 | 131 | .reveal q, 132 | .reveal blockquote { 133 | quotes: none; 134 | } 135 | 136 | .reveal blockquote { 137 | display: block; 138 | position: relative; 139 | width: 70%; 140 | margin: $blockMargin auto; 141 | padding: 5px; 142 | 143 | font-style: italic; 144 | background: rgba(255, 255, 255, 0.05); 145 | box-shadow: 0px 0px 2px rgba(0,0,0,0.2); 146 | } 147 | .reveal blockquote p:first-child, 148 | .reveal blockquote p:last-child { 149 | display: inline-block; 150 | } 151 | 152 | .reveal q { 153 | font-style: italic; 154 | } 155 | 156 | .reveal pre { 157 | display: block; 158 | position: relative; 159 | width: 90%; 160 | margin: $blockMargin auto; 161 | 162 | text-align: left; 163 | font-size: 0.55em; 164 | font-family: monospace; 165 | line-height: 1.2em; 166 | 167 | word-wrap: break-word; 168 | 169 | box-shadow: 0px 0px 6px rgba(0,0,0,0.3); 170 | } 171 | .reveal code { 172 | font-family: monospace; 173 | } 174 | 175 | .reveal pre code { 176 | display: block; 177 | padding: 5px; 178 | overflow: auto; 179 | max-height: 400px; 180 | word-wrap: normal; 181 | } 182 | 183 | .reveal table { 184 | margin: auto; 185 | border-collapse: collapse; 186 | border-spacing: 0; 187 | } 188 | 189 | .reveal table th { 190 | font-weight: bold; 191 | } 192 | 193 | .reveal table th, 194 | .reveal table td { 195 | text-align: left; 196 | padding: 0.2em 0.5em 0.2em 0.5em; 197 | border-bottom: 1px solid; 198 | } 199 | 200 | .reveal table th[align="center"], 201 | .reveal table td[align="center"] { 202 | text-align: center; 203 | } 204 | 205 | .reveal table th[align="right"], 206 | .reveal table td[align="right"] { 207 | text-align: right; 208 | } 209 | 210 | .reveal table tbody tr:last-child th, 211 | .reveal table tbody tr:last-child td { 212 | border-bottom: none; 213 | } 214 | 215 | .reveal sup { 216 | vertical-align: super; 217 | } 218 | .reveal sub { 219 | vertical-align: sub; 220 | } 221 | 222 | .reveal small { 223 | display: inline-block; 224 | font-size: 0.6em; 225 | line-height: 1.2em; 226 | vertical-align: top; 227 | } 228 | 229 | .reveal small * { 230 | vertical-align: top; 231 | } 232 | 233 | 234 | /********************************************* 235 | * LINKS 236 | *********************************************/ 237 | 238 | .reveal a { 239 | color: $linkColor; 240 | text-decoration: none; 241 | 242 | -webkit-transition: color .15s ease; 243 | -moz-transition: color .15s ease; 244 | transition: color .15s ease; 245 | } 246 | .reveal a:hover { 247 | color: $linkColorHover; 248 | 249 | text-shadow: none; 250 | border: none; 251 | } 252 | 253 | .reveal .roll span:after { 254 | color: #fff; 255 | background: darken( $linkColor, 15% ); 256 | } 257 | 258 | 259 | /********************************************* 260 | * IMAGES 261 | *********************************************/ 262 | 263 | .reveal section img { 264 | margin: 15px 0px; 265 | background: rgba(255,255,255,0.12); 266 | border: 4px solid $mainColor; 267 | 268 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 269 | } 270 | 271 | .reveal section img.plain { 272 | border: 0; 273 | box-shadow: none; 274 | } 275 | 276 | .reveal a img { 277 | -webkit-transition: all .15s linear; 278 | -moz-transition: all .15s linear; 279 | transition: all .15s linear; 280 | } 281 | 282 | .reveal a:hover img { 283 | background: rgba(255,255,255,0.2); 284 | border-color: $linkColor; 285 | 286 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 287 | } 288 | 289 | 290 | /********************************************* 291 | * NAVIGATION CONTROLS 292 | *********************************************/ 293 | 294 | .reveal .controls .navigate-left, 295 | .reveal .controls .navigate-left.enabled { 296 | border-right-color: $linkColor; 297 | } 298 | 299 | .reveal .controls .navigate-right, 300 | .reveal .controls .navigate-right.enabled { 301 | border-left-color: $linkColor; 302 | } 303 | 304 | .reveal .controls .navigate-up, 305 | .reveal .controls .navigate-up.enabled { 306 | border-bottom-color: $linkColor; 307 | } 308 | 309 | .reveal .controls .navigate-down, 310 | .reveal .controls .navigate-down.enabled { 311 | border-top-color: $linkColor; 312 | } 313 | 314 | .reveal .controls .navigate-left.enabled:hover { 315 | border-right-color: $linkColorHover; 316 | } 317 | 318 | .reveal .controls .navigate-right.enabled:hover { 319 | border-left-color: $linkColorHover; 320 | } 321 | 322 | .reveal .controls .navigate-up.enabled:hover { 323 | border-bottom-color: $linkColorHover; 324 | } 325 | 326 | .reveal .controls .navigate-down.enabled:hover { 327 | border-top-color: $linkColorHover; 328 | } 329 | 330 | 331 | /********************************************* 332 | * PROGRESS BAR 333 | *********************************************/ 334 | 335 | .reveal .progress { 336 | background: rgba(0,0,0,0.2); 337 | } 338 | .reveal .progress span { 339 | background: $linkColor; 340 | 341 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 342 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 343 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 344 | } 345 | 346 | 347 | -------------------------------------------------------------------------------- /slides/fonts/18FNimbusSansL-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/fonts/18FNimbusSansL-bold.ttf -------------------------------------------------------------------------------- /slides/fonts/18FNimbusSansL-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/fonts/18FNimbusSansL-italic.ttf -------------------------------------------------------------------------------- /slides/fonts/18FNimbusSansL-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/fonts/18FNimbusSansL-regular.ttf -------------------------------------------------------------------------------- /slides/fonts/18FNimbusSansL.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "18F Nimbus Sans L"; 3 | src: url("18FNimbusSansL-regular.ttf"); 4 | } 5 | 6 | @font-face { 7 | font-family: "18F Nimbus Sans L"; 8 | src: url("18FNimbusSansL-italic.ttf"); 9 | font-style: italic; 10 | } 11 | 12 | @font-face { 13 | font-family: "18F Nimbus Sans L"; 14 | src: url("18FNimbusSansL-bold.ttf"); 15 | font-weight: bold; 16 | } 17 | -------------------------------------------------------------------------------- /slides/images/18F.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /slides/images/chubby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/images/chubby.jpg -------------------------------------------------------------------------------- /slides/images/cloudwatch_logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/images/cloudwatch_logs.png -------------------------------------------------------------------------------- /slides/images/ha_aws_system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/images/ha_aws_system.png -------------------------------------------------------------------------------- /slides/images/nosql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/images/nosql.png -------------------------------------------------------------------------------- /slides/images/oh_noes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/images/oh_noes.png -------------------------------------------------------------------------------- /slides/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 |
26 |
27 |
28 |

Infrastructure as Code with Terraform and AWS

29 |

Unit 1: Introduction

30 |

This 18F workshop is in the worldwide public domain.

31 |
32 |
33 |

Learning objectives

34 |
    35 |
  • Understand the cloud
    • 36 |
  • Understand infrastructure-as-code
    • 37 |
  • Understand how to build cloud native apps
    • 38 |
39 |
40 |
41 |

The Cloud

42 | There is no cloud: it's just someone else's computer 43 |
44 |
45 |

The Cloud: NIST

46 |
47 | “The NIST definition lists five essential characteristics of cloud computing: on-demand self-service, broad network access, resource pooling, rapid elasticity or expansion, and measured service. It also lists three "service models" (software, platform and infrastructure), and four "deployment models" (private, community, public and hybrid) that together categorize ways to deliver cloud services.” 48 |
49 | (See NIST SP 800-145 for more) 50 |
51 |
52 |

The Cloud

53 |

Like having your own datacenter, but:

54 |
    55 |
  • With an API (if there's no API, it's not a real cloud)
    • 56 |
  • The illusion of infinite resources
    • 57 |
  • No capital costs: pay based on usage
    • 58 |
59 |
60 |
61 |

AWS Free Tier

62 | 63 |
64 |
65 |

Infrastructure-as-Code

66 |
    67 |
  • Specify desired state in version control
    • 68 |
  • Apply XP practices like TDD, refactoring
    • 69 |
  • Continuous delivery for your infrastructure
    • 70 |
  • Term coined by Andrew Shafer
    • 71 |
72 |
73 |
74 |

Infrastructure-as-Code: Benefits

75 |
    76 |
  • Versioned infrastructure!
    • 77 |
  • Reduce the risk of changes
    • 78 |
  • Predictable time to restore service
    • 79 |
  • Audit history
    • 80 |
  • Implement controls from NIST 800-53 CM and CP families
    • 81 |
82 |
83 |
84 | Unit 2 85 |
86 |
87 |
88 | 89 | 90 | 91 | 92 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /slides/lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | .hljs { 9 | display: block; 10 | overflow-x: auto; 11 | padding: 0.5em; 12 | background: #3f3f3f; 13 | color: #dcdcdc; 14 | } 15 | 16 | .hljs-keyword, 17 | .hljs-selector-tag, 18 | .hljs-tag { 19 | color: #e3ceab; 20 | } 21 | 22 | .hljs-template-tag { 23 | color: #dcdcdc; 24 | } 25 | 26 | .hljs-number { 27 | color: #8cd0d3; 28 | } 29 | 30 | .hljs-variable, 31 | .hljs-template-variable, 32 | .hljs-attribute { 33 | color: #efdcbc; 34 | } 35 | 36 | .hljs-literal { 37 | color: #efefaf; 38 | } 39 | 40 | .hljs-subst { 41 | color: #8f8f8f; 42 | } 43 | 44 | .hljs-title, 45 | .hljs-name, 46 | .hljs-selector-id, 47 | .hljs-selector-class, 48 | .hljs-section, 49 | .hljs-type { 50 | color: #efef8f; 51 | } 52 | 53 | .hljs-symbol, 54 | .hljs-bullet, 55 | .hljs-link { 56 | color: #dca3a3; 57 | } 58 | 59 | .hljs-deletion, 60 | .hljs-string, 61 | .hljs-built_in, 62 | .hljs-builtin-name { 63 | color: #cc9393; 64 | } 65 | 66 | .hljs-addition, 67 | .hljs-comment, 68 | .hljs-quote, 69 | .hljs-meta { 70 | color: #7f9f7f; 71 | } 72 | 73 | 74 | .hljs-emphasis { 75 | font-style: italic; 76 | } 77 | 78 | .hljs-strong { 79 | font-weight: bold; 80 | } 81 | -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/LICENSE: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'League Gothic'; 3 | src: url('league-gothic.eot'); 4 | src: url('league-gothic.eot?#iefix') format('embedded-opentype'), 5 | url('league-gothic.woff') format('woff'), 6 | url('league-gothic.ttf') format('truetype'); 7 | 8 | font-weight: normal; 9 | font-style: normal; 10 | } -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/league-gothic/league-gothic.eot -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/league-gothic/league-gothic.ttf -------------------------------------------------------------------------------- /slides/lib/font/league-gothic/league-gothic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/league-gothic/league-gothic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/LICENSE: -------------------------------------------------------------------------------- 1 | SIL Open Font License 2 | 3 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 4 | 5 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 6 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 7 | 8 | —————————————————————————————- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | —————————————————————————————- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. 14 | 15 | The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. 16 | 17 | DEFINITIONS 18 | “Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. 19 | 20 | “Reserved Font Name” refers to any names specified as such after the copyright statement(s). 21 | 22 | “Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s). 23 | 24 | “Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. 25 | 26 | “Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. 27 | 28 | PERMISSION & CONDITIONS 29 | Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 30 | 31 | 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 32 | 33 | 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 34 | 35 | 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 36 | 37 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 38 | 39 | 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. 40 | 41 | TERMINATION 42 | This license becomes null and void if any of the above conditions are not met. 43 | 44 | DISCLAIMER 45 | THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-italic.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-italic.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-italic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-regular.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-regular.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-regular.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibold.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibold.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibold.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.eot -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.ttf -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/lib/font/source-sans-pro/source-sans-pro-semibolditalic.woff -------------------------------------------------------------------------------- /slides/lib/font/source-sans-pro/source-sans-pro.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Source Sans Pro'; 3 | src: url('source-sans-pro-regular.eot'); 4 | src: url('source-sans-pro-regular.eot?#iefix') format('embedded-opentype'), 5 | url('source-sans-pro-regular.woff') format('woff'), 6 | url('source-sans-pro-regular.ttf') format('truetype'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: 'Source Sans Pro'; 13 | src: url('source-sans-pro-italic.eot'); 14 | src: url('source-sans-pro-italic.eot?#iefix') format('embedded-opentype'), 15 | url('source-sans-pro-italic.woff') format('woff'), 16 | url('source-sans-pro-italic.ttf') format('truetype'); 17 | font-weight: normal; 18 | font-style: italic; 19 | } 20 | 21 | @font-face { 22 | font-family: 'Source Sans Pro'; 23 | src: url('source-sans-pro-semibold.eot'); 24 | src: url('source-sans-pro-semibold.eot?#iefix') format('embedded-opentype'), 25 | url('source-sans-pro-semibold.woff') format('woff'), 26 | url('source-sans-pro-semibold.ttf') format('truetype'); 27 | font-weight: 600; 28 | font-style: normal; 29 | } 30 | 31 | @font-face { 32 | font-family: 'Source Sans Pro'; 33 | src: url('source-sans-pro-semibolditalic.eot'); 34 | src: url('source-sans-pro-semibolditalic.eot?#iefix') format('embedded-opentype'), 35 | url('source-sans-pro-semibolditalic.woff') format('woff'), 36 | url('source-sans-pro-semibolditalic.ttf') format('truetype'); 37 | font-weight: 600; 38 | font-style: italic; 39 | } -------------------------------------------------------------------------------- /slides/lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;pn?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):tt);u.feature("landscape",fe?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window); 3 | /*! head.css3 - v1.0.0 */ 4 | (function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window); 5 | /*! head.load - v1.0.3 */ 6 | (function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i=4.0.0" 24 | }, 25 | "devDependencies": { 26 | "express": "^4.16.2", 27 | "grunt": "^1.0.1", 28 | "grunt-autoprefixer": "^3.0.4", 29 | "grunt-cli": "^1.2.0", 30 | "grunt-contrib-connect": "^1.0.2", 31 | "grunt-contrib-cssmin": "^2.2.1", 32 | "grunt-contrib-jshint": "^1.1.0", 33 | "grunt-contrib-qunit": "^2.0.0", 34 | "grunt-contrib-uglify": "^3.3.0", 35 | "grunt-contrib-watch": "^1.0.0", 36 | "grunt-sass": "^2.0.0", 37 | "grunt-retire": "^1.0.7", 38 | "grunt-zip": "~0.17.1", 39 | "mustache": "^2.3.0", 40 | "socket.io": "^1.7.3" 41 | }, 42 | "license": "MIT" 43 | } 44 | -------------------------------------------------------------------------------- /slides/plugin/markdown/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Markdown Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 |
26 | 36 |
37 | 38 | 39 |
40 | 54 |
55 | 56 | 57 |
58 | 69 |
70 | 71 | 72 |
73 | 77 |
78 | 79 | 80 |
81 | 86 |
87 | 88 | 89 |
90 | 100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /slides/plugin/markdown/example.md: -------------------------------------------------------------------------------- 1 | # Markdown Demo 2 | 3 | 4 | 5 | ## External 1.1 6 | 7 | Content 1.1 8 | 9 | Note: This will only appear in the speaker notes window. 10 | 11 | 12 | ## External 1.2 13 | 14 | Content 1.2 15 | 16 | 17 | 18 | ## External 2 19 | 20 | Content 2.1 21 | 22 | 23 | 24 | ## External 3.1 25 | 26 | Content 3.1 27 | 28 | 29 | ## External 3.2 30 | 31 | Content 3.2 32 | -------------------------------------------------------------------------------- /slides/plugin/math/math.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A plugin which enables rendering of math equations inside 3 | * of reveal.js slides. Essentially a thin wrapper for MathJax. 4 | * 5 | * @author Hakim El Hattab 6 | */ 7 | var RevealMath = window.RevealMath || (function(){ 8 | 9 | var options = Reveal.getConfig().math || {}; 10 | options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js'; 11 | options.config = options.config || 'TeX-AMS_HTML-full'; 12 | 13 | loadScript( options.mathjax + '?config=' + options.config, function() { 14 | 15 | MathJax.Hub.Config({ 16 | messageStyle: 'none', 17 | tex2jax: { 18 | inlineMath: [['$','$'],['\\(','\\)']] , 19 | skipTags: ['script','noscript','style','textarea','pre'] 20 | }, 21 | skipStartupTypeset: true 22 | }); 23 | 24 | // Typeset followed by an immediate reveal.js layout since 25 | // the typesetting process could affect slide height 26 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] ); 27 | MathJax.Hub.Queue( Reveal.layout ); 28 | 29 | // Reprocess equations in slides when they turn visible 30 | Reveal.addEventListener( 'slidechanged', function( event ) { 31 | 32 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); 33 | 34 | } ); 35 | 36 | } ); 37 | 38 | function loadScript( url, callback ) { 39 | 40 | var head = document.querySelector( 'head' ); 41 | var script = document.createElement( 'script' ); 42 | script.type = 'text/javascript'; 43 | script.src = url; 44 | 45 | // Wrapper for callback to make sure it only fires once 46 | var finish = function() { 47 | if( typeof callback === 'function' ) { 48 | callback.call(); 49 | callback = null; 50 | } 51 | } 52 | 53 | script.onload = finish; 54 | 55 | // IE 56 | script.onreadystatechange = function() { 57 | if ( this.readyState === 'loaded' ) { 58 | finish(); 59 | } 60 | } 61 | 62 | // Normal browsers 63 | head.appendChild( script ); 64 | 65 | } 66 | 67 | })(); 68 | -------------------------------------------------------------------------------- /slides/plugin/multiplex/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var multiplex = Reveal.getConfig().multiplex; 3 | var socketId = multiplex.id; 4 | var socket = io.connect(multiplex.url); 5 | 6 | socket.on(multiplex.id, function(data) { 7 | // ignore data from sockets that aren't ours 8 | if (data.socketId !== socketId) { return; } 9 | if( window.location.host === 'localhost:1947' ) return; 10 | 11 | Reveal.setState(data.state); 12 | }); 13 | }()); 14 | -------------------------------------------------------------------------------- /slides/plugin/multiplex/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var express = require('express'); 3 | var fs = require('fs'); 4 | var io = require('socket.io'); 5 | var crypto = require('crypto'); 6 | 7 | var app = express(); 8 | var staticDir = express.static; 9 | var server = http.createServer(app); 10 | 11 | io = io(server); 12 | 13 | var opts = { 14 | port: process.env.PORT || 1948, 15 | baseDir : __dirname + '/../../' 16 | }; 17 | 18 | io.on( 'connection', function( socket ) { 19 | socket.on('multiplex-statechanged', function(data) { 20 | if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return; 21 | if (createHash(data.secret) === data.socketId) { 22 | data.secret = null; 23 | socket.broadcast.emit(data.socketId, data); 24 | }; 25 | }); 26 | }); 27 | 28 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) { 29 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | res.writeHead(200, {'Content-Type': 'text/html'}); 34 | 35 | var stream = fs.createReadStream(opts.baseDir + '/index.html'); 36 | stream.on('error', function( error ) { 37 | res.write('

reveal.js multiplex server.

Generate token'); 38 | res.end(); 39 | }); 40 | stream.on('readable', function() { 41 | stream.pipe(res); 42 | }); 43 | }); 44 | 45 | app.get("/token", function(req,res) { 46 | var ts = new Date().getTime(); 47 | var rand = Math.floor(Math.random()*9999999); 48 | var secret = ts.toString() + rand.toString(); 49 | res.send({secret: secret, socketId: createHash(secret)}); 50 | }); 51 | 52 | var createHash = function(secret) { 53 | var cipher = crypto.createCipher('blowfish', secret); 54 | return(cipher.final('hex')); 55 | }; 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /slides/plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Don't emit events from inside of notes windows 4 | if ( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var multiplex = Reveal.getConfig().multiplex; 7 | 8 | var socket = io.connect( multiplex.url ); 9 | 10 | function post() { 11 | 12 | var messageData = { 13 | state: Reveal.getState(), 14 | secret: multiplex.secret, 15 | socketId: multiplex.id 16 | }; 17 | 18 | socket.emit( 'multiplex-statechanged', messageData ); 19 | 20 | }; 21 | 22 | // Monitor events that trigger a change in state 23 | Reveal.addEventListener( 'slidechanged', post ); 24 | Reveal.addEventListener( 'fragmentshown', post ); 25 | Reveal.addEventListener( 'fragmenthidden', post ); 26 | Reveal.addEventListener( 'overviewhidden', post ); 27 | Reveal.addEventListener( 'overviewshown', post ); 28 | Reveal.addEventListener( 'paused', post ); 29 | Reveal.addEventListener( 'resumed', post ); 30 | 31 | }()); -------------------------------------------------------------------------------- /slides/plugin/multiplex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-js-multiplex", 3 | "version": "1.0.0", 4 | "description": "reveal.js multiplex server", 5 | "homepage": "http://lab.hakim.se/reveal-js", 6 | "scripts": { 7 | "start": "node index.js" 8 | }, 9 | "engines": { 10 | "node": "~4.1.1" 11 | }, 12 | "dependencies": { 13 | "express": "~4.13.3", 14 | "grunt-cli": "~0.1.13", 15 | "mustache": "~2.2.1", 16 | "socket.io": "~1.3.7" 17 | }, 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /slides/plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // don't emit events from inside the previews themselves 4 | if( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var socket = io.connect( window.location.origin ), 7 | socketId = Math.random().toString().slice( 2 ); 8 | 9 | console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId ); 10 | 11 | window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId ); 12 | 13 | /** 14 | * Posts the current slide data to the notes window 15 | */ 16 | function post() { 17 | 18 | var slideElement = Reveal.getCurrentSlide(), 19 | notesElement = slideElement.querySelector( 'aside.notes' ); 20 | 21 | var messageData = { 22 | notes: '', 23 | markdown: false, 24 | socketId: socketId, 25 | state: Reveal.getState() 26 | }; 27 | 28 | // Look for notes defined in a slide attribute 29 | if( slideElement.hasAttribute( 'data-notes' ) ) { 30 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 31 | } 32 | 33 | // Look for notes defined in an aside element 34 | if( notesElement ) { 35 | messageData.notes = notesElement.innerHTML; 36 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 37 | } 38 | 39 | socket.emit( 'statechanged', messageData ); 40 | 41 | } 42 | 43 | // When a new notes window connects, post our current state 44 | socket.on( 'new-subscriber', function( data ) { 45 | post(); 46 | } ); 47 | 48 | // When the state changes from inside of the speaker view 49 | socket.on( 'statechanged-speaker', function( data ) { 50 | Reveal.setState( data.state ); 51 | } ); 52 | 53 | // Monitor events that trigger a change in state 54 | Reveal.addEventListener( 'slidechanged', post ); 55 | Reveal.addEventListener( 'fragmentshown', post ); 56 | Reveal.addEventListener( 'fragmenthidden', post ); 57 | Reveal.addEventListener( 'overviewhidden', post ); 58 | Reveal.addEventListener( 'overviewshown', post ); 59 | Reveal.addEventListener( 'paused', post ); 60 | Reveal.addEventListener( 'resumed', post ); 61 | 62 | // Post the initial state 63 | post(); 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /slides/plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var express = require('express'); 3 | var fs = require('fs'); 4 | var io = require('socket.io'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express(); 8 | var staticDir = express.static; 9 | var server = http.createServer(app); 10 | 11 | io = io(server); 12 | 13 | var opts = { 14 | port : 1947, 15 | baseDir : __dirname + '/../../' 16 | }; 17 | 18 | io.on( 'connection', function( socket ) { 19 | 20 | socket.on( 'new-subscriber', function( data ) { 21 | socket.broadcast.emit( 'new-subscriber', data ); 22 | }); 23 | 24 | socket.on( 'statechanged', function( data ) { 25 | delete data.state.overview; 26 | socket.broadcast.emit( 'statechanged', data ); 27 | }); 28 | 29 | socket.on( 'statechanged-speaker', function( data ) { 30 | delete data.state.overview; 31 | socket.broadcast.emit( 'statechanged-speaker', data ); 32 | }); 33 | 34 | }); 35 | 36 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) { 37 | app.use( '/' + dir, staticDir( opts.baseDir + dir ) ); 38 | }); 39 | 40 | app.get('/', function( req, res ) { 41 | 42 | res.writeHead( 200, { 'Content-Type': 'text/html' } ); 43 | fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res ); 44 | 45 | }); 46 | 47 | app.get( '/notes/:socketId', function( req, res ) { 48 | 49 | fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) { 50 | res.send( Mustache.to_html( data.toString(), { 51 | socketId : req.params.socketId 52 | })); 53 | }); 54 | 55 | }); 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' ); 65 | 66 | console.log( brown + 'reveal.js - Speaker Notes' + reset ); 67 | console.log( '1. Open the slides at ' + green + slidesLocation + reset ); 68 | console.log( '2. Click on the link in your JS console to go to the notes page' ); 69 | console.log( '3. Advance through your slides and your notes will advance automatically' ); 70 | -------------------------------------------------------------------------------- /slides/plugin/notes-server/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 150 | 151 | 152 | 153 | 154 |
155 |
UPCOMING:
156 |
157 |
158 |

Time Click to Reset

159 |
160 | 0:00 AM 161 |
162 |
163 | 00:00:00 164 |
165 |
166 |
167 | 168 | 172 |
173 | 174 | 175 | 176 | 177 | 405 | 406 | 407 | 408 | -------------------------------------------------------------------------------- /slides/plugin/notes/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles opening of and synchronization with the reveal.js 3 | * notes window. 4 | * 5 | * Handshake process: 6 | * 1. This window posts 'connect' to notes window 7 | * - Includes URL of presentation to show 8 | * 2. Notes window responds with 'connected' when it is available 9 | * 3. This window proceeds to send the current presentation state 10 | * to the notes window 11 | */ 12 | var RevealNotes = (function() { 13 | 14 | function openNotes( notesFilePath ) { 15 | 16 | if( !notesFilePath ) { 17 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path 18 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path 19 | notesFilePath = jsFileLocation + 'notes.html'; 20 | } 21 | 22 | var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' ); 23 | 24 | /** 25 | * Connect to the notes window through a postmessage handshake. 26 | * Using postmessage enables us to work in situations where the 27 | * origins differ, such as a presentation being opened from the 28 | * file system. 29 | */ 30 | function connect() { 31 | // Keep trying to connect until we get a 'connected' message back 32 | var connectInterval = setInterval( function() { 33 | notesPopup.postMessage( JSON.stringify( { 34 | namespace: 'reveal-notes', 35 | type: 'connect', 36 | url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search, 37 | state: Reveal.getState() 38 | } ), '*' ); 39 | }, 500 ); 40 | 41 | window.addEventListener( 'message', function( event ) { 42 | var data = JSON.parse( event.data ); 43 | if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) { 44 | clearInterval( connectInterval ); 45 | onConnected(); 46 | } 47 | } ); 48 | } 49 | 50 | /** 51 | * Posts the current slide data to the notes window 52 | */ 53 | function post() { 54 | 55 | var slideElement = Reveal.getCurrentSlide(), 56 | notesElement = slideElement.querySelector( 'aside.notes' ); 57 | 58 | var messageData = { 59 | namespace: 'reveal-notes', 60 | type: 'state', 61 | notes: '', 62 | markdown: false, 63 | whitespace: 'normal', 64 | state: Reveal.getState() 65 | }; 66 | 67 | // Look for notes defined in a slide attribute 68 | if( slideElement.hasAttribute( 'data-notes' ) ) { 69 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 70 | messageData.whitespace = 'pre-wrap'; 71 | } 72 | 73 | // Look for notes defined in an aside element 74 | if( notesElement ) { 75 | messageData.notes = notesElement.innerHTML; 76 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 77 | } 78 | 79 | notesPopup.postMessage( JSON.stringify( messageData ), '*' ); 80 | 81 | } 82 | 83 | /** 84 | * Called once we have established a connection to the notes 85 | * window. 86 | */ 87 | function onConnected() { 88 | 89 | // Monitor events that trigger a change in state 90 | Reveal.addEventListener( 'slidechanged', post ); 91 | Reveal.addEventListener( 'fragmentshown', post ); 92 | Reveal.addEventListener( 'fragmenthidden', post ); 93 | Reveal.addEventListener( 'overviewhidden', post ); 94 | Reveal.addEventListener( 'overviewshown', post ); 95 | Reveal.addEventListener( 'paused', post ); 96 | Reveal.addEventListener( 'resumed', post ); 97 | 98 | // Post the initial state 99 | post(); 100 | 101 | } 102 | 103 | connect(); 104 | 105 | } 106 | 107 | if( !/receiver/i.test( window.location.search ) ) { 108 | 109 | // If the there's a 'notes' query set, open directly 110 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { 111 | openNotes(); 112 | } 113 | 114 | // Open the notes when the 's' key is hit 115 | document.addEventListener( 'keydown', function( event ) { 116 | // Disregard the event if the target is editable or a 117 | // modifier is present 118 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 119 | 120 | // Disregard the event if keyboard is disabled 121 | if ( Reveal.getConfig().keyboard === false ) return; 122 | 123 | if( event.keyCode === 83 ) { 124 | event.preventDefault(); 125 | openNotes(); 126 | } 127 | }, false ); 128 | 129 | // Show our keyboard shortcut in the reveal.js help overlay 130 | if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' ); 131 | 132 | } 133 | 134 | return { open: openNotes }; 135 | 136 | })(); 137 | -------------------------------------------------------------------------------- /slides/plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf 6 | * 7 | * By Manuel Bieh (https://github.com/manuelbieh) 8 | */ 9 | 10 | // html2pdf.js 11 | var page = new WebPage(); 12 | var system = require( 'system' ); 13 | 14 | var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960; 15 | var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700; 16 | 17 | page.viewportSize = { 18 | width: slideWidth, 19 | height: slideHeight 20 | }; 21 | 22 | // TODO 23 | // Something is wrong with these config values. An input 24 | // paper width of 1920px actually results in a 756px wide 25 | // PDF. 26 | page.paperSize = { 27 | width: Math.round( slideWidth * 2 ), 28 | height: Math.round( slideHeight * 2 ), 29 | border: 0 30 | }; 31 | 32 | var inputFile = system.args[1] || 'index.html?print-pdf'; 33 | var outputFile = system.args[2] || 'slides.pdf'; 34 | 35 | if( outputFile.match( /\.pdf$/gi ) === null ) { 36 | outputFile += '.pdf'; 37 | } 38 | 39 | console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' ); 40 | 41 | page.open( inputFile, function( status ) { 42 | window.setTimeout( function() { 43 | console.log( 'Printed successfully' ); 44 | page.render( outputFile ); 45 | phantom.exit(); 46 | }, 1000 ); 47 | } ); 48 | 49 | -------------------------------------------------------------------------------- /slides/plugin/search/search.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Handles finding a text string anywhere in the slides and showing the next occurrence to the user 3 | * by navigatating to that slide and highlighting it. 4 | * 5 | * By Jon Snyder , February 2013 6 | */ 7 | 8 | var RevealSearch = (function() { 9 | 10 | var matchedSlides; 11 | var currentMatchedIndex; 12 | var searchboxDirty; 13 | var myHilitor; 14 | 15 | // Original JavaScript code by Chirp Internet: www.chirp.com.au 16 | // Please acknowledge use of this code by including this header. 17 | // 2/2013 jon: modified regex to display any match, not restricted to word boundaries. 18 | 19 | function Hilitor(id, tag) 20 | { 21 | 22 | var targetNode = document.getElementById(id) || document.body; 23 | var hiliteTag = tag || "EM"; 24 | var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$"); 25 | var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"]; 26 | var wordColor = []; 27 | var colorIdx = 0; 28 | var matchRegex = ""; 29 | var matchingSlides = []; 30 | 31 | this.setRegex = function(input) 32 | { 33 | input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|"); 34 | matchRegex = new RegExp("(" + input + ")","i"); 35 | } 36 | 37 | this.getRegex = function() 38 | { 39 | return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " "); 40 | } 41 | 42 | // recursively apply word highlighting 43 | this.hiliteWords = function(node) 44 | { 45 | if(node == undefined || !node) return; 46 | if(!matchRegex) return; 47 | if(skipTags.test(node.nodeName)) return; 48 | 49 | if(node.hasChildNodes()) { 50 | for(var i=0; i < node.childNodes.length; i++) 51 | this.hiliteWords(node.childNodes[i]); 52 | } 53 | if(node.nodeType == 3) { // NODE_TEXT 54 | if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) { 55 | //find the slide's section element and save it in our list of matching slides 56 | var secnode = node.parentNode; 57 | while (secnode.nodeName != 'SECTION') { 58 | secnode = secnode.parentNode; 59 | } 60 | 61 | var slideIndex = Reveal.getIndices(secnode); 62 | var slidelen = matchingSlides.length; 63 | var alreadyAdded = false; 64 | for (var i=0; i < slidelen; i++) { 65 | if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) { 66 | alreadyAdded = true; 67 | } 68 | } 69 | if (! alreadyAdded) { 70 | matchingSlides.push(slideIndex); 71 | } 72 | 73 | if(!wordColor[regs[0].toLowerCase()]) { 74 | wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length]; 75 | } 76 | 77 | var match = document.createElement(hiliteTag); 78 | match.appendChild(document.createTextNode(regs[0])); 79 | match.style.backgroundColor = wordColor[regs[0].toLowerCase()]; 80 | match.style.fontStyle = "inherit"; 81 | match.style.color = "#000"; 82 | 83 | var after = node.splitText(regs.index); 84 | after.nodeValue = after.nodeValue.substring(regs[0].length); 85 | node.parentNode.insertBefore(match, after); 86 | } 87 | } 88 | }; 89 | 90 | // remove highlighting 91 | this.remove = function() 92 | { 93 | var arr = document.getElementsByTagName(hiliteTag); 94 | while(arr.length && (el = arr[0])) { 95 | el.parentNode.replaceChild(el.firstChild, el); 96 | } 97 | }; 98 | 99 | // start highlighting at target node 100 | this.apply = function(input) 101 | { 102 | if(input == undefined || !input) return; 103 | this.remove(); 104 | this.setRegex(input); 105 | this.hiliteWords(targetNode); 106 | return matchingSlides; 107 | }; 108 | 109 | } 110 | 111 | function openSearch() { 112 | //ensure the search term input dialog is visible and has focus: 113 | var inputbox = document.getElementById("searchinput"); 114 | inputbox.style.display = "inline"; 115 | inputbox.focus(); 116 | inputbox.select(); 117 | } 118 | 119 | function toggleSearch() { 120 | var inputbox = document.getElementById("searchinput"); 121 | if (inputbox.style.display !== "inline") { 122 | openSearch(); 123 | } 124 | else { 125 | inputbox.style.display = "none"; 126 | myHilitor.remove(); 127 | } 128 | } 129 | 130 | function doSearch() { 131 | //if there's been a change in the search term, perform a new search: 132 | if (searchboxDirty) { 133 | var searchstring = document.getElementById("searchinput").value; 134 | 135 | //find the keyword amongst the slides 136 | myHilitor = new Hilitor("slidecontent"); 137 | matchedSlides = myHilitor.apply(searchstring); 138 | currentMatchedIndex = 0; 139 | } 140 | 141 | //navigate to the next slide that has the keyword, wrapping to the first if necessary 142 | if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) { 143 | currentMatchedIndex = 0; 144 | } 145 | if (matchedSlides.length > currentMatchedIndex) { 146 | Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v); 147 | currentMatchedIndex++; 148 | } 149 | } 150 | 151 | var dom = {}; 152 | dom.wrapper = document.querySelector( '.reveal' ); 153 | 154 | if( !dom.wrapper.querySelector( '.searchbox' ) ) { 155 | var searchElement = document.createElement( 'div' ); 156 | searchElement.id = "searchinputdiv"; 157 | searchElement.classList.add( 'searchdiv' ); 158 | searchElement.style.position = 'absolute'; 159 | searchElement.style.top = '10px'; 160 | searchElement.style.left = '10px'; 161 | //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/: 162 | searchElement.innerHTML = ''; 163 | dom.wrapper.appendChild( searchElement ); 164 | } 165 | 166 | document.getElementById("searchbutton").addEventListener( 'click', function(event) { 167 | doSearch(); 168 | }, false ); 169 | 170 | document.getElementById("searchinput").addEventListener( 'keyup', function( event ) { 171 | switch (event.keyCode) { 172 | case 13: 173 | event.preventDefault(); 174 | doSearch(); 175 | searchboxDirty = false; 176 | break; 177 | default: 178 | searchboxDirty = true; 179 | } 180 | }, false ); 181 | 182 | // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now) 183 | /* 184 | document.addEventListener( 'keydown', function( event ) { 185 | // Disregard the event if the target is editable or a 186 | // modifier is present 187 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 188 | 189 | if( event.keyCode === 83 ) { 190 | event.preventDefault(); 191 | openSearch(); 192 | } 193 | }, false ); 194 | */ 195 | return { open: openSearch }; 196 | })(); 197 | -------------------------------------------------------------------------------- /slides/plugin/zoom-js/zoom.js: -------------------------------------------------------------------------------- 1 | // Custom reveal.js integration 2 | (function(){ 3 | var isEnabled = true; 4 | 5 | document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) { 6 | var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key'; 7 | 8 | var zoomPadding = 20; 9 | var revealScale = Reveal.getScale(); 10 | 11 | if( event[ modifier ] && isEnabled ) { 12 | event.preventDefault(); 13 | 14 | var bounds = event.target.getBoundingClientRect(); 15 | 16 | zoom.to({ 17 | x: ( bounds.left * revealScale ) - zoomPadding, 18 | y: ( bounds.top * revealScale ) - zoomPadding, 19 | width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ), 20 | height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ), 21 | pan: false 22 | }); 23 | } 24 | } ); 25 | 26 | Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } ); 27 | Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } ); 28 | })(); 29 | 30 | /*! 31 | * zoom.js 0.3 (modified for use with reveal.js) 32 | * http://lab.hakim.se/zoom-js 33 | * MIT licensed 34 | * 35 | * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se 36 | */ 37 | var zoom = (function(){ 38 | 39 | // The current zoom level (scale) 40 | var level = 1; 41 | 42 | // The current mouse position, used for panning 43 | var mouseX = 0, 44 | mouseY = 0; 45 | 46 | // Timeout before pan is activated 47 | var panEngageTimeout = -1, 48 | panUpdateInterval = -1; 49 | 50 | // Check for transform support so that we can fallback otherwise 51 | var supportsTransforms = 'WebkitTransform' in document.body.style || 52 | 'MozTransform' in document.body.style || 53 | 'msTransform' in document.body.style || 54 | 'OTransform' in document.body.style || 55 | 'transform' in document.body.style; 56 | 57 | if( supportsTransforms ) { 58 | // The easing that will be applied when we zoom in/out 59 | document.body.style.transition = 'transform 0.8s ease'; 60 | document.body.style.OTransition = '-o-transform 0.8s ease'; 61 | document.body.style.msTransition = '-ms-transform 0.8s ease'; 62 | document.body.style.MozTransition = '-moz-transform 0.8s ease'; 63 | document.body.style.WebkitTransition = '-webkit-transform 0.8s ease'; 64 | } 65 | 66 | // Zoom out if the user hits escape 67 | document.addEventListener( 'keyup', function( event ) { 68 | if( level !== 1 && event.keyCode === 27 ) { 69 | zoom.out(); 70 | } 71 | } ); 72 | 73 | // Monitor mouse movement for panning 74 | document.addEventListener( 'mousemove', function( event ) { 75 | if( level !== 1 ) { 76 | mouseX = event.clientX; 77 | mouseY = event.clientY; 78 | } 79 | } ); 80 | 81 | /** 82 | * Applies the CSS required to zoom in, prefers the use of CSS3 83 | * transforms but falls back on zoom for IE. 84 | * 85 | * @param {Object} rect 86 | * @param {Number} scale 87 | */ 88 | function magnify( rect, scale ) { 89 | 90 | var scrollOffset = getScrollOffset(); 91 | 92 | // Ensure a width/height is set 93 | rect.width = rect.width || 1; 94 | rect.height = rect.height || 1; 95 | 96 | // Center the rect within the zoomed viewport 97 | rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2; 98 | rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2; 99 | 100 | if( supportsTransforms ) { 101 | // Reset 102 | if( scale === 1 ) { 103 | document.body.style.transform = ''; 104 | document.body.style.OTransform = ''; 105 | document.body.style.msTransform = ''; 106 | document.body.style.MozTransform = ''; 107 | document.body.style.WebkitTransform = ''; 108 | } 109 | // Scale 110 | else { 111 | var origin = scrollOffset.x +'px '+ scrollOffset.y +'px', 112 | transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')'; 113 | 114 | document.body.style.transformOrigin = origin; 115 | document.body.style.OTransformOrigin = origin; 116 | document.body.style.msTransformOrigin = origin; 117 | document.body.style.MozTransformOrigin = origin; 118 | document.body.style.WebkitTransformOrigin = origin; 119 | 120 | document.body.style.transform = transform; 121 | document.body.style.OTransform = transform; 122 | document.body.style.msTransform = transform; 123 | document.body.style.MozTransform = transform; 124 | document.body.style.WebkitTransform = transform; 125 | } 126 | } 127 | else { 128 | // Reset 129 | if( scale === 1 ) { 130 | document.body.style.position = ''; 131 | document.body.style.left = ''; 132 | document.body.style.top = ''; 133 | document.body.style.width = ''; 134 | document.body.style.height = ''; 135 | document.body.style.zoom = ''; 136 | } 137 | // Scale 138 | else { 139 | document.body.style.position = 'relative'; 140 | document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px'; 141 | document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px'; 142 | document.body.style.width = ( scale * 100 ) + '%'; 143 | document.body.style.height = ( scale * 100 ) + '%'; 144 | document.body.style.zoom = scale; 145 | } 146 | } 147 | 148 | level = scale; 149 | 150 | if( document.documentElement.classList ) { 151 | if( level !== 1 ) { 152 | document.documentElement.classList.add( 'zoomed' ); 153 | } 154 | else { 155 | document.documentElement.classList.remove( 'zoomed' ); 156 | } 157 | } 158 | } 159 | 160 | /** 161 | * Pan the document when the mosue cursor approaches the edges 162 | * of the window. 163 | */ 164 | function pan() { 165 | var range = 0.12, 166 | rangeX = window.innerWidth * range, 167 | rangeY = window.innerHeight * range, 168 | scrollOffset = getScrollOffset(); 169 | 170 | // Up 171 | if( mouseY < rangeY ) { 172 | window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) ); 173 | } 174 | // Down 175 | else if( mouseY > window.innerHeight - rangeY ) { 176 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) ); 177 | } 178 | 179 | // Left 180 | if( mouseX < rangeX ) { 181 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y ); 182 | } 183 | // Right 184 | else if( mouseX > window.innerWidth - rangeX ) { 185 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y ); 186 | } 187 | } 188 | 189 | function getScrollOffset() { 190 | return { 191 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset, 192 | y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset 193 | } 194 | } 195 | 196 | return { 197 | /** 198 | * Zooms in on either a rectangle or HTML element. 199 | * 200 | * @param {Object} options 201 | * - element: HTML element to zoom in on 202 | * OR 203 | * - x/y: coordinates in non-transformed space to zoom in on 204 | * - width/height: the portion of the screen to zoom in on 205 | * - scale: can be used instead of width/height to explicitly set scale 206 | */ 207 | to: function( options ) { 208 | 209 | // Due to an implementation limitation we can't zoom in 210 | // to another element without zooming out first 211 | if( level !== 1 ) { 212 | zoom.out(); 213 | } 214 | else { 215 | options.x = options.x || 0; 216 | options.y = options.y || 0; 217 | 218 | // If an element is set, that takes precedence 219 | if( !!options.element ) { 220 | // Space around the zoomed in element to leave on screen 221 | var padding = 20; 222 | var bounds = options.element.getBoundingClientRect(); 223 | 224 | options.x = bounds.left - padding; 225 | options.y = bounds.top - padding; 226 | options.width = bounds.width + ( padding * 2 ); 227 | options.height = bounds.height + ( padding * 2 ); 228 | } 229 | 230 | // If width/height values are set, calculate scale from those values 231 | if( options.width !== undefined && options.height !== undefined ) { 232 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 ); 233 | } 234 | 235 | if( options.scale > 1 ) { 236 | options.x *= options.scale; 237 | options.y *= options.scale; 238 | 239 | magnify( options, options.scale ); 240 | 241 | if( options.pan !== false ) { 242 | 243 | // Wait with engaging panning as it may conflict with the 244 | // zoom transition 245 | panEngageTimeout = setTimeout( function() { 246 | panUpdateInterval = setInterval( pan, 1000 / 60 ); 247 | }, 800 ); 248 | 249 | } 250 | } 251 | } 252 | }, 253 | 254 | /** 255 | * Resets the document zoom state to its default. 256 | */ 257 | out: function() { 258 | clearTimeout( panEngageTimeout ); 259 | clearInterval( panUpdateInterval ); 260 | 261 | magnify( { x: 0, y: 0 }, 1 ); 262 | 263 | level = 1; 264 | }, 265 | 266 | // Alias 267 | magnify: function( options ) { this.to( options ) }, 268 | reset: function() { this.out() }, 269 | 270 | zoomLevel: function() { 271 | return level; 272 | } 273 | } 274 | 275 | })(); 276 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /slides/test/examples/assets/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/test/examples/assets/image1.png -------------------------------------------------------------------------------- /slides/test/examples/assets/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jezhumble/cloud-native-aws-terraform-workshop/fe16c9e09aeef638eede3f1265f06662bb7d4da6/slides/test/examples/assets/image2.png -------------------------------------------------------------------------------- /slides/test/examples/barebones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Barebones 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 |

Barebones Presentation

20 |

This example contains the bare minimum includes and markup required to run a reveal.js presentation.

21 |
22 | 23 |
24 |

No Theme

25 |

There's no theme included, so it will fall back on browser defaults.

26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /slides/test/examples/embedded-media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Embedded Media 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |

Embedded Media Test

23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 |

Empty Slide

31 |
32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /slides/test/examples/math.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Math Plugin 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |

reveal.js Math Plugin

23 |

A thin wrapper for MathJax

24 |
25 | 26 |
27 |

The Lorenz Equations

28 | 29 | \[\begin{aligned} 30 | \dot{x} & = \sigma(y-x) \\ 31 | \dot{y} & = \rho x - y - xz \\ 32 | \dot{z} & = -\beta z + xy 33 | \end{aligned} \] 34 |
35 | 36 |
37 |

The Cauchy-Schwarz Inequality

38 | 39 | 42 |
43 | 44 |
45 |

A Cross Product Formula

46 | 47 | \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} 48 | \mathbf{i} & \mathbf{j} & \mathbf{k} \\ 49 | \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ 50 | \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 51 | \end{vmatrix} \] 52 |
53 | 54 |
55 |

The probability of getting \(k\) heads when flipping \(n\) coins is

56 | 57 | \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \] 58 |
59 | 60 |
61 |

An Identity of Ramanujan

62 | 63 | \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 64 | 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 65 | {1+\frac{e^{-8\pi}} {1+\ldots} } } } \] 66 |
67 | 68 |
69 |

A Rogers-Ramanujan Identity

70 | 71 | \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 72 | \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\] 73 |
74 | 75 |
76 |

Maxwell’s Equations

77 | 78 | \[ \begin{aligned} 79 | \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ 80 | \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ 81 | \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} 82 | \] 83 |
84 | 85 |
86 |
87 |

The Lorenz Equations

88 | 89 |
90 | \[\begin{aligned} 91 | \dot{x} & = \sigma(y-x) \\ 92 | \dot{y} & = \rho x - y - xz \\ 93 | \dot{z} & = -\beta z + xy 94 | \end{aligned} \] 95 |
96 |
97 | 98 |
99 |

The Cauchy-Schwarz Inequality

100 | 101 |
102 | \[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \] 103 |
104 |
105 | 106 |
107 |

A Cross Product Formula

108 | 109 |
110 | \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} 111 | \mathbf{i} & \mathbf{j} & \mathbf{k} \\ 112 | \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ 113 | \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 114 | \end{vmatrix} \] 115 |
116 |
117 | 118 |
119 |

The probability of getting \(k\) heads when flipping \(n\) coins is

120 | 121 |
122 | \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \] 123 |
124 |
125 | 126 |
127 |

An Identity of Ramanujan

128 | 129 |
130 | \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 131 | 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 132 | {1+\frac{e^{-8\pi}} {1+\ldots} } } } \] 133 |
134 |
135 | 136 |
137 |

A Rogers-Ramanujan Identity

138 | 139 |
140 | \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = 141 | \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\] 142 |
143 |
144 | 145 |
146 |

Maxwell’s Equations

147 | 148 |
149 | \[ \begin{aligned} 150 | \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ 151 | \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ 152 | \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} 153 | \] 154 |
155 |
156 |
157 | 158 |
159 | 160 |
161 | 162 | 163 | 164 | 165 | 183 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /slides/test/examples/slide-backgrounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Slide Backgrounds 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 |

data-background: #00ffff

33 |
34 | 35 |
36 |

data-background: #bb00bb

37 |
38 | 39 |
40 |

data-background: lightblue

41 |
42 | 43 |
44 |
45 |

data-background: #ff0000

46 |
47 |
48 |

data-background: rgba(0, 0, 0, 0.2)

49 |
50 |
51 |

data-background: salmon

52 |
53 |
54 | 55 |
56 |
57 |

Background applied to stack

58 |
59 |
60 |

Background applied to stack

61 |
62 |
63 |

Background applied to slide inside of stack

64 |
65 |
66 | 67 |
68 |

Background image

69 |
70 | 71 |
72 |
73 |

Background image

74 |
75 |
76 |

Background image

77 |
78 |
79 | 80 |
81 |

Background image

82 | 
data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"
83 |
84 | 85 |
86 |

Same background twice (1/2)

87 |
88 |
89 |

Same background twice (2/2)

90 |
91 | 92 |
93 |

Video background

94 |
95 | 96 |
97 |

Iframe background

98 |
99 | 100 |
101 |
102 |

Same background twice vertical (1/2)

103 |
104 |
105 |

Same background twice vertical (2/2)

106 |
107 |
108 | 109 |
110 |

Same background from horizontal to vertical (1/3)

111 |
112 |
113 |
114 |

Same background from horizontal to vertical (2/3)

115 |
116 |
117 |

Same background from horizontal to vertical (3/3)

118 |
119 |
120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 | 128 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /slides/test/examples/slide-transitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Slide Transitions 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | 25 |
26 | 27 |
28 | 29 |
30 |

Default

31 |
32 | 33 |
34 |

Default

35 |
36 | 37 |
38 |

data-transition: zoom

39 |
40 | 41 |
42 |

data-transition: zoom-in fade-out

43 |
44 | 45 |
46 |

Default

47 |
48 | 49 |
50 |

data-transition: convex

51 |
52 | 53 |
54 |

data-transition: convex-in concave-out

55 |
56 | 57 |
58 |
59 |

Default

60 |
61 |
62 |

data-transition: concave

63 |
64 |
65 |

data-transition: convex-in fade-out

66 |
67 |
68 |

Default

69 |
70 |
71 | 72 |
73 |

data-transition: none

74 |
75 | 76 |
77 |

Default

78 |
79 | 80 |
81 | 82 |
83 | 84 | 85 | 86 | 87 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /slides/test/qunit-1.12.0.css: -------------------------------------------------------------------------------- 1 | /** 2 | * QUnit v1.12.0 - A JavaScript Unit Testing Framework 3 | * 4 | * http://qunitjs.com 5 | * 6 | * Copyright 2012 jQuery Foundation and other contributors 7 | * Released under the MIT license. 8 | * http://jquery.org/license 9 | */ 10 | 11 | /** Font Family and Sizes */ 12 | 13 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { 14 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 15 | } 16 | 17 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 18 | #qunit-tests { font-size: smaller; } 19 | 20 | 21 | /** Resets */ 22 | 23 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | 29 | /** Header */ 30 | 31 | #qunit-header { 32 | padding: 0.5em 0 0.5em 1em; 33 | 34 | color: #8699a4; 35 | background-color: #0d3349; 36 | 37 | font-size: 1.5em; 38 | line-height: 1em; 39 | font-weight: normal; 40 | 41 | border-radius: 5px 5px 0 0; 42 | -moz-border-radius: 5px 5px 0 0; 43 | -webkit-border-top-right-radius: 5px; 44 | -webkit-border-top-left-radius: 5px; 45 | } 46 | 47 | #qunit-header a { 48 | text-decoration: none; 49 | color: #c2ccd1; 50 | } 51 | 52 | #qunit-header a:hover, 53 | #qunit-header a:focus { 54 | color: #fff; 55 | } 56 | 57 | #qunit-testrunner-toolbar label { 58 | display: inline-block; 59 | padding: 0 .5em 0 .1em; 60 | } 61 | 62 | #qunit-banner { 63 | height: 5px; 64 | } 65 | 66 | #qunit-testrunner-toolbar { 67 | padding: 0.5em 0 0.5em 2em; 68 | color: #5E740B; 69 | background-color: #eee; 70 | overflow: hidden; 71 | } 72 | 73 | #qunit-userAgent { 74 | padding: 0.5em 0 0.5em 2.5em; 75 | background-color: #2b81af; 76 | color: #fff; 77 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 78 | } 79 | 80 | #qunit-modulefilter-container { 81 | float: right; 82 | } 83 | 84 | /** Tests: Pass/Fail */ 85 | 86 | #qunit-tests { 87 | list-style-position: inside; 88 | } 89 | 90 | #qunit-tests li { 91 | padding: 0.4em 0.5em 0.4em 2.5em; 92 | border-bottom: 1px solid #fff; 93 | list-style-position: inside; 94 | } 95 | 96 | #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running { 97 | display: none; 98 | } 99 | 100 | #qunit-tests li strong { 101 | cursor: pointer; 102 | } 103 | 104 | #qunit-tests li a { 105 | padding: 0.5em; 106 | color: #c2ccd1; 107 | text-decoration: none; 108 | } 109 | #qunit-tests li a:hover, 110 | #qunit-tests li a:focus { 111 | color: #000; 112 | } 113 | 114 | #qunit-tests li .runtime { 115 | float: right; 116 | font-size: smaller; 117 | } 118 | 119 | .qunit-assert-list { 120 | margin-top: 0.5em; 121 | padding: 0.5em; 122 | 123 | background-color: #fff; 124 | 125 | border-radius: 5px; 126 | -moz-border-radius: 5px; 127 | -webkit-border-radius: 5px; 128 | } 129 | 130 | .qunit-collapsed { 131 | display: none; 132 | } 133 | 134 | #qunit-tests table { 135 | border-collapse: collapse; 136 | margin-top: .2em; 137 | } 138 | 139 | #qunit-tests th { 140 | text-align: right; 141 | vertical-align: top; 142 | padding: 0 .5em 0 0; 143 | } 144 | 145 | #qunit-tests td { 146 | vertical-align: top; 147 | } 148 | 149 | #qunit-tests pre { 150 | margin: 0; 151 | white-space: pre-wrap; 152 | word-wrap: break-word; 153 | } 154 | 155 | #qunit-tests del { 156 | background-color: #e0f2be; 157 | color: #374e0c; 158 | text-decoration: none; 159 | } 160 | 161 | #qunit-tests ins { 162 | background-color: #ffcaca; 163 | color: #500; 164 | text-decoration: none; 165 | } 166 | 167 | /*** Test Counts */ 168 | 169 | #qunit-tests b.counts { color: black; } 170 | #qunit-tests b.passed { color: #5E740B; } 171 | #qunit-tests b.failed { color: #710909; } 172 | 173 | #qunit-tests li li { 174 | padding: 5px; 175 | background-color: #fff; 176 | border-bottom: none; 177 | list-style-position: inside; 178 | } 179 | 180 | /*** Passing Styles */ 181 | 182 | #qunit-tests li li.pass { 183 | color: #3c510c; 184 | background-color: #fff; 185 | border-left: 10px solid #C6E746; 186 | } 187 | 188 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 189 | #qunit-tests .pass .test-name { color: #366097; } 190 | 191 | #qunit-tests .pass .test-actual, 192 | #qunit-tests .pass .test-expected { color: #999999; } 193 | 194 | #qunit-banner.qunit-pass { background-color: #C6E746; } 195 | 196 | /*** Failing Styles */ 197 | 198 | #qunit-tests li li.fail { 199 | color: #710909; 200 | background-color: #fff; 201 | border-left: 10px solid #EE5757; 202 | white-space: pre; 203 | } 204 | 205 | #qunit-tests > li:last-child { 206 | border-radius: 0 0 5px 5px; 207 | -moz-border-radius: 0 0 5px 5px; 208 | -webkit-border-bottom-right-radius: 5px; 209 | -webkit-border-bottom-left-radius: 5px; 210 | } 211 | 212 | #qunit-tests .fail { color: #000000; background-color: #EE5757; } 213 | #qunit-tests .fail .test-name, 214 | #qunit-tests .fail .module-name { color: #000000; } 215 | 216 | #qunit-tests .fail .test-actual { color: #EE5757; } 217 | #qunit-tests .fail .test-expected { color: green; } 218 | 219 | #qunit-banner.qunit-fail { background-color: #EE5757; } 220 | 221 | 222 | /** Result */ 223 | 224 | #qunit-testresult { 225 | padding: 0.5em 0.5em 0.5em 2.5em; 226 | 227 | color: #2b81af; 228 | background-color: #D2E0E6; 229 | 230 | border-bottom: 1px solid white; 231 | } 232 | #qunit-testresult .module-name { 233 | font-weight: bold; 234 | } 235 | 236 | /** Fixture */ 237 | 238 | #qunit-fixture { 239 | position: absolute; 240 | top: -10000px; 241 | left: -10000px; 242 | width: 1000px; 243 | height: 1000px; 244 | } -------------------------------------------------------------------------------- /slides/test/test-markdown-element-attributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown Element Attributes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /slides/test/test-markdown-element-attributes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' ); 9 | }); 10 | 11 | 12 | test( 'Attributes on element header in vertical slides', function() { 13 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' ); 14 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' ); 15 | }); 16 | 17 | test( 'Attributes on element paragraphs in vertical slides', function() { 18 | strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' ); 19 | }); 20 | 21 | test( 'Attributes on element list items in vertical slides', function() { 22 | strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' ); 23 | }); 24 | 25 | test( 'Attributes on element paragraphs in horizontal slides', function() { 26 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' ); 27 | }); 28 | test( 'Attributes on element list items in horizontal slides', function() { 29 | strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' ); 30 | }); 31 | test( 'Attributes on element list items in horizontal slides', function() { 32 | strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' ); 33 | }); 34 | 35 | test( 'Attributes on elements in vertical slides with default element attribute separator', function() { 36 | strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' ); 37 | }); 38 | 39 | test( 'Attributes on elements in single slides with default element attribute separator', function() { 40 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' ); 41 | }); 42 | 43 | } ); 44 | 45 | Reveal.initialize(); 46 | 47 | -------------------------------------------------------------------------------- /slides/test/test-markdown-slide-attributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown Attributes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /slides/test/test-markdown-slide-attributes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' ); 9 | }); 10 | 11 | test( 'Id on slide', function() { 12 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' ); 13 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' ); 14 | }); 15 | 16 | test( 'data-background attributes', function() { 17 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); 18 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); 19 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); 20 | }); 21 | 22 | test( 'data-transition attributes', function() { 23 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); 24 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); 25 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' ); 26 | }); 27 | 28 | test( 'data-background attributes with default separator', function() { 29 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); 30 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); 31 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); 32 | }); 33 | 34 | test( 'data-transition attributes with default separator', function() { 35 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); 36 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); 37 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' ); 38 | }); 39 | 40 | test( 'data-transition attributes with inline content', function() { 41 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' ); 42 | }); 43 | 44 | } ); 45 | 46 | Reveal.initialize(); 47 | 48 | -------------------------------------------------------------------------------- /slides/test/test-markdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /slides/test/test-markdown.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' ); 9 | }); 10 | 11 | 12 | } ); 13 | 14 | Reveal.initialize(); 15 | 16 | -------------------------------------------------------------------------------- /slides/test/test-pdf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test PDF exports 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /slides/test/test-pdf.js: -------------------------------------------------------------------------------- 1 | 2 | Reveal.addEventListener( 'ready', function() { 3 | 4 | // Only one test for now, we're mainly ensuring that there 5 | // are no execution errors when running PDF mode 6 | 7 | test( 'Reveal.isReady', function() { 8 | strictEqual( Reveal.isReady(), true, 'returns true' ); 9 | }); 10 | 11 | 12 | } ); 13 | 14 | Reveal.initialize({ pdf: true }); 15 | 16 | -------------------------------------------------------------------------------- /slides/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Tests 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /slides/unit2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 |
26 |
27 |
28 |

Infrastructure as Code with Terraform and AWS

29 |

Unit 2: Guest Networking

30 |

This 18F workshop is in the worldwide public domain.

31 |
32 |
33 |

Learning objectives

34 |
    35 |
  • Understand AWS guest networking primitives and configuration
    • 36 |
  • Be able to spin up an EC2 instance with terraform
    • 37 |
  • Know how to make an EC2 box public routable 38 |
39 |
40 |
41 |

Set up your access

42 | 

 43 | export AWS_ACCESS_KEY_ID=[access key]
 44 | export AWS_SECRET_ACCESS_KEY=[secret key]
 45 | export AWS_DEFAULT_REGION=us-east-1
 46 | ssh-keygen -f ~/.ssh/aws
 47 | aws ec2 import-key-pair --key-name [key name] \
 48 |   --public-key-material file://$HOME//.ssh/aws.pub
 49 | 
 50 |
51 | (replace highlighted sections with the correct values). 52 |
53 |
54 |

Your first terraform file

55 | 
resource "aws_vpc" "workshop_vpc" {
 56 |     cidr_block = "10.0.X.0/24"
 57 | }
 58 | 
 59 | resource "aws_subnet" "public_subnet_1" {
 60 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
 61 |     availability_zone = "us-east-1a"
 62 |     cidr_block = "10.0.X.0/26"
 63 | }
 64 | 
 65 | resource "aws_instance" "bastion" {
 66 |     ami = "ami-04681a1dbd79675a5"
 67 |     subnet_id = "${aws_subnet.public_subnet_1.id}"
 68 |     associate_public_ip_address = true
 69 |     key_name = "[key name]"
 70 |     instance_type = "t2.micro"
 71 | }
72 | 75 |
76 |
77 |

Run Terraform

78 |
    79 |
  • Create a directory called terraform
    • 80 |
  • Save the file as terraform/terraform.tf
    • 81 |
  • Run terraform init terraform
    • 82 |
  • Run terraform apply terraform
    • 83 |
  • grep '"id": "i-.*"' terraform.tfstate
    • 84 |
  • Go find your new EC2 instance in the console
    • 85 |
  • Try pinging it! Hmmm...
    • 86 |
87 | 90 |
91 |
92 |

Now let's kill it

93 |
    94 |
  • Run terraform destroy terraform
    • 95 |
  • This will take a while...
    • 96 |
  • ...So let's talk about terraform state
    • 97 |
98 |
99 |
100 |

Terraform state

101 |
    102 |
  • You've seen a file called terraform.tfstate
    • 103 |
  • By default Terraform stores state locally
    • 104 |
  • For a real project, you'll store it in an S3 bucket
    • 105 | 
  • terraform remote config -backend=s3 \
106 |   -backend-config="bucket=[unique_bucket_name]" \
107 |   -backend-config="key=network/terraform.tfstate" \
108 |   -backend-config="region=us-east-1"
    • 109 |
  • If your state file is deleted or corrupted...
    • 110 |
  • ...you just orphaned everything in your AWS account
    • 111 |
112 | 115 |
116 |
117 |

Networking

118 | We created an instance, but we can't connect to it. To do that, we need to understand how networking is modeled in AWS. We'll start with regions and availability zones. 119 | 120 | 123 |
124 |
125 |

AWS datacenters ("regions")

126 | AWS's datacenters 127 | 130 |
131 |
132 |

Availability zones

133 | Availability zones within regions are isolated, but have low latency links between them. 134 | AWS's datacenters 135 |
136 |
137 |

VPCs, subnets, and routes

138 | 139 |
    140 |
  • Instances always launched in a subnet
    • 141 |
  • Subnets always associated with an AZ and a VPC
    • 142 |
  • Routers always associated with a VPC and one or more subnets
    • 143 |
  • You need a gateway to get anywhere
    • 144 |
145 |
146 |
147 |

Let's add a gateway & route table

148 | 
resource "aws_internet_gateway" "workshop_gw" {
149 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
150 | }
151 | 
152 | resource "aws_route_table" "workshop_route_table" {
153 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
154 |     route {
155 |         cidr_block = "0.0.0.0/0"
156 |         gateway_id = "${aws_internet_gateway.workshop_gw.id}"
157 |     }
158 | }
159 | 
160 | resource "aws_route_table_association" "route_subnet_1" {
161 |     subnet_id = "${aws_subnet.public_subnet_1.id}"
162 |     route_table_id = "${aws_route_table.workshop_route_table.id}"
163 | }
164 |
165 |
166 |

OK let's network!

167 |
    168 |
  • terraform plan terraform
    • 169 |
  • How cool is that!
    • 170 |
  • terraform apply terraform
    • 171 |
  • (Note: terraform apply is idempotent)
    • 172 |
  • But... still can't ping our bastion. Boo!
    • 173 |
174 |
175 |
176 |

Security groups

177 |
    178 |
  • A security group is like a firewall.
    • 179 |
  • They can be attached to multiple AWS resource types
    • 180 |
  • By default, VPCs come with a security group that allows egress but not ingress
    • 181 |
182 |
183 |
184 |

Let's add a security group

185 | 
resource "aws_security_group" "bastion_sg" {
186 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
187 | 
188 |     ingress {
189 |         from_port = 8
190 |         to_port = 0
191 |         protocol = "icmp"
192 |         cidr_blocks = ["0.0.0.0/0"]
193 |     }
194 | }
195 |
196 |
197 |
198 |

Now attach it to our instance

199 | 
resource "aws_instance" "bastion" {
200 |     ami = "ami-04681a1dbd79675a5"
201 |     subnet_id = "${aws_subnet.public_subnet_1.id}"
202 |     associate_public_ip_address = true
203 |     key_name = "[key name]"
204 |     instance_type = "t2.micro"
205 |     vpc_security_group_ids = ["${aws_security_group.bastion_sg.id}"]
206 | }
207 |
    208 |
  • terraform apply terraform
    • 209 |
  • ...and now we can ping our host!
    • 210 |
211 |
212 |
213 |

Add ssh access too

214 | 
    ingress {
215 |         from_port = 22
216 |         to_port = 22
217 |         protocol = "tcp"
218 |         cidr_blocks = ["0.0.0.0/0"]
219 |     }
220 |
221 |
    222 |
  • terraform apply terraform
    • 223 |
  • ...and now we can ssh in too!
    • 224 |
  • Once you're in, try pinging Google
    • 225 |
  • Hmmm...
    • 226 |
227 |
228 |
229 |

Add an egress rule

230 | 
    egress {
231 |         from_port = 0
232 |         to_port = 0
233 |         protocol = "-1"
234 |         cidr_blocks = ["0.0.0.0/0"]
235 |     }
236 |
237 |
    238 |
  • terraform apply terraform
    • 239 |
  • Now we can see out.
    • 240 |
  • By default, AWS lets you egress - but Terraform turns this off unless you declare it explicitly.
    • 241 |
242 |
243 |
244 |

Unit 2 review

245 |
    246 |
  • We have a VPC, a subnet in an AZ, a gateway, route table, security group...
    • 247 |
  • ...and a host. That we can reach.
    • 248 |
  • We've understood all the basics of AWS networking
    • 249 |
  • By adding block storage (EBS), we can "lift and shift"
    • 250 |
  • However there is a cloud on the horizon...
    • 251 |
252 |
253 |
254 | Unit 3 255 |
256 | 257 |
258 |
259 | 260 | 261 | 262 | 263 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /slides/unit3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 |
26 |
27 |
28 |

Infrastructure as Code with Terraform and AWS

29 |

Unit 3: A Short Primer on Distributed Systems

30 |

This 18F workshop is in the worldwide public domain.

31 |
32 |
33 |

Learning objectives

34 |
    35 |
  • Understand architectural implications of building distributed systems
    • 36 |
  • Know how the cloud enables building high availability systems
    • 37 |
  • Understand the trade-offs involved in building cloud native systems
    • 38 |
39 |
40 |
41 |
Operations at web scale is the ability to consistently create and deploy reliable software to an unreliable platform that scales horizontally.
42 | — Jesse Robbins, "Master of Disaster" at Amazon, Operations is a Competitive Advantage (O'Reilly) 43 |
44 |
45 |

Unreliable platform

46 | 47 | 50 |
51 |
52 |

Unreliable platform

53 |
    54 |
  • If your system is on the internet, you're on an unreliable platform.
    • 55 |
  • Amazon regions have a 99.95% SLA for availability (including RDS)...
    • 56 |
  • ...but only if you use multiple availability zones.
    • 57 |
58 | 61 |
62 |
63 |

Scaling horizontally

64 | 65 | 68 |
69 |
70 |

Destroy works of art

71 |
    72 |
  • Hosts should be disposable.
    • 73 |
  • Provisioning new hosts should be fully automated using versioned config.
    • 74 |
  • Our infrastructure should automatically detect failures and kill.
    • 75 |
  • If there's insufficient volatility, we should introduce more (e.g. chaos monkey).
    • 76 |
77 |
78 |
79 |

Introduce failure

80 | 81 | Site Reliability Engineering: How Google Runs Production Systems, p39. 82 | 83 |
84 |
85 |

Twelve Factor Apps

86 |
    87 |
  • Declarative formats for setup automation, to minimize time and cost for new developers;
    • 88 |
  • Clean contract with the underlying operating system, offering maximum portability;
    • 89 |
  • Suitable for deployment on modern cloud platforms
    • 90 |
  • Minimize divergence between development and production, enabling continuous deployment;
    • 91 |
  • Can scale up without significant changes to tooling, architecture, or development practices.
    • 92 |
93 | — Andrew Wiggins, https://12factor.net/ 94 | 97 |
98 |
99 |

Cloud Native apps

100 |
    101 |
  • Make apps stateless so they can scale horizontally and fail arbitrarily;
    • 102 |
  • Make apps disposable so we can start them up fast and automatically;
    • 103 |
  • Separate packages from configuration information for all resources (remote or attached);
    • 104 |
  • Each bounded context gets its own app;
    • 105 |
  • Apps are independently testable and deployable;
    • 106 |
  • Treat logging as a remote service;
    • 107 |
  • Instrument everything! Localizing problems is hard in distributed systems, and some issues are emergent.
    • 108 |
109 |
110 |
111 |

Unit 3 review

112 |
    113 |
  • Internet systems are distributed systems
    • 114 |
  • We need to architect for availability in the face of an unreliable platform
    • 115 |
  • Design for stateless, disposable apps and hosts that can be independently tested and deployed
    • 116 |
  • Be able to provision in a fully automated fashion from version control
    • 117 |
118 |
119 |
120 | Unit 4 121 |
122 | 123 |
124 |
125 | 126 | 127 | 128 | 129 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /slides/unit4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | reveal.js 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 |
27 |
28 |
29 |

Infrastructure as Code with Terraform and AWS

30 |

Unit 4: Autoscaling Groups

31 |

This 18F workshop is in the worldwide public domain.

32 |
33 |
34 |

Learning objectives

35 |
    36 |
  • Understand the architecture of auto scaling groups
    • 37 |
  • Know how to create an auto scaling group with Terraform
    • 38 |
  • Be able to configure hosts created by auto scaling groups
    • 39 |
40 |
41 |
42 | system diagram 43 | 46 |
47 |
48 |

Auto scaling groups

49 | 50 |
    51 |
  • At least two availability zones
    • 52 |
  • Load balancer
    • 53 |
  • Auto scaling group
    • 54 |
  • Launch configuration
    • 55 |
56 |
57 |
58 |

Elastic Load balancers in AWS

59 |
    60 |
  • Two types: classic and ALBs
    • 61 |
  • ALB (application load balancer): route based on OSI layer 7
    • 62 |
  • For example: headers, content, path
    • 63 |
  • Also supports HTTP/2 and Websockets
    • 64 |
  • ALBs also have request tracing (create a unique header per request)
    • 65 |
66 |
67 |
68 |

Second availability zone

69 | 
resource "aws_subnet" "public_subnet_2" {
 70 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
 71 |     availability_zone = "us-east-1d"
 72 |     cidr_block = "10.0.X.64/26"
 73 | }
 74 | 
 75 | resource "aws_route_table_association" "route_subnet_2" {
 76 |     subnet_id = "${aws_subnet.public_subnet_2.id}"
 77 |     route_table_id = "${aws_route_table.workshop_route_table.id}"
 78 | }
79 | 82 |
83 |
84 |

Security groups: ALB

85 | 
resource "aws_security_group" "alb_sg" {
 86 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
 87 | 
 88 |     ingress {
 89 |         from_port = 80
 90 |         to_port = 80
 91 |         protocol = "tcp"
 92 |         cidr_blocks = ["0.0.0.0/0"]
 93 |     }
 94 | 
 95 |     egress {
 96 |         from_port = 80
 97 |         to_port = 80
 98 |         protocol = "tcp"
 99 |         cidr_blocks = ["10.0.X.0/24"]
100 |     }
101 | }
102 |
103 |
104 |

Security groups: Web hosts

105 | 
resource "aws_security_group" "web_sg" {
106 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
107 | 
108 |     ingress {
109 |         from_port = 80
110 |         to_port = 80
111 |         protocol = "tcp"
112 |         security_groups = [ "${aws_security_group.alb_sg.id}" ]
113 |     }
114 | 
115 |     egress {
116 |         from_port = 0
117 |         to_port = 0
118 |         protocol = "-1"
119 |         cidr_blocks = ["0.0.0.0/0"]
120 |     }
121 | }
122 |
123 |
124 |

Security groups: Web hosts (pt 2)

125 | 
    ingress {
126 |         from_port = 22
127 |         to_port = 22
128 |         protocol = "tcp"
129 |         security_groups = [ "${aws_security_group.bastion_sg.id}" ]
130 |     }
131 |
132 |
133 |

Application load balancer

134 | 
resource "aws_alb" "workshop_alb" {
135 |   name = "workshop-alb-[name]"
136 |   subnets = ["${aws_subnet.public_subnet_1.id}",
137 |              "${aws_subnet.public_subnet_2.id}"]
138 |   security_groups = ["${aws_security_group.alb_sg.id}"]
139 | }
140 | 
141 | resource "aws_alb_target_group" "workshop_alb" {
142 |   name = "workshop-alb-target-[name]"
143 |   vpc_id = "${aws_vpc.workshop_vpc.id}"
144 |   port = 80
145 |   protocol = "HTTP"
146 |   health_check {
147 |     matcher = "200,301"
148 |   }
149 | }
150 |
151 | 154 |
155 |
156 |

ALB listener

157 | 
resource "aws_alb_listener" "workshop_alb_http" {
158 |   load_balancer_arn = "${aws_alb.workshop_alb.arn}"
159 |   port = 80
160 |   protocol = "HTTP"
161 |   default_action {
162 |     target_group_arn = "${aws_alb_target_group.workshop_alb.arn}"
163 |     type = "forward"
164 |   }
165 | }
166 | 
167 | output "alb.dns" {
168 |     value = "${aws_alb.workshop_alb.dns_name}"
169 | }
170 | 173 |
174 |
175 |

Launch configuration

176 | 
resource "aws_launch_configuration" "workshop_launch_conf" {
177 |     image_id = "ami-04681a1dbd79675a5"
178 |     instance_type = "t2.micro"
179 |     key_name = "[key name]"
180 |     security_groups = ["${aws_security_group.web_sg.id}"]
181 |     associate_public_ip_address = true
182 |     lifecycle {
183 |         create_before_destroy = true
184 |     }
185 |     user_data = <<EOF
186 | #!/usr/bin/env bash
187 | yum update -y
188 | yum install -y httpd
189 | systemctl enable httpd.service
190 | systemctl start httpd
191 | EOF
192 | }
193 |
194 |
195 |

Auto Scaling Group

196 | 
resource "aws_autoscaling_group" "workshop_autoscale" {
197 |     vpc_zone_identifier = ["${aws_subnet.public_subnet_1.id}",
198 |                            "${aws_subnet.public_subnet_2.id}"]
199 |     min_size = 2
200 |     max_size = 2
201 |     health_check_type = "EC2"
202 |     health_check_grace_period = 300
203 |     launch_configuration = "${aws_launch_configuration.workshop_launch_conf.id}"
204 |     target_group_arns = ["${aws_alb_target_group.workshop_alb.arn}"]
205 |     enabled_metrics = ["GroupInServiceInstances"]
206 | }
207 |
208 |
209 |

Unit 4 review

210 |
    211 |
  • We stood up an AWS load balancer and autoscale group
    • 212 |
  • We deployed all the infrastructure required for a highly available web app
    • 213 |
  • We provisioned everything purely from versioned Terraform config
    • 214 |
215 |
216 |
217 | Unit 5 218 |
219 | 220 |
221 |
222 | 223 | 224 | 225 | 226 | 240 | 241 | 242 | -------------------------------------------------------------------------------- /slides/unit6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 |
26 |
27 |
28 |

Infrastructure as Code with Terraform and AWS

29 |

Unit 6: Databases and Secrets

30 |

This 18F workshop is in the worldwide public domain.

31 |
32 |
33 |

Learning objectives

34 |
    35 |
  • Understand how to build highly available databases with RDS
    • 36 |
  • Know how to manage and access secrets
    • 37 |
  • Be able to continuously deploy
    • 38 |
39 |
40 |
41 |

Update ALB target group

42 | 
resource "aws_alb_target_group" "workshop_alb" {
 43 |     name = "workshop-alb-target-[name]"
 44 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
 45 |     port = 80
 46 |     protocol = "HTTP"
 47 |     health_check {
 48 |       matcher = "200,301"
 49 |       path = "/status.php"
 50 |   }
 51 | }
52 | Then terraform apply terraform 53 | 56 |
57 |
58 |

Let's set up logging

59 | 
resource "aws_iam_role_policy" "s3_bucket_policy" {
 60 | ...
 61 |   "Statement": [
 62 |     {
 63 |       "Effect": "Allow",
 64 |       "Action": [ "s3:Get*", "s3:List*" ],
 65 |       "Resource": [ "arn:aws:s3:::jez-cloud-workshop",
 66 |                     "arn:aws:s3:::jez-cloud-workshop/*" ]
 67 |     },
 68 |     {
 69 |       "Effect": "Allow",
 70 |       "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream",
 71 |         "logs:PutLogEvents", "logs:DescribeLogStreams" ],
 72 |       "Resource": [ "arn:aws:logs:*:*:*" ]
 73 |     }
 74 |   ]
 75 | }
 76 | ...
77 |

Don't miss the comma! terraform apply terraform

78 |
79 |
80 |

Now we can see logs

81 | 82 | 85 |
86 |
87 |

Now we have a failing test, and in the logs you should see something like Couldn't create database connection: Error: SQLSTATE[HY000] [2002] No such file or directory

88 |

Note: We're not going to create databases for everyone. For the rest of the class, the instructor will run the code.

89 | 90 |
91 |
92 |

RDS

93 |
    94 |
  • RDS creates pre-configured database instances on AWS
    • 95 |
  • PostgreSQL, MySQL, MariaDB, Oracle, and Microsoft SQL Server are all supported.
    • 96 |
  • Exports CloudWatch metrics such as %CPU, free space, connections
    • 97 |
  • RDS automatically handles backups (into S3)
    • 98 |
  • You can configure read replicas to scale out
    • 99 |
  • You can also have multi-AZ deployments for HA
    • 100 |
  • You can resize storage, upgrade the engine, or change instance type on demand
    • 101 |
102 |
103 |
104 |

RDS

105 | 106 |
107 |
108 |

Database networking

109 | In networks.tf 110 | 
resource "aws_subnet" "db_subnet_1" {
111 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
112 |     availability_zone = "us-east-1a"
113 |     cidr_block = "10.0.X.128/26"
114 |     map_public_ip_on_launch = false
115 | }
116 | 
117 | resource "aws_subnet" "db_subnet_2" {
118 |     vpc_id = "${aws_vpc.workshop_vpc.id}"
119 |     availability_zone = "us-east-1d"
120 |     cidr_block = "10.0.X.192/26"
121 |     map_public_ip_on_launch = false
122 | }
123 | 
124 | resource "aws_db_subnet_group" "db_subnet_group" {
125 |     name = "db-subnet-group"
126 |     subnet_ids = ["${aws_subnet.db_subnet_1.id}",
127 |         "${aws_subnet.db_subnet_2.id}"]
128 | }
129 |
130 |
131 |

Add a Security Group

132 | Also in networks.tf 133 | 
resource "aws_security_group" "db" {
134 |   name = "db"
135 |   vpc_id = "${aws_vpc.workshop_vpc.id}"
136 | 
137 |   ingress {
138 |     from_port = 3306
139 |     to_port = 3306
140 |     protocol = "tcp"
141 |     security_groups = [ "${aws_security_group.web_sg.id}",
142 |         "${aws_security_group.bastion_sg.id}" ]
143 |   }
144 | }
145 |
146 |
147 |
148 |

Creating a Database

149 | Create a file called db.tf 150 | 
resource "aws_db_instance" "workshop_db" {
151 |   allocated_storage = 10
152 |   engine = "mysql"
153 |   multi_az = false # True in real life for HA
154 |   instance_class = "db.t2.micro"
155 |   name = "jezworkshop"
156 |   username = "workshop"
157 |   password = "dummy_password"
158 |   publicly_accessible = false
159 |   storage_type = "gp2"
160 |   publicly_accessible = false
161 |   skip_final_snapshot = true
162 |   db_subnet_group_name = "${aws_db_subnet_group.db_subnet_group.id}"
163 |   vpc_security_group_ids = [ "${aws_security_group.db.id}" ]
164 | }
165 |
166 |
167 |
168 |

Creating a Database

169 | Get some parameters we'll need later 170 | 

171 | 
172 | output "rds_instance_id" {
173 |   value = "${aws_db_instance.workshop_db.id}"
174 | }
175 | 
176 | output "rds_instance_uri" {
177 |   value = "${aws_db_instance.workshop_db.address}"
178 | }
179 |
180 |
181 |
182 |

Getting DB Creds To Our App

183 |
  • There are several tools to manage secrets in a cloud context, e.g. HashiCorp's Vault.
    • 184 |
  • We'll be using an AWS service called Systems Manager. It has a 'parameter store'.
    • 185 |
  • We can get credentials programmatically from AWS SSM.
    • 186 |
  • First we need to give our EC2 boxes permissions to access SSM. 187 |
    • 188 |
    189 |

    IAM permissions to access SSM

    190 | 
    resource "aws_iam_role_policy" "s3_bucket_policy" {
191 | ...
192 |       "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream",
193 |         "logs:PutLogEvents", "logs:DescribeLogStreams" ],
194 |       "Resource": [ "arn:aws:logs:*:*:*" ]
195 |     },
196 |     {
197 |       "Effect": "Allow",
198 |       "Action": [ "kms:Decrypt" ],
199 |       "Resource": "arn:aws:kms:*:*:*"
200 |     },
201 |     {
202 |       "Effect": "Allow",
203 |       "Action": [ "ssm:GetParametersByPath" ],
204 |       "Resource": "*"
205 |     }
206 | ]
207 | ...
    208 |

    Don't miss the comma!

    209 |
    210 |
    211 |

    EC2 role to access SSM

    212 | 
    resource "aws_iam_role" "ec2_role" {
213 |     name = "ec2_role_[name]"
214 |     assume_role_policy = <<EOF
215 | {
216 |   "Version": "2012-10-17",
217 |   "Statement": [
218 |     {
219 |       "Action": "sts:AssumeRole",
220 |       "Principal": { "Service": [ "ec2.amazonaws.com" ,
221 | 					"ssm.amazonaws.com" ]},
222 |       "Effect": "Allow",
223 |       "Sid": ""
224 |     }
225 |   ]
226 | }
227 | EOF
228 | }
    229 |

    terraform apply terraform

    230 |
    231 |
    232 |

    Create the Secrets

    233 |
      234 |
    • Make a long random string to use as a password for the DB
      • 235 |
    • Paste it into the SSM Parameter Store console
      • 236 |
    • Finally, run: 237 | 
      aws rds modify-db-instance \
238 |   --db-instance-identifier <rds_instance_id> \
239 |   --apply-immediately --master-user-password <db_password>
      • 240 |
    241 |
    242 |
    243 |

    Unit 6 review

    244 |
      245 |
    • We set up distributed logging using CloudWatch
      • 246 |
    • We introduced RDS
      • 247 |
    • We showed how to manage secrets
      • 248 |
    • We created monitoring to check our app can connect to the db
      • 249 |
    250 |
    251 |
    252 |

    Loose ends

    253 |
      254 |
    • X509 certificates and https (use a CDN, e.g. CloudFront)
      • 255 |
    • Variables and modules in Terraform
      • 256 |
    • Putting things in CI
      • 257 |
    258 |
    259 |
    260 |

    The End

    261 |

    Please terraform destroy terraform!

    262 |
    263 |
    264 |
    265 | 266 |
    267 |
    268 | 269 | 270 | 271 | 272 | 286 | 287 | 288 | --------------------------------------------------------------------------------