diff --git a/CHANGELOG.md b/CHANGELOG.md
index f384a2cac..f1d73a519 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,22 +1,55 @@
-
+
-# [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:david.dalbusco@outlook.com) 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))
diff --git a/README.md b/README.md
index 84ca0c288..d36f8f37a 100644
--- a/README.md
+++ b/README.md
@@ -47,8 +47,8 @@ Are you interested to contribute to our open source project? That would be aweso
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | :--------------------------------------------------: |
| **Studio** | [](https://deckdeckgo.com) | [https://deckdeckgo.com](https://deckdeckgo.com) | [`README.md`](studio/README.md) |
| **Remote control** | [](https://deckdeckgo.app) | [https://deckdeckgo.app](https://deckdeckgo.app) | [`README.md`](remote/README.md) |
-| **Documentation** | [](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) | [`README.md`](docs/README.md) |
-| **Demo** | [](https://demo.deckdeckgo.com) | [https://demo.deckdeckgo.com](https://demo.deckdeckgo.com) | [`Repo`](https://github.com/deckgo/deckdeckgo-demo/) |
+| **Documentation** | [](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) | [`README.md`](docs/README.md) |
+| **Demo** | [](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** | |  | [`README.md`](cloud/README.md) |
| **Gatsby plugin highlight code** | |  | [`Repo`](https://github.com/deckgo/gatsby-remark-highlight-code/) |
| **Infrastructure** | | | [`README.md`](infra/README.md) |
-| **Starter kit** | |  | [`Repo`](http://github.com/deckgo/deckdeckgo-starter/) |
+| **Starter kit** | |  | [`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) | [](https://www.npmjs.com/package/deckdeckgo-webpack-plugins) | [`README.md`](webpack/README.md) |
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 2842cc399..d7d8ceb23 100644
--- a/docs/CHANGELOG.md
+++ b/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
diff --git a/docs/docs/deck/app-deck-background/app-deck-background.md b/docs/docs/deck/app-deck-background/app-deck-background.md
index 378b65e6d..fb8530075 100644
--- a/docs/docs/deck/app-deck-background/app-deck-background.md
+++ b/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 π
-
+
```
@@ -68,7 +64,7 @@ An example with a more complex html and css element which is set as background f
Hello World π
-
+
```
@@ -91,4 +87,4 @@ div.circle {
}
```
-[DeckDeckGo]: https://deckdeckgo.com
\ No newline at end of file
+[deckdeckgo]: https://deckdeckgo.com
diff --git a/docs/docs/deck/app-deck-header-footer/app-deck-header-footer.md b/docs/docs/deck/app-deck-header-footer/app-deck-header-footer.md
new file mode 100644
index 000000000..ef2e3f2a9
--- /dev/null
+++ b/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.
+
+```
+
+
+
+
+```
+
+## 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.
+
+```
+
+
+
+
+
+```
+
+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:
+
+```
+
+
+
+
+```
+
+## 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
diff --git a/docs/docs/edit/app-edit-notes/app-edit-notes.md b/docs/docs/edit/app-edit-notes/app-edit-notes.md
new file mode 100644
index 000000000..658a3eeb2
--- /dev/null
+++ b/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).
+
+```
+
+
+
My presentation title
+
A note regarding this particular slide
+
+And another note on a new line about it too.
+
+
+```
+
+## 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`.
+
+```
+
+
+
My presentation title
+
A note displayed in the presentation within a modal accessible for anyone
+
+
+```
+
+## Markdown
+
+The [remote control](https://deckdeckgo.app) supports Markdown for your notes too.
+
+[deckdeckgo]: https://deckdeckgo.com
diff --git a/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md b/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md
index 326198592..b9c791c7a 100644
--- a/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md
+++ b/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 `
-
-
An element
-
A note regarding this particular slide
-
-And another note on a new line about it too.
-
-
-```
-
-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`.
-
-```
-
-
-
An element
-
A note displayed in the presentation within a modal accessible for anyone
-
-
-```
+The slots `title`, `top` and `bottom` are both optional. `top` and `bottom` would be displayed over the content.
## Attributes
diff --git a/docs/docs/slides/app-slide-author/app-slide-author.md b/docs/docs/slides/app-slide-author/app-slide-author.md
index 207b8dd97..d54bea044 100644
--- a/docs/docs/slides/app-slide-author/app-slide-author.md
+++ b/docs/docs/slides/app-slide-author/app-slide-author.md
@@ -12,7 +12,6 @@ The "Author" slide lets you introduce the author of the presentation.
- [Social component](#app-slide-author-social-component)
- [Usage](#app-slide-author-usage)
- [Slots](#app-slide-author-slots)
- - [Notes](#app-slide-author-notes)
- [Social components](#app-slide-author-social-components)
- [Attributes](#app-slide-author-attributes)
- [Example](#app-slide-author-example)
@@ -104,12 +103,6 @@ Notes:
- You could provide up to six `social-link` slots. Each of these could be your custom code or you could use the component `` to easily provide a link to an external URI.
-### Notes
-
-Optionally a slot `notes` could be used to add some notes regarding the particular slide. These will be automatically `displayed` in the [remote control](https://deckdeckgo.app).
-
-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`.
-
### Social components
The details of the component `` is described in the components [documentation](https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md).
diff --git a/docs/docs/slides/app-slide-big-img/app-slide-big-img.md b/docs/docs/slides/app-slide-big-img/app-slide-big-img.md
index a618c82ad..0fd27773a 100644
--- a/docs/docs/slides/app-slide-big-img/app-slide-big-img.md
+++ b/docs/docs/slides/app-slide-big-img/app-slide-big-img.md
@@ -11,7 +11,6 @@ If you would like to display a fullscreen image in your presentation and select
- [Framework integration](#app-slide-bigimg-framework-integration)
- [Usage](#app-slide-bigimg-usage)
- [Slots](#app-slide-bigimg-slots)
- - [Notes](#app-slide-bigimg-notes)
- [Attributes](#app-slide-bigimg-attributes)
- [Theming](#app-slide-bigimg-theming)
@@ -86,12 +85,6 @@ The "Big Image" slide's Web Component could be integrated using the tag ``, `` and `` which are described in the components [documentation](/components/charts).
diff --git a/docs/docs/slides/app-slide-code/app-slide-code.md b/docs/docs/slides/app-slide-code/app-slide-code.md
index 7d44677df..09272ca80 100644
--- a/docs/docs/slides/app-slide-code/app-slide-code.md
+++ b/docs/docs/slides/app-slide-code/app-slide-code.md
@@ -13,7 +13,6 @@ The "Code" slide is a the slide to use if you would like to showcase code during
- [Usage with file URI](#app-slide-code-usage-with-file-uri)
- [Usage with slotted element](#app-slide-code-usage-with-slotted-element)
- [Slots](#app-slide-code-slots)
- - [Notes](#app-slide-code-notes)
- [Code components](#app-slide-code-code-components)
- [Installation](#app-slide-code-installation)
- [Attributes](#app-slide-code-attributes)
@@ -109,12 +108,6 @@ The slots `title` and `code` are optional.
This template also exposes a slot `info` which would let you display an information over your code on mobile devices, useful to explain your reader that they should click to switch between vertical and horizontal scrolling. Find an example of the use of that slot on the [DeckDeckGo] website.
-### 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).
-
-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`.
-
## Code components
The slide "Code" relies on the code component `` which is described in the components [documentation](https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md).
diff --git a/docs/docs/slides/app-slide-content/app-slide-content.md b/docs/docs/slides/app-slide-content/app-slide-content.md
index bb65cdaa5..167c9f60e 100644
--- a/docs/docs/slides/app-slide-content/app-slide-content.md
+++ b/docs/docs/slides/app-slide-content/app-slide-content.md
@@ -13,7 +13,6 @@ This slide could be for example use for the every slides of your presentation wh
- [Framework integration](#app-slide-content-framework-integration)
- [Usage](#app-slide-content-usage)
- [Slots](#app-slide-content-slots)
- - [Notes](#app-slide-content-notes)
- [Attributes](#app-slide-content-attributes)
- [Example](#app-slide-content-example)
- [Theming](#app-slide-content-theming)
@@ -92,12 +91,6 @@ The "Content" slide's Web Component could be integrated using the tag `
My title
-
Hey
-
It's a cool gif
+
Hey
+
It's a cool gif
@@ -96,13 +95,7 @@ The "Gif" slide's Web Component could be integrated using the tag `` which is described in the components [documentation](https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md).
diff --git a/docs/docs/slides/app-slide-split/app-slide-split.md b/docs/docs/slides/app-slide-split/app-slide-split.md
index 124c53607..8b91d9974 100644
--- a/docs/docs/slides/app-slide-split/app-slide-split.md
+++ b/docs/docs/slides/app-slide-split/app-slide-split.md
@@ -13,7 +13,6 @@ The "Split" slide is a simple slide which display two panes on the page.
- [Framework integration](#app-slide-split-framework-integration)
- [Usage](#app-slide-split-usage)
- [Slots](#app-slide-split-slots)
- - [Notes](#app-slide-split-notes)
- [Attributes](#app-slide-split-attributes)
- [Theming](#app-slide-split-theming)
@@ -119,12 +118,6 @@ 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 be automatically `displayed` in the [remote control](https://deckdeckgo.app).
-
-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`.
-
## Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/docs/slides/app-slide-title/app-slide-title.md b/docs/docs/slides/app-slide-title/app-slide-title.md
index df9dfa081..bbb34c757 100644
--- a/docs/docs/slides/app-slide-title/app-slide-title.md
+++ b/docs/docs/slides/app-slide-title/app-slide-title.md
@@ -13,7 +13,6 @@ This slide could be for example use for the very first and last slide of your pr
- [Framework integration](#app-slide-title-framework-integration)
- [Usage](#app-slide-title-usage)
- [Slots](#app-slide-title-slots)
- - [Notes](#app-slide-title-notes)
- [Attributes](#app-slide-title-attributes)
- [Example](#app-slide-title-example)
- [Theming](#app-slide-title-theming)
@@ -92,32 +91,6 @@ The "Title" slide's Web Component could be integrated using the tag `
-
-
My presentation title
-
A note regarding this particular slide
-
-And another note on a new line about it too.
-
-
-```
-
-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`.
-
-```
-
-
-
My presentation title
-
A note displayed in the presentation within a modal accessible for anyone
- Beside slides and templates, a DeckDeckGo deck could also contains a customized element background{' '}
+ 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
@@ -42,10 +42,6 @@ export class AppDeckBackground {
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.
diff --git a/docs/src/app/pages/docs/deck/app-deck-header-footer/app-deck-header-footer.tsx b/docs/src/app/pages/docs/deck/app-deck-header-footer/app-deck-header-footer.tsx
new file mode 100644
index 000000000..f7464030e
--- /dev/null
+++ b/docs/src/app/pages/docs/deck/app-deck-header-footer/app-deck-header-footer.tsx
@@ -0,0 +1,200 @@
+import {Component, Element, h} from '@stencil/core';
+
+import {DeckdeckgoDocsUtils} from '../../../../utils/deckdeckgo-docs-utils';
+
+@Component({
+ tag: 'app-deck-header-footer',
+})
+export class AppDeckHeaderFooter {
+ @Element() el: HTMLElement;
+
+ async componentDidLoad() {
+ await DeckdeckgoDocsUtils.reloadCode(this.el);
+ }
+
+ render() {
+ return [
+ ,
+
+
+
+
Header & Footer
+
+ Header and footer can be added to a DeckDeckGo deck or to any slides using their dedicated slots{' '}
+ header and footer.
+
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.
+
+ 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
+
+ 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.
+
+
+
+ <deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div
+ slot="notes">A note regarding this particular slide</div>{'\n'}
+ {'\n'}And another note on a new line about it too.{'\n'} </deckgo-slide-title>{'\n'}</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>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div
+ slot="notes" show>A note displayed in the presentation within a modal accessible for anyone</div>{'\n'}{' '}
+ </deckgo-slide-title>{'\n'}</deckgo-deck>
+
+
+
Markdown
+
+ The remote control supports Markdown for your notes too.
+
@@ -143,32 +140,9 @@ export class AppSlideAspectRatio {
Slots
- The slots title, header and footer are both optional. header and footer would be
+ The slots title, top and bottom are both optional. top and bottom 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.
-
-
-
- <deckgo-deck>{'\n'} <deckgo-slide-aspect-ratio>{'\n'} <h1>An element</h1>{'\n'} <div slot="notes">A
- note regarding this particular slide</div>{'\n'}
- {'\n'}And another note on a new line about it too.{'\n'} </deckgo-slide-aspect-ratio>{'\n'}</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>{'\n'} <deckgo-slide-aspect-ratio>{'\n'} <h1>An element</h1>{'\n'} <div slot="notes"
- show>A note displayed in the presentation within a modal accessible for anyone</div>{'\n'} </deckgo-slide-aspect-ratio>
- {'\n'}</deckgo-deck>
-
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
index 7839e510d..211ce0091 100644
--- a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
@@ -56,9 +56,6 @@ export class AppSlideAuthor {
@@ -182,15 +179,6 @@ export class AppSlideAuthor {
-
Notes
-
- Optionally a slot notes could be used to add some notes regarding the particular slide. These will be automatically{' '}
- displayed in the remote control.
-
-
- 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.
-
Social components
The details of the component <deckgo-social/> is described in the components{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx b/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx
index 72f360e00..c591c2f19 100644
--- a/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx
@@ -56,9 +56,6 @@ export class AppSlideBigImg {
@@ -142,15 +139,6 @@ export class AppSlideBigImg {
The slots title is optional (it is not displayed but could be use for the navigation). Otherwise no particular slots are currently
available in order to display additional information on this template.
-
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.
-
-
- 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.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx b/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx
index 8c6fbbcfc..94c4feb45 100644
--- a/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx
@@ -56,9 +56,6 @@ export class AppSlideChart {
- Optionally a slot notes could be use to add some notes regarding the particular slide. These will be automatically{' '}
- displayed in the remote control.
-
-
- 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.
-
Chart components
The slide "Chart" relies on the charts components <deckgo-pie-chart/>, <deckgo-line-chart/> and{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx b/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx
index c7b5b5857..9939ee90e 100644
--- a/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx
@@ -59,9 +59,6 @@ export class AppSlideCode {
@@ -171,15 +168,6 @@ export class AppSlideCode {
your reader that they should click to switch between vertical and horizontal scrolling. Find an example of the use of that slot on the{' '}
DeckDeckGo website.
-
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.
-
-
- 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.
-
Code components
The slide "Code" relies on the code component <deckgo-highlight-code/> which is described in the components{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx b/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx
index 0be09444b..6bc03cb1f 100644
--- a/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx
@@ -54,9 +54,6 @@ export class AppConcept {
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 be automatically{' '}
- displayed in the remote control.
-
-
- 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.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx b/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx
index 9fbf99d8d..8ecdf7478 100644
--- a/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx
@@ -57,9 +57,6 @@ export class AppSlideCountdown {
@@ -151,15 +148,6 @@ export class AppSlideCountdown {
The slots title as well as days, hours, minutes and seconds are optional.
-
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.
-
-
- 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.
-
Attributes
The time until your presentation should be provided to render the countdown. This value could be either passed through attributes days,{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx b/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx
index 95a3ecc5e..bc1128ba5 100644
--- a/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx
@@ -61,9 +61,6 @@ export class AppSlideGif {
- The slots title, header and footer are both optional. header and footer would be
+ The slots title, top and bottom are both optional. top and bottom would be
displayed over the gif.
-
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.
-
-
- 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.
-
Gif component
The slide "Gif" relies on the component <deckgo-gif/> which is described in the components{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx b/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
index 851b02359..3655a0e86 100644
--- a/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
@@ -59,9 +59,6 @@ export class AppSlidePlayground {
@@ -160,15 +157,6 @@ export class AppSlidePlayground {
Both slots title and content are optional.
-
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.
-
-
- 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.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx b/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx
index 011ace819..12a3f974d 100644
--- a/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx
@@ -57,9 +57,6 @@ export class AppSlidePoll {
@@ -191,15 +188,6 @@ export class AppSlidePoll {
Note also that if you provide a string {0} in the content of your slot how-to, the information will be automatically
converted to the real key of your poll (the key your audience could use to reach it and vote).
-
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.
-
-
- If you are using the DeckDeckGo starter kit and wish to make your notes accessible to anyone, you would need to
- mark them with an attribute show.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx b/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx
index 2086a70b8..36530c0b5 100644
--- a/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx
@@ -60,9 +60,6 @@ export class AppSlideQRCode {
@@ -157,15 +154,6 @@ export class AppSlideQRCode {
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 be automatically{' '}
- displayed in the remote control.
-
-
- 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.
-
Code components
The slide "QR Code" relies on the code component <deckgo-qrcode/> which is described in the components{' '}
diff --git a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx
index 08c1fef0d..e30a1ee68 100644
--- a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx
@@ -61,9 +61,6 @@ export class AppSlideContent {
@@ -165,15 +162,6 @@ export class AppSlideContent {
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 be automatically{' '}
- displayed in the remote control.
-
-
- 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.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx b/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx
index 9df19090d..20e0148c7 100644
--- a/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx
@@ -54,9 +54,6 @@ export class AppSlideTitle {
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 be automatically{' '}
- displayed in the remote control.
-
-
-
- <deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div
- slot="notes">A note regarding this particular slide</div>{'\n'}
- {'\n'}And another note on a new line about it too.{'\n'} </deckgo-slide-title>{'\n'}</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>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div
- slot="notes" show>A note displayed in the presentation within a modal accessible for anyone</div>{'\n'}{' '}
- </deckgo-slide-title>{'\n'}</deckgo-deck>
-
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx b/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx
index 8169f739d..36cdefca6 100644
--- a/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx
@@ -68,9 +68,6 @@ export class AppSlideVideo {
The slot title and content are optional. The slot content is displayed before the video.
-
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.
-
-
- 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.
-
Attributes
This component offers the following options which could be set using attributes:
diff --git a/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx b/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx
index 12dfb12dc..b702513ec 100644
--- a/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx
@@ -58,9 +58,6 @@ export class AppSlideYoutube {
@@ -163,15 +160,6 @@ export class AppSlideYoutube {
The slot title and content are optional. The slot content is displayed before the video.
-
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.
-
-
- 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.
-
+
+ Oh, hi! Users' settings are the options for the header and footer. Therefore, if you wish to give a try to this feature, please{' '}
+ this.onNavigateSignIn()}>sign in.
+
+