Merge pull request #8 from astronomersiva/more-components

More components

README.md

@@ -4,6 +4,14 @@ This was built as a demo for my talk on using WebSockets with Ember.
 If you would like to use this, feel free to fork this repo and add
 your slides as components.
 
+## Features
+
+* Create interactive EmberJS presentations.
+* Sync your presentation across all screens.
+* Speaker mode with notes, timer and previews of the next and previous slides.
+* Export all slides as PDF.
+* Write slides and notes in markdown.
+
 ## Prerequisites
 
 You will need the following things properly installed on your computer.
@@ -21,15 +29,15 @@ You will need the following things properly installed on your computer.
 ## Running / Development
 
 * `ember serve`
-* For the speaker view, visit `publicip:4200/?speaker=true`.
+* For the speaker view, visit `publicip:4200/?speaker`.
 * For the audience view, click on the `Open Presenter View icon` and drag the popup
   window to the screen that is being shared.
 
 ### Usage
 
 ![ember-keynote](screenshots/app.jpg)
 
-You can switch between the slides by making use of the arrow keys
+You can switch between the slides by making use of the `arrow keys`
 or the `A` and `D` keys. You can also use the control buttons on the screen.
 
 Use the Full Screen icon to toggle fullscreen view. This is also possible in the
@@ -42,6 +50,12 @@ resume the presentation.
 
 You can add slide notes by adding them to the respective slide component's class.
 
+To export the presentation as a PDF, use the `download` query parameter. You can then
+use the browser's `Save as PDF` feature to download the presentation. Please ensure
+that the `Background graphics` option is checked.
+
+![Background graphics option in Save as PDF dialog](screenshots/download.jpg)
+
 ### Deploying
 
 This app makes use of WebSockets. You will have to deploy a Node.js

app/components/background.hbs

@@ -0,0 +1,11 @@
+{{!-- template-lint-disable no-inline-styles --}}
+<div
+  ...attributes
+  style={{this.style}}
+  class="
+    bg-center
+    bg-cover
+  "
+>
+  {{yield}}
+</div>

app/components/background.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+export default class BackgroundComponent extends Component {
+  get style() {
+    if (this.args.image) {
+      return `background-image: url(${this.args.image})`;
+    }
+
+    if (this.args.color) {
+      return `background-color: ${this.args.color}`;
+    }
+
+    if (this.args.gradient) {
+      return `background-image: linear-gradient(${this.args.gradient})`;
+    }
+
+    if (this.args.radialGradient) {
+      return `background-image: radial-gradient(${this.args.radialGradient})`;
+    }
+
+    return `background-color: black`;
+  }
+}

app/components/code.hbs

