Shower HTML presentation engine

Overview

Shower Presentation Template

Test status

Shower logo

Shower ['ʃəuə] noun. A person or thing that shows.

  1. Built on HTML, CSS and vanilla JavaScript.
  2. Works in all modern browsers.
  3. Themes are separated from engine.
  4. Fully keyboard accessible.
  5. Printable to PDF.

See it in action. Includes Ribbon and Material themes, and core with plugins.

Follow @shower_me for support and updates, file an issue if you have any.

Quick Start

  1. Download and unzip shower.zip template archive.
  2. Open index.html in any text editor and start creating your presentation.

Quick Start via CLI

You’ll need Node.js installed on your computer.

  1. Install Shower CLI utility: npm install -g @shower/cli.
  2. Create your presentation: shower create.

Read more on shower/cli page.

Quick Start with Hosting

You’ll need Node.js installed on your computer.

  1. Copy this repository to your account via GitHub.
    1. Open import page.
    2. Use https://github.com/shower/shower for the repository URL
    3. Use your presentation name.
    4. Clone the resulted repository to your computer.
  2. Install dependencies npm install and start a local server npm start.
  3. Start editing your slides with live-reload.

Once you’re done you can build a clean copy of your slides:

npm run bundle

You’ll find your presentation in bundled folder. You can also run npm run archive to get the same files in presentation.zip.

Publish your presentation online by running:

npm run publish

You’ll have your slides published to https://USER.github.io/REPO/.

Deploy to Netlify

By clicking the button below you can fork this repo and deploy it to Netlify.

Deploy to Netlify

By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a Shower rebuild and deploy to Netlify servers, which allows for an easy way to create and share Shower presentation without the need to install anything locally.

Browser Support

Latest stable versions of Chrome, Edge, Firefox, and Safari are supported.

Contributing

You’re always welcome to contribute. Fork project, make changes and send it as pull request. But it’s better to file an issue with your idea first. Read contributing rules for more details.

Main contributors in historical order: pepelsbey, jahson, miripiruni, kizu, artpolikarpov, tonyganch, zloylos, zloylos, shvaikalesh.


Licensed under MIT License.

Comments
  • Publish on bower

    Publish on bower

    Used shower for my slides and it worked great. But the workflow could be better, I think.

    When the shower repo and the themes would be published on bower, one could create a new presentation more easy. It would separate the logic from the actual presentation. Then it would not be necessary to use sub-repositories.

    Interested? Then I could create a Pull Request with the necessary bower information.

    feature 
    opened by ro-ka 25
  • Code highlighting feature

    Code highlighting feature

    Topics to discuss:

    1. how to make gulp task with highlighting separately (problems with text replacing in index.html and with highlight already highlighted file)
    2. switching off highlighting of <pre><code></code></pre> snipeets without any class? (class needed to highlight as specific language, default is HTML)
    opened by lekzd 20
  • Enable fullscreen in slide mode

    Enable fullscreen in slide mode

    We are looking at enabling the browser's fullscreen mode if supported when entering slide mode. The attached changes are a first cut at doing this. This probably warrants more testing and discussion if this should be enabled by default or a configurable option.

    feature 
    opened by wichert 20
  • History API doesn’t work for local files

    History API doesn’t work for local files

    History.pushState is prohibited in local files. As result there is not way to open Shower presentation as file from disk.

    @pepelsbey seems like critical issue.

    prioritized 
    opened by ai 19
  • When on last slide, seem strange to loop back to beginning

    When on last slide, seem strange to loop back to beginning

    When you're at the last slide, pressing Right takes you back to the beginning. This seems strange; if you're at the end you should stay at the end; if you want to go to the start that's what Home should do.

    If you're wedded to the current behaviour, then perhaps it could be optional?

    AfC

    opened by istathar 15
  • hide/`display:none` slide when not active in full presentation mode?

    hide/`display:none` slide when not active in full presentation mode?

    Just wondering if there's a reason why, when presenting, slides are "stacked" rather than using display:none to remove all but the .active slide. The current behavior, combined with large slide shows with lots of high-res images (which yes, admittedly aren't a fantastic idea for performance) results in heavy image decode thrashing in current Chrome (see https://twitter.com/patrick_h_lauke/status/911962086875521026 and https://bugs.chromium.org/p/chromium/issues/detail?id=768799).

    I've patched this in my presentation here, but wondering why that's not default behavior for shower.

    https://github.com/patrickhlauke/getting-touchy-presentation/commit/aa9bd6eddbbf7e8645c851b3ce2554ae17aff4de

    feature 
    opened by patrickhlauke 13
  • Failing npm install or npm ci

    Failing npm install or npm ci

    Since NPM 6.12 (https://github.com/npm/cli/releases/tag/v6.12.0) npm ci and probably npm install runs prepare script for git dependencies. This new behavior calls prepare script before the dependencies are installed and causes an error.

    $ npm install
    
    > [email protected] prepare /Users/alexeyavdeev/projects/shower
    > shower prepare --files '**' --files '!{docs,node_modules,prepared}{,/**}' --files '!*.{md,toml,json}'
    
    Error: File not found with singular glob: /Users/alexeyavdeev/projects/shower/node_modules/@shower/core/shower.min.js (if this was purposeful, use `allowEmpty` option)
        at Glob.<anonymous> (/Users/alexeyavdeev/projects/shower/node_modules/glob-stream/readable.js:84:17)
        at Object.onceWrapper (events.js:313:26)
        at Glob.emit (events.js:223:5)
        at Glob._finish (/Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:197:8)
        at done (/Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:182:14)
        at Glob._processSimple2 (/Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:688:12)
        at /Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:676:10
        at Glob._stat2 (/Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:772:12)
        at lstatcb_ (/Users/alexeyavdeev/projects/shower/node_modules/glob/glob.js:764:12)
        at RES (/Users/alexeyavdeev/projects/shower/node_modules/inflight/inflight.js:31:16)
    

    I suggest renaming prepare in to something different. For example, we can use build.

    Now, we need to use npm install --ignore-scripts to successfully install dependencies.

    bug 
    opened by avdeev 12
  • Create slideshow mode

    Create slideshow mode

    <section class="slide" data-duration="2m 30s">
    

    means “display this slide for a 2 minutes and 30 seconds and go to the next slide”

    feature 
    opened by pepelsbey 12
  • Malware alert on Windows 8 when download from http://shwr.me/shower.zip

    Malware alert on Windows 8 when download from http://shwr.me/shower.zip

    When download archive directly from http://shwr.me/shower.zip Windows 8 detects a malware inside of archive and prevents from downloading.

    In the same time i am able to download archive from https://github.com/shower/shower/archive/2.0.0.zip with no problem. 2016-01-18_1545

    opened by tytskyi 11
  • Print version?

    Print version?

    It'd be super cool if you'd manage to make a print stylesheet that would make print version look almost like the actual presentation.

    With that you could easily convert Shower presentation to pdf just by printing it to pdf on mac.

    feature 
    opened by kizu 11
  • Myo support

    Myo support

    I would like to support the use of Myo armbands within shower slidehows via MyoJs and myodameon.

    How would this be a desirable enough story for you guys? Do you have some recommendations?

    feature 
    opened by thierrymarianne 10
  • The last slide is not the last

    The last slide is not the last

    Even after the last slide, the next event keeps incrementing the counter. Locally, I added the code below (from the prev event) to the event callback, and it solved my problem.

    if (activeIndex === -1 || activeIndex === innerSteps.length) return;
    

    But I didn't delve into the codebase, so maybe this solution is wrong.

    opened by vanyauhalin 0
  • Drawing on top of slide

    Drawing on top of slide

    Hi! Thanks for this great work. I am using it for my teaching slides.

    I absolutely need to draw on top of my slides when I present them, so I added some code to do it. I am not submitting a pull request because the code is small, and if you like it it will be faster for you to integrate it nicely. It relies on the fabric.js (https://github.com/fabricjs) library. Here is an example from my course (its in french:-): http://www.iro.umontreal.ca/~roys/ift1005/01-internet.html When in full mode, here are some keys to try:

    • a enters drawing mode
    • b exits drawing mode
    • just click and drag to draw. All drawings "stick" to the current slide.
    • z to erase current slide
    • 1, 2, 3 to change color
    • 8, 9,0 to change pen shape

    You can see this in action in my recorded course :

    • https://classe.iro.umontreal.ca/w/wiCDvwCTHXdTkqo3GNNGSr?start=52m43s
    • https://classe.iro.umontreal.ca/w/8u3Wg9mwVePkJ9E21ZnDvr?start=51m08s

    The code that needs to be added to a slide is this:

        <!-- live drawing -->
        <link rel="stylesheet" href="shower/dessin.css">
        <div id="canvas-wrapper"> <canvas id="sheet"></canvas> </div>
        <script src="js/fabric.js"></script>
        <script src="shower/dessin.js"></script>
    

    I have this on gitlab, but its all in the slides I provided. Feel free to use it as you see fit. What's missing: drawing everything in list mode, and printing everything correctly.

    Thanks again for this great project, Sébastien

    opened by blobule 0
  • JoyCons Support

    JoyCons Support

    I want to add Nintendo JoyCons support for using they as clicker. Will it be useful for this project?

    P.S.: Maybe this issue more relevant for core repo

    opened by jag-k 3
  • Accessibility: aria-relevant causes too much speech

    Accessibility: aria-relevant causes too much speech

    When using a screen reader and advancing to the next slide, the screen reader first speaks the contents of the previous slide before speaking the contents of that next slide. That means it takes time before you hear the new slide. And it doesn't seem useful to repeat the slide you just left.

    Shower tells screen readers to speak the current slide by creating an element with aria-live=assertive and putting a copy of the current slide in it. However, it also sets the attribute aria-relevant=all on that element, which causes screen reader to speak not just the new content, but also the content that was just removed.

    Shower should probably not set aria-relevant=all, but leave aria-relevant at its default value (aria-relevant="additions text", see https://www.w3.org/TR/wai-aria-1.2/#aria-relevant).

    The code that sets this attribute appears to be on line 6 in core/lib/modules/a11y.js

    opened by bert-github 0
  • <mark class= tag inside is not working">

    tag inside is not working

    If you paste <mark class="important"> inside <code class="mark"> – you will see that "important" element will be transparent. Снимок экрана 2021-04-30 в 09 18 53 Снимок экрана 2021-04-30 в 09 18 32

    bug prioritized 
    opened by gingano 0
Releases(v3.3.0)
  • v3.3.0(Oct 16, 2021)

    • Update cli, change prepare to bundle 19b8d81
    • Add pointless mode; Update deps 54bef8d
    • Fix the link to index.html, fixes #375 7529899

    https://github.com/shower/shower/compare/v3.2.3...v3.3.0

    Source code(tar.gz)
    Source code(zip)
  • v3.2.3(Jul 20, 2021)

  • v3.2.2(Jul 6, 2021)

  • v3.2.1(Jul 6, 2021)

  • v3.2.0(Jun 24, 2021)

    • Update deps bef107f
    • Update GH action 42a7b73
    • Fix typo and copyright (#373) c05fa8b

    https://github.com/shower/shower/compare/v3.1.1...v3.2.0

    Source code(tar.gz)
    Source code(zip)
  • v3.1.1(Mar 2, 2021)

    • Update themes 8c59778
    • Update printing docs eb480ff
    • Update Node.js for tests 0ee5b8a
    • Fix the PNG name, fixes #368 8ec0cdc
    • Added information about spotlight element (#369) 982a04b

    https://github.com/shower/shower/compare/v3.1.0...v3.1.1

    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Mar 1, 2021)

    • Update dependencies 9e6084a
    • Fixed misprint (#366) 8991a51
    • Add link to badge (#364) fce5d73
    • Update deps 3c6fe41
    • Make all links use https:// (#359) 09da3fd
    • Update readme 2ae499f

    https://github.com/shower/shower/compare/v3.0.0...v3.1.0

    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Apr 17, 2020)

    Update to @shower/[email protected]

    • Update shower/cli 47a264d
    • Update path to the core 49d4f02
    • Swtich to org package f656452
    • Update dependencies 2179451
    • Add new CI testing badge 981a729
    • Add GitHub Action test 2a23bda
    • Update dependencies in lock file 3e7d848
    Source code(tar.gz)
    Source code(zip)
  • v2.7.1(Nov 22, 2019)

    • Update themes 098de86
    • Fix typo (#352) 685d112
    • New way to import repo 744e8dc
    • Delete unused picture a15a32c
    • Simplify copying steps 9dcfc45
    • added new way to copy project 17e81a4
    • Update path to the CLI package 857c4e2

    https://github.com/shower/shower/compare/v2.7.0...v2.7.1

    Source code(tar.gz)
    Source code(zip)
  • v2.7.0(Feb 12, 2019)

    • Update themes 83b0c30
    • Update copyright year 4075b50
    • Add universal sample year ec6dac9
    • Migrate to shower-cli 04e7987

    https://github.com/shower/shower/compare/v2.6.8...v2.7.0

    Source code(tar.gz)
    Source code(zip)
Owner
Shower
Shower presentation engine projects
Shower
DIY Presentation Micro-Framework

Bespoke.js DIY Presentation Micro-Framework Bespoke.js is a super minimal (1KB min'd and gzipped), modular presentation library for modern browsers, d

Bespoke.js 4.7k Dec 18, 2022
An example of implementation of the Veriifiable Presentation Generation Service specification.

Verifiable Presentation Generation Service A plugin-based service that allows issuers to render verifiable presentations from templates, and store it

Verifiable Presentation Generation 5 Nov 16, 2022
IGELU DevDay 2022 presentation.

PrimoVE development Yarn is prefered as package manager. But any will do. Directory structure . ├── README.md This file ├── dist

Mehmet Celik 4 Sep 12, 2022
The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台,可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便,前端使用流行的layui界面美观大方。 采用组件开发技术,提高系统的灵活性和可扩展性;采

Qian Chen 38 Dec 27, 2022
Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data templates in pure HTML.

Tempo 2.0 Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data templates in pure HTML. Why use Tempo? Clear separati

Twigkit 707 Jan 3, 2023
Wallpaper Engine but online-version. (HTML, CSS, JS with jQuery, PHP)

Project Preview - Web Wallpaper Engine About Wallpaper Engine but online-version. View animated wallpapers directly in your browser. Case: Create web-

Dmitry Britov 11 Dec 30, 2022
Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

QinXuYang 21 Dec 16, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Dec 21, 2022
Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Mai 1 Jan 22, 2022
Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG)

Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG) This Assignment is mainly on PSD TO HTML along with HTML,CSS As a Basic HT

Yasir Monon 1 Jan 29, 2022
Ctg-exam-2 - Exam Task of HTML , Responsive Page - PSD to HTML - (CTG)

Exam Task of HTML - PSD to HTML - (CTG) This Exam is mainly on PSD TO HTML along

Yasir Monon 1 Feb 16, 2022
Search Engine for YouTuber Ali Abdaal's videos

Ali Abdaal Search Engine This is a personalized search engine for my favorite YouTubers, Ali Abdaal. I used selenium to scrape all his videos, youtube

Hassan El Mghari 24 Oct 14, 2022
An example project to how to integrate Chat Engine into a marketplace

Add Chat to Your Marketplace This is a example online marketplace with Chat Engine fully integrated. It's meant to help people building online marketp

Adam La Morre 13 Dec 22, 2022
Free, open source game engine online

microStudio is a free, open source game engine online. It is also a platform to learn and practise programming. microStudio can be used for free at ht

Gilles 719 Dec 30, 2022
A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery ?? Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Linus Lee 215 Dec 30, 2022
Trying to make a game engine apparently.

Clockwork - a game engine from scratch The goal of this project is to build a game engine, I still don't know what it needs to do, but will update thi

Anas Mazouni 2 Oct 31, 2021
Tiny and powerful JavaScript full-text search engine for browser and Node

MiniSearch MiniSearch is a tiny but powerful in-memory fulltext search engine written in JavaScript. It is respectful of resources, and it can comfort

Luca Ongaro 2k Jan 3, 2023
Javascript engine to make fast games.

G3 Javascript Basic javascript engine to make fast games and write clean code. ??️ Example code: const g3 = new G3() const Window = g3.createWindow("

Starship Code 2 Feb 13, 2022
Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Chappe Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Do

Valerian Saliou 146 Jan 1, 2023