Merge pull request #782 from deckgo/header-footer

feat: header and footer

Author: peterpeterparker

CHANGELOG.md

@@ -1,22 +1,55 @@
-<a name="1.6.0"></a>
+<a name="2.0.0"></a>
 
-# [1.6.0](https://github.com/deckgo/deckdeckgo/compare/v1.5.0...v1.6.0) (In progress...)
+# [2.0.0](https://github.com/deckgo/deckdeckgo/compare/v1.5.0...v1.6.0) (In progress...)
+
+### Breaking Changes
+
+Because we are introducing the `header` and `footer` features, slots in the templates `gif` and `aspect-ratio` had to be renamed to avoid name collision.
+
+Therefore, if you would edit such templates with our editor or developer kit, created before these releases, these modifications have to be performed in your content.
+
+Ping [me](mailto:[email protected]) if you need any help or have questions.
+
+Best regards,
+
+David
 
 ### Applications
 
-- docs: v1.6.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
-- remote: v1.5.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
-- studio: v1.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
+- demo: v2.4.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
+- docs: v1.7.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+- remote: v1.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+- studio: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
+
+### Web Components Templates
+
+- slide-aspect-ratio: v2.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/aspect-ratio/CHANGELOG.md))
+- slide-author: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/author/CHANGELOG.md))
+- slide-big-img: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/big-img/CHANGELOG.md))
+- slide-chart: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/chart/CHANGELOG.md))
+- slide-code: v1.2.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/code/CHANGELOG.md))
+- slide-content: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/content/CHANGELOG.md))
+- slide-countdown: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/countdown/CHANGELOG.md))
+- slide-gif: v2.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/gif/CHANGELOG.md))
+- slide-playground: v1.1.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/playground/CHANGELOG.md))
+- slide-poll: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/poll/CHANGELOG.md))
+- slide-qrcode: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/qrcode/CHANGELOG.md))
+- slide-split: v1.3.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md))
+- slide-title: v1.1.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/title/CHANGELOG.md))
+- slide-video: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/video/CHANGELOG.md))
+- slide-youtube: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/youtube/CHANGELOG.md))
 
 ### Web Components
 
+- core: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 - highlight-code: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 - social: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/social/CHANGELOG.md))
 
 ### Others
 
 - gatsby-remark-highlight-code: v1.4.4 ([CHANGELOG](https://github.com/deckgo/gatsby-remark-highlight-code/blob/master/CHANGELOG.md))
-- starter kit: v2.5.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))
+- slide-utils: v2.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md))
+- starter kit: v2.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))
 
 <a name="1.5.0"></a>
 

README.md

