merge: stock photos, images and more cool stuffs

Author: peterpeterparker

docs/docs/components/app-components-inline-editor/app-components-inline-editor.md

@@ -4,15 +4,16 @@ The "WYSIWYG inline editor" component is an extra component which will be use in
 
 ## Table of contents
 
-- [Showcase](#app-components-qrcode-showcase)
-- [Getting started](#app-components-qrcode-getting-started)
+- [Showcase](#app-components-inline-editor-showcase)
+- [Getting started](#app-components-inline-editor-getting-started)
 	- [Using from a CDN](#app-components-from-a-cdn)
 	- [Install from NPM](#app-components-from-npm)
-	- [Framework integration](#app-components-qrcode-framework-integration)
-- [Usage](#app-components-qrcode-usage)
-	- [Properties](#app-components-qrcode-properties)
-	- [Styling](#app-components-qrcode-styling)
-	- [Examples](#app-components-qrcode-examples)
+	- [Framework integration](#app-components-inline-editor-framework-integration)
+- [Usage](#app-components-inline-editor-usage)
+	- [Properties](#app-components-inline-editor-properties)
+	- [Styling](#app-components-inline-editor-styling)
+	- [Events](#app-components-inline-editor-events)
+	- [Examples](#app-components-inline-editor-examples)
 
 ## Showcase
 
@@ -22,9 +23,12 @@ The "WYSIWYG inline editor" component is an extra component which will be use in
   <h2 style={{color: '#3880ff'}} contenteditable slot="title">The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
 
   <p style={{color: '#3880ff'}} contenteditable slot="content">Edit anywhere, display everywhere (editable paragraph)</p>
+  
+  <p style={{width: '200px'}} contenteditable><img style={{'max-width': '100%'}} src="https://pixabay.com/get/ea34b50f2cfd033ed1584d05fb1d4794e070e2d71eb80c4090f5c679a2edb4b0d8_1280.jpg"/></p>
+ 
 </div>
 
-<deckgo-inline-editor sticky-desktop="true" sticky-mobile="true"></deckgo-inline-editor>
+<deckgo-inline-editor sticky-desktop="true" sticky-mobile="true" containers="h1,h2,h3,h4,h5,h6,p"></deckgo-inline-editor>
 
 ## Getting started
 
@@ -108,6 +112,14 @@ Furthermore, the following variables are also available but only have an effects
 
 ** like above but for mobile
 
+### Events
+
+The event `input` will be automatically triggered when the content will be modified using the `<deckgo-inline-editor/>`. However, when manipulating image, this event won't be triggered. Therefore a custom event will be instead triggered:
+
+| Event          | Description | Type                       |
+| -------------- | ----------- | -------------------------- |
+| `imgDidChange` | Triggered when an image is manipulated. Note: the event won't provide directly the image but rather its container element. | `CustomEvent<HTMLElement>` |
+
 ### Examples
 
 ```

docs/docs/components/app-components-lazy-img/app-components-lazy-img.md

@@ -0,0 +1,62 @@
+# Lazy Image
+
+The "Lazy Image" component is a dead simple component to lazy load images.
+
+It leverages the IntersectionObserver API to lazy load images and also allows you to trigger "manually" their loading.
+
+## Table of contents
+
+- [Usage](#app-components-lazy-img-usage)
+  - [Slots](#app-components-lazy-img-slots)
+  - [Attributes](#app-components-lazy-img-attributes)
+  - [Theming](#app-components-lazy-img-theming)
+  - [Methods](#app-components-lazy-img-methods)
+
+## Usage
+
+The "Lazy Image" Web Component could be integrated using the tag `<deckgo-lazy-img/>`.
+
+```
+<deckgo-lazy-img img-src="/assets/twitter.svg">
+</deckgo-lazy-img>
+```
+
+### Slots
+
+No slots are available for this component.
+
+### Attributes
+
+This component offers the following options which could be set using attributes:
+
+| Attribute                      | Type   | Default   | Description   |
+| -------------------------- |-----------------|-----------------|-----------------|
+| img-src | string |  | The image source (= URI) to lazy load |
+| img-alt | string |  | The image alternate text |
+| observer-root-margin | string | 100px 0px | A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. [More info.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) |
+| observer-threshold | number or number[] |  | Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. [More info.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) |
+
+### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |-----------------|-----------------|
+| --deckgo-lazy-img-max-width | 100% | Image max width |
+| --deckgo-lazy-img-min-width |  | Image min width |
+| --deckgo-lazy-img-pointer-events | none | Image pointer events |
+| --deckgo-lazy-img-height | | Image height |
+| --deckgo-lazy-img-width | | Image width |
+| --deckgo-lazy-img-float | | Image float |
+| --deckgo-lazy-img-padding | | Image padding |
+
+### Methods
+
+This component also expost an async method `lazyLoad()` in case you would like to trigger "manually" the loading of the image.
+
+```
+const element = document.querySelector('deckgo-lazy-img');
+await element.lazyLoad();
+```
+
+[DeckDeckGo]: https://deckdeckgo.com 

docs/docs/components/app-components-social/app-components-social.md

@@ -4,11 +4,11 @@ The "Social" component allows you to easily add a social link to your presentati
 
 ## Table of contents
 
-- [Showcase](#showcase)
-- [Usage](#usage)
-  - [Slots](#slots)
-  - [Attributes](#attributes)
-  - [Examples](#examples)
+- [Showcase](#app-components-social-showcase)
+- [Usage](#app-components-social-usage)
+  - [Slots](#app-components-social-slots)
+  - [Attributes](#app-components-social-attributes)
+  - [Examples](#app-components-social-examples)
 
 ## Showcase
 
@@ -22,7 +22,7 @@ The "Social" component allows you to easily add a social link to your presentati
 
 ## Usage
 
-The "Social" slide's Web Component could be integrated using the tag `<deckgo-social/>`.
+The "Social" Web Component could be integrated using the tag `<deckgo-social/>`.
 
 ```
 <deckgo-social twitter="daviddalbusco">

docs/docs/deck/app-deck-extra-features/app-deck-extra-features.md

@@ -8,6 +8,7 @@ The [DeckDeckGo] deck exposes a couple of extra features which could be added to
 - [Print the presentation](#app-deck-extra-features-print-the-presentation)
 - [Mobile](#app-deck-extra-features-mobile)
 - [initSlideSize](#app-deck-extra-features-init-slide-size)
+- [loadBackground](#app-deck-extra-features-load-background)
 
 ## Toggle on/off the full screen mode
 
@@ -37,4 +38,12 @@ In case you would like to recalculate the slides' size (width and height)
 await deck.initSlideSize();
 ```
 
+## Load background
+
+If you would dynamically change the deck background element you could forward that changes to also slides using the following method:  
+
+```
+await deck.loadBackground();
+```
+
 [DeckDeckGo]: https://deckdeckgo.com

docs/docs/edit/app-edit-lazy-loading/app-edit-lazy-loading.md

@@ -2,7 +2,22 @@
 
 [DeckDeckGo] is build for performance and try to lazy load as much as possible the components of your presentation, have a look to the Lighthouse score of the [DeckDeckGo] website for reference.
 
-Therefore, in order to lazy load the images of your presentation, please provide their url using the attribute `data-src` instead of `src`. [DeckDeckGo] will then take care of loading them only when needed.
+In order to lazy load the images of your presentation, your could either use our dead simple component or tweak your images's attributes like following.
+
+[DeckDeckGo] handles the lazy loading of images provided in both forms. 
+ 
+## Lazy Image component
+
+Here's an example of usage of our component:
+
+```
+<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png">
+</deckgo-lazy-img>
+```
+
+## Tweak Image Tag
+
+Instead of providing the url of your images as `src`, which would trigger an instant loading of their content, in case you would not like to use our above component, please provide their url using the attribute `data-src` instead of `src`.
 
 ```
 <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"/>

docs/docs/slides/app-slide-author/app-slide-author.md

@@ -71,6 +71,8 @@ This component offers the following options which could be set using attributes:
 | -------------------------- |-----------------|-----------------|-----------------|
 | img-src | string |  | An image URI, for example a picture of the author. Note: this image will be displayed as a circle. |
 | img-alt | string |  | An optional accessibility alt for the image. |
+| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` |
+| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` | 
 
 ### Example
 

docs/docs/slides/app-slide-chart/app-slide-chart.md

@@ -68,6 +68,8 @@ This component offers the following options which could be set using attributes:
 | Attribute                      | Type   | Default   | Description   |
 | -------------------------- |-----------------|-----------------|-----------------|
 | type | string | pie | The type of the chart, `pie`, `line` or `bar` |
+| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` |
+| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` |
 
 Furthermore, this slide component offers the same attributes as the [DeckDeckGo] charts Web Component, see its [documentation](https://github.com/deckgo/deckdeckgo-charts) for the details.
 

docs/docs/slides/app-slide-code/app-slide-code.md

@@ -79,7 +79,12 @@ The [DeckDeckGo] - Hightlight code component is provided in separate extra libra
 
 ## Attributes
 
-At least `src` or the `slot` code should be provided in order to render code in this template. It offers the same attributes as the [DeckDeckGo] code Web Component, see its [documentation](https://github.com/deckgo/deckdeckgo-highlight-code) for the details.
+At least `src` or the `slot` code should be provided in order to render code in this template. It offers the same attributes as the [DeckDeckGo] code Web Component, see its [documentation](https://github.com/deckgo/deckdeckgo-highlight-code) for the details and the following other attributes:
+
+| Attribute                      | Type   | Default   | Description   |
+| -------------------------- |-----------------|-----------------|-----------------|
+| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` |
+| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` |
 
 ### Example with file URI
 

docs/docs/slides/app-slide-content/app-slide-content.md

@@ -60,6 +60,8 @@ This component offers the following options which could be set using attributes:
 | -------------------------- |-----------------|-----------------|-----------------|
 | reveal | boolean | false | Hide the slotted elements `li`, `p` an `img` and display them when navigating using `slideNext()` or `slidePrev()` (see [documention](/doc/features/navigation.md)) |
 | reveal-show-first | boolean | false | Show the first elements which would be hidden if `reveal` is set to `true` |
+| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` |
+| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` |
 
 ### Example
 

docs/docs/slides/app-slide-gif/app-slide-gif.md

@@ -64,6 +64,8 @@ This component offers the following options which could be set using attributes:
 | src | string |  | The source url, the src, of the Gif. Could be an embeddable external url or a local one. |
 | alt | string |  | And alt information could be provided for accessibility reason. |
 | fullscreen | number | true | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. |
+| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` |
+| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` |
 
 ## Theming