├── LICENSE ├── README.md ├── facilitator-resources ├── emails.md ├── facilitator-guide.md ├── participant-emails.md ├── survey-examples.md └── volunteer ├── resources ├── description.md ├── expectations.md └── fonts │ ├── Cookie-Regular.ttf │ ├── OFL.txt │ ├── Open_Sans │ ├── LICENSE.txt │ ├── OpenSans-Bold.ttf │ ├── OpenSans-BoldItalic.ttf │ ├── OpenSans-ExtraBold.ttf │ ├── OpenSans-ExtraBoldItalic.ttf │ ├── OpenSans-Italic.ttf │ ├── OpenSans-Light.ttf │ ├── OpenSans-LightItalic.ttf │ ├── OpenSans-Regular.ttf │ ├── OpenSans-SemiBold.ttf │ └── OpenSans-SemiBoldItalic.ttf │ └── marvin.md ├── slides ├── EmberConf 2018 - Contributor's Workshop.key ├── EmberConf 2018 - Contributor's Workshop.pdf ├── EmberConf 2019 - Contributor's Workshop.key ├── EmberConf 2019 - Contributor's Workshop.pdf ├── EmberConf2021 │ ├── .gitignore │ ├── .npmignore │ ├── CONTRIBUTING.md │ ├── LICENSE │ ├── README.md │ ├── assets │ │ ├── contributions-code.png │ │ ├── emberblog.png │ │ ├── emberconf2021.png │ │ ├── helpwanted.png │ │ ├── host-ava.jpg │ │ ├── host-ricardo.png │ │ ├── pridemascots.png │ │ └── simplabs.png │ ├── css │ │ ├── layout.scss │ │ ├── print │ │ │ ├── paper.scss │ │ │ └── pdf.scss │ │ ├── reveal.scss │ │ └── theme │ │ │ ├── README.md │ │ │ ├── source │ │ │ ├── beige.scss │ │ │ ├── black.scss │ │ │ ├── blood.scss │ │ │ ├── league.scss │ │ │ ├── moon.scss │ │ │ ├── night.scss │ │ │ ├── serif.scss │ │ │ ├── simple.scss │ │ │ ├── sky.scss │ │ │ ├── solarized.scss │ │ │ └── white.scss │ │ │ └── template │ │ │ ├── exposer.scss │ │ │ ├── mixins.scss │ │ │ ├── settings.scss │ │ │ └── theme.scss │ ├── demo.html │ ├── gulpfile.js │ ├── index.html │ ├── js │ │ ├── components │ │ │ └── playback.js │ │ ├── config.js │ │ ├── controllers │ │ │ ├── autoanimate.js │ │ │ ├── backgrounds.js │ │ │ ├── controls.js │ │ │ ├── focus.js │ │ │ ├── fragments.js │ │ │ ├── keyboard.js │ │ │ ├── location.js │ │ │ ├── notes.js │ │ │ ├── overview.js │ │ │ ├── plugins.js │ │ │ ├── pointer.js │ │ │ ├── print.js │ │ │ ├── progress.js │ │ │ ├── slidecontent.js │ │ │ ├── slidenumber.js │ │ │ └── touch.js │ │ ├── index.js │ │ ├── reveal.js │ │ └── utils │ │ │ ├── color.js │ │ │ ├── constants.js │ │ │ ├── device.js │ │ │ ├── loader.js │ │ │ └── util.js │ ├── package-lock.json │ ├── package.json │ └── plugin │ │ ├── highlight │ │ ├── highlight.esm.js │ │ ├── highlight.js │ │ ├── monokai.css │ │ ├── plugin.js │ │ └── zenburn.css │ │ ├── markdown │ │ ├── markdown.esm.js │ │ ├── markdown.js │ │ └── plugin.js │ │ ├── math │ │ ├── math.esm.js │ │ ├── math.js │ │ └── plugin.js │ │ ├── notes │ │ ├── notes.esm.js │ │ ├── notes.js │ │ ├── plugin.js │ │ └── speaker-view.html │ │ ├── search │ │ ├── plugin.js │ │ ├── search.esm.js │ │ └── search.js │ │ └── zoom │ │ ├── plugin.js │ │ ├── zoom.esm.js │ │ └── zoom.js ├── EmberFest 2020 - Contributor's Workshop.key └── EmberFest 2020 - Contributor's Workshop.pdf ├── virtual-machine └── env-setup.md └── volunteer-resources └── volunteer-guide.md /LICENSE: -------------------------------------------------------------------------------- 1 | The code in this repository is released under MIT license. Written content 2 | is released under [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/). 3 | Uses of Ember branding (Tomsters, logo, etc) must abide by the terms 4 | [set by Tilde](https://www.emberjs.com/logos/). These resources are 5 | unaffiliated with the Ember project. Ember is a trademark of Tilde Inc. 6 | 7 | MIT License 8 | 9 | Copyright (c) 2018 Jen Weber 10 | 11 | Permission is hereby granted, free of charge, to any person obtaining a copy 12 | of this software and associated documentation files (the "Software"), to deal 13 | in the Software without restriction, including without limitation the rights 14 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 15 | copies of the Software, and to permit persons to whom the Software is 16 | furnished to do so, subject to the following conditions: 17 | 18 | The above copyright notice and this permission notice shall be included in all 19 | copies or substantial portions of the Software. 20 | 21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 23 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 24 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 25 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 26 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 27 | SOFTWARE. 28 | 29 | 30 | # CC0 1.0 Universal 31 | 32 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED HEREUNDER. 33 | 34 | ### Statement of Purpose 35 | 36 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). 37 | 38 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. 39 | 40 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. 41 | 42 | 1. __Copyright and Related Rights.__ A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: 43 | 44 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; 45 | 46 | ii. moral rights retained by the original author(s) and/or performer(s); 47 | 48 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; 49 | 50 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; 51 | 52 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work; 53 | 54 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and 55 | 56 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. 57 | 58 | 2. __Waiver.__ To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. 59 | 60 | 3. __Public License Fallback.__ Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. 61 | 62 | 4. __Limitations and Disclaimers.__ 63 | 64 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. 65 | 66 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. 67 | 68 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. 69 | 70 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # emberjs-contributors-workshop 2 | Do you want to become an open source contributor, or help others reach that goal? 3 | This repository contains resources for you to participate in or run your own Ember.js 4 | Contributor's Workshop. There are slides, participant instructions, 5 | and survey templates. Please reach out to the authors for advice, 6 | assistance, etc. We're here to help. 7 | 8 | Made with :heart: by Jen Weber and Ricardo Mendes. Initially created for 9 | EmberConf 2018. 10 | 11 | Need some quick inspiration? Check out 12 | [Sean Massa's 2018 EmberConf talk](https://www.youtube.com/watch?v=CcSKlsc_AhQ&list=PL4eq2DPpyBbnjD5iLp55as9OvIdEDI_Kt&index=22) 13 | about the many forms that OSS contributions take. 14 | 15 | # Participant instructions 16 | 17 | Follow these instructions so that you are prepared for the Contributors Workshop. 18 | 19 | Learn how to get started in Open Source with a quick tutorial in [this video](https://www.youtube.com/watch?v=FgqXdsK6ohE): 20 | 21 | [![Alt text](https://img.youtube.com/vi/FgqXdsK6ohE/0.jpg)](https://www.youtube.com/watch?v=FgqXdsK6ohE) 22 | 23 | ## Quick links 24 | - [Ember.js Chat on Discord](https://emberjs.com/community) to get help from [#dev-ember-learning](https://discordapp.com/channels/480462759797063690/480777444203429888) 25 | - [The Ember.js Times](https://blog.emberjs.com/tags/newsletter.html) to see recent calls to action 26 | - [Help Wanted dashboard](https://help-wanted.emberjs.com/) - An easy way to browse issues that need a volunteer 27 | 28 | ## Pre-Work for EmberConf Contributor's Workshop 29 | 30 | Hi! Thanks for participating in an Open Source Contributor’s Workshop! 31 | 32 | First of all, contributions come in many forms - writing articles, 33 | asking questions, opening PRs or Issues, helping other people out - so thank you for whatever you do! 34 | 35 | We only have limited time, so help make the most of your it, there are some things you need to do ahead of time. New contributors should budget an hour to get their developer environment set up, 36 | and experienced contributors should take some time to look through issues and pick a couple that they might want to work on. 37 | 38 | You're welcome to work on projects for any programming languages, frameworks, and libraries! If you are working on an Ember project, you can get help or ask questions on the `#dev-ember-learning` channel on the [Ember.js Chat on Discord](https://emberjs.com/community). 39 | One of the things that team does is help contributors get started 40 | on any part of the Ember ecosystem. 41 | 42 | - Have [git](https://git-scm.com/), [node and npm](https://nodejs.org/en/) installed, and have a [GitHub](https://github.com/) account connected in git. If you need help with these steps, contact the Learning Team or your workshop facilitators. 43 | - Install the latest [stable ember-cli](https://github.com/ember-cli/ember-cli/releases) `npm install -g ember-cli@latest` 44 | - Fork, clone, npm install, and test run projects you are interested in. When this workshop is run in person, it is essential to do ahead of time. While we hope and pray for the quality internet, most wifi can’t handle 50 devs cloning and npm installing all at the same time. 45 | - Browse open issues to form some goals for yourself. See list of repositories and some helpful links below. You can work on anything during the workshop. The list just contains suggestions. Look for 46 | issues like "help wanted" or "good first issue" to guide your search. 47 | - If you are not familiar with Open Source workflows (forking, cloning, opening PRs), try it out in [this practice repository](https://github.com/jenweber/our-open-source-contributions), while following [this article of step-by-step instructions](https://medium.com/@jenweber/your-first-open-source-contribution-a-step-by-step-technical-guide-d3aca55cc5a6). 48 | 49 | ## Core libraries to browse for issues 50 | 51 | You are invited to work on issues in any open source projects! However, here are some "official" Ember repositories to get you started: 52 | 53 | - [ember.js](https://github.com/emberjs/ember.js) - our favorite framework. Includes both technical and documentation issues 54 | - [data](https://github.com/emberjs/data) - home of ember-data 55 | - [ember.js website](https://github.com/ember-learn/ember-website) - public website at [https://www.emberjs.com](https://www.emberjs.com). 56 | - [The Ember.js Guides](https://github.com/ember-learn/guides-source) - the written content for https://guides.emberjs.com/ 57 | - [ember-api-docs](https://github.com/ember-learn/ember-api-docs) - the app that displays the documentation found in ember.js core code 58 | - [deprecation-app](https://github.com/ember-learn/deprecation-app) - an app that gives Ember's users 59 | information about how to overcome deprecations. 60 | - [ember-cli](https://github.com/ember-cli/ember-cli) - home of the best command line tool for a front end framework 61 | - [ember-cli guides](https://github.com/ember-learn/cli-guides) - help other people use the best cli 62 | - [statusboard](https://github.com/ember-learn/statusboard) - shows the status of ongoing Ember ecosystem projects at https://emberjs.com/statusboard/ 63 | - [ember-styleguide](https://github.com/ember-learn/ember-styleguide) - the component library 64 | used in Ember's family of websites. It handles typography, reusable components like callouts, how the navbar looks, and overall styles. 65 | - [ember-inspector](https://github.com/emberjs/ember-inspector) - the browser extension dev tools for Ember 66 | - [ember-a11y org addons](https://github.com/ember-a11y) - a collection of accessibility specific addons and more for Ember. 67 | 68 | ## Addons and community projects to browse for issues 69 | 70 | Maintainers of these addons have specially asked for help and offered mentorship in the past: 71 | 72 | - `@Gaiety#0001` (Ava) with [ember-select-light](https://github.com/ember-a11y/ember-select-light) has some good first issues and she's mentored in the past 73 | - Have a suggestion? Submit a PR here to add to this list! 74 | 75 | ## Help Wanted and Good First Contribution Issues 76 | We’ve asked the maintainers of many ember projects to use the “good first issue” label to show which issues they’d like help on during the workshop. Again, you are welcome to choose any issue/project, but if you need ideas, click here to browse all of them! You might also want to search for “help wanted” issues. 77 | 78 | Check out the [Help Wanted dashboard](https://help-wanted.emberjs.com/) to browse for issues! 79 | 80 | If you want to choose one ahead of the workshop, you can add a comment that says you’d like to work on it. 81 | 82 | Here are a few issues that we think you might want to check out! 83 | 84 | - [Improve docs to the Router Service](https://github.com/emberjs/ember.js/issues/16518) in Ember.js 85 | - [ember-string](https://github.com/emberjs/ember-string/issues/49) needs some Node work 86 | - [ember-a11y](https://github.com/ember-a11y) needs help upgrading their addon versions! Open an issue on a repo if you are helping out. Look for issues opened by other people before you get started, so that you don't duplicate efforts. 87 | - `ember-cli` 88 | - https://github.com/ember-cli/ember-cli/issues/8457 89 | 90 | ## After the workshop 91 | If you need a little help getting something to the finish line, 92 | or it's been a week and your PR hasn't been reviewed yet, 93 | just drop by the #dev-ember-resources channel on Discord and let them know. 94 | The team is all volunteers, so getting help can take a little time, 95 | but it's part of the mission! Thanks for your patience! 96 | -------------------------------------------------------------------------------- /facilitator-resources/emails.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/facilitator-resources/emails.md -------------------------------------------------------------------------------- /facilitator-resources/facilitator-guide.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/facilitator-resources/facilitator-guide.md -------------------------------------------------------------------------------- /facilitator-resources/participant-emails.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/facilitator-resources/participant-emails.md -------------------------------------------------------------------------------- /facilitator-resources/survey-examples.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/facilitator-resources/survey-examples.md -------------------------------------------------------------------------------- /facilitator-resources/volunteer: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/facilitator-resources/volunteer -------------------------------------------------------------------------------- /resources/description.md: -------------------------------------------------------------------------------- 1 | # Contributor's Workshop 2 | 3 | At the heart of open source are developers like you: people of all backgrounds, interests, and experience levels. In this 3-hour workshop, you'll learn how to contribute to Ember, meet the other developers who shape our favorite framework, and if you're up for the challenge, make a pull request! 4 | 5 | The workshop will begin with some formal instruction. Where do you start? What goes into a good PR? Who will help? What knowledge or skills do you need before you jump in? (Spoiler alert—not a whole lot! Learning new things is part of the fun.) 6 | 7 | The rest will be guided coding time. You'll have the opportunity to pair program or fly solo as you tackle an issue in Ember's learning resources or core code. Available issues will cover a wide range, appropriate for beginners and experts alike. A group of experienced contributors will be there to help debug, advise, and answer questions. 8 | 9 | The workshop will include some formal instruction, guidance from a team of experienced contributors, and hands-on coding time. Attendees should bring a laptop, budget an hour of setup time in the week before the workshop, and watch for emailed instructions about setup. 10 | -------------------------------------------------------------------------------- /resources/expectations.md: -------------------------------------------------------------------------------- 1 | # Expectations 2 | 3 | This document outlines what is expected from the different roles involved in running the workshop, in terms of time and tasks. 4 | 5 | ## Hosts 6 | 7 | 1. Arranging mentors (5h) 8 | 9 | You are responsible for arranging enough mentors to help contributors during the workshop. 10 | While a ratio of 1 mentor to 1 contributor is unrealistic, we recommend to strive for at least 1 mentor to 5 every contributors. 11 | 12 | 1. Preparing the introduction material (1h) 13 | 14 | Once you have hosts and mentors defined you should update the introductory slides to include that information. 15 | 16 | 1. Running the workshop (5h) 17 | 18 | On the day of the actual workshop you should outline the workshop format and introduce the different mentors. 19 | Then try to keep an eye on people having a hard time participating or finding work to do and try to help out. 20 | We recommend a 3h format as well as leaving yourself some prep and wind down time. 21 | 22 | 1. Workshop follow-up (1h) 23 | 24 | Send follow up email, including post-workshop survey. 25 | The goal here is to make sure any contributor that wants to continue contributing and invest more into the community knows how to do so. 26 | 27 | ## Mentors 28 | 29 | 1. Prepare issues for the workshop (3h) [BONUS] 30 | 31 | If you can prepare a handful of issues for the contributors to pick up, that is very helpful for everyone. 32 | Make sure the instructions in the issues are clear and actionable, and that it can reasonably be finished during the workshop. 33 | 34 | 1. Workshop (5h) 35 | 36 | Come early. Help contributors pick issues and guide them through the process of contributing. 37 | 38 | 39 | ## Contributors 40 | 41 | 1. Workshop preparation (2h) 42 | 43 | Requirements: 44 | - Recent versions of `node`, `npm`, `yarn`, and `git` installed. 45 | - GitHub account 46 | - Discord installed 47 | - A code editor installed (VS Code, vim, emacs, etc) 48 | - Stable internet connection 49 | - Microphone 50 | - Video camera [BONUS] 51 | 52 | 1. Workshop (5h) 53 | 54 | 1. Post-workshop (infinite) [BONUS] 55 | 56 | Keep in touch with the community and the maintainers to continue contributing. 57 | -------------------------------------------------------------------------------- /resources/fonts/Cookie-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Cookie-Regular.ttf -------------------------------------------------------------------------------- /resources/fonts/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011 by Ania Kruk (hello@aniakruk.com), 2 | with Reserved Font Name "Cookie". 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 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 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /resources/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/resources/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /resources/fonts/marvin.md: -------------------------------------------------------------------------------- 1 | [Marvin font](https://www.readvisions.com/marvin#get-the-font) 2 | -------------------------------------------------------------------------------- /slides/EmberConf 2018 - Contributor's Workshop.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf 2018 - Contributor's Workshop.key -------------------------------------------------------------------------------- /slides/EmberConf 2018 - Contributor's Workshop.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf 2018 - Contributor's Workshop.pdf -------------------------------------------------------------------------------- /slides/EmberConf 2019 - Contributor's Workshop.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf 2019 - Contributor's Workshop.key -------------------------------------------------------------------------------- /slides/EmberConf 2019 - Contributor's Workshop.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf 2019 - Contributor's Workshop.pdf -------------------------------------------------------------------------------- /slides/EmberConf2021/.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/ 13 | -------------------------------------------------------------------------------- /slides/EmberConf2021/.npmignore: -------------------------------------------------------------------------------- 1 | /test 2 | /examples 3 | .github 4 | .gulpfile 5 | .sass-cache 6 | gulpfile.js 7 | CONTRIBUTING.md -------------------------------------------------------------------------------- /slides/EmberConf2021/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**. 4 | 5 | 6 | ### Personal Support 7 | If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js). 8 | 9 | 10 | ### Bug Reports 11 | When reporting a bug make sure to include information about which browser and operating system you are on as well as the necessary steps to reproduce the issue. If possible please include a link to a sample presentation where the bug can be tested. 12 | 13 | 14 | ### Pull Requests 15 | - Should follow the coding style of the file you work in, most importantly: 16 | - Tabs to indent 17 | - Single-quoted strings 18 | - Should be made towards the **dev branch** 19 | - Should be submitted from a feature/topic branch (not from the `main` branch) 20 | 21 | 22 | ### Plugins 23 | Please do not submit plugins as pull requests. They should be maintained in their own separate repository. More information here: https://github.com/hakimel/reveal.js/wiki/Plugin-Guidelines 24 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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. -------------------------------------------------------------------------------- /slides/EmberConf2021/README.md: -------------------------------------------------------------------------------- 1 | Getting started... 2 | 3 | 1. `cd` into this directory 4 | 2. `npm install` 5 | 2. `npm build` 6 | 3. `npm start` 7 | 4. [Visit the locally served presentation](http://0.0.0.0:8000) 8 | 9 | --- 10 | 11 |

12 | 13 | reveal.js 14 | 15 |

16 | 17 | Slides 18 |

19 | 20 | reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. [Check out the live demo](https://revealjs.com/). 21 | 22 | The framework comes with a broad range of features including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX support](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and much more. 23 | 24 |

25 | Get Started 26 |

27 | 28 | ## Documentation 29 | The full reveal.js documentation is available at [revealjs.com](https://revealjs.com). 30 | 31 | ## Online Editor 32 | Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js. 33 | 34 | ## License 35 | 36 | MIT licensed 37 | 38 | Copyright (C) 2011-2020 Hakim El Hattab, https://hakim.se 39 | -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/contributions-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/contributions-code.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/emberblog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/emberblog.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/emberconf2021.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/emberconf2021.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/helpwanted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/helpwanted.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/host-ava.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/host-ava.jpg -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/host-ricardo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/host-ricardo.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/pridemascots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/pridemascots.png -------------------------------------------------------------------------------- /slides/EmberConf2021/assets/simplabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ember-learn/emberjs-contributors-workshop/2494e7c7b06f520eed9673d2d01a5cf0fab66d62/slides/EmberConf2021/assets/simplabs.png -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/print/paper.scss: -------------------------------------------------------------------------------- 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 | @media print { 9 | html:not(.print-pdf) { 10 | 11 | background: #fff; 12 | width: auto; 13 | height: auto; 14 | overflow: visible; 15 | 16 | body { 17 | background: #fff; 18 | font-size: 20pt; 19 | width: auto; 20 | height: auto; 21 | border: 0; 22 | margin: 0 5%; 23 | padding: 0; 24 | overflow: visible; 25 | float: none !important; 26 | } 27 | 28 | .nestedarrow, 29 | .controls, 30 | .fork-reveal, 31 | .share-reveal, 32 | .state-background, 33 | .reveal .progress, 34 | .reveal .backgrounds, 35 | .reveal .slide-number { 36 | display: none !important; 37 | } 38 | 39 | body, p, td, li { 40 | font-size: 20pt!important; 41 | color: #000; 42 | } 43 | 44 | h1,h2,h3,h4,h5,h6 { 45 | color: #000!important; 46 | height: auto; 47 | line-height: normal; 48 | text-align: left; 49 | letter-spacing: normal; 50 | } 51 | 52 | /* Need to reduce the size of the fonts for printing */ 53 | h1 { font-size: 28pt !important; } 54 | h2 { font-size: 24pt !important; } 55 | h3 { font-size: 22pt !important; } 56 | h4 { font-size: 22pt !important; font-variant: small-caps; } 57 | h5 { font-size: 21pt !important; } 58 | h6 { font-size: 20pt !important; font-style: italic; } 59 | 60 | a:link, 61 | a:visited { 62 | color: #000 !important; 63 | font-weight: bold; 64 | text-decoration: underline; 65 | } 66 | 67 | ul, ol, div, p { 68 | visibility: visible; 69 | position: static; 70 | width: auto; 71 | height: auto; 72 | display: block; 73 | overflow: visible; 74 | margin: 0; 75 | text-align: left !important; 76 | } 77 | .reveal pre, 78 | .reveal table { 79 | margin-left: 0; 80 | margin-right: 0; 81 | } 82 | .reveal pre code { 83 | padding: 20px; 84 | } 85 | .reveal blockquote { 86 | margin: 20px 0; 87 | } 88 | .reveal .slides { 89 | position: static !important; 90 | width: auto !important; 91 | height: auto !important; 92 | 93 | left: 0 !important; 94 | top: 0 !important; 95 | margin-left: 0 !important; 96 | margin-top: 0 !important; 97 | padding: 0 !important; 98 | zoom: 1 !important; 99 | transform: none !important; 100 | 101 | overflow: visible !important; 102 | display: block !important; 103 | 104 | text-align: left !important; 105 | perspective: none; 106 | 107 | perspective-origin: 50% 50%; 108 | } 109 | .reveal .slides section { 110 | visibility: visible !important; 111 | position: static !important; 112 | width: auto !important; 113 | height: auto !important; 114 | display: block !important; 115 | overflow: visible !important; 116 | 117 | left: 0 !important; 118 | top: 0 !important; 119 | margin-left: 0 !important; 120 | margin-top: 0 !important; 121 | padding: 60px 20px !important; 122 | z-index: auto !important; 123 | 124 | opacity: 1 !important; 125 | 126 | page-break-after: always !important; 127 | 128 | transform-style: flat !important; 129 | transform: none !important; 130 | transition: none !important; 131 | } 132 | .reveal .slides section.stack { 133 | padding: 0 !important; 134 | } 135 | .reveal section:last-of-type { 136 | page-break-after: avoid !important; 137 | } 138 | .reveal section .fragment { 139 | opacity: 1 !important; 140 | visibility: visible !important; 141 | 142 | transform: none !important; 143 | } 144 | .reveal section img { 145 | display: block; 146 | margin: 15px 0px; 147 | background: rgba(255,255,255,1); 148 | border: 1px solid #666; 149 | box-shadow: none; 150 | } 151 | 152 | .reveal section small { 153 | font-size: 0.8em; 154 | } 155 | 156 | .reveal .hljs { 157 | max-height: 100%; 158 | white-space: pre-wrap; 159 | word-wrap: break-word; 160 | word-break: break-word; 161 | font-size: 15pt; 162 | } 163 | 164 | .reveal .hljs .hljs-ln-numbers { 165 | white-space: nowrap; 166 | } 167 | 168 | .reveal .hljs td { 169 | font-size: inherit !important; 170 | color: inherit !important; 171 | } 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/print/pdf.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is used to print reveal.js 3 | * presentations to PDF. 4 | * 5 | * https://revealjs.com/pdf-export/ 6 | */ 7 | 8 | html.print-pdf { 9 | * { 10 | -webkit-print-color-adjust: exact; 11 | } 12 | 13 | & { 14 | width: 100%; 15 | height: 100%; 16 | overflow: visible; 17 | } 18 | 19 | body { 20 | margin: 0 auto !important; 21 | border: 0; 22 | padding: 0; 23 | float: none !important; 24 | overflow: visible; 25 | } 26 | 27 | /* Remove any elements not needed in print. */ 28 | .nestedarrow, 29 | .reveal .controls, 30 | .reveal .progress, 31 | .reveal .playback, 32 | .reveal.overview, 33 | .state-background { 34 | display: none !important; 35 | } 36 | 37 | .reveal pre code { 38 | overflow: hidden !important; 39 | font-family: Courier, 'Courier New', monospace !important; 40 | } 41 | 42 | .reveal { 43 | width: auto !important; 44 | height: auto !important; 45 | overflow: hidden !important; 46 | } 47 | .reveal .slides { 48 | position: static; 49 | width: 100% !important; 50 | height: auto !important; 51 | zoom: 1 !important; 52 | pointer-events: initial; 53 | 54 | left: auto; 55 | top: auto; 56 | margin: 0 !important; 57 | padding: 0 !important; 58 | 59 | overflow: visible; 60 | display: block; 61 | 62 | perspective: none; 63 | perspective-origin: 50% 50%; 64 | } 65 | 66 | .reveal .slides .pdf-page { 67 | position: relative; 68 | overflow: hidden; 69 | z-index: 1; 70 | 71 | page-break-after: always; 72 | } 73 | 74 | .reveal .slides section { 75 | visibility: visible !important; 76 | display: block !important; 77 | position: absolute !important; 78 | 79 | margin: 0 !important; 80 | padding: 0 !important; 81 | box-sizing: border-box !important; 82 | min-height: 1px; 83 | 84 | opacity: 1 !important; 85 | 86 | transform-style: flat !important; 87 | transform: none !important; 88 | } 89 | 90 | .reveal section.stack { 91 | position: relative !important; 92 | margin: 0 !important; 93 | padding: 0 !important; 94 | page-break-after: avoid !important; 95 | height: auto !important; 96 | min-height: auto !important; 97 | } 98 | 99 | .reveal img { 100 | box-shadow: none; 101 | } 102 | 103 | 104 | /* Slide backgrounds are placed inside of their slide when exporting to PDF */ 105 | .reveal .backgrounds { 106 | display: none; 107 | } 108 | .reveal .slide-background { 109 | display: block !important; 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | width: 100%; 114 | height: 100%; 115 | z-index: auto !important; 116 | } 117 | 118 | /* Display slide speaker notes when 'showNotes' is enabled */ 119 | .reveal.show-notes { 120 | max-width: none; 121 | max-height: none; 122 | } 123 | .reveal .speaker-notes-pdf { 124 | display: block; 125 | width: 100%; 126 | height: auto; 127 | max-height: none; 128 | top: auto; 129 | right: auto; 130 | bottom: auto; 131 | left: auto; 132 | z-index: 100; 133 | } 134 | 135 | /* Layout option which makes notes appear on a separate page */ 136 | .reveal .speaker-notes-pdf[data-layout="separate-page"] { 137 | position: relative; 138 | color: inherit; 139 | background-color: transparent; 140 | padding: 20px; 141 | page-break-after: always; 142 | border: 0; 143 | } 144 | 145 | /* Display slide numbers when 'slideNumber' is enabled */ 146 | .reveal .slide-number-pdf { 147 | display: block; 148 | position: absolute; 149 | font-size: 14px; 150 | } 151 | 152 | /* This accessibility tool is not useful in PDF and breaks it visually */ 153 | .aria-status { 154 | display: none; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup 4 | 5 | ## Creating a Theme 6 | 7 | To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`. 8 | 9 | Each theme file does four things in the following order: 10 | 11 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 12 | Shared utility functions. 13 | 14 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 15 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 16 | 17 | 3. **Override** 18 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please. 19 | 20 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 21 | The template theme file which will generate final CSS output based on the currently defined variables. 22 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light 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 | /** 20 | * Solarized colors by Ethan Schoonover 21 | */ 22 | html * { 23 | color-profile: sRGB; 24 | rendering-intent: auto; 25 | } 26 | 27 | // Solarized colors 28 | $base03: #002b36; 29 | $base02: #073642; 30 | $base01: #586e75; 31 | $base00: #657b83; 32 | $base0: #839496; 33 | $base1: #93a1a1; 34 | $base2: #eee8d5; 35 | $base3: #fdf6e3; 36 | $yellow: #b58900; 37 | $orange: #cb4b16; 38 | $red: #dc322f; 39 | $magenta: #d33682; 40 | $violet: #6c71c4; 41 | $blue: #268bd2; 42 | $cyan: #2aa198; 43 | $green: #859900; 44 | 45 | // Override theme settings (see ../template/settings.scss) 46 | $mainColor: $base00; 47 | $headingColor: $base01; 48 | $headingTextShadow: none; 49 | $backgroundColor: $base3; 50 | $linkColor: $blue; 51 | $linkColorHover: lighten( $linkColor, 20% ); 52 | $selectionBackgroundColor: $magenta; 53 | 54 | // Background generator 55 | // @mixin bodyBackground() { 56 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 57 | // } 58 | 59 | 60 | 61 | // Theme template ------------------------------ 62 | @import "../template/theme"; 63 | // --------------------------------------------- 64 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/theme/template/exposer.scss: -------------------------------------------------------------------------------- 1 | // Exposes theme's variables for easy re-use in CSS for plugin authors 2 | 3 | :root { 4 | --background-color: #{$backgroundColor}; 5 | --main-font: #{$mainFont}; 6 | --main-font-size: #{$mainFontSize}; 7 | --main-color: #{$mainColor}; 8 | --block-margin: #{$blockMargin}; 9 | --heading-margin: #{$headingMargin}; 10 | --heading-font: #{$headingFont}; 11 | --heading-color: #{$headingColor}; 12 | --heading-line-height: #{$headingLineHeight}; 13 | --heading-letter-spacing: #{$headingLetterSpacing}; 14 | --heading-text-transform: #{$headingTextTransform}; 15 | --heading-text-shadow: #{$headingTextShadow}; 16 | --heading-font-weight: #{$headingFontWeight}; 17 | --heading1-text-shadow: #{$heading1TextShadow}; 18 | --heading1-size: #{$heading1Size}; 19 | --heading2-size: #{$heading2Size}; 20 | --heading3-size: #{$heading3Size}; 21 | --heading4-size: #{$heading4Size}; 22 | --code-font: #{$codeFont}; 23 | --link-color: #{$linkColor}; 24 | --link-color-hover: #{$linkColorHover}; 25 | --selection-background-color: #{$selectionBackgroundColor}; 26 | --selection-color: #{$selectionColor}; 27 | } 28 | -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | } 30 | 31 | @mixin light-bg-text-color( $color ) { 32 | section.has-light-background { 33 | &, h1, h2, h3, h4, h5, h6 { 34 | color: $color; 35 | } 36 | } 37 | } 38 | 39 | @mixin dark-bg-text-color( $color ) { 40 | section.has-dark-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: $color; 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | -------------------------------------------------------------------------------- /slides/EmberConf2021/css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | @import "./exposer"; 8 | 9 | .reveal-viewport { 10 | @include bodyBackground(); 11 | background-color: $backgroundColor; 12 | } 13 | 14 | .reveal { 15 | font-family: $mainFont; 16 | font-size: $mainFontSize; 17 | font-weight: normal; 18 | color: $mainColor; 19 | } 20 | 21 | .reveal ::selection { 22 | color: $selectionColor; 23 | background: $selectionBackgroundColor; 24 | text-shadow: none; 25 | } 26 | 27 | .reveal ::-moz-selection { 28 | color: $selectionColor; 29 | background: $selectionBackgroundColor; 30 | text-shadow: none; 31 | } 32 | 33 | .reveal .slides section, 34 | .reveal .slides section>section { 35 | line-height: 1.3; 36 | font-weight: inherit; 37 | } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | 43 | .reveal h1, 44 | .reveal h2, 45 | .reveal h3, 46 | .reveal h4, 47 | .reveal h5, 48 | .reveal h6 { 49 | margin: $headingMargin; 50 | color: $headingColor; 51 | 52 | font-family: $headingFont; 53 | font-weight: $headingFontWeight; 54 | line-height: $headingLineHeight; 55 | letter-spacing: $headingLetterSpacing; 56 | 57 | text-transform: $headingTextTransform; 58 | text-shadow: $headingTextShadow; 59 | 60 | word-wrap: break-word; 61 | } 62 | 63 | .reveal h1 {font-size: $heading1Size; } 64 | .reveal h2 {font-size: $heading2Size; } 65 | .reveal h3 {font-size: $heading3Size; } 66 | .reveal h4 {font-size: $heading4Size; } 67 | 68 | .reveal h1 { 69 | text-shadow: $heading1TextShadow; 70 | } 71 | 72 | 73 | /********************************************* 74 | * OTHER 75 | *********************************************/ 76 | 77 | .reveal p { 78 | margin: $blockMargin 0; 79 | line-height: 1.3; 80 | } 81 | 82 | /* Remove trailing margins after titles */ 83 | .reveal h1:last-child, 84 | .reveal h2:last-child, 85 | .reveal h3:last-child, 86 | .reveal h4:last-child, 87 | .reveal h5:last-child, 88 | .reveal h6:last-child { 89 | margin-bottom: 0; 90 | } 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 | 104 | .reveal em { 105 | font-style: italic; 106 | } 107 | 108 | .reveal ol, 109 | .reveal dl, 110 | .reveal ul { 111 | display: inline-block; 112 | 113 | text-align: left; 114 | margin: 0 0 0 1em; 115 | } 116 | 117 | .reveal ol { 118 | list-style-type: decimal; 119 | } 120 | 121 | .reveal ul { 122 | list-style-type: disc; 123 | } 124 | 125 | .reveal ul ul { 126 | list-style-type: square; 127 | } 128 | 129 | .reveal ul ul ul { 130 | list-style-type: circle; 131 | } 132 | 133 | .reveal ul ul, 134 | .reveal ul ol, 135 | .reveal ol ol, 136 | .reveal ol ul { 137 | display: block; 138 | margin-left: 40px; 139 | } 140 | 141 | .reveal dt { 142 | font-weight: bold; 143 | } 144 | 145 | .reveal dd { 146 | margin-left: 40px; 147 | } 148 | 149 | .reveal blockquote { 150 | display: block; 151 | position: relative; 152 | width: 70%; 153 | margin: $blockMargin auto; 154 | padding: 5px; 155 | 156 | font-style: italic; 157 | background: rgba(255, 255, 255, 0.05); 158 | box-shadow: 0px 0px 2px rgba(0,0,0,0.2); 159 | } 160 | .reveal blockquote p:first-child, 161 | .reveal blockquote p:last-child { 162 | display: inline-block; 163 | } 164 | 165 | .reveal q { 166 | font-style: italic; 167 | } 168 | 169 | .reveal pre { 170 | display: block; 171 | position: relative; 172 | width: 90%; 173 | margin: $blockMargin auto; 174 | 175 | text-align: left; 176 | font-size: 0.55em; 177 | font-family: $codeFont; 178 | line-height: 1.2em; 179 | 180 | word-wrap: break-word; 181 | 182 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); 183 | } 184 | 185 | .reveal code { 186 | font-family: $codeFont; 187 | text-transform: none; 188 | } 189 | 190 | .reveal pre code { 191 | display: block; 192 | padding: 5px; 193 | overflow: auto; 194 | max-height: 400px; 195 | word-wrap: normal; 196 | } 197 | 198 | .reveal table { 199 | margin: auto; 200 | border-collapse: collapse; 201 | border-spacing: 0; 202 | } 203 | 204 | .reveal table th { 205 | font-weight: bold; 206 | } 207 | 208 | .reveal table th, 209 | .reveal table td { 210 | text-align: left; 211 | padding: 0.2em 0.5em 0.2em 0.5em; 212 | border-bottom: 1px solid; 213 | } 214 | 215 | .reveal table th[align="center"], 216 | .reveal table td[align="center"] { 217 | text-align: center; 218 | } 219 | 220 | .reveal table th[align="right"], 221 | .reveal table td[align="right"] { 222 | text-align: right; 223 | } 224 | 225 | .reveal table tbody tr:last-child th, 226 | .reveal table tbody tr:last-child td { 227 | border-bottom: none; 228 | } 229 | 230 | .reveal sup { 231 | vertical-align: super; 232 | font-size: smaller; 233 | } 234 | .reveal sub { 235 | vertical-align: sub; 236 | font-size: smaller; 237 | } 238 | 239 | .reveal small { 240 | display: inline-block; 241 | font-size: 0.6em; 242 | line-height: 1.2em; 243 | vertical-align: top; 244 | } 245 | 246 | .reveal small * { 247 | vertical-align: top; 248 | } 249 | 250 | .reveal img { 251 | margin: $blockMargin 0; 252 | } 253 | 254 | 255 | /********************************************* 256 | * LINKS 257 | *********************************************/ 258 | 259 | .reveal a { 260 | color: $linkColor; 261 | text-decoration: none; 262 | transition: color .15s ease; 263 | } 264 | .reveal a:hover { 265 | color: $linkColorHover; 266 | text-shadow: none; 267 | border: none; 268 | } 269 | 270 | .reveal .roll span:after { 271 | color: #fff; 272 | background: darken( $linkColor, 15% ); 273 | } 274 | 275 | 276 | /********************************************* 277 | * Frame helper 278 | *********************************************/ 279 | 280 | .reveal .r-frame { 281 | border: 4px solid $mainColor; 282 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 283 | } 284 | 285 | .reveal a .r-frame { 286 | transition: all .15s linear; 287 | } 288 | 289 | .reveal a:hover .r-frame { 290 | border-color: $linkColor; 291 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 292 | } 293 | 294 | 295 | /********************************************* 296 | * NAVIGATION CONTROLS 297 | *********************************************/ 298 | 299 | .reveal .controls { 300 | color: $linkColor; 301 | } 302 | 303 | 304 | /********************************************* 305 | * PROGRESS BAR 306 | *********************************************/ 307 | 308 | .reveal .progress { 309 | background: rgba(0,0,0,0.2); 310 | color: $linkColor; 311 | } 312 | 313 | /********************************************* 314 | * PRINT BACKGROUND 315 | *********************************************/ 316 | @media print { 317 | .backgrounds { 318 | background-color: $backgroundColor; 319 | } 320 | } 321 | -------------------------------------------------------------------------------- /slides/EmberConf2021/gulpfile.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package.json') 2 | const path = require('path') 3 | const glob = require('glob') 4 | const yargs = require('yargs') 5 | const colors = require('colors') 6 | const qunit = require('node-qunit-puppeteer') 7 | 8 | const {rollup} = require('rollup') 9 | const {terser} = require('rollup-plugin-terser') 10 | const babel = require('@rollup/plugin-babel').default 11 | const commonjs = require('@rollup/plugin-commonjs') 12 | const resolve = require('@rollup/plugin-node-resolve').default 13 | 14 | const gulp = require('gulp') 15 | const tap = require('gulp-tap') 16 | const zip = require('gulp-zip') 17 | const sass = require('gulp-sass') 18 | const header = require('gulp-header') 19 | const eslint = require('gulp-eslint') 20 | const minify = require('gulp-clean-css') 21 | const connect = require('gulp-connect') 22 | const autoprefixer = require('gulp-autoprefixer') 23 | 24 | const root = yargs.argv.root || '.' 25 | const port = yargs.argv.port || 8000 26 | 27 | const banner = `/*! 28 | * reveal.js ${pkg.version} 29 | * ${pkg.homepage} 30 | * MIT licensed 31 | * 32 | * Copyright (C) 2020 Hakim El Hattab, https://hakim.se 33 | */\n` 34 | 35 | // Prevents warnings from opening too many test pages 36 | process.setMaxListeners(20); 37 | 38 | const babelConfig = { 39 | babelHelpers: 'bundled', 40 | ignore: ['node_modules'], 41 | compact: false, 42 | extensions: ['.js', '.html'], 43 | plugins: [ 44 | 'transform-html-import-to-string' 45 | ], 46 | presets: [[ 47 | '@babel/preset-env', 48 | { 49 | corejs: 3, 50 | useBuiltIns: 'usage', 51 | modules: false 52 | } 53 | ]] 54 | }; 55 | 56 | // Our ES module bundle only targets newer browsers with 57 | // module support. Browsers are targeted explicitly instead 58 | // of using the "esmodule: true" target since that leads to 59 | // polyfilling older browsers and a larger bundle. 60 | const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) ); 61 | babelConfigESM.presets[0][1].targets = { browsers: [ 62 | 'last 2 Chrome versions', 'not Chrome < 60', 63 | 'last 2 Safari versions', 'not Safari < 10.1', 64 | 'last 2 iOS versions', 'not iOS < 10.3', 65 | 'last 2 Firefox versions', 'not Firefox < 60', 66 | 'last 2 Edge versions', 'not Edge < 16', 67 | ] }; 68 | 69 | let cache = {}; 70 | 71 | // Creates a bundle with broad browser support, exposed 72 | // as UMD 73 | gulp.task('js-es5', () => { 74 | return rollup({ 75 | cache: cache.umd, 76 | input: 'js/index.js', 77 | plugins: [ 78 | resolve(), 79 | commonjs(), 80 | babel( babelConfig ), 81 | terser() 82 | ] 83 | }).then( bundle => { 84 | cache.umd = bundle.cache; 85 | return bundle.write({ 86 | name: 'Reveal', 87 | file: './dist/reveal.js', 88 | format: 'umd', 89 | banner: banner, 90 | sourcemap: true 91 | }); 92 | }); 93 | }) 94 | 95 | // Creates an ES module bundle 96 | gulp.task('js-es6', () => { 97 | return rollup({ 98 | cache: cache.esm, 99 | input: 'js/index.js', 100 | plugins: [ 101 | resolve(), 102 | commonjs(), 103 | babel( babelConfigESM ), 104 | terser() 105 | ] 106 | }).then( bundle => { 107 | cache.esm = bundle.cache; 108 | return bundle.write({ 109 | file: './dist/reveal.esm.js', 110 | format: 'es', 111 | banner: banner, 112 | sourcemap: true 113 | }); 114 | }); 115 | }) 116 | gulp.task('js', gulp.parallel('js-es5', 'js-es6')); 117 | 118 | // Creates a UMD and ES module bundle for each of our 119 | // built-in plugins 120 | gulp.task('plugins', () => { 121 | return Promise.all([ 122 | { name: 'RevealHighlight', input: './plugin/highlight/plugin.js', output: './plugin/highlight/highlight' }, 123 | { name: 'RevealMarkdown', input: './plugin/markdown/plugin.js', output: './plugin/markdown/markdown' }, 124 | { name: 'RevealSearch', input: './plugin/search/plugin.js', output: './plugin/search/search' }, 125 | { name: 'RevealNotes', input: './plugin/notes/plugin.js', output: './plugin/notes/notes' }, 126 | { name: 'RevealZoom', input: './plugin/zoom/plugin.js', output: './plugin/zoom/zoom' }, 127 | { name: 'RevealMath', input: './plugin/math/plugin.js', output: './plugin/math/math' }, 128 | ].map( plugin => { 129 | return rollup({ 130 | cache: cache[plugin.input], 131 | input: plugin.input, 132 | plugins: [ 133 | resolve(), 134 | commonjs(), 135 | babel({ 136 | ...babelConfig, 137 | ignore: [/node_modules\/(?!(highlight\.js|marked)\/).*/], 138 | }), 139 | terser() 140 | ] 141 | }).then( bundle => { 142 | cache[plugin.input] = bundle.cache; 143 | bundle.write({ 144 | file: plugin.output + '.esm.js', 145 | name: plugin.name, 146 | format: 'es' 147 | }) 148 | 149 | bundle.write({ 150 | file: plugin.output + '.js', 151 | name: plugin.name, 152 | format: 'umd' 153 | }) 154 | }); 155 | } )); 156 | }) 157 | 158 | gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}']) 159 | .pipe(sass()) 160 | .pipe(gulp.dest('./dist/theme'))) 161 | 162 | gulp.task('css-core', () => gulp.src(['css/reveal.scss']) 163 | .pipe(sass()) 164 | .pipe(autoprefixer()) 165 | .pipe(minify({compatibility: 'ie9'})) 166 | .pipe(header(banner)) 167 | .pipe(gulp.dest('./dist'))) 168 | 169 | gulp.task('css', gulp.parallel('css-themes', 'css-core')) 170 | 171 | gulp.task('qunit', () => { 172 | 173 | let serverConfig = { 174 | root, 175 | port: 8009, 176 | host: '0.0.0.0', 177 | name: 'test-server' 178 | } 179 | 180 | let server = connect.server( serverConfig ) 181 | 182 | let testFiles = glob.sync('test/*.html' ) 183 | 184 | let totalTests = 0; 185 | let failingTests = 0; 186 | 187 | let tests = Promise.all( testFiles.map( filename => { 188 | return new Promise( ( resolve, reject ) => { 189 | qunit.runQunitPuppeteer({ 190 | targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`, 191 | timeout: 20000, 192 | redirectConsole: false, 193 | puppeteerArgs: ['--allow-file-access-from-files'] 194 | }) 195 | .then(result => { 196 | if( result.stats.failed > 0 ) { 197 | console.log(`${'!'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red); 198 | // qunit.printResultSummary(result, console); 199 | qunit.printFailedTests(result, console); 200 | } 201 | else { 202 | console.log(`${'✔'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green); 203 | } 204 | 205 | totalTests += result.stats.total; 206 | failingTests += result.stats.failed; 207 | 208 | resolve(); 209 | }) 210 | .catch(error => { 211 | console.error(error); 212 | reject(); 213 | }); 214 | } ) 215 | } ) ); 216 | 217 | return new Promise( ( resolve, reject ) => { 218 | 219 | tests.then( () => { 220 | if( failingTests > 0 ) { 221 | reject( new Error(`${failingTests}/${totalTests} tests failed`.red) ); 222 | } 223 | else { 224 | console.log(`${'✔'} Passed ${totalTests} tests`.green.bold); 225 | resolve(); 226 | } 227 | } ) 228 | .catch( () => { 229 | reject(); 230 | } ) 231 | .finally( () => { 232 | server.close(); 233 | } ); 234 | 235 | } ); 236 | } ) 237 | 238 | gulp.task('eslint', () => gulp.src(['./js/**', 'gulpfile.js']) 239 | .pipe(eslint()) 240 | .pipe(eslint.format())) 241 | 242 | gulp.task('test', gulp.series( 'eslint', 'qunit' )) 243 | 244 | gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test')) 245 | 246 | gulp.task('build', gulp.parallel('js', 'css', 'plugins')) 247 | 248 | gulp.task('package', gulp.series('default', () => 249 | 250 | gulp.src([ 251 | './index.html', 252 | './dist/**', 253 | './lib/**', 254 | './images/**', 255 | './plugin/**', 256 | './**.md' 257 | ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./')) 258 | 259 | )) 260 | 261 | gulp.task('reload', () => gulp.src(['*.html', '*.md']) 262 | .pipe(connect.reload())); 263 | 264 | gulp.task('serve', () => { 265 | 266 | connect.server({ 267 | root: root, 268 | port: port, 269 | host: '0.0.0.0', 270 | livereload: true 271 | }) 272 | 273 | gulp.watch(['*.html', '*.md'], gulp.series('reload')) 274 | 275 | gulp.watch(['js/**'], gulp.series('js', 'reload', 'test')) 276 | 277 | gulp.watch(['plugin/**/plugin.js'], gulp.series('plugins', 'reload')) 278 | 279 | gulp.watch([ 280 | 'css/theme/source/*.{sass,scss}', 281 | 'css/theme/template/*.{sass,scss}', 282 | ], gulp.series('css-themes', 'reload')) 283 | 284 | gulp.watch([ 285 | 'css/*.scss', 286 | 'css/print/*.{sass,scss,css}' 287 | ], gulp.series('css-core', 'reload')) 288 | 289 | gulp.watch(['test/*.html'], gulp.series('test')) 290 | 291 | }) -------------------------------------------------------------------------------- /slides/EmberConf2021/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 33 | 34 | 35 |
36 |
37 |
38 | 42 |
43 |
44 |
45 |
46 | 47 |

Ricardo MendesThey/Them

48 |
49 |
50 | 59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 |

Ava Gaiety WrotenShe/Her

67 |
68 |
69 | 75 |
76 |
77 |
78 |
79 | 93 |
94 |
95 | 98 |
99 |
100 | 106 |
107 |
108 | 111 |
112 |
113 | 117 |
118 |
119 | 135 |
136 |
137 | 150 |
151 |
152 | 155 |
156 |
157 | 164 |
165 |
166 | 173 |
174 |
175 | 187 |
188 |
189 | 203 |
204 |
205 | 210 |
211 |
212 | 215 |
216 |
217 | 227 |
228 |
229 | 237 |
238 |
239 | 242 |
243 |
244 | 247 |
248 |
249 | 252 |
253 |
254 | 261 |
262 |
263 | 267 |
268 |
269 |
270 | 271 | 272 | 273 | 274 | 275 | 286 | 287 | 288 | -------------------------------------------------------------------------------- /slides/EmberConf2021/js/components/playback.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UI component that lets the use control auto-slide 3 | * playback via play/pause. 4 | */ 5 | export default class Playback { 6 | 7 | /** 8 | * @param {HTMLElement} container The component will append 9 | * itself to this 10 | * @param {function} progressCheck A method which will be 11 | * called frequently to get the current playback progress on 12 | * a range of 0-1 13 | */ 14 | constructor( container, progressCheck ) { 15 | 16 | // Cosmetics 17 | this.diameter = 100; 18 | this.diameter2 = this.diameter/2; 19 | this.thickness = 6; 20 | 21 | // Flags if we are currently playing 22 | this.playing = false; 23 | 24 | // Current progress on a 0-1 range 25 | this.progress = 0; 26 | 27 | // Used to loop the animation smoothly 28 | this.progressOffset = 1; 29 | 30 | this.container = container; 31 | this.progressCheck = progressCheck; 32 | 33 | this.canvas = document.createElement( 'canvas' ); 34 | this.canvas.className = 'playback'; 35 | this.canvas.width = this.diameter; 36 | this.canvas.height = this.diameter; 37 | this.canvas.style.width = this.diameter2 + 'px'; 38 | this.canvas.style.height = this.diameter2 + 'px'; 39 | this.context = this.canvas.getContext( '2d' ); 40 | 41 | this.container.appendChild( this.canvas ); 42 | 43 | this.render(); 44 | 45 | } 46 | 47 | setPlaying( value ) { 48 | 49 | const wasPlaying = this.playing; 50 | 51 | this.playing = value; 52 | 53 | // Start repainting if we weren't already 54 | if( !wasPlaying && this.playing ) { 55 | this.animate(); 56 | } 57 | else { 58 | this.render(); 59 | } 60 | 61 | } 62 | 63 | animate() { 64 | 65 | const progressBefore = this.progress; 66 | 67 | this.progress = this.progressCheck(); 68 | 69 | // When we loop, offset the progress so that it eases 70 | // smoothly rather than immediately resetting 71 | if( progressBefore > 0.8 && this.progress < 0.2 ) { 72 | this.progressOffset = this.progress; 73 | } 74 | 75 | this.render(); 76 | 77 | if( this.playing ) { 78 | requestAnimationFrame( this.animate.bind( this ) ); 79 | } 80 | 81 | } 82 | 83 | /** 84 | * Renders the current progress and playback state. 85 | */ 86 | render() { 87 | 88 | let progress = this.playing ? this.progress : 0, 89 | radius = ( this.diameter2 ) - this.thickness, 90 | x = this.diameter2, 91 | y = this.diameter2, 92 | iconSize = 28; 93 | 94 | // Ease towards 1 95 | this.progressOffset += ( 1 - this.progressOffset ) * 0.1; 96 | 97 | const endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) ); 98 | const startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) ); 99 | 100 | this.context.save(); 101 | this.context.clearRect( 0, 0, this.diameter, this.diameter ); 102 | 103 | // Solid background color 104 | this.context.beginPath(); 105 | this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false ); 106 | this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )'; 107 | this.context.fill(); 108 | 109 | // Draw progress track 110 | this.context.beginPath(); 111 | this.context.arc( x, y, radius, 0, Math.PI * 2, false ); 112 | this.context.lineWidth = this.thickness; 113 | this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )'; 114 | this.context.stroke(); 115 | 116 | if( this.playing ) { 117 | // Draw progress on top of track 118 | this.context.beginPath(); 119 | this.context.arc( x, y, radius, startAngle, endAngle, false ); 120 | this.context.lineWidth = this.thickness; 121 | this.context.strokeStyle = '#fff'; 122 | this.context.stroke(); 123 | } 124 | 125 | this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) ); 126 | 127 | // Draw play/pause icons 128 | if( this.playing ) { 129 | this.context.fillStyle = '#fff'; 130 | this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize ); 131 | this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize ); 132 | } 133 | else { 134 | this.context.beginPath(); 135 | this.context.translate( 4, 0 ); 136 | this.context.moveTo( 0, 0 ); 137 | this.context.lineTo( iconSize - 4, iconSize / 2 ); 138 | this.context.lineTo( 0, iconSize ); 139 | this.context.fillStyle = '#fff'; 140 | this.context.fill(); 141 | } 142 | 143 | this.context.restore(); 144 | 145 | } 146 | 147 | on( type, listener ) { 148 | this.canvas.addEventListener( type, listener, false ); 149 | } 150 | 151 | off( type, listener ) { 152 | this.canvas.removeEventListener( type, listener, false ); 153 | } 154 | 155 | destroy() { 156 | 157 | this.playing = false; 158 | 159 | if( this.canvas.parentNode ) { 160 | this.container.removeChild( this.canvas ); 161 | } 162 | 163 | } 164 | 165 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/js/controllers/controls.js: -------------------------------------------------------------------------------- 1 | import { queryAll } from '../utils/util.js' 2 | import { isAndroid } from '../utils/device.js' 3 | 4 | /** 5 | * Manages our presentation controls. This includes both 6 | * the built-in control arrows as well as event monitoring 7 | * of any elements within the presentation with either of the 8 | * following helper classes: 9 | * - .navigate-up 10 | * - .navigate-right 11 | * - .navigate-down 12 | * - .navigate-left 13 | * - .navigate-next 14 | * - .navigate-prev 15 | */ 16 | export default class Controls { 17 | 18 | constructor( Reveal ) { 19 | 20 | this.Reveal = Reveal; 21 | 22 | this.onNavigateLeftClicked = this.onNavigateLeftClicked.bind( this ); 23 | this.onNavigateRightClicked = this.onNavigateRightClicked.bind( this ); 24 | this.onNavigateUpClicked = this.onNavigateUpClicked.bind( this ); 25 | this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this ); 26 | this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this ); 27 | this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this ); 28 | 29 | } 30 | 31 | render() { 32 | 33 | const rtl = this.Reveal.getConfig().rtl; 34 | const revealElement = this.Reveal.getRevealElement(); 35 | 36 | this.element = document.createElement( 'aside' ); 37 | this.element.className = 'controls'; 38 | this.element.innerHTML = 39 | ` 40 | 41 | 42 | `; 43 | 44 | this.Reveal.getRevealElement().appendChild( this.element ); 45 | 46 | // There can be multiple instances of controls throughout the page 47 | this.controlsLeft = queryAll( revealElement, '.navigate-left' ); 48 | this.controlsRight = queryAll( revealElement, '.navigate-right' ); 49 | this.controlsUp = queryAll( revealElement, '.navigate-up' ); 50 | this.controlsDown = queryAll( revealElement, '.navigate-down' ); 51 | this.controlsPrev = queryAll( revealElement, '.navigate-prev' ); 52 | this.controlsNext = queryAll( revealElement, '.navigate-next' ); 53 | 54 | // The left, right and down arrows in the standard reveal.js controls 55 | this.controlsRightArrow = this.element.querySelector( '.navigate-right' ); 56 | this.controlsLeftArrow = this.element.querySelector( '.navigate-left' ); 57 | this.controlsDownArrow = this.element.querySelector( '.navigate-down' ); 58 | 59 | } 60 | 61 | /** 62 | * Called when the reveal.js config is updated. 63 | */ 64 | configure( config, oldConfig ) { 65 | 66 | this.element.style.display = config.controls ? 'block' : 'none'; 67 | 68 | this.element.setAttribute( 'data-controls-layout', config.controlsLayout ); 69 | this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows ); 70 | 71 | } 72 | 73 | bind() { 74 | 75 | // Listen to both touch and click events, in case the device 76 | // supports both 77 | let pointerEvents = [ 'touchstart', 'click' ]; 78 | 79 | // Only support touch for Android, fixes double navigations in 80 | // stock browser 81 | if( isAndroid ) { 82 | pointerEvents = [ 'touchstart' ]; 83 | } 84 | 85 | pointerEvents.forEach( eventName => { 86 | this.controlsLeft.forEach( el => el.addEventListener( eventName, this.onNavigateLeftClicked, false ) ); 87 | this.controlsRight.forEach( el => el.addEventListener( eventName, this.onNavigateRightClicked, false ) ); 88 | this.controlsUp.forEach( el => el.addEventListener( eventName, this.onNavigateUpClicked, false ) ); 89 | this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) ); 90 | this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) ); 91 | this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) ); 92 | } ); 93 | 94 | } 95 | 96 | unbind() { 97 | 98 | [ 'touchstart', 'click' ].forEach( eventName => { 99 | this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) ); 100 | this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) ); 101 | this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) ); 102 | this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) ); 103 | this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) ); 104 | this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) ); 105 | } ); 106 | 107 | } 108 | 109 | /** 110 | * Updates the state of all control/navigation arrows. 111 | */ 112 | update() { 113 | 114 | let routes = this.Reveal.availableRoutes(); 115 | 116 | // Remove the 'enabled' class from all directions 117 | [...this.controlsLeft, ...this.controlsRight, ...this.controlsUp, ...this.controlsDown, ...this.controlsPrev, ...this.controlsNext].forEach( node => { 118 | node.classList.remove( 'enabled', 'fragmented' ); 119 | 120 | // Set 'disabled' attribute on all directions 121 | node.setAttribute( 'disabled', 'disabled' ); 122 | } ); 123 | 124 | // Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons 125 | if( routes.left ) this.controlsLeft.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 126 | if( routes.right ) this.controlsRight.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 127 | if( routes.up ) this.controlsUp.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 128 | if( routes.down ) this.controlsDown.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 129 | 130 | // Prev/next buttons 131 | if( routes.left || routes.up ) this.controlsPrev.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 132 | if( routes.right || routes.down ) this.controlsNext.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } ); 133 | 134 | // Highlight fragment directions 135 | let currentSlide = this.Reveal.getCurrentSlide(); 136 | if( currentSlide ) { 137 | 138 | let fragmentsRoutes = this.Reveal.fragments.availableRoutes(); 139 | 140 | // Always apply fragment decorator to prev/next buttons 141 | if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 142 | if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 143 | 144 | // Apply fragment decorators to directional buttons based on 145 | // what slide axis they are in 146 | if( this.Reveal.isVerticalSlide( currentSlide ) ) { 147 | if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 148 | if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 149 | } 150 | else { 151 | if( fragmentsRoutes.prev ) this.controlsLeft.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 152 | if( fragmentsRoutes.next ) this.controlsRight.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } ); 153 | } 154 | 155 | } 156 | 157 | if( this.Reveal.getConfig().controlsTutorial ) { 158 | 159 | let indices = this.Reveal.getIndices(); 160 | 161 | // Highlight control arrows with an animation to ensure 162 | // that the viewer knows how to navigate 163 | if( !this.Reveal.hasNavigatedVertically() && routes.down ) { 164 | this.controlsDownArrow.classList.add( 'highlight' ); 165 | } 166 | else { 167 | this.controlsDownArrow.classList.remove( 'highlight' ); 168 | 169 | if( this.Reveal.getConfig().rtl ) { 170 | 171 | if( !this.Reveal.hasNavigatedHorizontally() && routes.left && indices.v === 0 ) { 172 | this.controlsLeftArrow.classList.add( 'highlight' ); 173 | } 174 | else { 175 | this.controlsLeftArrow.classList.remove( 'highlight' ); 176 | } 177 | 178 | } else { 179 | 180 | if( !this.Reveal.hasNavigatedHorizontally() && routes.right && indices.v === 0 ) { 181 | this.controlsRightArrow.classList.add( 'highlight' ); 182 | } 183 | else { 184 | this.controlsRightArrow.classList.remove( 'highlight' ); 185 | } 186 | } 187 | } 188 | } 189 | } 190 | 191 | /** 192 | * Event handlers for navigation control buttons. 193 | */ 194 | onNavigateLeftClicked( event ) { 195 | 196 | event.preventDefault(); 197 | this.Reveal.onUserInput(); 198 | 199 | if( this.Reveal.getConfig().navigationMode === 'linear' ) { 200 | this.Reveal.prev(); 201 | } 202 | else { 203 | this.Reveal.left(); 204 | } 205 | 206 | } 207 | 208 | onNavigateRightClicked( event ) { 209 | 210 | event.preventDefault(); 211 | this.Reveal.onUserInput(); 212 | 213 | if( this.Reveal.getConfig().navigationMode === 'linear' ) { 214 | this.Reveal.next(); 215 | } 216 | else { 217 | this.Reveal.right(); 218 | } 219 | 220 | } 221 | 222 | onNavigateUpClicked( event ) { 223 | 224 | event.preventDefault(); 225 | this.Reveal.onUserInput(); 226 | 227 | this.Reveal.up(); 228 | 229 | } 230 | 231 | onNavigateDownClicked( event ) { 232 | 233 | event.preventDefault(); 234 | this.Reveal.onUserInput(); 235 | 236 | this.Reveal.down(); 237 | 238 | } 239 | 240 | onNavigatePrevClicked( event ) { 241 | 242 | event.preventDefault(); 243 | this.Reveal.onUserInput(); 244 | 245 | this.Reveal.prev(); 246 | 247 | } 248 | 249 | onNavigateNextClicked( event ) { 250 | 251 | event.preventDefault(); 252 | this.Reveal.onUserInput(); 253 | 254 | this.Reveal.next(); 255 | 256 | } 257 | 258 | 259 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/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 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/js/controllers/location.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Reads and writes the URL based on reveal.js' current state. 3 | */ 4 | export default class Location { 5 | 6 | constructor( Reveal ) { 7 | 8 | this.Reveal = Reveal; 9 | 10 | // Delays updates to the URL due to a Chrome thumbnailer bug 11 | this.writeURLTimeout = 0; 12 | 13 | this.onWindowHashChange = this.onWindowHashChange.bind( this ); 14 | 15 | } 16 | 17 | bind() { 18 | 19 | window.addEventListener( 'hashchange', this.onWindowHashChange, false ); 20 | 21 | } 22 | 23 | unbind() { 24 | 25 | window.removeEventListener( 'hashchange', this.onWindowHashChange, false ); 26 | 27 | } 28 | 29 | /** 30 | * Reads the current URL (hash) and navigates accordingly. 31 | */ 32 | readURL() { 33 | 34 | let config = this.Reveal.getConfig(); 35 | let indices = this.Reveal.getIndices(); 36 | let currentSlide = this.Reveal.getCurrentSlide(); 37 | 38 | let hash = window.location.hash; 39 | 40 | // Attempt to parse the hash as either an index or name 41 | let bits = hash.slice( 2 ).split( '/' ), 42 | name = hash.replace( /#\/?/gi, '' ); 43 | 44 | // If the first bit is not fully numeric and there is a name we 45 | // can assume that this is a named link 46 | if( !/^[0-9]*$/.test( bits[0] ) && name.length ) { 47 | let element; 48 | 49 | let f; 50 | 51 | // Parse named links with fragments (#/named-link/2) 52 | if( /\/[-\d]+$/g.test( name ) ) { 53 | f = parseInt( name.split( '/' ).pop(), 10 ); 54 | f = isNaN(f) ? undefined : f; 55 | name = name.split( '/' ).shift(); 56 | } 57 | 58 | // Ensure the named link is a valid HTML ID attribute 59 | try { 60 | element = document.getElementById( decodeURIComponent( name ) ); 61 | } 62 | catch ( error ) { } 63 | 64 | // Ensure that we're not already on a slide with the same name 65 | let isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false; 66 | 67 | if( element ) { 68 | // If the slide exists and is not the current slide... 69 | if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) { 70 | // ...find the position of the named slide and navigate to it 71 | let slideIndices = this.Reveal.getIndices( element ); 72 | this.Reveal.slide( slideIndices.h, slideIndices.v, f ); 73 | } 74 | } 75 | // If the slide doesn't exist, navigate to the current slide 76 | else { 77 | this.Reveal.slide( indices.h || 0, indices.v || 0 ); 78 | } 79 | } 80 | else { 81 | let hashIndexBase = config.hashOneBasedIndex ? 1 : 0; 82 | 83 | // Read the index components of the hash 84 | let h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0, 85 | v = ( parseInt( bits[1], 10 ) - hashIndexBase ) || 0, 86 | f; 87 | 88 | if( config.fragmentInURL ) { 89 | f = parseInt( bits[2], 10 ); 90 | if( isNaN( f ) ) { 91 | f = undefined; 92 | } 93 | } 94 | 95 | if( h !== indices.h || v !== indices.v || f !== undefined ) { 96 | this.Reveal.slide( h, v, f ); 97 | } 98 | } 99 | 100 | } 101 | 102 | /** 103 | * Updates the page URL (hash) to reflect the current 104 | * state. 105 | * 106 | * @param {number} delay The time in ms to wait before 107 | * writing the hash 108 | */ 109 | writeURL( delay ) { 110 | 111 | let config = this.Reveal.getConfig(); 112 | let currentSlide = this.Reveal.getCurrentSlide(); 113 | 114 | // Make sure there's never more than one timeout running 115 | clearTimeout( this.writeURLTimeout ); 116 | 117 | // If a delay is specified, timeout this call 118 | if( typeof delay === 'number' ) { 119 | this.writeURLTimeout = setTimeout( this.writeURL, delay ); 120 | } 121 | else if( currentSlide ) { 122 | 123 | let hash = this.getHash(); 124 | 125 | // If we're configured to push to history OR the history 126 | // API is not avaialble. 127 | if( config.history ) { 128 | window.location.hash = hash; 129 | } 130 | // If we're configured to reflect the current slide in the 131 | // URL without pushing to history. 132 | else if( config.hash ) { 133 | // If the hash is empty, don't add it to the URL 134 | if( hash === '/' ) { 135 | window.history.replaceState( null, null, window.location.pathname + window.location.search ); 136 | } 137 | else { 138 | window.history.replaceState( null, null, '#' + hash ); 139 | } 140 | } 141 | // UPDATE: The below nuking of all hash changes breaks 142 | // anchors on pages where reveal.js is running. Removed 143 | // in 4.0. Why was it here in the first place? ¯\_(ツ)_/¯ 144 | // 145 | // If history and hash are both disabled, a hash may still 146 | // be added to the URL by clicking on a href with a hash 147 | // target. Counter this by always removing the hash. 148 | // else { 149 | // window.history.replaceState( null, null, window.location.pathname + window.location.search ); 150 | // } 151 | 152 | } 153 | 154 | } 155 | 156 | /** 157 | * Return a hash URL that will resolve to the given slide location. 158 | * 159 | * @param {HTMLElement} [slide=currentSlide] The slide to link to 160 | */ 161 | getHash( slide ) { 162 | 163 | let url = '/'; 164 | 165 | // Attempt to create a named link based on the slide's ID 166 | let s = slide || this.Reveal.getCurrentSlide(); 167 | let id = s ? s.getAttribute( 'id' ) : null; 168 | if( id ) { 169 | id = encodeURIComponent( id ); 170 | } 171 | 172 | let index = this.Reveal.getIndices( slide ); 173 | if( !this.Reveal.getConfig().fragmentInURL ) { 174 | index.f = undefined; 175 | } 176 | 177 | // If the current slide has an ID, use that as a named link, 178 | // but we don't support named links with a fragment index 179 | if( typeof id === 'string' && id.length ) { 180 | url = '/' + id; 181 | 182 | // If there is also a fragment, append that at the end 183 | // of the named link, like: #/named-link/2 184 | if( index.f >= 0 ) url += '/' + index.f; 185 | } 186 | // Otherwise use the /h/v index 187 | else { 188 | let hashIndexBase = this.Reveal.getConfig().hashOneBasedIndex ? 1 : 0; 189 | if( index.h > 0 || index.v > 0 || index.f >= 0 ) url += index.h + hashIndexBase; 190 | if( index.v > 0 || index.f >= 0 ) url += '/' + (index.v + hashIndexBase ); 191 | if( index.f >= 0 ) url += '/' + index.f; 192 | } 193 | 194 | return url; 195 | 196 | } 197 | 198 | /** 199 | * Handler for the window level 'hashchange' event. 200 | * 201 | * @param {object} [event] 202 | */ 203 | onWindowHashChange( event ) { 204 | 205 | this.readURL(); 206 | 207 | } 208 | 209 | } -------------------------------------------------------------------------------- /slides/EmberConf2021/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