@@ -47,8 +47,8 @@ Are you interested to contribute to our open source project? That would be aweso
 | ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | :--------------------------------------------------: |
 | **Studio**         | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.5.0&color=success)](https://deckdeckgo.com)      | [https://deckdeckgo.com](https://deckdeckgo.com)           |           [`README.md`](studio/README.md)            |
 | **Remote control** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.5.1&color=success)](https://deckdeckgo.app)      | [https://deckdeckgo.app](https://deckdeckgo.app)           |           [`README.md`](remote/README.md)            |
-| **Documentation**  | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.6.2&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) |            [`README.md`](docs/README.md)             |
-| **Demo**           | [![version](https://img.shields.io/static/v1.svg?label=production&message=v2.3.0&color=success)](https://demo.deckdeckgo.com) | [https://demo.deckdeckgo.com](https://demo.deckdeckgo.com) | [`Repo`](https://github.com/deckgo/deckdeckgo-demo/) |
+| **Documentation**  | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.7.0&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) |            [`README.md`](docs/README.md)             |
+| **Demo**           | [![version](https://img.shields.io/static/v1.svg?label=production&message=v2.4.0&color=success)](https://demo.deckdeckgo.com) | [https://demo.deckdeckgo.com](https://demo.deckdeckgo.com) | [`Repo`](https://github.com/deckgo/deckdeckgo-demo/) |
 
 ## Web Components
 
@@ -107,7 +107,7 @@ Are you interested to contribute to our open source project? That would be aweso
 | **Cloud**                        |                                                                                          | ![version](https://img.shields.io/static/v1.svg?label=production&message=v1.1.1&color=success)                                                           |                  [`README.md`](cloud/README.md)                   |
 | **Gatsby plugin highlight code** |                                                                                          | ![version](https://img.shields.io/static/v1.svg?label=version&message=v1.4.4&color=success)                                                              | [`Repo`](https://github.com/deckgo/gatsby-remark-highlight-code/) |
 | **Infrastructure**               |                                                                                          |                                                                                                                                                          |                  [`README.md`](infra/README.md)                   |
-| **Starter kit**                  |                                                                                          | ![version](https://img.shields.io/static/v1.svg?label=version&message=v2.5.3&color=success)                                                              |      [`Repo`](http://github.com/deckgo/deckdeckgo-starter/)       |
+| **Starter kit**                  |                                                                                          | ![version](https://img.shields.io/static/v1.svg?label=version&message=v2.6.0&color=success)                                                              |      [`Repo`](http://github.com/deckgo/deckdeckgo-starter/)       |
 | **WAI Lambda**                   |                                                                                          |                                                                                                                                                          |          [`Repo`](https://github.com/deckgo/wai-lambda)           |
 | **Webpack plugins**              | [`deckdeckgo-webpack-plugins`](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [![version](https://img.shields.io/npm/v/deckdeckgo-webpack-plugins/latest.svg?color=success)](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) |                 [`README.md`](webpack/README.md)                  |
 

docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+# 1.7.0 (2020-07-11)
+
+### Features
+
+- group `notes` in a single page
+- add new `header` and `footer`
+
 # 1.6.2 (2020-07-02)
 
 ### Style

docs/docs/deck/app-deck-background/app-deck-background.md

@@ -1,6 +1,6 @@
 # Background
 
-Beside slides and templates, a [DeckDeckGo] deck could also contains a customized element `background` which could be injected using a dedicated `slot`.
+Beside slides and templates, a [DeckDeckGo] deck could also contain a customized element `background` which could be injected using a dedicated `slot`.
 
 ## Table of contents
 
@@ -13,33 +13,29 @@ Beside slides and templates, a [DeckDeckGo] deck could also contains a customize
 
 The slot `background` provided for the deck will be cloned into each slides of your presentation.
 
-This slot is particularly useful if you wish to display your brand or company logo on each slides.
-
-Also worth to notice, this slot will be `hidden` when the presentation will be displayed full screen.
-
 Optionally, if you wish, this slot could also not be cloned, could be useful in case you rather would like to display a background which follows your entire presentation.
 
 ## Attributes
 
 The following attribute could be applied to the `deckgo-deck` element:
 
-| Property       | Attribute       | Mandatory | Description | Type      | Default                             |
-| -------------- | --------------- | --------- | ----------- | --------- | ----------------------------------- |
-| `cloneBackground`         | `clone-background`          |  | Set to false in case you don't want to clone the background in each slides | `boolean`                | true |
+| Property          | Attribute          | Mandatory | Description                                                                | Type      | Default |
+| ----------------- | ------------------ | --------- | -------------------------------------------------------------------------- | --------- | ------- |
+| `cloneBackground` | `clone-background` |           | Set to false in case you don't want to clone the background in each slides | `boolean` | true    |
 
 ## Theming
 
 The following theming options will affect the slot `background` if set on the `deckgo-deck` or any slides.
 
-| CSS4 variable                      | Default | Note |
-| -------------------------- |-----------------|-----------------|
-| --slide-background-position | absolute | The position of the background |
-| --slide-background-top | 0 | Top value |
-| --slide-background-end |  | In LTR, right value |
-| --slide-background-start | 0 | In LTR, left value |
-| --slide-background-width |  | A background width, default without being set all width |
-| --slide-background-height |  | A background height, default without being set all height |
-| --slide-background-print-display | none | Don't print per default the background |
+| CSS4 variable                    | Default  | Note                                                      |
+| -------------------------------- | -------- | --------------------------------------------------------- |
+| --slide-background-position      | absolute | The position of the background                            |
+| --slide-background-top           | 0        | Top value                                                 |
+| --slide-background-end           |          | In LTR, right value                                       |
+| --slide-background-start         | 0        | In LTR, left value                                        |
+| --slide-background-width         |          | A background width, default without being set all width   |
+| --slide-background-height        |          | A background height, default without being set all height |
+| --slide-background-print-display | none     | Don't print per default the background                    |
 
 ## Examples
 
@@ -53,7 +49,7 @@ An example with an image cloned as background for each slides:
       Hello World 🚀
     </p>
   </deckgo-slide-title>
-  
+
   <img slot="background" data-src="https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png">
 </deckgo-deck>
 ```
@@ -68,7 +64,7 @@ An example with a more complex html and css element which is set as background f
       Hello World 🚀
     </p>
   </deckgo-slide-title>
-  
+
   <div class="circle" slot="background"></div>
 </deckgo-deck>
 ```
@@ -91,4 +87,4 @@ div.circle {
 }
 ```
 
-[DeckDeckGo]: https://deckdeckgo.com
+[deckdeckgo]: https://deckdeckgo.com

docs/docs/deck/app-deck-header-footer/app-deck-header-footer.md

@@ -0,0 +1,95 @@
+# Header & Footer
+
+Header and footer can be added to a [DeckDeckGo] deck or to any slides using their dedicated slots `header` and `footer`.
+
+## Table of contents
+
+- [Introduction](#app-deck-header-footer-introduction)
+- [Slides](#app-deck-header-footer-slides)
+- [Theming](#app-deck-header-footer-theming)
+
+## Introduction
+
+These elements are useful if you wish to display your brand or company logo on each slides.
+
+To achieve this behavior, you can provide a slot `header` or `footer` to the deck, these are going to be cloned into each slides of your presentation at runtime.
+
+```
+<deckgo-deck>
+  <deckgo-slide-title>
+    <h1 slot="title">My presentation title</h1>
+    <p slot="content">
+      Hello World 🚀
+    </p>
+  </deckgo-slide-title>
+
+  <div slot="header"><img data-src="./assets/mylogo.png"/></div>
+  <div slot="footer"><a href="https://deckdeckgo.com">DeckDeckGo</a></div>
+</deckgo-deck>
+```
+
+## Slides
+
+If you want to display a specific `header` and `footer` on a particular slide, you proceed as displayed above but on the slide level.
+
+```
+<deckgo-deck>
+  <deckgo-slide-title>
+    <h1 slot="title">My presentation title</h1>
+    <p slot="content">
+      Hello World 🚀
+    </p>
+
+    <div slot="header"><img data-src="./assets/mylogo.png"/></div>
+    <div slot="footer"><a href="https://deckdeckgo.com">DeckDeckGo</a></div>
+  </deckgo-slide-title>
+</deckgo-deck>
+```
+
+In case you would like to have `header` and `footer` defined for your deck but also assign specific ones on a particular slide, use the following attributes:
+
+| Attribute     | Type    | Default | Description                                            |
+| ------------- | ------- | ------- | ------------------------------------------------------ |
+| custom-header | boolean | false   | Set to `true` to defined a specific header for a slide |
+| custom-footer | boolean | false   | Set to `true` to defined a specific footer for a slide |
+
+For example:
+
+```
+<deckgo-deck>
+  <deckgo-slide-title custom-header custom-footer>
+    <h1 slot="title">My presentation title</h1>
+    <p slot="content">
+      Hello World 🚀
+    </p>
+
+    <div slot="header"><img data-src="./assets/my-special-logo.png"/></div>
+    <div slot="footer"><img data-src="./assets/my-special-footer.png"/></div>
+  </deckgo-slide-title>
+
+  <div slot="header"><img data-src="./assets/mylogo.png"/></div>
+  <div slot="footer"><a href="https://deckdeckgo.com">DeckDeckGo</a></div>
+</deckgo-deck>
+```
+
+## Theming
+
+The following theming options will affect the slot `header` and `footer`.
+
+| CSS4 variable                  | Default    | Note                                                       |
+| ------------------------------ | ---------- | ---------------------------------------------------------- |
+| --slide-header-footer-z-index  | -1         |                                                            |
+| --slide-header-max-height      | 48px       | On devices smaller as `1024px` the default value is `16px` |
+| --slide-header-justify-content | flex-start |                                                            |
+| --slide-header-margin-top      | 16px       |                                                            |
+| --slide-header-margin-end      | 32px       |                                                            |
+| --slide-header-margin-bottom   | 16px       |                                                            |
+| --slide-header-margin-start    | 32px       |                                                            |
+| --slide-footer-max-height      | 32px       |                                                            |
+| --slide-footer-justify-content | center     |                                                            |
+| --slide-footer-margin-top      | 16px       |                                                            |
+| --slide-footer-margin-end      | 16px       |                                                            |
+| --slide-footer-margin-bottom   | 16px       |                                                            |
+| --slide-footer-margin-start    | 16px       |                                                            |
+
+[deckdeckgo]: https://deckdeckgo.com

docs/docs/edit/app-edit-notes/app-edit-notes.md

@@ -0,0 +1,35 @@
+# Notes
+
+Notes can be added to any slides. For such purpose, use the related slot `notes` to the particular slide you wish to comment.
+
+Your notes are going to be automatically `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>
+
+And another note on a new line about it too.
+  </deckgo-slide-title>
+</deckgo-deck>
+```
+
+## Publishing Notes
+
+If you are using the [DeckDeckGo] starter kit and wish to make your notes accessible to anyone, you will need to mark them with the attribute `show`.
+
+```
+<deckgo-deck>
+  <deckgo-slide-title>
+    <h1 slot="title">My presentation title</h1>
+    <div slot="notes" show>A note displayed in the presentation within a modal accessible for anyone</div>
+  </deckgo-slide-title>
+</deckgo-deck>
+```
+
+## Markdown
+
+The [remote control](https://deckdeckgo.app) supports Markdown for your notes too.
+
+[deckdeckgo]: https://deckdeckgo.com

docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md

@@ -13,7 +13,6 @@ We use this slide in the [DeckDeckGo] editor to let users create slides containi
   - [Framework integration](#app-slide-aspect-ratio-framework-integration)
 - [Usage](#app-slide-aspect-ratio-usage)
   - [Slots](#app-slide-aspect-ratio-slots)
-  - [Notes](#app-slide-aspect-ratio-notes)
 - [Attributes](#app-slide-aspect-ratio-attributes)
 - [Example](#app-slide-aspect-ratio-example)
 - [Theming](#app-slide-aspect-ratio-theming)
@@ -87,33 +86,7 @@ The "Aspect Ratio" slide's Web Component could be integrated using the tag `<dec
 
 ### Slots
 
-The slots `title`, `header` and `footer` are both optional. `header` and `footer` would be displayed over the content.
-
-### Notes
-
-Optionally a slot `notes` could be use to add some notes regarding the particular slide. These will be automatically `displayed` in the [remote control](https://deckdeckgo.app).
-
-```
-<deckgo-deck>
-  <deckgo-slide-aspect-ratio>
-    <h1>An element</h1>
-    <div slot="notes">A note regarding this particular slide</div>
-
-And another note on a new line about it too.
-  </deckgo-slide-aspect-ratio>
-</deckgo-deck>
-```
-
-If you are using the [DeckDeckGo] starter kit and wish to make your notes accessible to anyone, you will need to mark them with the attribute `show`.
-
-```
-<deckgo-deck>
-  <deckgo-slide-aspect-ratio>
-    <h1>An element</h1>
-    <div slot="notes" show>A note displayed in the presentation within a modal accessible for anyone</div>
-  </deckgo-slide-aspect-ratio>
-</deckgo-deck>
-```
+The slots `title`, `top` and `bottom` are both optional. `top` and `bottom` would be displayed over the content.
 
 ## Attributes