@@ -0,0 +1,10 @@
+{{#let (get-code-snippet @snippet) as |snippet|}}
+  {{!-- ember-prism renders an empty string if an unsupported language is passed --}}
+  {{#if this.language}}
+    <CodeBlock
+      @language={{this.language}}
+      @code={{snippet.source}} />
+  {{else}}
+    <CodeBlock @code={{snippet.source}} />
+  {{/if}}
+{{/let}}

app/components/code.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+export default class CodeComponent extends Component {
+  get language() {
+    let snippet = this.args.snippet;
+    let languages = {
+      js: 'javascript',
+      html: 'html',
+      // while this is supported by prism,
+      // ember-prism is returning an empty string, need to check
+      // hbs: 'handlebars'
+    };
+
+    let extension = snippet.split('.').pop();
+    return languages[extension] || '';
+  }
+}

app/components/controls/speaker-controls.hbs

@@ -0,0 +1,17 @@
+<div
+  ...attributes
+  class="relative flex flex-col min-h-screen w-full md:w-1/4 border-gray-300 border-4">
+  <Controls::SlideNotes @notes={{@notes}} />
+
+  <div class="flex flex-col flex-grow w-full bg-gray-200 border-gray-300 border-t-2">
+    <Controls::Navigation />
+
+    <div class="flex flex-row flex-grow items-center">
+      <Controls::FullScreen @speaker={{true}} />
+      <Controls::PresentationView />
+      <Controls::AdjacentSlidesToggle />
+      <Controls::Clock />
+      <Controls::Pause />
+    </div>
+  </div>
+</div>

app/components/presentation-container.hbs

@@ -0,0 +1,21 @@
+{{#let (concat "slides/slide-" @slide) as |Slide|}}
+  <Slide
+    @speaker={{@speaker}}
+    class="
+      {{concat "slide-" @slide}}
+      {{if @speaker "hidden md:flex w-3/4" "flex"}}
+      {{if @isExport "min-h-full"}}
+    " as |slide|
+  >
+    {{#if @speaker}}
+      {{#unless @hasStarted}}
+        <div class="timer-overlay w-full md:w-3/4 md:h-full bottom-26 md:top-0">
+          <button class="underline" {{on "click" @startTicking}}>Start Presentation</button>
+        </div>
+      {{/unless}}
+
+      <Controls::AdjacentSlides />
+      <Controls::SpeakerControls @notes={{slide.notes}} />
+    {{/if}}
+  </Slide>
+{{/let}}

app/components/slides/slide-1.hbs

@@ -1,7 +1,11 @@
-<div ...attributes>
+<Background
+  class="border-none"
+  @image="/images/lights.jpg"
+  ...attributes
+>
   <h1 class="text-6xl text-center text-gray-400 p-2">
     ember-keynote
   </h1>
-</div>
+</Background>
 
 {{yield this}}

app/components/slides/slide-1.js

@@ -8,11 +8,11 @@ export default class SlidesSlide1Component extends Component {
 
     * Built the Octane way.
     * Uses websockets(with socket.io) to sync slides across the audience.
-    * Code Embeds
-    * Supports Presenter Notes. Use even markdown!
     * Styled with Tailwind.
-    * A Clock to keep track of your progress.
+    * Code Embeds
+    * Speaker mode with notes, timer and previews of the next and previous slides.
+    * Write slides and notes in markdown.
+    * Export slides as PDF.
     * Supports pausing the presentation for the audience.
-    * Control the slides with your phone!
   `;
 }

app/components/slides/slide-2.hbs

@@ -1,5 +1,10 @@
-<div ...attributes>
-  <h1 class="text-black p-3 px-8 text-6xl rounded">Want to try this out?</h1>
-</div>
+<Background
+  @image="/images/party.jpg"
+  ...attributes
+>
+  <h1 class="text-black p-3 px-8 text-6xl rounded">
+    Want to try this out?
+  </h1>
+</Background>
 
 {{yield this}}

app/components/slides/slide-2.js

@@ -8,7 +8,7 @@ export default class SlidesSlide2Component extends Component {
     * Write templates as you please.
     * Run \`ember s\`.
     * Visit the app using the public IP address. Remember to add the
-      \`speaker=true\` query param.
+      \`speaker\` query param.
     * Click on the \`Open Presenter View\` icon to toggle the Presentation view. Drag
       and drop the popup window on the projector display.
     * Just make sure you have the slides numbered sequentially.

app/components/slides/slide-3.hbs

@@ -1,7 +1,8 @@
-<div ...attributes>
-  {{#let (get-code-snippet "slide.hbs") as |snippet|}}
-    <CodeBlock @code={{snippet.source}} />
-  {{/let}}
+<div
+  ...attributes
+  class="slide-bordered"
+>
+  <Code @snippet="slide.hbs" />
 </div>
 
 {{yield this}}

app/components/slides/slide-4.hbs

@@ -1,7 +1,8 @@
-<div ...attributes>
-  {{#let (get-code-snippet "slide.js") as |snippet|}}
-    <CodeBlock @language="javascript" @code={{snippet.source}} />
-  {{/let}}
+<div
+  ...attributes
+  class="slide-bordered"
+>
+  <Code @snippet="slide.js" />
 </div>
 
 {{yield this}}

app/components/slides/slide-5.hbs

@@ -1,5 +1,10 @@
-<div ...attributes>
-  <h1 class="text-black p-3 px-8 text-6xl rounded">Thank you!</h1>
-</div>
+<Background
+  @image="/images/clouds.jpg"
+  ...attributes
+>
+  <h1 class="text-black p-3 px-8 text-6xl rounded">
+    Thank you!
+  </h1>
+</Background>
 
 {{yield this}}

app/controllers/application.js

@@ -7,7 +7,8 @@ import { inject as service } from '@ember/service';
 export default class ApplicationController extends Controller {
   queryParams = [
     'slide',
-    'speaker'
+    'speaker',
+    'download'
   ];
 
   @service socketManager;
@@ -16,6 +17,7 @@ export default class ApplicationController extends Controller {
 
   @tracked speaker;
   @tracked slide;
+  @tracked download;
 
   init() {
     super.init(...arguments);

app/index.html

@@ -14,7 +14,7 @@
 
     {{content-for "head-footer"}}
   </head>
-  <body class="flex h-screen">
+  <body>
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>