├── .github ├── FUNDING.yml └── workflows │ └── js.yml ├── test ├── assets │ ├── external-script-a.js │ ├── external-script-b.js │ ├── external-script-c.js │ └── external-script-d.js ├── simple.md ├── test-dependencies.html ├── test-grid-navigation.html ├── test-multiple-instances-es5.html ├── test-dependencies-async.html ├── test-pdf.html ├── test-multiple-instances.html ├── test-iframe-backgrounds.html ├── test-iframes.html ├── test-plugins.html ├── test-state.html └── test-auto-animate.html ├── favicon.png ├── .npmignore ├── .gitignore ├── dist ├── theme │ ├── fonts │ │ └── source-sans-pro │ │ │ ├── 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 │ │ │ └── LICENSE │ └── black.css └── reset.css ├── .prettierrc ├── js ├── utils │ ├── constants.js │ ├── device.js │ ├── loader.js │ ├── color.js │ └── util.js ├── index.js ├── controllers │ ├── focus.js │ ├── progress.js │ ├── notes.js │ ├── pointer.js │ ├── slidenumber.js │ ├── plugins.js │ ├── location.js │ ├── overview.js │ ├── print.js │ └── touch.js └── components │ └── playback.js ├── CONTRIBUTING.md ├── README.md ├── LICENSE ├── css ├── theme │ ├── source │ │ ├── night.scss │ │ ├── serif.scss │ │ ├── league.scss │ │ ├── white.scss │ │ ├── black.scss │ │ ├── simple.scss │ │ ├── sky.scss │ │ ├── beige.scss │ │ ├── moon.scss │ │ ├── solarized.scss │ │ └── blood.scss │ ├── template │ │ ├── exposer.scss │ │ ├── settings.scss │ │ ├── mixins.scss │ │ └── theme.scss │ └── README.md ├── layout.scss └── print │ ├── pdf.scss │ └── paper.scss ├── plugin ├── highlight │ ├── monokai.css │ └── zenburn.css ├── math │ ├── math.esm.js │ ├── math.js │ └── plugin.js ├── zoom │ ├── zoom.esm.js │ ├── zoom.js │ └── plugin.js ├── notes │ └── plugin.js └── search │ └── plugin.js ├── index.html ├── package.json └── docs └── ENDORSED-COMMUNITIES.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [Vandivier] 2 | -------------------------------------------------------------------------------- /test/assets/external-script-a.js: -------------------------------------------------------------------------------- 1 | window.externalScriptSequence += 'A'; -------------------------------------------------------------------------------- /test/assets/external-script-b.js: -------------------------------------------------------------------------------- 1 | window.externalScriptSequence += 'B'; -------------------------------------------------------------------------------- /test/assets/external-script-c.js: -------------------------------------------------------------------------------- 1 | window.externalScriptSequence += 'C'; -------------------------------------------------------------------------------- /test/assets/external-script-d.js: -------------------------------------------------------------------------------- 1 | window.externalScriptSequence += 'D'; -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/favicon.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /test 2 | /examples 3 | .github 4 | .gulpfile 5 | .sass-cache 6 | gulpfile.js 7 | CONTRIBUTING.md -------------------------------------------------------------------------------- /test/simple.md: -------------------------------------------------------------------------------- 1 | ## Slide 1.1 2 | 3 | ```js 4 | var a = 1; 5 | ``` 6 | 7 | ## Slide 1.2 8 | 9 | --- 10 | 11 | ## Slide 2 12 | -------------------------------------------------------------------------------- /.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 | dist/*.map -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.eot -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.ttf -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.woff -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.eot -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.ttf -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.woff -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.eot -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.ttf -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.woff -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.eot -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.ttf -------------------------------------------------------------------------------- /dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vandivier/ladderly-slides/HEAD/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.woff -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "auto", 3 | "excludeFiles": "*.md", 4 | "tabWidth": 4, 5 | "semi": true, 6 | "singleQuote": true, 7 | "printWidth": 140, 8 | "trailingComma": "es5" 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/js.yml: -------------------------------------------------------------------------------- 1 | name: tests 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [10.x, 14.x, 16.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - run: npm install 21 | - run: npm run build --if-present 22 | - run: npm test 23 | env: 24 | CI: true 25 | -------------------------------------------------------------------------------- /js/utils/constants.js: -------------------------------------------------------------------------------- 1 | 2 | export const SLIDES_SELECTOR = '.slides section'; 3 | export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section'; 4 | export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section'; 5 | 6 | // Methods that may not be invoked via the postMessage API 7 | export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/; 8 | 9 | // Regex for retrieving the fragment style from a class attribute 10 | export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/; -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Please keep the [issue tracker](https://github.com/Vandivier/ladderly-slides) limited to **feature requests**. 4 | 5 | ### Personal Support 6 | 7 | If you have personal support or setup questions the best place to ask those is at [Discussions](https://github.com/Vandivier/ladderly-slides/discussions). 8 | 9 | ### Pull Requests 10 | 11 | - Should follow the coding style of the file you work in, most importantly: 12 | - Tabs to indent 13 | - Single-quoted strings 14 | - Should be made towards the **dev branch** 15 | - Should be submitted from a feature/topic branch (not your master) 16 | -------------------------------------------------------------------------------- /js/utils/device.js: -------------------------------------------------------------------------------- 1 | const UA = navigator.userAgent; 2 | const testElement = document.createElement( 'div' ); 3 | 4 | export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) || 5 | ( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS 6 | 7 | export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA ); 8 | 9 | export const isAndroid = /android/gi.test( UA ); 10 | 11 | // Flags if we should use zoom instead of transform to scale 12 | // up slides. Zoom produces crisper results but has a lot of 13 | // xbrowser quirks so we only use it in whitelisted browsers. 14 | export const supportsZoom = 'zoom' in testElement.style && !isMobile && 15 | ( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) ); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | THIS REPO IS NOW ARCHIVED 2 | 3 | SEE UP TO DATE LADDERLY.IO CONTENT AT: 4 | https://github.com/Vandivier/ladderly-3 5 | 6 | --- 7 | 8 | # Ladderly Slides 9 | 10 | This is the open-sourced curriculum for ladderly.io! 11 | 12 | View the curriculum as a slideshow here! 13 | 14 | Proudly built using reveal.js. 15 | 16 | ## curriculum details 17 | 18 | 1. the curriculum is documented in [CURRICULUM.md](https://github.com/Vandivier/ladderly-slides/blob/main/CURRICULUM.md) 19 | 20 | 2. it is divided into units sized using a "5x5" heuristic. That is, 5 points per slide, each point having a unique source reference, and five slides of such content as the limiting case for unit informational size. 21 | -------------------------------------------------------------------------------- /dist/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v4.0 | 20180602 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | main, menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, main, menu, nav, section { 29 | display: block; 30 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors 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. -------------------------------------------------------------------------------- /css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | 31 | // Change text colors against light slide backgrounds 32 | @include light-bg-text-color(#222); 33 | 34 | 35 | // Theme template ------------------------------ 36 | @import "../template/theme"; 37 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is brown. 4 | * 5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. 6 | */ 7 | 8 | 9 | // Default mixins and settings ----------------- 10 | @import "../template/mixins"; 11 | @import "../template/settings"; 12 | // --------------------------------------------- 13 | 14 | 15 | 16 | // Override theme settings (see ../template/settings.scss) 17 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 18 | $mainColor: #000; 19 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 20 | $headingColor: #383D3D; 21 | $headingTextShadow: none; 22 | $headingTextTransform: none; 23 | $backgroundColor: #F0F1EB; 24 | $linkColor: #51483D; 25 | $linkColorHover: lighten( $linkColor, 20% ); 26 | $selectionBackgroundColor: #26351C; 27 | 28 | .reveal a { 29 | line-height: 1.3em; 30 | } 31 | 32 | // Change text colors against dark slide backgrounds 33 | @include dark-bg-text-color(#fff); 34 | 35 | 36 | // Theme template ------------------------------ 37 | @import "../template/theme"; 38 | // --------------------------------------------- 39 | -------------------------------------------------------------------------------- /css/theme/template/exposer.scss: -------------------------------------------------------------------------------- 1 | // Exposes theme's variables for easy re-use in CSS for plugin authors 2 | 3 | :root { 4 | --r-background-color: #{$backgroundColor}; 5 | --r-main-font: #{$mainFont}; 6 | --r-main-font-size: #{$mainFontSize}; 7 | --r-main-color: #{$mainColor}; 8 | --r-block-margin: #{$blockMargin}; 9 | --r-heading-margin: #{$headingMargin}; 10 | --r-heading-font: #{$headingFont}; 11 | --r-heading-color: #{$headingColor}; 12 | --r-heading-line-height: #{$headingLineHeight}; 13 | --r-heading-letter-spacing: #{$headingLetterSpacing}; 14 | --r-heading-text-transform: #{$headingTextTransform}; 15 | --r-heading-text-shadow: #{$headingTextShadow}; 16 | --r-heading-font-weight: #{$headingFontWeight}; 17 | --r-heading1-text-shadow: #{$heading1TextShadow}; 18 | --r-heading1-size: #{$heading1Size}; 19 | --r-heading2-size: #{$heading2Size}; 20 | --r-heading3-size: #{$heading3Size}; 21 | --r-heading4-size: #{$heading4Size}; 22 | --r-code-font: #{$codeFont}; 23 | --r-link-color: #{$linkColor}; 24 | --r-link-color-dark: #{darken($linkColor , 15% )}; 25 | --r-link-color-hover: #{$linkColorHover}; 26 | --r-selection-background-color: #{$selectionBackgroundColor}; 27 | --r-selection-color: #{$selectionColor}; 28 | } 29 | -------------------------------------------------------------------------------- /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: 40px; 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 | $codeFont: monospace; 32 | 33 | // Links and actions 34 | $linkColor: #13DAEC; 35 | $linkColorHover: lighten( $linkColor, 20% ); 36 | 37 | // Text selection 38 | $selectionBackgroundColor: #FF5E99; 39 | $selectionColor: #fff; 40 | 41 | // Generates the presentation background, can be overridden 42 | // to return a background image or gradient 43 | @mixin bodyBackground() { 44 | background: $backgroundColor; 45 | } 46 | -------------------------------------------------------------------------------- /plugin/highlight/monokai.css: -------------------------------------------------------------------------------- 1 | /* 2 | Monokai style - ported by Luigi Maselli - http://grigio.org 3 | */ 4 | 5 | .hljs { 6 | display: block; 7 | overflow-x: auto; 8 | padding: 0.5em; 9 | background: #272822; 10 | color: #ddd; 11 | } 12 | 13 | .hljs-tag, 14 | .hljs-keyword, 15 | .hljs-selector-tag, 16 | .hljs-literal, 17 | .hljs-strong, 18 | .hljs-name { 19 | color: #f92672; 20 | } 21 | 22 | .hljs-code { 23 | color: #66d9ef; 24 | } 25 | 26 | .hljs-class .hljs-title { 27 | color: white; 28 | } 29 | 30 | .hljs-attribute, 31 | .hljs-symbol, 32 | .hljs-regexp, 33 | .hljs-link { 34 | color: #bf79db; 35 | } 36 | 37 | .hljs-string, 38 | .hljs-bullet, 39 | .hljs-subst, 40 | .hljs-title, 41 | .hljs-section, 42 | .hljs-emphasis, 43 | .hljs-type, 44 | .hljs-built_in, 45 | .hljs-builtin-name, 46 | .hljs-selector-attr, 47 | .hljs-selector-pseudo, 48 | .hljs-addition, 49 | .hljs-variable, 50 | .hljs-template-tag, 51 | .hljs-template-variable { 52 | color: #a6e22e; 53 | } 54 | 55 | .hljs-comment, 56 | .hljs-quote, 57 | .hljs-deletion, 58 | .hljs-meta { 59 | color: #75715e; 60 | } 61 | 62 | .hljs-keyword, 63 | .hljs-selector-tag, 64 | .hljs-literal, 65 | .hljs-doctag, 66 | .hljs-title, 67 | .hljs-section, 68 | .hljs-type, 69 | .hljs-selector-id { 70 | font-weight: bold; 71 | } 72 | -------------------------------------------------------------------------------- /js/utils/loader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Loads a JavaScript file from the given URL and executes it. 3 | * 4 | * @param {string} url Address of the .js file to load 5 | * @param {function} callback Method to invoke when the script 6 | * has loaded and executed 7 | */ 8 | export const loadScript = ( url, callback ) => { 9 | 10 | const script = document.createElement( 'script' ); 11 | script.type = 'text/javascript'; 12 | script.async = false; 13 | script.defer = false; 14 | script.src = url; 15 | 16 | if( typeof callback === 'function' ) { 17 | 18 | // Success callback 19 | script.onload = script.onreadystatechange = event => { 20 | if( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) { 21 | 22 | // Kill event listeners 23 | script.onload = script.onreadystatechange = script.onerror = null; 24 | 25 | callback(); 26 | 27 | } 28 | }; 29 | 30 | // Error callback 31 | script.onerror = err => { 32 | 33 | // Kill event listeners 34 | script.onload = script.onreadystatechange = script.onerror = null; 35 | 36 | callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) ); 37 | 38 | }; 39 | 40 | } 41 | 42 | // Append the script at the end of 43 | const head = document.querySelector( 'head' ); 44 | head.insertBefore( script, head.lastChild ); 45 | 46 | } -------------------------------------------------------------------------------- /plugin/highlight/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 | -------------------------------------------------------------------------------- /css/theme/source/league.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * League theme for reveal.js. 3 | * 4 | * This was the default theme pre-3.0.0. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(./fonts/league-gothic/league-gothic.css); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | // Override theme settings (see ../template/settings.scss) 22 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 23 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 24 | 25 | // Background generator 26 | @mixin bodyBackground() { 27 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 28 | } 29 | 30 | // Change text colors against light slide backgrounds 31 | @include light-bg-text-color(#222); 32 | 33 | 34 | // Theme template ------------------------------ 35 | @import "../template/theme"; 36 | // --------------------------------------------- 37 | -------------------------------------------------------------------------------- /css/theme/source/white.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(./fonts/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #fff; 20 | 21 | $mainColor: #222; 22 | $headingColor: #222; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #2a76dd; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | // Change text colors against dark slide backgrounds 41 | @include dark-bg-text-color(#fff); 42 | 43 | 44 | // Theme template ------------------------------ 45 | @import "../template/theme"; 46 | // --------------------------------------------- 47 | -------------------------------------------------------------------------------- /css/theme/source/black.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. This is the opposite of the 'white' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(./fonts/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #191919; 20 | 21 | $mainColor: #fff; 22 | $headingColor: #fff; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #42affa; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | // Change text colors against light slide backgrounds 41 | @include light-bg-text-color(#222); 42 | 43 | 44 | // Theme template ------------------------------ 45 | @import "../template/theme"; 46 | // --------------------------------------------- 47 | -------------------------------------------------------------------------------- /css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | // Change text colors against dark slide backgrounds 35 | @include dark-bg-text-color(#fff); 36 | 37 | 38 | // Theme template ------------------------------ 39 | @import "../template/theme"; 40 | // --------------------------------------------- -------------------------------------------------------------------------------- /css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Fix links so they are not cut off 33 | .reveal a { 34 | line-height: 1.3em; 35 | } 36 | 37 | // Background generator 38 | @mixin bodyBackground() { 39 | @include radial-gradient( #add9e4, #f7fbfc ); 40 | } 41 | 42 | // Change text colors against dark slide backgrounds 43 | @include dark-bg-text-color(#fff); 44 | 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ladderly-slides 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(./fonts/league-gothic/league-gothic.css); 17 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainColor: #333; 22 | $headingColor: #333; 23 | $headingTextShadow: none; 24 | $backgroundColor: #f7f3de; 25 | $linkColor: #8b743d; 26 | $linkColorHover: lighten( $linkColor, 20% ); 27 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 28 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 29 | 30 | // Background generator 31 | @mixin bodyBackground() { 32 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 33 | } 34 | 35 | // Change text colors against dark slide backgrounds 36 | @include dark-bg-text-color(#fff); 37 | 38 | 39 | // Theme template ------------------------------ 40 | @import "../template/theme"; 41 | // --------------------------------------------- 42 | -------------------------------------------------------------------------------- /test/test-dependencies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Test Dependencies 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 22 | 23 | 24 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(./fonts/league-gothic/league-gothic.css); 16 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 17 | 18 | /** 19 | * Solarized colors by Ethan Schoonover 20 | */ 21 | html * { 22 | color-profile: sRGB; 23 | rendering-intent: auto; 24 | } 25 | 26 | // Solarized colors 27 | $base03: #002b36; 28 | $base02: #073642; 29 | $base01: #586e75; 30 | $base00: #657b83; 31 | $base0: #839496; 32 | $base1: #93a1a1; 33 | $base2: #eee8d5; 34 | $base3: #fdf6e3; 35 | $yellow: #b58900; 36 | $orange: #cb4b16; 37 | $red: #dc322f; 38 | $magenta: #d33682; 39 | $violet: #6c71c4; 40 | $blue: #268bd2; 41 | $cyan: #2aa198; 42 | $green: #859900; 43 | 44 | // Override theme settings (see ../template/settings.scss) 45 | $mainColor: $base1; 46 | $headingColor: $base2; 47 | $headingTextShadow: none; 48 | $backgroundColor: $base03; 49 | $linkColor: $blue; 50 | $linkColorHover: lighten( $linkColor, 20% ); 51 | $selectionBackgroundColor: $magenta; 52 | 53 | // Change text colors against light slide backgrounds 54 | @include light-bg-text-color(#222); 55 | 56 | // Theme template ------------------------------ 57 | @import "../template/theme"; 58 | // --------------------------------------------- 59 | -------------------------------------------------------------------------------- /plugin/math/math.esm.js: -------------------------------------------------------------------------------- 1 | function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r { 10 | * // reveal.js is ready 11 | * }); 12 | */ 13 | let Reveal = Deck; 14 | 15 | 16 | /** 17 | * The below is a thin shell that mimics the pre 4.0 18 | * reveal.js API and ensures backwards compatibility. 19 | * This API only allows for one Reveal instance per 20 | * page, whereas the new API above lets you run many 21 | * presentations on the same page. 22 | * 23 | * Reveal.initialize( { controls: false } ).then(() => { 24 | * // reveal.js is ready 25 | * }); 26 | */ 27 | 28 | let enqueuedAPICalls = []; 29 | 30 | Reveal.initialize = options => { 31 | 32 | // Create our singleton reveal.js instance 33 | Object.assign( Reveal, new Deck( document.querySelector( '.reveal' ), options ) ); 34 | 35 | // Invoke any enqueued API calls 36 | enqueuedAPICalls.map( method => method( Reveal ) ); 37 | 38 | return Reveal.initialize(); 39 | 40 | } 41 | 42 | /** 43 | * The pre 4.0 API let you add event listener before 44 | * initializing. We maintain the same behavior by 45 | * queuing up premature API calls and invoking all 46 | * of them when Reveal.initialize is called. 47 | */ 48 | [ 'configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin' ].forEach( method => { 49 | Reveal[method] = ( ...args ) => { 50 | enqueuedAPICalls.push( deck => deck[method].call( null, ...args ) ); 51 | } 52 | } ); 53 | 54 | Reveal.isReady = () => false; 55 | 56 | Reveal.VERSION = VERSION; 57 | 58 | export default Reveal; -------------------------------------------------------------------------------- /css/layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout helpers. 3 | */ 4 | 5 | // Stretch an element vertically based on available space 6 | .reveal .stretch, 7 | .reveal .r-stretch { 8 | max-width: none; 9 | max-height: none; 10 | } 11 | 12 | .reveal pre.stretch code, 13 | .reveal pre.r-stretch code { 14 | height: 100%; 15 | max-height: 100%; 16 | box-sizing: border-box; 17 | } 18 | 19 | // Text that auto-fits it's container 20 | .reveal .r-fit-text { 21 | display: inline-block; // https://github.com/rikschennink/fitty#performance 22 | white-space: nowrap; 23 | } 24 | 25 | // Stack multiple elements on top of each other 26 | .reveal .r-stack { 27 | display: grid; 28 | } 29 | 30 | .reveal .r-stack > * { 31 | grid-area: 1/1; 32 | margin: auto; 33 | } 34 | 35 | // Horizontal and vertical stacks 36 | .reveal .r-vstack, 37 | .reveal .r-hstack { 38 | display: flex; 39 | 40 | img, video { 41 | min-width: 0; 42 | min-height: 0; 43 | object-fit: contain; 44 | } 45 | } 46 | 47 | .reveal .r-vstack { 48 | flex-direction: column; 49 | align-items: center; 50 | justify-content: center; 51 | } 52 | 53 | .reveal .r-hstack { 54 | flex-direction: row; 55 | align-items: center; 56 | justify-content: center; 57 | } 58 | 59 | // Naming based on tailwindcss 60 | .reveal .items-stretch { align-items: stretch; } 61 | .reveal .items-start { align-items: flex-start; } 62 | .reveal .items-center { align-items: center; } 63 | .reveal .items-end { align-items: flex-end; } 64 | 65 | .reveal .justify-between { justify-content: space-between; } 66 | .reveal .justify-around { justify-content: space-around; } 67 | .reveal .justify-start { justify-content: flex-start; } 68 | .reveal .justify-center { justify-content: center; } 69 | .reveal .justify-end { justify-content: flex-end; } 70 | -------------------------------------------------------------------------------- /plugin/math/math.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealMath=t()}(this,(function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r { 17 | 18 | let hex3 = color.match( /^#([0-9a-f]{3})$/i ); 19 | if( hex3 && hex3[1] ) { 20 | hex3 = hex3[1]; 21 | return { 22 | r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11, 23 | g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11, 24 | b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11 25 | }; 26 | } 27 | 28 | let hex6 = color.match( /^#([0-9a-f]{6})$/i ); 29 | if( hex6 && hex6[1] ) { 30 | hex6 = hex6[1]; 31 | return { 32 | r: parseInt( hex6.substr( 0, 2 ), 16 ), 33 | g: parseInt( hex6.substr( 2, 2 ), 16 ), 34 | b: parseInt( hex6.substr( 4, 2 ), 16 ) 35 | }; 36 | } 37 | 38 | let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i ); 39 | if( rgb ) { 40 | return { 41 | r: parseInt( rgb[1], 10 ), 42 | g: parseInt( rgb[2], 10 ), 43 | b: parseInt( rgb[3], 10 ) 44 | }; 45 | } 46 | 47 | let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i ); 48 | if( rgba ) { 49 | return { 50 | r: parseInt( rgba[1], 10 ), 51 | g: parseInt( rgba[2], 10 ), 52 | b: parseInt( rgba[3], 10 ), 53 | a: parseFloat( rgba[4] ) 54 | }; 55 | } 56 | 57 | return null; 58 | 59 | } 60 | 61 | /** 62 | * Calculates brightness on a scale of 0-255. 63 | * 64 | * @param {string} color See colorToRgb for supported formats. 65 | * @see {@link colorToRgb} 66 | */ 67 | export const colorBrightness = ( color ) => { 68 | 69 | if( typeof color === 'string' ) color = colorToRgb( color ); 70 | 71 | if( color ) { 72 | return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000; 73 | } 74 | 75 | return null; 76 | 77 | } -------------------------------------------------------------------------------- /js/controllers/focus.js: -------------------------------------------------------------------------------- 1 | import { closest } from '../utils/util.js' 2 | 3 | /** 4 | * Manages focus when a presentation is embedded. This 5 | * helps us only capture keyboard from the presentation 6 | * a user is currently interacting with in a page where 7 | * multiple presentations are embedded. 8 | */ 9 | 10 | const STATE_FOCUS = 'focus'; 11 | const STATE_BLUR = 'blur'; 12 | 13 | export default class Focus { 14 | 15 | constructor( Reveal ) { 16 | 17 | this.Reveal = Reveal; 18 | 19 | this.onRevealPointerDown = this.onRevealPointerDown.bind( this ); 20 | this.onDocumentPointerDown = this.onDocumentPointerDown.bind( this ); 21 | 22 | } 23 | 24 | /** 25 | * Called when the reveal.js config is updated. 26 | */ 27 | configure( config, oldConfig ) { 28 | 29 | if( config.embedded ) { 30 | this.blur(); 31 | } 32 | else { 33 | this.focus(); 34 | this.unbind(); 35 | } 36 | 37 | } 38 | 39 | bind() { 40 | 41 | if( this.Reveal.getConfig().embedded ) { 42 | this.Reveal.getRevealElement().addEventListener( 'pointerdown', this.onRevealPointerDown, false ); 43 | } 44 | 45 | } 46 | 47 | unbind() { 48 | 49 | this.Reveal.getRevealElement().removeEventListener( 'pointerdown', this.onRevealPointerDown, false ); 50 | document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false ); 51 | 52 | } 53 | 54 | focus() { 55 | 56 | if( this.state !== STATE_FOCUS ) { 57 | this.Reveal.getRevealElement().classList.add( 'focused' ); 58 | document.addEventListener( 'pointerdown', this.onDocumentPointerDown, false ); 59 | } 60 | 61 | this.state = STATE_FOCUS; 62 | 63 | } 64 | 65 | blur() { 66 | 67 | if( this.state !== STATE_BLUR ) { 68 | this.Reveal.getRevealElement().classList.remove( 'focused' ); 69 | document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false ); 70 | } 71 | 72 | this.state = STATE_BLUR; 73 | 74 | } 75 | 76 | isFocused() { 77 | 78 | return this.state === STATE_FOCUS; 79 | 80 | } 81 | 82 | onRevealPointerDown( event ) { 83 | 84 | this.focus(); 85 | 86 | } 87 | 88 | onDocumentPointerDown( event ) { 89 | 90 | let revealElement = closest( event.target, '.reveal' ); 91 | if( !revealElement || revealElement !== this.Reveal.getRevealElement() ) { 92 | this.blur(); 93 | } 94 | 95 | } 96 | 97 | } -------------------------------------------------------------------------------- /css/theme/source/blood.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Blood theme for reveal.js 3 | * Author: Walther http://github.com/Walther 4 | * 5 | * Designed to be used with highlight.js theme 6 | * "monokai_sublime.css" available from 7 | * https://github.com/isagalaev/highlight.js/ 8 | * 9 | * For other themes, change $codeBackground accordingly. 10 | * 11 | */ 12 | 13 | // Default mixins and settings ----------------- 14 | @import "../template/mixins"; 15 | @import "../template/settings"; 16 | // --------------------------------------------- 17 | 18 | // Include theme-specific fonts 19 | 20 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); 21 | 22 | // Colors used in the theme 23 | $blood: #a23; 24 | $coal: #222; 25 | $codeBackground: #23241f; 26 | 27 | $backgroundColor: $coal; 28 | 29 | // Main text 30 | $mainFont: Ubuntu, 'sans-serif'; 31 | $mainColor: #eee; 32 | 33 | // Headings 34 | $headingFont: Ubuntu, 'sans-serif'; 35 | $headingTextShadow: 2px 2px 2px $coal; 36 | 37 | // h1 shadow, borrowed humbly from 38 | // (c) Default theme by Hakim El Hattab 39 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 40 | 41 | // Links 42 | $linkColor: $blood; 43 | $linkColorHover: lighten( $linkColor, 20% ); 44 | 45 | // Text selection 46 | $selectionBackgroundColor: $blood; 47 | $selectionColor: #fff; 48 | 49 | // Change text colors against dark slide backgrounds 50 | @include light-bg-text-color(#222); 51 | 52 | 53 | // Theme template ------------------------------ 54 | @import "../template/theme"; 55 | // --------------------------------------------- 56 | 57 | // some overrides after theme template import 58 | 59 | .reveal p { 60 | font-weight: 300; 61 | text-shadow: 1px 1px $coal; 62 | } 63 | 64 | section.has-light-background { 65 | p, h1, h2, h3, h4 { 66 | text-shadow: none; 67 | } 68 | } 69 | 70 | .reveal h1, 71 | .reveal h2, 72 | .reveal h3, 73 | .reveal h4, 74 | .reveal h5, 75 | .reveal h6 { 76 | font-weight: 700; 77 | } 78 | 79 | .reveal p code { 80 | background-color: $codeBackground; 81 | display: inline-block; 82 | border-radius: 7px; 83 | } 84 | 85 | .reveal small code { 86 | vertical-align: baseline; 87 | } -------------------------------------------------------------------------------- /plugin/math/plugin.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 | const Plugin = () => { 8 | 9 | // The reveal.js instance this plugin is attached to 10 | let deck; 11 | 12 | let defaultOptions = { 13 | messageStyle: 'none', 14 | tex2jax: { 15 | inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ], 16 | skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ] 17 | }, 18 | skipStartupTypeset: true 19 | }; 20 | 21 | function loadScript( url, callback ) { 22 | 23 | let head = document.querySelector( 'head' ); 24 | let script = document.createElement( 'script' ); 25 | script.type = 'text/javascript'; 26 | script.src = url; 27 | 28 | // Wrapper for callback to make sure it only fires once 29 | let finish = () => { 30 | if( typeof callback === 'function' ) { 31 | callback.call(); 32 | callback = null; 33 | } 34 | } 35 | 36 | script.onload = finish; 37 | 38 | // IE 39 | script.onreadystatechange = () => { 40 | if ( this.readyState === 'loaded' ) { 41 | finish(); 42 | } 43 | } 44 | 45 | // Normal browsers 46 | head.appendChild( script ); 47 | 48 | } 49 | 50 | return { 51 | id: 'math', 52 | 53 | init: function( reveal ) { 54 | 55 | deck = reveal; 56 | 57 | let revealOptions = deck.getConfig().math || {}; 58 | 59 | let options = { ...defaultOptions, ...revealOptions }; 60 | let mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'; 61 | let config = options.config || 'TeX-AMS_HTML-full'; 62 | let url = mathjax + '?config=' + config; 63 | 64 | options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.tex2jax }; 65 | 66 | options.mathjax = options.config = null; 67 | 68 | loadScript( url, function() { 69 | 70 | MathJax.Hub.Config( options ); 71 | 72 | // Typeset followed by an immediate reveal.js layout since 73 | // the typesetting process could affect slide height 74 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, deck.getRevealElement() ] ); 75 | MathJax.Hub.Queue( deck.layout ); 76 | 77 | // Reprocess equations in slides when they turn visible 78 | deck.on( 'slidechanged', function( event ) { 79 | 80 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); 81 | 82 | } ); 83 | 84 | } ); 85 | 86 | } 87 | } 88 | 89 | }; 90 | 91 | export default Plugin; 92 | -------------------------------------------------------------------------------- /js/controllers/progress.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creates a visual progress bar for the presentation. 3 | */ 4 | export default class Progress { 5 | 6 | constructor( Reveal ) { 7 | 8 | this.Reveal = Reveal; 9 | 10 | this.onProgressClicked = this.onProgressClicked.bind( this ); 11 | 12 | } 13 | 14 | render() { 15 | 16 | this.element = document.createElement( 'div' ); 17 | this.element.className = 'progress'; 18 | this.Reveal.getRevealElement().appendChild( this.element ); 19 | 20 | this.bar = document.createElement( 'span' ); 21 | this.element.appendChild( this.bar ); 22 | 23 | } 24 | 25 | /** 26 | * Called when the reveal.js config is updated. 27 | */ 28 | configure( config, oldConfig ) { 29 | 30 | this.element.style.display = config.progress ? 'block' : 'none'; 31 | 32 | } 33 | 34 | bind() { 35 | 36 | if( this.Reveal.getConfig().progress && this.element ) { 37 | this.element.addEventListener( 'click', this.onProgressClicked, false ); 38 | } 39 | 40 | } 41 | 42 | unbind() { 43 | 44 | if ( this.Reveal.getConfig().progress && this.element ) { 45 | this.element.removeEventListener( 'click', this.onProgressClicked, false ); 46 | } 47 | 48 | } 49 | 50 | /** 51 | * Updates the progress bar to reflect the current slide. 52 | */ 53 | update() { 54 | 55 | // Update progress if enabled 56 | if( this.Reveal.getConfig().progress && this.bar ) { 57 | 58 | let scale = this.Reveal.getProgress(); 59 | 60 | // Don't fill the progress bar if there's only one slide 61 | if( this.Reveal.getTotalSlides() < 2 ) { 62 | scale = 0; 63 | } 64 | 65 | this.bar.style.transform = 'scaleX('+ scale +')'; 66 | 67 | } 68 | 69 | } 70 | 71 | getMaxWidth() { 72 | 73 | return this.Reveal.getRevealElement().offsetWidth; 74 | 75 | } 76 | 77 | /** 78 | * Clicking on the progress bar results in a navigation to the 79 | * closest approximate horizontal slide using this equation: 80 | * 81 | * ( clickX / presentationWidth ) * numberOfSlides 82 | * 83 | * @param {object} event 84 | */ 85 | onProgressClicked( event ) { 86 | 87 | this.Reveal.onUserInput( event ); 88 | 89 | event.preventDefault(); 90 | 91 | let slides = this.Reveal.getSlides(); 92 | let slidesTotal = slides.length; 93 | let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal ); 94 | 95 | if( this.Reveal.getConfig().rtl ) { 96 | slideIndex = slidesTotal - slideIndex; 97 | } 98 | 99 | let targetIndices = this.Reveal.getIndices(slides[slideIndex]); 100 | this.Reveal.slide( targetIndices.h, targetIndices.v ); 101 | 102 | } 103 | 104 | 105 | } -------------------------------------------------------------------------------- /test/test-grid-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Test Grid 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 34 | 35 | 36 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ladderly-slides", 3 | "version": "0.1.0", 4 | "homepage": "https://ladderly.io", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "gulp test", 8 | "start": "gulp serve", 9 | "build": "gulp build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/Vandivier/ladderly-slides.git" 14 | }, 15 | "engines": { 16 | "node": ">=10.0.0" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.14.3", 20 | "@babel/eslint-parser": "^7.14.3", 21 | "@babel/preset-env": "^7.14.2", 22 | "@rollup/plugin-babel": "^5.3.0", 23 | "@rollup/plugin-commonjs": "^19.0.0", 24 | "@rollup/plugin-node-resolve": "^13.0.0", 25 | "babel-plugin-transform-html-import-to-string": "0.0.1", 26 | "colors": "^1.4.0", 27 | "core-js": "^3.12.1", 28 | "fitty": "^2.3.0", 29 | "glob": "^7.1.7", 30 | "gulp": "^4.0.2", 31 | "gulp-autoprefixer": "^5.0.0", 32 | "gulp-clean-css": "^4.2.0", 33 | "gulp-connect": "^5.7.0", 34 | "gulp-eslint": "^6.0.0", 35 | "gulp-header": "^2.0.9", 36 | "gulp-tap": "^2.0.0", 37 | "gulp-zip": "^4.2.0", 38 | "highlight.js": "^10.0.3", 39 | "marked": "^2.0.3", 40 | "node-qunit-puppeteer": "^2.0.1", 41 | "qunit": "^2.10.0", 42 | "rollup": "^2.48.0", 43 | "rollup-plugin-terser": "^7.0.2", 44 | "sass": "^1.39.2", 45 | "yargs": "^15.1.0" 46 | }, 47 | "browserslist": "> 0.5%, IE 11, not dead", 48 | "eslintConfig": { 49 | "env": { 50 | "browser": true, 51 | "es6": true 52 | }, 53 | "parser": "@babel/eslint-parser", 54 | "parserOptions": { 55 | "sourceType": "module", 56 | "allowImportExportEverywhere": true, 57 | "requireConfigFile": false 58 | }, 59 | "globals": { 60 | "module": false, 61 | "console": false, 62 | "unescape": false, 63 | "define": false, 64 | "exports": false 65 | }, 66 | "rules": { 67 | "curly": 0, 68 | "eqeqeq": 2, 69 | "wrap-iife": [ 70 | 2, 71 | "any" 72 | ], 73 | "no-use-before-define": [ 74 | 2, 75 | { 76 | "functions": false 77 | } 78 | ], 79 | "new-cap": 2, 80 | "no-caller": 2, 81 | "dot-notation": 0, 82 | "no-eq-null": 2, 83 | "no-unused-expressions": 0 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /test/test-multiple-instances-es5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Test Iframes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 | 25 |
26 | 27 |
28 | 35 |
36 | 37 | 38 | 39 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /test/test-dependencies-async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Test Async Dependencies 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 22 | 23 | 24 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /docs/ENDORSED-COMMUNITIES.md: -------------------------------------------------------------------------------- 1 | # Endorsed Communities 2 | 3 | Ladderly suggests these communities to expedite your social networking journey. 4 | 5 | ## Suggested Use 6 | 7 | Social networking can be useful for learning, the job search, and more. 8 | 9 | As a best practice, leverage your social media presence to build in public. Start with a 2:1 ratio where you code for at least one hour per day and engage on social media for at least thirty minutes each day, with a focus on discussing technical topics. 10 | 11 | If you have yet to land your first coding job: 12 | 13 | 1. Don't try to engage deeply with all of these communities to the neglect of other important tasks. 14 | 2. Instead, try out various communities and see who you resonate with. 15 | 3. After a week of experimenting, pick the top 1 or 2 communities that you would like to grow with. 16 | 4. Spend a minimum of 5-10 minutes per day chatting with your selected groups. 17 | 5. After you land your job, do try out more groups later on! 😊 Continuously explore and experiment to prevent knowledge silos, increases growth, and fosters diversity. 18 | 19 | Specifically, ensure that you are engaging on: 20 | 21 | 1. GitHub 22 | 2. LinkedIn 23 | 3. Twitter 24 | 4. TikTok 25 | 1. If you have extra cash, use [repurpose.io](https://repurpose.io/?aff=98821) to multi-post on YouTube Shorts and Instagram Reels. 26 | 5. Discord 27 | 28 | Engaging must include both creating original content and also replying to others. 29 | 30 | As always, experiment and adjust your time allocations to maximize your personal results. 31 | 32 | ## Large Discord Communities 33 | 34 | Working with large communities is important for exposure to many opportunities, brand awareness, and rapid technical support. 35 | 36 | 1. [Reactiflux, 210k+](https://www.reactiflux.com/) 37 | 2. [Codecademy, 94k+](https://discuss.codecademy.com/t/official-codecademy-discord-server/495965) 38 | 3. [Vercel, 705+](https://github.com/vercel/next.js/discussions/14919) 39 | 4. [FreeCodeCamp, 26k+](https://www.freecodecamp.org/news/freecodecamp-discord-chat-room-server/) 40 | 5. [Ben Awad, 9800+](https://www.benawad.com/) 41 | 42 | ## Small Influencer-Lead Discord Communities 43 | 44 | Working with small influencer-lead communities is important for growing deeper connections. 45 | 46 | 1. [Ladderly, 100+](https://ladderly.io/) 47 | 2. [Learn Build Teach, 5500+](https://twitter.com/jamesqquick) 48 | 3. [CompSciLib Community, 5000+](https://www.compscilib.com/) 49 | 4. [CodeWithVincent, 1900+](https://discord.gg/kvBJQsfPdd) 50 | 5. [ellasstudy, 1800+](https://www.tiktok.com/@ellasstudy) 51 | 52 | ## Diversity-Oriented Communities 53 | 54 | Working with diversity-oriented and mission-driven communities is important for growing deeper connections. 55 | 56 | 1. [FaithTech](https://faithtech.com/) 57 | 2. [Girls Who Code](https://girlswhocode.com/) 58 | 3. [Blacks In Technology](https://www.blacksintechnology.net/) 59 | 4. [TechLatino](https://techlatino.org/) 60 | 5. [Latinas In Tech](https://latinasintech.org/) 61 | -------------------------------------------------------------------------------- /test/test-pdf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Test PDF exports 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 69 | 70 | 71 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /js/controllers/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles the showing and 3 | */ 4 | export default class Notes { 5 | 6 | constructor( Reveal ) { 7 | 8 | this.Reveal = Reveal; 9 | 10 | } 11 | 12 | render() { 13 | 14 | this.element = document.createElement( 'div' ); 15 | this.element.className = 'speaker-notes'; 16 | this.element.setAttribute( 'data-prevent-swipe', '' ); 17 | this.element.setAttribute( 'tabindex', '0' ); 18 | this.Reveal.getRevealElement().appendChild( this.element ); 19 | 20 | } 21 | 22 | /** 23 | * Called when the reveal.js config is updated. 24 | */ 25 | configure( config, oldConfig ) { 26 | 27 | if( config.showNotes ) { 28 | this.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' ); 29 | } 30 | 31 | } 32 | 33 | /** 34 | * Pick up notes from the current slide and display them 35 | * to the viewer. 36 | * 37 | * @see {@link config.showNotes} 38 | */ 39 | update() { 40 | 41 | if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) { 42 | 43 | this.element.innerHTML = this.getSlideNotes() || 'No notes on this slide.'; 44 | 45 | } 46 | 47 | } 48 | 49 | /** 50 | * Updates the visibility of the speaker notes sidebar that 51 | * is used to share annotated slides. The notes sidebar is 52 | * only visible if showNotes is true and there are notes on 53 | * one or more slides in the deck. 54 | */ 55 | updateVisibility() { 56 | 57 | if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) { 58 | this.Reveal.getRevealElement().classList.add( 'show-notes' ); 59 | } 60 | else { 61 | this.Reveal.getRevealElement().classList.remove( 'show-notes' ); 62 | } 63 | 64 | } 65 | 66 | /** 67 | * Checks if there are speaker notes for ANY slide in the 68 | * presentation. 69 | */ 70 | hasNotes() { 71 | 72 | return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0; 73 | 74 | } 75 | 76 | /** 77 | * Checks if this presentation is running inside of the 78 | * speaker notes window. 79 | * 80 | * @return {boolean} 81 | */ 82 | isSpeakerNotesWindow() { 83 | 84 | return !!window.location.search.match( /receiver/gi ); 85 | 86 | } 87 | 88 | /** 89 | * Retrieves the speaker notes from a slide. Notes can be 90 | * defined in two ways: 91 | * 1. As a data-notes attribute on the slide
92 | * 2. As an