This is a Gitlab for NZOSS Members

Commit 15052dba authored by Dave Lane's avatar Dave Lane
Browse files

initial commit of this RevealJS preso

\ No newline at end of file
/* global module:false */
module.exports = function(grunt) {
var port = grunt.option('port') || 8000;
var root = grunt.option('root') || '.';
if (!Array.isArray(root)) root = [root];
// Project configuration
pkg: grunt.file.readJSON('package.json'),
meta: {
'/*!\n' +
' * reveal.js <%= pkg.version %> (<%="yyyy-mm-dd, HH:MM") %>)\n' +
' *\n' +
' * MIT licensed\n' +
' *\n' +
' * Copyright (C) 2017 Hakim El Hattab,\n' +
' */'
qunit: {
files: [ 'test/*.html' ]
uglify: {
options: {
banner: '<%= meta.banner %>\n',
screwIE8: false
build: {
src: 'js/reveal.js',
dest: 'js/reveal.min.js'
sass: {
core: {
src: 'css/reveal.scss',
dest: 'css/reveal.css'
themes: {
expand: true,
cwd: 'css/theme/source',
src: ['*.sass', '*.scss'],
dest: 'css/theme',
ext: '.css'
autoprefixer: {
core: {
src: 'css/reveal.css'
cssmin: {
options: {
compatibility: 'ie9'
compress: {
src: 'css/reveal.css',
dest: 'css/reveal.min.css'
jshint: {
options: {
curly: false,
eqeqeq: true,
immed: true,
esnext: true,
latedef: 'nofunc',
newcap: true,
noarg: true,
sub: true,
undef: true,
eqnull: true,
browser: true,
expr: true,
globals: {
head: false,
module: false,
console: false,
unescape: false,
define: false,
exports: false
files: [ 'Gruntfile.js', 'js/reveal.js' ]
connect: {
server: {
options: {
port: port,
base: root,
livereload: true,
open: true,
useAvailablePort: true
zip: {
bundle: {
src: [
dest: ''
watch: {
js: {
files: [ 'Gruntfile.js', 'js/reveal.js' ],
tasks: 'js'
theme: {
files: [
tasks: 'css-themes'
css: {
files: [ 'css/reveal.scss' ],
tasks: 'css-core'
html: {
files: => path + '/*.html')
markdown: {
files: => path + '/*.md')
options: {
livereload: true
retire: {
js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
node: [ '.' ]
// Dependencies
grunt.loadNpmTasks( 'grunt-contrib-connect' );
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.loadNpmTasks( 'grunt-autoprefixer' );
grunt.loadNpmTasks( 'grunt-retire' );
grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-zip' );
// Default task
grunt.registerTask( 'default', [ 'css', 'js' ] );
// JS task
grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] );
// Theme CSS
grunt.registerTask( 'css-themes', [ 'sass:themes' ] );
// Core framework CSS
grunt.registerTask( 'css-core', [ 'sass:core', 'autoprefixer', 'cssmin' ] );
// All CSS
grunt.registerTask( 'css', [ 'sass', 'autoprefixer', 'cssmin' ] );
// Package presentation to archive
grunt.registerTask( 'package', [ 'default', 'zip' ] );
// Serve presentation locally
grunt.registerTask( 'serve', [ 'connect', 'watch' ] );
// Run tests
grunt.registerTask( 'test', [ 'jshint', 'qunit' ] );
Copyright (C) 2017 Hakim El Hattab,, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
\ No newline at end of file
I'm Dave Lane, president of the New Zealand (Free and) Open Source Society
The NZ Open Source Society is largely a community of technically and digitally minded people who recognise that humanity's reaching a new epoch of opportunity - the era of digital abundance, brought about by the increasing ubiquity of connected global computing.
In an era where, by default, things are closed and centralised, privacy is being erroded, and people feel that rather than controlling their digital tools, they are a law unto themselves, outside of their understanding and controlled by massive overseas corporations, we offer an antidote.
We're largely united around a common aesthetic - some might call it values and principles - although rest assured there's plenty of debate about these, too:
Self-determination > Co-dependence
Collaboration > Competition
Principle > Expedience
Communities > Corporations
Correctness > Convenience
Better ideas > tradition/convention
Do it yourself > have it done for your
Understanding > Ignoring
Diverse > Homogenous
Self reliant > Hostage situation
Wide open frontiers > Walled gardens
Ecosystem > Monoculture
Distributed > Centralised
Bottom up > Top down
And, most importantly, when the Society was founded in 2003, the real controversy was Open vs Closed
Today, with regard to general sentiment, Open has won. The game has shifted. Open is just a word. Anyone can use it, and because the status quo of technology is still largely closed, someone can call themselves open to cash in on the kudos that brings, while still being effectively closed. Today, the battle is Open vs Fauxpen.
We're not saying everything has to be opened up all at once - people and society can't handle that. What we feel is that being more open needs to be our objective, and we move towards it incrementally, based on our individual priorities. But with every change we make, everything we revisit, we pick the more open option, and we move relentlessly away from closed and towards open, never giving up ground.
We're here today to make good on our Society's mission:
To share the freedom of free and open source software, open standards, and open information for the benefit of New Zealand.
We're part of the New Zealand Free and Open Source community.
Our focus is on Free and Open Source Software (FOSS), but we're also champions of Open Hardware, Open Data, Open Standards, and the Communities creating, sustaining, and sharing them: the (digital) Commons in other words.
Our primary tactics for doing this include:
- individual action, especially in education and advocacy
- influencing government to develop open policies and practices. To be more focused on pursuing the "open" goals of the Digital 5 Charter to which NZ is a signatory
- working with other groups in areas where our principles align - groups like InternetNZ, the ITP, NZRise, and others.
- collectively providing examples of great open resources, like FOSS web services people in NZ can use like our
Slack -> Rocket.Chat,
Twitter/Facebook -> Mastodon,
DropBox/GoogleDocs/MSOffice365 -> NextCloud and Collabora Office,
Xero/SAP -> Odoo
MailChimp/Campaign Manager -> Mautic
Survey Monkey -> Lime Survey
BlackBoard -> Moodle
Kotui -> Koha
The Society gets all its funding from a small but growing financial membership base, and we also get generous sponsored services from a few FOSS-friendly businesses like Catalyst IT and Rimu Hosting.
We work to engage with all of NZ's open communities, even those who do not support us financially.
We have MeetUp groups in Christchurch, Wellington, and Auckland with over a registered 1000 members, and we're keen to see groups established in other centres around the country.
Today we have some stand-out FOSS contributors presenting their work, and we hope that, if you're not already doing so, their achievements will inspire you to add your efforts to open communities doing something you're passionate about - remember, contribution isn't just code. It can be things like advocacy, sponsorship, writing blog posts, submitting bug reports, simply telling others what FOSS is all about - because remember, we're competing with the world's biggest corporations, with marketing budgets to match. We need to take advantage of our passionate community participants to get the word out!
All it takes to be a valuable open contributor is for you decide you want to. Then find or start a community doing something you can be passionate about and contribute your energy to it. That's it! You're in.
The Society's currently going through a bit of a transition - in many ways, FOSS has prevailed in the world, but now we're facing new challenges, primarily from people jumping on the open bandwagon, trying to benefit from the sharing but not willing to give back. We're seeing open washing - like green-washing - all over the place, and we're reevaluating our tactics. We're also doing a review of our Constitution, now 15 years old, to ensure it accurately reflects these adjustments to our course.
We'll be asking our members to consider this new direction in our AGM in a few months time, and we plan to initiate our Society's upgrade at the NZ Open Source Awards - 23 October at Te Papa - where NZ's open community will be recognising the brilliant efforts of some of its worthy contributors.
# reveal.js [![Build Status](]( <a href=""><img src="" alt="Slides" width="160" height="20"></a>
A framework for easily creating beautiful presentations using HTML. [Check out the live demo](
reveal.js comes with a broad range of features including [nested slides](, [Markdown contents](, [PDF export](, [speaker notes]( and a [JavaScript API]( There's also a fully featured visual editor and platform for sharing reveal.js presentations at [](
## Table of contents
- [Online Editor](#online-editor)
- [Instructions](#instructions)
- [Markup](#markup)
- [Markdown](#markdown)
- [Element Attributes](#element-attributes)
- [Slide Attributes](#slide-attributes)
- [Configuration](#configuration)
- [Presentation Size](#presentation-size)
- [Dependencies](#dependencies)
- [Ready Event](#ready-event)
- [Auto-sliding](#auto-sliding)
- [Keyboard Bindings](#keyboard-bindings)
- [Touch Navigation](#touch-navigation)
- [Lazy Loading](#lazy-loading)
- [API](#api)
- [Slide Changed Event](#slide-changed-event)
- [Presentation State](#presentation-state)
- [Slide States](#slide-states)
- [Slide Backgrounds](#slide-backgrounds)
- [Parallax Background](#parallax-background)
- [Slide Transitions](#slide-transitions)
- [Internal links](#internal-links)
- [Fragments](#fragments)
- [Fragment events](#fragment-events)
- [Code syntax highlighting](#code-syntax-highlighting)
- [Slide number](#slide-number)
- [Overview mode](#overview-mode)
- [Fullscreen mode](#fullscreen-mode)
- [Embedded media](#embedded-media)
- [Stretching elements](#stretching-elements)
- [postMessage API](#postmessage-api)
- [PDF Export](#pdf-export)
- [Theming](#theming)
- [Speaker Notes](#speaker-notes)
- [Share and Print Speaker Notes](#share-and-print-speaker-notes)
- [Server Side Speaker Notes](#server-side-speaker-notes)
- [Multiplexing](#multiplexing)
- [Master presentation](#master-presentation)
- [Client presentation](#client-presentation)
- [ server](#socketio-server)
- [MathJax](#mathjax)
- [Installation](#installation)
- [Basic setup](#basic-setup)
- [Full setup](#full-setup)
- [Folder Structure](#folder-structure)
- [License](#license)
#### More reading
- [Changelog]( Up-to-date version history.
- [Examples]( Presentations created with reveal.js, add your own!
- [Browser Support]( Explanation of browser support and fallbacks.
- [Plugins](,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js.
## Online Editor
Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [](
## Instructions
### Markup
Here's a barebones example of a fully working reveal.js presentation:
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css">
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
<script src="js/reveal.js"></script>
The presentation markup hierarchy needs to be `.reveal > .slides > section` where the `section` represents one slide and can be repeated indefinitely. If you place multiple `section` elements inside of another `section` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example:
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
### Markdown
It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file.
This is based on [data-markdown]( from [Paul Irish]( modified to use [marked]( to support [GitHub Flavored Markdown]( Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
<section data-markdown>
<textarea data-template>
## Page title
A paragraph with some text and a [link](
#### External Markdown
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
<section data-markdown=""
Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
#### Element Attributes
Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
<section data-markdown>
<script type="text/template">
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
#### Slide Attributes
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
<section data-markdown>
<script type="text/template">
<!-- .slide: data-background="#ff0000" -->
Markdown content
#### Configuring *marked*
We use [marked]( to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):
// Options which are passed into marked
// See
markdown: {
smartypants: true
### Configuration
At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below.
// Display presentation control arrows
controls: true,
// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
controlsTutorial: true,
// Determines where controls appear, "edges" or "bottom-right"
controlsLayout: 'bottom-right',
// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows: 'faded',
// Display a presentation progress bar
progress: true,
// Set default timing of 2 minutes per slide
defaultTiming: 120,
// Display the page number of the current slide
slideNumber: false,
// Push each slide change to the browser history
history: false,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Vertical centering of slides
center: true,
// Enables touch navigation on devices with touch input
touch: true,
// Loop the presentation
loop: false,
// Change the presentation direction to be RTL
rtl: false,
// Randomizes the order of slides each time the presentation loads
shuffle: false,
// Turns fragments on and off globally
fragments: true,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
// Flags if we should show a help overlay when the questionmark
// key is pressed
help: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Global override for autoplaying embedded media (video/audio/iframe)
// - null: Media will only autoplay if data-autoplay is present
// - true: All media will autoplay, regardless of individual setting
// - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,
// Stop auto-sliding after user input
autoSlideStoppable: true,
// Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext,
// Enable slide navigation via mouse wheel
mouseWheel: false,
// Hides the address bar on mobile devices
hideAddressBar: true,
// Opens links in an iframe preview overlay
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
// individually
previewLinks: false,
// Transition style
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
// Number of slides away from the current that are visible
viewDistance: 3,
// Parallax background image
parallaxBackgroundImage: '', // e.g. "''"
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
// Number of pixels to move the parallax background per slide
// - Calculated automatically unless specified
// - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
// The display mode that will be used to show slides
display: 'block'
The configuration can be updated after initialization using the `configure` method:
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });
// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });
### Presentation Size
All presentations have a normal size, that is, the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
See below for a list of configuration options related to sizing, including default values:
// ...
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.5