feat(#37): add slot to allow editor to add notes

Author: peterpeterparker

doc/slides/slides.md

@@ -91,6 +91,19 @@ The "Title" slide's Web Component could be integrated using the tag `<deckgo-sli
 
 Both slots `title` and `content` are optional. Without providing one of them, the page will remain empty.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
+```
+<deckgo-deck>
+  <deckgo-slide-title>
+    <h1 slot="title">My presentation title</h1>
+    <div slot="notes">A note regarding this particular slide</div>
+  </deckgo-slide-title>
+</deckgo-deck>
+``` 
+
 #### Attributes
 
 This component offers the following options which could be set using attributes:
@@ -158,6 +171,10 @@ The "Content" slide's Web Component could be integrated using the tag `<deckgo-s
 
 Both slots `title` and `content` are optional. Without providing one of them, the page will remain empty.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Attributes
 
 This component offers the following options which could be set using attributes:
@@ -229,6 +246,10 @@ The `start` slot is the content of the left pane respectively the slot `end` is
 
 Note: The slot `title` is per default hidden even if you provide it. See attributes below if you wish to display it. 
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Attributes
 
 This component offers the following options which could be set using attributes:
@@ -272,7 +293,7 @@ The "Gif" slide let you add easily a gif, like those provided by [Giphy](https:/
 
 <img src="https://github.com/fluster/deckdeckgo/blob/master/doc/slides/deckdeckgo-slide-gif-layout.gif" width="450px">
 
-#### Note
+#### For images too
 
 The slide Gif is useful for Gifs but could be use for any images too, in case you would like for example to display an image fullscreen.
 
@@ -292,6 +313,10 @@ The "Gif" slide's Web Component could be integrated using the tag `<deckgo-slide
 
 The slots `title`, `header` and `footer` are both optional. `header` and `footer` would be displayed over the gif.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Gif component
 
 The slide "Gif" relies on the component `<deckgo-gif/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
@@ -344,6 +369,10 @@ The "Chart" slide's Web Component could be integrated using the tag `<deckgo-sli
 
 The slot `title` is optional.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Chart components
 
 The slide "Chart" relies on the charts components `<deckgo-pie-chart/>`, `<deckgo-line-chart/>` and  `<deckgo-bar-chart/>` which are described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
@@ -404,6 +433,10 @@ The "Youtube" slide's Web Component could be integrated using the tag `<deckgo-s
 
 The slot `title` is optional.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 ##### Youtube component
 
 The slide "Youtube" relies on the component `<deckgo-youtube/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
@@ -492,6 +525,10 @@ You could provide a file URI to the code you want to display or provide it with
 
 The slots `title` and `code` are optional.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Code components
 
 The slide "Code" relies on the code component `<deckgo-highlight-code/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
@@ -588,6 +625,10 @@ Notes:
 
 * You could provide up to six `social-link` slots. Each of these could be your custom code or you could use the component `<deckgo-social/>` to easily provide a link to an external URI.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 ##### Social components
 
 The details of the component `<deckgo-social/>` is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
@@ -704,6 +745,10 @@ The "QR code" slide's Web Component could be integrated using the tag `<deckgo-s
 
 The slots `title` and `content` are optional.
 
+##### Notes
+
+Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will `not` be displayed in the presentation but `displayed` in the [remote control](https://deckdeckgo.app).
+
 #### Code components
 
 The slide "QR Code" relies on the code component `<deckgo-qrcode/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).

src/components.d.ts

@@ -33,7 +33,7 @@ export namespace Components {
     'onSlidePrevDidChange'?: (event: CustomEvent<number>) => void;
     'onSlideToChange'?: (event: CustomEvent<number>) => void;
     'onSlideWillChange'?: (event: CustomEvent<number>) => void;
-    'onSlidesDidLoad'?: (event: CustomEvent<string[]>) => void;
+    'onSlidesDidLoad'?: (event: CustomEvent<DeckdeckgoSlideDefinition[]>) => void;
     'pager'?: boolean;
     'pagerPercentage'?: boolean;
   }

src/components/deck/deckdeckgo-deck.d.ts

@@ -0,0 +1,4 @@
+interface DeckdeckgoSlideDefinition {
+  name: string;
+  notes?: string;
+}

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -34,7 +34,7 @@ export class DeckdeckgoDeck {
   @State()
   private length: number = 0;
 
-  @Event() slidesDidLoad: EventEmitter<string[]>;
+  @Event() slidesDidLoad: EventEmitter<DeckdeckgoSlideDefinition[]>;
   @Event() slideNextDidChange: EventEmitter<number>;
   @Event() slidePrevDidChange: EventEmitter<number>;
   @Event() slideToChange: EventEmitter<number>;
@@ -257,9 +257,17 @@ export class DeckdeckgoDeck {
 
       // Are all slides loaded?
       if (definedSlides && loadedSlides && loadedSlides.length === definedSlidesLength && definedSlidesLength === this.length) {
-        const orderedSlidesTagNames: string[] = Array.from(loadedSlides).map((slide: HTMLElement) => {
-          return slide.tagName
+        const orderedSlidesTagNames: DeckdeckgoSlideDefinition[] = [];
+
+        Array.from(loadedSlides).forEach((slide: HTMLElement) => {
+          const notes: HTMLElement = slide.querySelector('[slot=\'notes\']');
+
+          orderedSlidesTagNames.push({
+            name: slide.tagName,
+            notes: notes ? notes.innerHTML : null
+          });
         });
+
         this.slidesDidLoad.emit(orderedSlidesTagNames);
 
         await this.lazyLoadFirstSlides();

src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx

@@ -57,6 +57,7 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
           <slot name="social-link"></slot>
         </div>
       </div>
+      <slot name="notes"></slot>
     </div>;
   }
 

src/components/slides/deckdeckgo-slide-chart/deckdeckgo-slide-chart.tsx

@@ -118,6 +118,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlide {
       <div class="deckgo-chart-container">
         {this.renderChart()}
       </div>
+      <slot name="notes"></slot>
     </div>
   }
 

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -163,6 +163,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
         <deckgo-highlight-code src={this.src} anchor={this.anchor} anchorZoom={this.anchorZoom} hideAnchor={this.hideAnchor} language={this.language}></deckgo-highlight-code>
       </div>
       <slot name="code"></slot>
+      <slot name="notes"></slot>
     </div>;
   }
 

src/components/slides/deckdeckgo-slide-content/deckdeckgo-slide-content.tsx

@@ -46,6 +46,7 @@ export class DeckdeckgoSlideContent implements DeckdeckgoSlide {
     return <div class="deckgo-slide">
       <slot name="title"></slot>
       <slot name="content"></slot>
+      <slot name="notes"></slot>
     </div>;
   }
 

src/components/slides/deckdeckgo-slide-gif/deckdeckgo-slide-gif.tsx

@@ -72,6 +72,7 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
         <slot name="header"></slot>
         <deckgo-gif src={this.src} alt={this.alt} fullscreen={this.fullscreen}></deckgo-gif>
         <slot name="footer"></slot>
+        <slot name="notes"></slot>
       </div>
     </div>
   }

src/components/slides/deckdeckgo-slide-qrcode/deckdeckgo-slide-qrcode.tsx

@@ -91,6 +91,7 @@ export class DeckdeckgoSlideQrcode implements DeckdeckgoSlide {
         <slot name="content"></slot>
         <deckgo-qrcode content={this.content}></deckgo-qrcode>
       </div>
+      <slot name="notes"></slot>
     </div>;
   }