+
+ Twitter
+
+
+
;
+ } else {
+ return undefined;
+ }
+ }
+}
diff --git a/docs/src/app/components/app-logo/app-logo.scss b/docs/src/app/components/app-logo/app-logo.scss
new file mode 100644
index 000000000..ea96b3d53
--- /dev/null
+++ b/docs/src/app/components/app-logo/app-logo.scss
@@ -0,0 +1,15 @@
+div {
+ color: transparent;
+
+ vertical-align: var(--deckgo-logo-vertical-align);
+ margin-right: var(--deckgo-logo-margin-end);
+
+ background-color: transparent;
+ background-image: var(--deckgo-logo-url, url('/assets/img/deckdeckgo-logo.svg'));
+ background-repeat: no-repeat;
+
+ width: var(--deckgo-logo-size);
+ height: var(--deckgo-logo-size);
+
+ display: inline-block;
+}
diff --git a/docs/src/app/components/app-logo/app-logo.tsx b/docs/src/app/components/app-logo/app-logo.tsx
new file mode 100644
index 000000000..4835a7803
--- /dev/null
+++ b/docs/src/app/components/app-logo/app-logo.tsx
@@ -0,0 +1,13 @@
+import {Component} from '@stencil/core';
+
+@Component({
+ tag: 'app-logo',
+ styleUrl: 'app-logo.scss',
+ shadow: true
+})
+export class AppLogo {
+
+ render() {
+ return ;
+ }
+}
diff --git a/docs/src/app/components/app-menu-footer/app-menu-footer.scss b/docs/src/app/components/app-menu-footer/app-menu-footer.scss
new file mode 100644
index 000000000..5290e99c5
--- /dev/null
+++ b/docs/src/app/components/app-menu-footer/app-menu-footer.scss
@@ -0,0 +1,18 @@
+footer {
+ --deckgo-logo-vertical-align: bottom;
+ --deckgo-logo-margin-end: 2px;
+ --deckgo-logo-size: 12px;
+
+ padding: 0 15px;
+
+ a {
+ text-decoration: none;
+ }
+
+ a, p {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: var(--deckgo-menu-footer-color, inherit);
+ font-size: var(--font-size-very-small);
+ }
+}
diff --git a/docs/src/app/components/app-menu-footer/app-menu-footer.tsx b/docs/src/app/components/app-menu-footer/app-menu-footer.tsx
new file mode 100644
index 000000000..8250b0368
--- /dev/null
+++ b/docs/src/app/components/app-menu-footer/app-menu-footer.tsx
@@ -0,0 +1,17 @@
+import {Component} from '@stencil/core';
+
+@Component({
+ tag: 'app-menu-footer',
+ styleUrl: 'app-menu-footer.scss',
+ shadow: true
+})
+export class AppMenuFooter {
+
+ render() {
+ return
+ }
+}
diff --git a/docs/src/app/components/app-navigation/app-navigation.scss b/docs/src/app/components/app-navigation/app-navigation.scss
new file mode 100644
index 000000000..d8193a26d
--- /dev/null
+++ b/docs/src/app/components/app-navigation/app-navigation.scss
@@ -0,0 +1,34 @@
+app-navigation {
+ a {
+ color: inherit;
+ }
+
+ div[slot="end"] {
+ z-index: 2;
+
+ ion-button {
+ --color: black;
+ --color-activated: black;
+ --background-activated: transparent;
+ --background: transparent;
+ --box-shadow: none;
+ }
+ }
+
+ @media screen and (min-width: 540px) {
+ div[slot="end"] {
+ ion-button {
+ display: none;
+ }
+ }
+ }
+
+ @media screen and (max-width: 540px) {
+ div[slot="end"] {
+ div.links {
+ display: none;
+ }
+ }
+ }
+
+}
diff --git a/docs/src/app/components/app-navigation/app-navigation.tsx b/docs/src/app/components/app-navigation/app-navigation.tsx
new file mode 100644
index 000000000..8865fa1da
--- /dev/null
+++ b/docs/src/app/components/app-navigation/app-navigation.tsx
@@ -0,0 +1,78 @@
+import {Component, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'app-navigation',
+ styleUrl: 'app-navigation.scss',
+ shadow: false
+})
+export class AppNavigation {
+
+ @Prop({connect: 'ion-modal-controller'}) modalController: HTMLIonModalControllerElement;
+
+ @Prop() logo: boolean = false;
+ @Prop() menuToggle: boolean = true;
+ @Prop() navigation: boolean = true;
+
+ render() {
+ return (The Progressive Web App alternative for simple presentations
++
Create a PWA presentation using Web Components, Ionic components and HTML or Markdown 🚀 Cherry on the cake 🍒🎂 DeckDeckGo comes with a Progressive Web App to remote control your slides 📱
+ + +-
+
Progressive Web App
+ Predefined templates
+ Web Components
+ Lazy loaded content
+ HTML or Markdown
+ Free and open source
+
+
+
+
+ Get started now 🔥
+npm init deckdeckgo
+ + Dive deeper with the Getting Started chapter +
+-
+
-
+
+ Easy editing
+HTML or Markdown, templates based, extra components and features, all you need to easily create, showcase and ship your presentation.
+
+ -
+
+ Slick and smooth
+Build for performance and to be SEO friendly, have a look to the Lighthouse score of the DeckDeckGo demo.
+
+ -
+
+ Modern
+Presentations are bundled and shipped as Progressive Web Apps and based on Web Components.
+
+ -
+
+ Interact
+Control you slides or track your talk's time using the DeckDeckGo remote control PWA.
+
+
Charts
+The "Charts" component is an extra component which let you draw charts easily.
+To create and draw the charts, this project is using D3js.
+Table of contents
+-
+
- Showcase + +
- Getting started + +
- Usage
-
+
- Pie usage
-
+
- CSV + +
- Properties +
- Styling +
- Methods +
- Examples +
+ - Line usage
-
+
- CSV + +
- Properties +
- Styling +
- Methods +
- Examples +
+ - Bar usage
-
+
- CSV + +
- Properties +
- Styling +
- Methods +
- Examples +
+
+ - Pie usage
Showcase
+The following examples are the one provided in the src/index.html of this component. If you would like to run them locally, proceed as follow:
+git clone https://github.com/deckgo/deckdeckgo-charts{'\n'}cd deckdeckgo-charts{'\n'}npm install{'\n'}npm run start
+ Pie
+Donut
+Compare two graphs
+Line and area
+Compare two lines and smoothing effect
+
+
+
+Compare two lines and display a grid
+
+
+
+
+Bar
+
+
+
+Compare multiple bars
+
+
+
+Getting started
+To create easily your PWA presentation and to enjoy all the options, I suggest you to create your slides using the CLI as described in the Getting started chapter.
+Doing so you will use the DeckDeckGo starter kit which already includes this Web Component.
+However, if you are looking to use this Web Component as a standalone component, to add a charts to your web applications, it could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.
+Using DeckDeckGo charts from a CDN
+It's recommended to use unpkg to use the DeckDeckGo charts from a CDN. To do so, add the following include script in the main HTML file of your project:
+<script src="https://unpkg.com/deckdeckgo-charts@latest/dist/deckdeckgo-charts.js"></script>
+ Install DeckDeckGo charts from NPM
+Install DeckDeckGo charts in your project from npm using the following command:
+npm install deckdeckgo-charts
+ Framework integration
+The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
+Usage
+The main idea behind the DeckDeckGo charts is to be able to drop a csv file, provide it to the component and let it do the job respectively draw the chart.
+Pie usage
+The <deckgo-pie-chart/> Web Component draw a Pie chart.
CSV
+The csv file should contains one or two columns. The values could be provided as number or percent.
Single column
+If a single column is used, it should contains the values.
+60{'\n'}20{'\n'}20
+ Two columns
+If two columns are provided, the first column should contains the description of the value.
+Wind;53.13%{'\n'}Solar:1.96%{'\n'}Geothermal;7.52%{'\n'}Landfill Gas;15.67%{'\n'}Biomass;14.79%{'\n'}Qualified Hydropower;6.93%
+ Properties
+The <deckgo-pie-chart/> expose the following properties:
| Property | +Attribute | +Mandatory | +Description | +Type | +Default | +
|---|---|---|---|---|---|
src |
+src |
+X | +The path to the source file of the data | +string |
++ |
width |
+width |
+X | +The width of the chart | +number |
++ |
height |
+height |
+X | +The height of the chart | +number |
++ |
innerRadius |
+inner-radius |
++ | To plot a donut instead of a pie, provide an inner radius |
+number |
+0 |
+
range |
+range |
++ | A list of custom colors which should be to draw the chart | +string[] |
++ |
separator |
+separator |
++ | The line separator use in your csv file | +string |
+';' |
+
Styling
+The <deckgo-pie-chart/> could be styled using the following CSS4 variables:
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-chart-text-color | ++ | The color of the labels | +
| --deckgo-chart-text-display | ++ | The display property of the labels | +
| --deckgo-chart-path-stroke | ++ | The stroke property of the pie, in case you would like to display a line between the slices | +
Methods
+The <deckgo-pie-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:
draw() => Promise<void>
+ Examples
+You could find other examples of pie charts in the src/index.html of the project.
+<deckgo-pie-chart width={500} height={400} src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv"></deckgo-pie-chart>
+ Line usage
+The <deckgo-line-chart/> Web Component draw a line chart.
CSV
+The csv file should contains two or three columns.
+The first column contains the values for the x axis. These should be provided as date or number.
The second and third columns contains the values for the y axis. These should be provided as number.
Two columns
+With dates as x axis:
01.01.2018;5{'\n'}01.03.2018;10{'\n'}01.06.2018;8
+ With numbers as x axis:
1;5{'\n'}2;10{'\n'}3;8
+ Three columns
+The third columns is optional, it could be use in case you would like to plot two charts on the same graph.
+With dates as x axis:
01.01.2018;5;4{'\n'}01.03.2018;10;3{'\n'}01.06.2018;8;19
+ With numbers as x axis:
1;5;7{'\n'}2;10;13{'\n'}3;8;5
+ Properties
+The <deckgo-line-chart/> expose the following properties:
| Property | +Attribute | +Mandatory | +Description | +Type | +Default | +
|---|---|---|---|---|---|
src |
+src |
+X | +The path to the source file of the data | +string |
++ |
width |
+width |
+X | +The width of the chart | +number |
++ |
height |
+height |
+X | +The height of the chart | +number |
++ |
marginBottom |
+margin-bottom |
++ | The margin bottom of the chart in pixel | +number |
+32 |
+
marginLeft |
+margin-left |
++ | The margin left of the chart in pixel | +number |
+32 |
+
marginRight |
+margin-right |
++ | The margin right of the chart in pixel | +number |
+32 |
+
marginTop |
+margin-top |
++ | The margin top of the chart in pixel | +number |
+32 |
+
datePattern |
+date-pattern |
++ | In case the x are made of dates, the pattern to be use to parse the dates. Have a look to date-fns for a list of the supported format. |
+string |
+'yyyy-MM-dd' |
+
yAxisDomain |
+y-axis-domain |
++ | Should the y axis plot the values from 0 to max or be extended (use extent) to cover all values |
+string |
+max |
+
smooth |
+smooth |
++ | Draw a smooth line or a line with edges | +boolean |
+true |
+
area |
+area |
++ | Draw the area or just a line | +boolean |
+true |
+
ticks |
+ticks |
++ | Specify the ticks of the axis | +number |
+`` | +
grid |
+grid |
++ | Draw a grid behin the graph | +boolean |
+false |
+
separator |
+separator |
++ | The line separator use in your csv file | +string |
+';' |
+
Styling
+The <deckgo-line-chart/> could be styled using the following CSS4 variables:
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-chart-axis-color | +black | +The color of the axis | +
| --deckgo-chart-text-color | ++ | The color of the labels | +
| --deckgo-chart-text-display | ++ | The display property of the labels | +
| --deckgo-chart-fill-color | +#3880ff | +The fill color of the area of the main chart | +
| --deckgo-chart-fill-opacity | ++ | The opacity of the area of the main chart | +
| --deckgo-chart-stroke | ++ | The stroke of the area of the main chart | +
| --deckgo-chart-stroke-width | ++ | The stroke width of the area of the main chart | +
| --deckgo-chart-compare-fill-color | +#0cd1e8 | +The fill color of the area of the chart to compare | +
| --deckgo-chart-compare-fill-opacity | +0.7 | +The opacity of the area of the chart to compare | +
| --deckgo-chart-compare-stroke | ++ | The stroke of the area of the chart to compare | +
| --deckgo-chart-compare-stroke-width | ++ | The stroke width of the area of the chart to compare | +
| --deckgo-chart-grid-stroke | +#989aa2 | +The stroke of the grid | +
| --deckgo-chart-grid-stroke-opacity | +0.7 | +The stroke opacity of the grid | +
Methods
+The <deckgo-line-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:
draw() => Promise<void>
+ Examples
+You could find other examples of line charts in the src/index.html of the project.
+<deckgo-line-chart width={500} height={400} date-pattern="dd.MM.yyyy" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-line-chart.csv"></deckgo-line-chart>
+ Bar usage
+The <deckgo-bar-chart/> Web Component draw a Bar chart.
CSV
+The csv file should contains at lest two columns. The values could be provided as number or percent.
Multiple columns
+The first column should contains the labels or groups used for the X axis. The other columns are the values use for the Y axis.
+Group A;5;0;10{'\n'}Group B;10;6;12{'\n'}Group C;8;14;8{'\n'}Group D;14;8;16{'\n'}Group E;18;4;5
+ Properties
+The <deckgo-bar-chart/> expose the following properties:
| Property | +Attribute | +Mandatory | +Description | +Type | +Default | +
|---|---|---|---|---|---|
src |
+src |
+X | +The path to the source file of the data | +string |
++ |
width |
+width |
+X | +The width of the chart | +number |
++ |
height |
+height |
+X | +The height of the chart | +number |
++ |
marginBottom |
+margin-bottom |
++ | The margin bottom of the chart in pixel | +number |
+32 |
+
marginLeft |
+margin-left |
++ | The margin left of the chart in pixel | +number |
+32 |
+
marginRight |
+margin-right |
++ | The margin right of the chart in pixel | +number |
+32 |
+
marginTop |
+margin-top |
++ | The margin top of the chart in pixel | +number |
+32 |
+
separator |
+separator |
++ | The line separator use in your csv file | +string |
+';' |
+
Styling
+The <deckgo-bar-chart/> could be styled using the following CSS4 variables:
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-chart-axis-color | +black | +The color of the axis | +
Furthermore, as the Bar chart could draw dynamically multiple bars, it will generate dynamically the following CSS4 variable for each series of data where X is an index between 1 and the number of bars.
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-chart-text-color | ++ | The color of the labels | +
| --deckgo-chart-text-display | ++ | The display property of the labels | +
| --deckgo-chart-fill-color-barX | ++ | The fill color of the bar chart identified with index X |
+
| --deckgo-chart-fill-opacity-baxX | ++ | The opacity of the bar chart identified with index X |
+
| --deckgo-chart-stroke-barX | ++ | The stroke of the bar chart identified with index X |
+
| --deckgo-chart-stroke-width-barX | ++ | The stroke width of the chart identified with index X |
+
Methods
+The <deckgo-bar-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:
draw() => Promise<void>
+ Examples
+You could find other examples of bar charts in the src/index.html of the project.
+<deckgo-bar-chart width={500} {'\n'} height={400}{'\n'} src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv"{'\n'} style="--deckgo-chart-fill-color-bar1: #3880ff;">{'\n'}</deckgo-bar-chart>
+ Gif
+The "Gif" component allows you to easily add a Gif, like those provided by Giphy, in almost any slide of your presentation.
+Table of contents
+ +Showcase
+
+
+
+
+
+Hey
+It's a cool gif
+Usage
+The "Gif" slide's Web Component could be integrated using the tag <deckgo-gif/>.
<deckgo-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true">{'\n'} <h1 slot="header">Hey</h1>{'\n'} <h2 slot="footer">It's a cool gif</h2>{'\n'}</deckgo-slide-gif>
+ Slots
+The slots header and footer are both optional. header and footer would be displayed over the gif.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| 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 | +false | +If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. | +
Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --width | ++ | The width of the gif | +
| --height | ++ | The height of the gif | +
| --background | ++ | The background of the header and footer over the gif |
+
| --color | ++ | The color of the header and footer over the gif |
+
| --padding | ++ | The padding of the header and footer over the gif |
+
| --zIndex | +2 | +The z-index of the slide | +
Note
+Of course, as other images added to a presentation build with DeckDeckGo, gifs are lazy loaded too.
+Highlight Code
+The "Highlight Code" component is an extra component which let you highlight code easily.
+To highlight your code, this component is using Prism.js from James DiGioia.
+Table of contents
+-
+
- Showcase +
- Getting started + +
- Usage + +
Showcase
+public static void main(String args[]) { {'\n'} System.out.println("Hello World");{'\n'}}
+ Getting started
+To create easily your PWA presentation and to enjoy all the options, I suggest you to create your slides using the CLI as described in the Getting started chapter.
+Doing so you will use the DeckDeckGo starter kit which already includes this Web Component.
+However, if you are looking to use this Web Component as a standalone component, to add a code highlighter feature to your web applications, it could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.
+Using DeckDeckGo Highlight Code from a CDN
+It's recommended to use unpkg to use the DeckDeckGo Code from a CDN. To do so, add the following include script in the main HTML file of your project:
+<script src="https://unpkg.com/deckdeckgo-highlight-code@latest/dist/deckdeckgo-highlight-code.js"></script>
+ Install DeckDeckGo Highlight Code from NPM
+Install DeckDeckGo - Highlight Code in your project from npm using the following command:
+npm install deckdeckgo-highlight-code
+ Framework integration
+The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
+Usage
+The <deckgo-highlight-code/> Web Component will highlight your code using Prism.js. You could inject a <code/> tag using slot or provide an URI to the file containing your code.
Properties
+The <deckgo-highlight-code/> expose the following properties:
| Property | +Attribute | +Description | +Type | +Default | +
|---|---|---|---|---|
src |
+src |
+The web url to the source code you would like to showcase | +string |
++ |
anchor |
+anchor |
+The anchor identifier which will be use to find the next anchor to scroll too using findNextAnchor() |
+string |
+'// DeckDeckGo' |
+
anchorZoom |
+anchor-zoom |
+The anchor identifier which will be use to find the next anchor to zoom inside your code using findNextAnchor() |
+string |
+'// DeckDeckGoZoom' |
+
hideAnchor |
+hide-anchor |
+Set this attribute to false in case you would like to actually display the anchor value too |
+boolean |
+true |
+
language |
+language |
+Define the language to be used for the syntax highlighting. The list of supported languages is defined by Prism.js | +string |
+'javascript' |
+
highlightLines |
+highlight-lines |
+If you wish to highlight some lines of your code. The lines number should be provided as number separated with coma and group separated with space. For example: "3,5 8,9 13,13 14,17" | +string |
++ |
Styling
+The <deckgo-highlight-code/> could be styled using the following CSS4 variables:
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-highlight-code-color | +inherit | +The color of the displayed code | +
| --deckgo-highlight-code-background | ++ | The background of the displayed code | +
| --deckgo-highlight-code-padding | ++ | The padding of the displayed code | +
| --deckgo-highlight-code-border-radius | ++ | The border radius of the displayed code | +
| --deckgo-highlight-code-margin-bottom | +64px | +Margin bottom of the code scroller | +
| --deckgo-highlight-code-zoom | +1 | +If you wish to manually zoom the code | +
| --deckgo-highlight-code-font-size | ++ | The size of the font for the code | +
| --deckgo-highlight-code-font-family | +monospace | +The family of the font for the code | +
| --deckgo-highlight-code-line-background | ++ | The background of the lines you wish to highlight | +
| --deckgo-highlight-code-line-padding | ++ | A padding for each lines you wish to highlight | +
| --deckgo-highlight-code-line-border-top | ++ | The border-top property of the lines you wish to highlight | +
| --deckgo-highlight-code-direction | +ltr | +The direction of the displayed code | +
| --deckgo-highlight-code-text-align | +start | +The text alignment of your code | +
| --deckgo-highlight-code-token-comment | ++ | Highlighted code tokens comment, prolog, doctype and cdata | +
| --deckgo-highlight-code-token-punctuation | ++ | Highlighted code token punctuation | +
| --deckgo-highlight-code-token-property | ++ | Highlighted code tokens property, tag, boolean, number, constant, symbol, deleted | +
| --deckgo-highlight-code-token-selector | ++ | Highlighted code tokens selector, attr-name, string, char, builtin, inserted | +
| --deckgo-highlight-code-token-operator | ++ | Highlighted code tokens operator, entity, url, string | +
| --deckgo-highlight-code-token-atrule | ++ | Highlighted code tokens atrule, attr-value, keyword | +
| --deckgo-highlight-code-token-function | ++ | Highlighted code function, class-name | +
| --deckgo-highlight-code-token-regex | ++ | Highlighted code tokens regex, important, variable | +
Methods
+The <deckgo-highlight-code/> expose the following methods:
Find the next anchor
+findNextAnchor(enter: boolean) => Promise<boolean>
+ Zoom into code
+zoomCode(zoom: boolean) => Promise<void>
+ Load or reload the component
+load() => Promise<void>
+ Examples
+You could find the examples in the src/index.html of the project.
+<deckgo-highlight-code src="https://domain.com/yourfile.js">{'\n'}</deckgo-highlight-code>{'\n'}{'\n'}<deckgo-highlight-code language="java" highlight-lines="2,2">{'\n'} <code slot="code">public static void main(String args[]) {{'\n'}{'\n'} System.out.println("Hello World");{'\n'}}</code>{'\n'}</deckgo-highlight-code>
+ QR Code
+The "QR Code" component is an extra component which let you add QR code in your slides, useful for example to display links and url and if you wish your audience to easily access them.
+To generate the QR code, the project qrcode-generator from Kazuhiko Arase is used.
+Table of contents
+-
+
- Showcase +
- Getting started + +
- Usage
-
+
- Slot +
- Properties +
- Styling
-
+
- Styling type img + +
+
+ - QR Code with logo +
Showcase
+This Web Component let you generate QR code like the following as svg (default) or img:
+
+
+
+
+Optionally you could also display a logo over your QR code:
+
+
+ 
+
+
+
+
+ Getting started
+To create easily your PWA presentation and to enjoy all the options, I suggest you to create your slides using the CLI as described in the Getting started chapter.
+Doing so you will use the DeckDeckGo starter kit which already includes this Web Component.
+However, if you are looking to use this Web Component as a standalone component, to add a QR codes to your web applications, it could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.
+Using DeckDeckGo QR Code from a CDN
+It's recommended to use unpkg to use the DeckDeckGo Code from a CDN. To do so, add the following include script in the main HTML file of your project:
+<script src="https://unpkg.com/deckdeckgo-qrcode@latest/dist/deckdeckgo-qrcode.js"></script>
+ Install DeckDeckGo QR Code from NPM
+Install DeckDeckGo - QR Code in your project from npm using the following command:
+npm install deckdeckgo-qrcode
+ Framework integration
+The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
+Usage
+The <deckgo-qrcode/> Web Component will generate per default a <svg/> QR code with a correction level set to high.
Optionally, it's also possible to generate the QR code as an <img/> and/or to display a logo over it.
Slot
+To display a logo over your QR code, this Web Component provide a slot called logo.
Properties
+The <deckgo-qrcode/> expose the following properties:
| Property | +Attribute | +Description | +Type | +Default | +Only applies for type <img/> |
+
|---|---|---|---|---|---|
content |
+content |
+The content, a text or an url, of the QR code to generate | +string |
++ | + |
type |
+type |
+The type of QR code to generate, <svg/> or <img/> |
+string |
+svg |
++ |
qrCellSize |
+qr-cell-size |
+The size of the cell, useful to generate a bigger QR code, specially in case of <img/>. Use it wisely, I suggest a value between 0 and 20 for example. |
+number |
++ | + |
qrMargin |
+qr-margin |
+The size of the code margin, in case you would like more spacing | +number |
++ | + |
qrAlt |
+qr-img-alt |
+An alternate text for the image of the QR code | +string |
++ | X | +
qrBackgroundColor |
+qr-img-background-color |
+The background color of the QR code. The value should be provided in a RGB-hex format. For example: FF0000. |
+string |
++ | X | +
qrFillColor |
+qr-img-fill-color |
+The color use to fill the QR code. The value should be provided in a RGB-hex format. For example: FF0000. |
+string |
++ | X | +
Styling
+The <deckgo-qrcode/> could be styled using the following CSS4 variables which would only applies on the type <svg/>:
| CSS4 variable | +Default | +Note | +Only applies for type <svg/> |
+
|---|---|---|---|
| --deckgo-qrcode-container-display | +inline-block | +The display property of the shadow host and the code container | ++ |
| --deckgo-qrcode-size | ++ | The size, width and height, of the QR code | +X | +
| --deckgo-qrcode-logo-ratio-size | +3 | +If you are injecting a logo, its size, width and height, will be calculated with --deckgo-qrcode-size (or 100% if not provided) divided by this value |
+X | +
| --deckgo-qrcode-border-stroke | ++ | The border color of the QR code | +X | +
| --deckgo-qrcode-background-fill | +transparent | +The QR code's background | +X | +
| --deckgo-qrcode-color-fill | ++ | The QR code's color (the color of the QR code's squares it contains) | +X | +
Styling type img
+In oder to style QR code if its type is set to <img/>, you will need to use properties instead of CSS4 variables.
Methods
+The <deckgo-qrcode/> component exposes the following method in case you would like to refresh your QR code, for example on resize of the window on in case you would set its content asynchronously:
generate() => Promise<void>
+ Examples
+You could find all the examples in the src/index.html of the project.
+<deckgo-qrcode content="https://deckdeckgo.com" style="--deckgo-qrcode-size: 300px;">{'\n'}</deckgo-qrcode>
+ Example with a logo:
+<deckgo-qrcode content="https://myurl.com">{'\n'} <img slot="logo" src="my-logo.svg"/>{'\n'}</deckgo-qrcode>
+ QR Code with logo
+It's possible to display a logo over your QR Code as the code generated with this Web Component have a correction level set to high meaning, if I understand correctly, that your content is encoded and displayed multiple times inside the QR code. Therefore, even if the logo cover a part of it, it will be still possible for a reader to read the content from "somewhere else" in the code.
+However, test it carefully and play with the colours, cell-size and size of your code to ensure its readability.
+Social
+The "Social" component allows you to easily add a social link to your presentation.
+Table of contents
+-
+
- Showcase +
- Usage
-
+
- Slots +
- Attributes +
- Examples +
+
Showcase
+
+
+
Usage
+The "Social" slide's Web Component could be integrated using the tag <deckgo-social/>.
<deckgo-social twitter="daviddalbusco">{'\n'} <img data-src="/assets/twitter.svg" slot="icon"/>{'\n'} Twitter{'\n'}</deckgo-social>
+ Slots
+The slot icon and the text are both optional. Of course, if you provide nothing, nothing will be rendered.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| string | ++ | Your Twitter username. It will be concatenated automatically with https://twitter.com/ |
+|
| string | ++ | Your Linkedin username. It will be concatenated automatically with https://www.linkedin.com/in/ |
+|
| medium | +string | ++ | Your Medium username. It will be concatenated automatically with https://medium.com/@ |
+
| github | +string | ++ | Your Github username. It will be concatenated automatically with https://github.com/ |
+
| fullUrl | +string | ++ | In case you would like to provide the URI of your choice | +
Examples
+Without any icons:
+<deckgo-social twitter="daviddalbusco">Twitter</deckgo-social>{'\n'}<deckgo-social linkedin="david-dal-busco/">Linkedin</deckgo-social>{'\n'}<deckgo-social medium="david.dalbusco">Medium</deckgo-social>{'\n'}<deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">Stackoverflow</deckgo-social>
+ With for example ion-icon:
<deckgo-social twitter="daviddalbusco">{'\n'} <ion-icon slot="icon" name="logo-twitter"></ion-icon>{'\n'} Twitter{'\n'}</deckgo-social>{'\n'}{'\n'}<deckgo-social github="fluster/deckdeckgo">{'\n'} <ion-icon slot="icon" name="logo-github"></ion-icon>{'\n'} DeckDeckGo on Github{'\n'}</deckgo-social>
+ Youtube
+The "Youtube" component allows you to easily add a Youtube video in almost any slide of your presentation.
+Table of contents
+-
+
- Showcase +
- Usage
-
+
- Slots +
- Attributes +
+
Showcase
+
+
+
+
+
+Usage
+The "Youtube" slide's Web Component could be integrated using the tag <deckgo-youtube/>.
<deckgo-youtube src="https://www.youtube.com/watch?v=oUOjJIfPIjw">{'\n'}</deckgo-youtube>
+ 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 | +
|---|---|---|---|
| src | +string | ++ | The source url, the Youtube url, of the video. Not embeddable url will be automatically converted to embeddable url supported by Youtube. | +
| width | +number | ++ | The width of the video player. | +
| height | +number | ++ | The height of the video player. | +
| frame-title | +string | ++ | A title for the frame, could be use for accessibility reason. | +
Actions
+A DeckDeckGo deck also contains an additional slot actions. In the starter kit, this slot is use to add a social share action for your presentation.
Table of contents
+-
+
- Introduction +
- Theming +
- Example +
Introduction
+The slot actions provided for the deck will be cloned into each slides of your presentation. Therefore this slot will follow the swiping.
Also worth to notice, this slot will be hidden when the presentation will be displayed full screen.
Theming
+The following theming options will affect the slot actions if set on the deckgo-deck or any slides.
| CSS4 variable | +Default | +Note | +
|---|---|---|
| --slide-actions-top | +32px | +Top value | +
| --slide-actions-end | +32px | +In LTR, right value | +
| --slide-actions-start | ++ | In LTR, left value | +
Example
+<deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}{'\n'} <a href="#" onclick="share()" slot="actions" style="color: inherit;"><ion-icon name="share"></ion-icon></a>{'\n'}</deckgo-deck>
+ Background
+Beside slides and templates, a DeckDeckGo deck could also contains a customized element background which could be injected using a dedicated slot.
Table of contents
+ +Introduction
+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 | +
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 | +
Examples
+An example with an image cloned as background for each slides:
+<deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}{'\n'} <img slot="background" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png">{'\n'}</deckgo-deck>
+ An example with a more complex html and css element which is set as background for the all presentation:
+<deckgo-deck clone-background="false">{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}{'\n'} <div class="circle" slot="background"></div>{'\n'}</deckgo-deck>
+ where for example the related circle css code could be:
div.circle {{'\n'} position: absolute;{'\n'} left: 50%;{'\n'} transform: translate(-50%, 0);{'\n'}{'\n'} bottom: -10vh;{'\n'} width: 800vw;{'\n'} height: 100vh;{'\n'}{'\n'} border-radius: 50%;{'\n'} background: yellow;{'\n'} opacity: 0.3;{'\n'}}
+ Events
+The DeckDeckGo deck triggers the following events:
+| Event | +Emitted value | +Description | +
|---|---|---|
| slidesDidLoad | +string[] | +Emitted when the deck and all slides have loaded. Emit the an ordered list of all the tag names of the slides. | +
| slideNextDidChange | +number | +Emitted when the next slide has started. Emit the index of the new active slide. | +
| slidePrevDidChange | +number | +Emitted when the previous slide has ended. Emit the index of the new active slide. | +
| slideToChange | +number | +Emitted when a specific slide has been selected. Emit the index of the new selected slide. | +
| slideDrag | +number | +Emitted when the slider is actively being moved. Emit the transformX value of the deck. | +
| slideWillChange | +number | +Emitted before the active slide has changed. Emit the transformX value of the deck. | +
Extra Features
+The DeckDeckGo deck exposes a couple of extra features which could be added to your presentation too if you don't already use the starter kit.
+Table of contents
+ +Toggle on/off the full screen mode
+await deck.toggleFullScreen();
+ Print the presentation
+await deck.print();
+ Mobile
+A util method to know if the current presentation is browsed on a mobile device or not.
+await deck.isMobile(); // resolve a boolean
+ Navigation
+If you use the DeckDeckGo starter kit, the navigation methods are already bind out of the box.
+However, if you wish to know more about the different options or are using the core of DeckDeckGo, the DeckDeckGo deck exposes the following asynchronous methods in case you would like to add navigation features to your project.
+-
+
- Introduction +
- Go to next slide + +
- Go to previous slide + +
- Go to a specific slide
-
+
- Parameters +
+ - Is the deck at the begin +
- Is the deck at the end +
- Get the index of the current slide +
- Get the length of the deck +
Introduction
+In the following examples we are accessing the features available on the deck element <deckgo-deck>.
For example, in Vanilla Javascript, we would get a reference to the deck using the following selector:
+const deck = document.getElementsByTagName('deckgo-deck');
+ Go to next slide
+await deck.slideNext();
+ Optional parameters
+| Parameter | +Type | +Default | +Description | +
|---|---|---|---|
| slideAnimation | +boolean | +true | +Set to false in case you would not like the inner animation of a slide, like the reveal or code animation for example, to be performed. |
+
| emitEvent | +boolean | +true | +Set to false in case you would not like the events slideNextDidChange and slidePrevDidChange to be fired. Note that to use this parameter, the previous should be set too. |
+
For example:
+await deck.slideNext(false, false);
+ Go to previous slide
+await deck.slidePrev();
+ Optional parameters
+| Parameter | +Type | +Default | +Description | +
|---|---|---|---|
| slideAnimation | +boolean | +true | +Set to false in case you would not like the inner animation of a slide, like the reveal or code animation for example, to be performed. |
+
| emitEvent | +boolean | +true | +Set to false in case you would not like the events slideNextDidChange and slidePrevDidChange to be fired. Note that to use this parameter, the previous should be set too. |
+
For example:
+await deck.slidePrev(false, false);
+ Go to a specific slide
+await deck.slideTo(0); // parameters: index: number, speed?: number | undefined
+ Parameters
+| Parameter | +Type | +Default | +Description | +
|---|---|---|---|
| index | +number | ++ | Slide index of the specific slide. | +
| speed | +number | +300 | +The slide transition speed. Default 300ms. | +
| emitEvent | +boolean | +true | +In case you would not like to emit the event slideToChange. Note that if you would use this parameter, the above speed parameter must be provided too. |
+
Is the deck at the begin
+await deck.isBeginning(); // resolve a boolean
+ Is the deck at the end
+await deck.isEnd(); // resolve a boolean
+ Get the index of the current slide
+await deck.getActiveIndex(); // resolve a number
+ Get the length of the deck
+await deck.getLength(); // resolve a number
+ Pager
+DeckDeckGo will per default display a pager in form of a progress circle bar. It's possible to hide it or to customize the following various style options.
+Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).
+ +Show or hide
+The show or hide options of the pager are available on the <deckgo-deck> element.
| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| pager | +boolean | +true | +Show or hide the pager | +
| pagerPercentage | +boolean | +true | +Show or hide the progression in percentage inside the pager | +
Customization
+The following style options are available to style the pager:
+| CSS4 variable | +Default | +
|---|---|
| --pager-size | +56px | +
| --pager-margin-top | +8px | +
| --pager-margin-end | +8px | +
| --pager-margin-bottom | +8px | +
| --pager-margin-start | +8px | +
| --pager-background | +#eee | +
| --pager-text-color | +#4c8dff | +
| --pager-text-size | +0.5em | +
| --pager-stroke-outer-width | +2.8 | +
| --pager-stroke-inner-width | +1.8 | +
| --pager-position-left | ++ |
| --pager-position-right | ++ |
Size
+Per default, the DeckDeckGo deck will use all the browser window size respectively width and height.
However, it is possible to include or use DeckDeckGo in any container, for that purpose you would only need to set the attribute embedded to true.
<div style="width: 500px; height: 400px;">{'\n'} <deckgo-deck embedded="true">{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'} </deckgo-deck>{'\n'}</div>
+ HTML
+To edit your DeckDeckGo presentation your could either use HTML or Markdown.
+The default language is HTML. It's also the recommended language as it will offers you more flexibility specially regarding styling.
+If you use the starter kit and use HTML as language for the edition, you could begin to edit the index.html of your project as displayed in the chapter Concept.
If you wish to edit your talk using Markdown have a look to the next chapter.
+Fonts
+As any web application, the fonts of your presentation could be easily styled, but DeckDeckGo goes one step further by downloading and installing automatically any Google Fonts you would like to use during the setup process (if you are using the starter kit).
+Using automatically any Google Fonts
+After you have kick-started your presentation running npm init deckdeckgo in a terminal and provided the information as describe in the Getting started chapter, the DeckDeckGo CLI will ask you if you are looking to use Google Fonts and if you would answer yes, will guide you to get some information about the font.
Once all information gathered, it will automatically download the fonts, add them to your presentation and even do the settings in the CSS stylesheets for you.
+Example
+The following is an example of the process if you would like to install the Google Font Lato:
? Do you want to use a Google Font for your presentation? (y/N) Y{'\n'}{'\n'}⠼ Fetching fonts list...{'\n'}{'\n'}? Search a Google font (min. 3 characters)? ato{'\n'}{'\n'}? Select the font (Use arrow keys){'\n'} Atomic Age {'\n'}❯ Lato {'\n'} Search again {'\n'} Skip {'\n'}{'\n'}? Select charsets (Press <space> to select, <a> to toggle all, <i> to invert selection){'\n'}❯◉ latin{'\n'} ◯ latin-ext{'\n'}{'\n'}? Select styles (Press <space> to select, <a> to toggle all, <i> to invert selection){'\n'} ◯ 100{'\n'} ◯ 100italic{'\n'} ◯ 300{'\n'} ◯ 300italic{'\n'} ❯◉ regular{'\n'} ◯ italic{'\n'} ◯ 700{'\n'} (Move up and down to reveal more choices){'\n'}{'\n'}⠼ Downloading font{'\n'}⠼ Writing to CSS files...{'\n'}
+ Lazy loading
+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.
<img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"/>
+ Markdown
+If you wish, you could edit your DeckDeckGo presentation using Markdown. This chapter has for goal to introduce you briefly on how editing your slides with Markdown differs from the HTML method.
+Table of contents
+-
+
- Introduction +
- Edit
-
+
- Example +
- Attributes +
- Notes +
+ - Summary +
Introduction
+When you edit your talk with Markdown, the DeckDeckGo Webpack Markdown Plugin will convert, at bundle time, your code to HTML and will inject the results in the index.html file. Doing so, your DeckDeckGo presentation will remain SEO friendly even without server side rendering.
Edit
+To begin to edit your talk, instead of editing the index.html you will instead have to edit the index.md file provided by the starter kit.
Furthermore than the standard Markdown tags, you will be able to use extended tags in order to specify which types of slides you would like to use. For that purpose, use the separator --- followed by a shortened version of the template's name, like for example --- title for </deckgo-slide-title>.
The plugin also takes care of injecting the content you would provide in the right slots.
+Example
+The following <deckgo-slide-title/> slide:
--- title{'\n'}# My presentation title{'\n'}{'\n'}Hello World 🚀
+ will be parsed into:
+<deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div slot="content">{'\n'} <p>Hello World 🚀</p>{'\n'} </div>{'\n'}</deckgo-slide-title>
+ Attributes
+As some templates needs attributes, you will also be able to specify them in Markdown.
+For example the <deckgo-slide-gif/> slide:
--- gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true"{'\n'}# My title{'\n'}{'\n'}# Hey{'\n'}{'\n'}### It's cool gif
+ will be parsed into:
+<deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true">{'\n'} <h1 slot="title">My title</h1>{'\n'} <h1 slot="header">Hey</h1>{'\n'} <h2 slot="footer">It's a cool gif</h2>{'\n'}</deckgo-slide-gif>
+ Notes
+To add some notes to a particular slide, use the separator *** and write down your notes afterwards.
Optionally, if you wish to display your notes in your deck, you could also use the attribute show.
--- title{'\n'}# My presentation title{'\n'}{'\n'}Hello World 🚀{'\n'}{'\n'}***{'\n'}{'\n'}I should not forget to think about that during my talk{'\n'}{'\n'}...and say hello to mum
+ will be parsed into:
+<deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <div slot="content">{'\n'} <p>Hello World 🚀</p>{'\n'} </div>{'\n'} <div slot="notes">{'\n'} I should not forget to think about that during my talk{'\n'}{'\n'} ...and say hello to mum{'\n'} </div>{'\n'}</deckgo-slide-title>
+ Summary
+When you choose Markdown, you edit your slides in index.md and use standard Markdown except the extra tags --- to declare your slides and *** if you wish to add notes.
RTL Support
+DeckDeckGo offers full LTR and RTL support. The deck inherits its parent text direction.
+Commonly, if you wish to use RTL for your all page respectively presentation, you could set the attribute dir of the root html tag to rtl.
<!DOCTYPE html>{'\n'}<html dir="rtl">{'\n'}<body>{'\n'} <deckgo-deck>{'\n'} </deckgo-deck>{'\n'}</body>{'\n'}</html>
+ Theming
+Theming a DeckDeckGo presentation is quick and easy.
+Table of contents
+-
+
- Theme +
- Custom styles +
- Notes +
Theme
+To create the theme for your deck when you are using the DeckDeckGo starter kit, use the Ionic Color Generator to pick the colors of your choice.
+Once done, copy the generated CSS variables and parse them into the src/css/variables.css file of your presentation.
Finally, edit the index.html and replace the color of the body background.
body {{'\n'} background: #3880ff;{'\n'}}
+ ++This background color is defined directly in the index.html file because it is the one which will be applied until your presentation is loaded
+
Custom styles
+DeckDeckGo also offers various theming options which could be set using CSS variables and which are described in their respective slides' templates, see chapter concept to begin with.
+Notes
+If you would miss or need further theming options, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more theming flexibility and options
+Installation
+To create easily your PWA presentation and to enjoy all the options, I suggest you to create your slides using the CLI and the starter kit as described in the previous chapter.
+However, the DeckDeckGo core component, could be installed in any project too.
+If you wish to do so, use it directly in your project from a CDN, using a simple script include, or install it from npm.
+Table of contents
+ +Using DeckDeckGo from a CDN
+It's recommended to use unpkg to use the DeckDeckGo from a CDN. To do so, add the following include script in the main HTML file of your project:
+<script src="https://unpkg.com/deckdeckgo@latest/dist/deckdeckgo.js"></script>
+ Install DeckDeckGo from NPM
+Install DeckDeckGo in your project from npm using the following command:
+npm install deckdeckgo
+ Framework integration
+The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
+Getting started
+DeckDeckGo provides a CLI and a starter kit.
+Prerequisites
+DeckDeckGo requires a recent LTS version of NodeJS and npm. Make sure you've installed and/or updated Node before continuing.
+++Note that you will need to use npm 6 or higher
+
Starting a new presentation
+Run the following command in a terminal to create a new deck:
+npm init deckdeckgo
+ After running init you will be provided with a prompt so that you can set the base information for your new deck and choose if you rather like to edit it in HTML or markdown:
+Cool, let's kick start a new DeckDeckGo presentation{'\n'}{'\n'}? What's your project name (will be use to create a new folder)? (deckdeckgo){'\n'}{'\n'}? What's your presentation name (max. 45 characters, will be use for meta tags and manifest information)? (DeckDeckGo){'\n'}{'\n'}? What's your presentation about (its description)? (Create a lightweight presentation using Web Components 🚀){'\n'}{'\n'}? What's your name (will be use for the author meta information)? (David){'\n'}{'\n'}? What method do you want to use to edit your presentation? (Use arrow keys){'\n'} ❯ HTML {'\n'} Markdown
+ Once your presentation created, go to your new project's folder and start editing your slides and content for your talk 😉
+Publishing
+DeckDeckGo bundles your presentation as a Progressive Web App which could be hosted on any Web Server or hosting solution.
+++Not sure what PWAs are? Check out Ionic's PWA Overview for more info.
+
Table of contents
+ +SEO friendly
+It is worth to notice that DeckDeckGo is, respectively your slides build with are, SEO friendly.
+Therefore you do not need to implement a complex server-side rendering (SSR) hosting solution.
+Before production
+Before your final build and most important before deploying online your deck, don't forget to edit the information about your presentation in the following files:
+-
+
Edit the meta tags in the
+<head/>of yoursrc/index.htmlfile
+Generate your icons and replace the respective files in the
+assetsfolder. For that purpose I suggest you to use the real great tool RealFaviconGenerator
+Update the information in the
+manifest.jsonfile
+
Production build
+When you are ready for your talk or ready to publish online your slides, run the following command in a terminal to bundle your presentation for production:
+npm run build
+ If you do not wish to remove your notes from your presentation, run the build command with the attributes --notes:
npm run build -- --notes
+ If you wish to run your presentation locally afterwards without rebuilding everything, you could run the following command to start only the dev server:
+npm run dev
+ Remote control
+Cherry on the cake 🍒🎂 DeckDeckGo comes with a Progressive Web App to remote control your slides 📱
+Table of contents
+ +How does it work
+The same Progressive Web App remote control could be use to control any presentations developed with DeckDeckGo.
+If you are using the starter kit, out of the box, your presentation will signal itself as "controllable" and will therefore be "discoverable".
+One a presentation would be linked with the remote control, the communication between these will happens through a real-time channel using WebRTC.
+Give a try
+Better than a description, the DeckDeckGo website implement a deck and receiver to let you interact with this application, just give it a try:
+-
+
- Open the DeckDeckGo website 👉 https://deckdeckgo.com +
- Start the remote control PWA 👉 https://deckdeckgo.app +
- Have fun 🎉 +
Control your slides
+Use the remote control to take remotely the remotely of your presentation. Useful to interact with present your slides while you are focusing one your talk.
+Features
+-
+
- Switch between slides and/or swipe your slides +
- Play and pause Youtube video +
- Draw over your slide deck +
- Highlight elements of your presentation +
Screenshot
+
Time tracker
+The remote control let you track your talk's time too. This application implements local notifications to inform you when your talk is about to finish or is finished.
+Screenshot
+
Running
+There are two options to run and showcase your presentation:
+You could either publish your deck online and showcase it from there, by accessing it with its online url with your favorite browser. For example by accessing an URL like https://deckdeckgo.com.
+Or you could showcase your deck in your favorite browser by running it locally using the integrated dev server provided by the DeckDeckGo starter kit with the default access URL http://localhost:3000.
+Local
+To run your presentation, in a terminal, start the following command to bundle your slides and to keep listening to modifications:
+npm run start
+ If you wish to develop your presentation without adding it to the list of available deck of the remote control, run the following command instead:
+npm run start-no-remote
+ ++Furthermore to serve your deck, both above commands are watching your presentation's source files for changes and will trigger a new build and reload in case of modifications
+
lite-server is use as integrated dev server.
+Online
+If you are looking to showcase your presentation from an online URL, have a look to the next chapter publishing before deploying your deck on your hosting solution.
+Backstory
+I had the opportunity to talk about Web Components and Ionic. While I was developing my presentation it came to my mind that I was not really following what I was about to present, that's why I wrapped up together DeckDeckGo, this new tool to create a Progressive Web App alternative for simple presentations using Web Components.
+I hope my little project will help you to create a slick presentation 🚀
+To infinity and beyond 🖖
+ +Collections
+A collection of presentations and talks where DeckDeckGo was used:
+| Title | +Date and event | +Author | +Repo | +Available online | +
|---|---|---|---|---|
| Pantallas táctiles | +2019/01/23 Universitat Jaume I, Castellón de la Plana (Spain) | +David López Castellote | +sap126-pantallas-tactiles | +https://bit.ly/2FFqXWX | +
| Schaffhausen civictech prototype? | +2018/12/08 | +Sandro Scalco | ++ | https://schaffhausen.io | +
| Ionic v4 and web components | +2018/10/26 Web Zürich October, Zürich | +David Dal Busco | +Web Zueri | ++ |
| Ionic v4, web components, shadow dom and beyond | +2018/10/16 Pantalks, Zürich | +David Dal Busco | +Ionicv4-and-beyond | ++ |
Send me your slides
+If you would publish online a presentation or talk you would have built with DeckDeckGo, reach me out, I would be super duper happy to add it to the list of talks and presentations ❤️
+Logo
+The DeckDeckGo logo was designed and offered by Anita from Skinque.com, a great online marketplace for tattoos 🤘
+Reach her out if you are looking for a cool custom tattoo or a nice logo 😃
+Open source
+DeckDeckGo is open source and its source code could be found in the following repos:
+
+
+
+Slide: Author
+The "Author" slide let you introduce the author of the presentation.
+Table of contents
+-
+
- Layout +
- Usage
-
+
- Slots +
- Notes +
- Social components +
+ - Attributes
-
+
- Example +
+ - Theming +
Layout
+
+
+
+
+
+
+
+slot="title"
+slot="author"
+ Usage
+The "Author" slide's Web Component could be integrated using the tag <deckgo-slide-author/>.
<deckgo-deck>{'\n'} <deckgo-slide-author img-src="/assets/author.jpeg" img-alt="My self">{'\n'} <h1 slot="title">Author</h1>{'\n'} <div slot="author">{'\n'} <h2>David</h2>{'\n'} <p>Something about me</p>{'\n'} </div>{'\n'} <div slot="social-link"><deckgo-social twitter="daviddalbusco">twitter</deckgo-social></div>{'\n'} </deckgo-slide-author>{'\n'}</deckgo-deck>
+ Slots
+Both slots title, author and social-link are optional, but of course the slide would looks better with at least the slot author would be provided.
Notes:
+-
+
The slot
+titleis hidden. If you use the DeckDeckGo starter, it will be use for the navigation modal
+You could provide up to six
+social-linkslots. 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 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.
Social components
+The details of the component <deckgo-social/> is described in the components documentation.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| 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. | +
Example
+<deckgo-deck>{'\n'} <deckgo-slide-author img-src="/assets/author.jpeg">{'\n'} <div slot="author">{'\n'} <h2>David</h2>{'\n'} <p>Something about me</p>{'\n'} </div>{'\n'} <div slot="social-link"><deckgo-social twitter="daviddalbusco">twitter</deckgo-social></div>{'\n'} <div slot="social-link"><deckgo-social linkedin="david-dal-busco/">linkedin</deckgo-social></div>{'\n'} <div slot="social-link"><deckgo-social medium="david.dalbusco">medium</deckgo-social></div>{'\n'} </deckgo-slide-author>{'\n'}</deckgo-deck>
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-author-background-start | ++ | Left pane background | +
| --slide-author-color-start | ++ | Left pane color | +
| --slide-author-background-end | ++ | Right pane background | +
| --slide-author-color-end | ++ | Right pane color | +
| --slide-author-padding-top | +16px | +Padding top of a slide | +
| --slide-author-padding-end | +32px | +Padding right of a slide | +
| --slide-author-padding-bottom | +16px | +Padding bottom of a slide | +
| --slide-author-padding-start | +32px | +Padding left of a slide | +
| --slide-padding-start | +32px | +Modify slotted ul and ol padding-inline-start | +
| --slide-author-align | +inherit | +Modify for example to center if you want to align the content in the middle | +
| --slide-author-text-align | +inherit | +Modify for example to center if you want to align the text in the middle | +
| --slide-author-img-size | +80% | +The size of the image of the left pane | +
| --slide-author-social-padding-top | +32px | +The spacing between the author description and the social links | +
| --zIndex | +1 | +The z-index of the slide | +
Slide: Chart
+The "Chart" slide let you draw easily charts in your presentation.
+Table of contents
+-
+
- Layout +
- Usage + +
- Chart components +
- Installation +
- Attributes +
- Theming +
Layout
+
+
+
+
+
+
+
+
+
+
+
+slot="title"
+slot="title"
+slot="title"
+Usage
+The "Chart" slide's Web Component could be integrated using the tag <deckgo-slide-chart/>.
<deckgo-slide-chart src="./assets/csv/data-pie-chart.csv">{'\n'} <h1 slot="title">My Pie chart</h1>{'\n'}</deckgo-slide-chart>
+ Slots
+The slot title is 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 would need to mark them with an attribute show.
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.
Installation
+The DeckDeckGo charts components are provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo chart to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.
+Attributes
+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 |
+
Furthermore, this slide component offers the same attributes as the DeckDeckGo charts Web Component, see its documentation for the details.
+Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --zIndex | +1 | +The z-index of the slide | +
| --slide-chart-margin-top | +32px | +Margin top of the chart inside its container | +
| --slide-chart-margin-end | +96px | +Margin right of the chart inside its container | +
| --slide-chart-margin-bottom | +32px | +Margin bottom of the chart inside its container | +
| --slide-chart-margin-start | +32px | +Margin left of the chart inside its container | +
Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo charts Web Component, see its documentation for the details.
+Slide: Code
+The "Code" slide is a the slide to use if you would like to showcase code during your talk.
+Table of contents
+-
+
- Layout +
- Usage + +
- Code components +
- Installation +
- Attributes + +
- Theming +
Layout
+
+
+
+
+
+
+
+slot="title"
+Usage
+The "Code" slide's Web Component could be integrated using the tag <deckgo-slide-code/>.
You could provide a file URI to the code you want to display or provide it with a slotted element.
+Usage with file URI
+<deckgo-deck>{'\n'} <deckgo-slide-code src="https://domain.com/path-to-my-code.extension">{'\n'} <h1 slot="title">My code</h1>{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Usage with slotted element
+<deckgo-deck>{'\n'} <deckgo-slide-code language="java">{'\n'} <h1 slot="title">Manual code</h1>{'\n'} <code slot="code">{'\n'} interface DeckDeckGoDemo {{'\n'} boolean helloWorld();{'\n'} }{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Slots
+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.
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.
Code components
+The slide "Code" relies on the code component <deckgo-highlight-code/> which is described in the components documentation.
Installation
+The DeckDeckGo - Hightlight code component is provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo code to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.
+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 for the details.
Example with file URI
+<deckgo-deck>{'\n'} <deckgo-slide-code hide-anchor="false" src="https://raw.githubusercontent.com/fluster/deckdeckgo/master/src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx">{'\n'} <h1 slot="title">Code</h1>{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Example with slotted element
+<deckgo-deck>{'\n'} <deckgo-slide-code language="java">{'\n'} <h1 slot="title">Manual code</h1>{'\n'} <code slot="code">interface NumericTest {{'\n'} boolean computeTest(int n);{'\n'} }{'\n'}{'\n'} public static void main(String args[]) {{'\n'} NumericTest isEven = (n) -> (n % 2) == 0;{'\n'} NumericTest isNegative = (n) -> (n < 0);{'\n'}{'\n'} // Output: false{'\n'} System.out.println(isEven.computeTest(5));{'\n'}{'\n'} // Output: true{'\n'} System.out.println(isNegative.computeTest(-5));{'\n'} }</code>{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo - Highlight code Web Component, see its documentation for the details.
+Slide: Content
+The "Content" slide is a simple slide which display its title and content aligned to the start of the page.
+This slide could be for example use for the every slides of your presentation where you would like to display content related to your talk.
+Table of contents
+ +Layout
+
+
+
+
+
+
+
+Something related to my topic
++ Cool beans +
+Usage
+The "Content" slide's Web Component could be integrated using the tag <deckgo-slide-content/>.
<deckgo-deck>{'\n'} <deckgo-slide-content>{'\n'} <h1 slot="title">Something related to my topic</h1>{'\n'} <p slot="content">{'\n'} Cool beans{'\n'} </p>{'\n'} </deckgo-slide-content>{'\n'}</deckgo-deck>
+ Slots
+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 would need to mark them with an attribute show.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| reveal | +boolean | +false | +Hide the slotted elements li, p an img and display them when navigating using slideNext() or slidePrev() (see documention) |
+
| reveal-show-first | +boolean | +false | +Show the first elements which would be hidden if reveal is set to true |
+
Example
+<deckgo-deck>{'\n'} <deckgo-slide-content reveal="true" reveal-show-first="true">{'\n'} <h1 slot="title">Something related to my topic</h1>{'\n'} <ul slot="content">{'\n'} <li>Cool</li>{'\n'} <li>Beans</li>{'\n'} </ul>{'\n'} </deckgo-slide-content>{'\n'}</deckgo-deck>
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --zIndex | +1 | +The z-index of the slide | +
Slide: Gif
+The "Gif" slide let you add easily a gif, like those provided by Giphy, to your presentation.
+Table of contents
+-
+
- Layout +
- For images too +
- Usage + +
- Gif component +
- Attributes +
- Theming +
Layout
+
+
+
+
+
+
+
+My title
+Hey
+It's a cool gif
+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.
+Usage
+The "Gif" slide's Web Component could be integrated using the tag <deckgo-slide-gif/>.
<deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true">{'\n'} <h1 slot="title">My title</h1>{'\n'} <h1 slot="header">Hey</h1>{'\n'} <h2 slot="footer">It's a cool gif</h2>{'\n'}</deckgo-slide-gif>
+ Slots
+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 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.
Gif component
+The slide "Gif" relies on the component <deckgo-gif/> which is described in the components documentation.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| 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 | +false | +If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. | +
Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --zIndex | +1 | +The z-index of the slide | +
Slide: QR Code
+The "QR code" slide is an handy slide in case you would like to display a QR code. It could for example be use as the very last slide of your presentation to display an easy link pointing to your deck, you previously published online. It would allow your audience to get easily your slides without any delay on their phone.
+Table of contents
+-
+
- Layout +
- Usage + +
- Code components +
- Installation +
- Attributes + +
- Theming +
Layout
+
+
+
+
+
+
+
+slot="title"
+slot="content"
+Usage
+The "QR code" slide's Web Component could be integrated using the tag <deckgo-slide-qrcode/>.
Usage
+<deckgo-deck>{'\n'} <deckgo-slide-qrcode content="https://deckdeckgo.com">{'\n'} <h1 slot="title">My QR code</h1>{'\n'} <p slot="content">An optional additional content</p>{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Slots
+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 would need to mark them with an attribute show.
Code components
+The slide "QR Code" relies on the code component <deckgo-qrcode/> which is described in the components documentation.
Installation
+The DeckDeckGo - QR Code component is provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo QR code to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.
+Attributes
+The attribute content should be provided in order to render a QR code in this template. It offers the same attributes as the DeckDeckGo QR code Web Component, see its documentation for the details.
Example without any slots
+<deckgo-deck>{'\n'} <deckgo-slide-qrcode content="An encoded text">{'\n'} </deckgo-slide-code>{'\n'}</deckgo-deck>
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --slide-qrcode-align | +center | +QR code vertical alignment | +
| --slide-qrcode-text-align | +center | +QR code horizontal alignment | +
| --slide-qrcode-background | ++ | QR code column's background | +
| --slide-qrcode-title-display | +inherit | +If you wish to hide the slot="title" | +
Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo - QR code Web Component, see its documentation for the details.
+Slide: Split
+The "Split" slide is a simple slide which display two panes on the page.
+Table of contents
+ +Layout
+
+
+
+
+
+
+
+Two columns subject
++ The content you want to display on the left side of the page +
++ The content you want to display on the right side of the page +
+Usage
+The "Split" slide's Web Component could be integrated using the tag <deckgo-slide-split/>.
<deckgo-deck>{'\n'} <deckgo-slide-split>{'\n'} <h1 slot="title">Two columns subject</h1>{'\n'} <p slot="start">{'\n'} The content you want to display on the left side of the page{'\n'} </p>{'\n'} <p slot="end">{'\n'} The content you want to display on the right side of the page{'\n'} </p>{'\n'} </deckgo-slide-split>{'\n'}</deckgo-deck>
+ Slots
+Both slots title, start and end are optional. Without providing one of them, the page will remain empty.
The start slot is the content of the left pane respectively the slot end is the content of the right pane.
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 would need to mark them with an attribute show.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| reveal | +boolean | +false | +Hide the slotted elements li, p an img and display them when navigating using slideNext() or slidePrev() (see documention) |
+
| reveal-show-first | +boolean | +false | +Show the first elements which would be hidden if reveal is set to true |
+
Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-split-background-start | ++ | Left split pane background | +
| --slide-split-color-start | ++ | Left split pane color | +
| --slide-split-background-end | ++ | Right split pane background | +
| --slide-split-color-end | ++ | Right split pane color | +
| --slide-split-padding-top | +16px | +Padding top of a slide split pane | +
| --slide-split-padding-end | +32px | +Padding right of a slide split pane | +
| --slide-split-padding-bottom | +16px | +Padding bottom of a slide split pane | +
| --slide-split-padding-start | +32px | +Padding left of a slide split pane | +
| --slide-split-title-padding-top | +16px | +Padding top of the title of the | +
| --slide-split-title-padding-end | +32px | +Padding right of the title of the | +
| --slide-split-title-padding-bottom | +16px | +Padding bottom of the title of the | +
| --slide-split-title-padding-start | +32px | +Padding left of the title of the | +
| --slide-padding-start | +32px | +Modify slotted ul and ol padding-inline-start | +
| --slide-split-align | +inherit | +Modify for example to center if you want to align the content in the middle | +
| --slide-split-text-align | +inherit | +Modify for example to center if you want to align the text in the middle | +
| --slide-split-title-display | +none | +The slot title is per default hidden even if you provide it. If you wish to displays it, modify this attribute |
+
| --zIndex | +1 | +The z-index of the slide | +
Slide: Title
+The "Title" slide is a simple slide which display its title and content center in the middle of the page.
+This slide could be for example use for the very first and last slide of your presentation.
+Table of contents
+ +Layout
+
+
+
+
+
+
+
+My presentation title
++ Hello World 🚀 +
+Usage
+The "Title" slide's Web Component could be integrated using the tag <deckgo-slide-title/>.
<deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}</deckgo-deck>
+ Slots
+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 would need to mark them with an 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:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| reveal | +boolean | +false | +Hide the slotted elements li, p an img and display them when navigating using slideNext() or slidePrev() (see documention) |
+
| reveal-show-first | +boolean | +false | +Show the first elements which would be hidden if reveal is set to true |
+
Example
+<deckgo-deck>{'\n'} <deckgo-slide-title reveal="true" reveal-show-first="true">{'\n'} <h1 slot="title">My presentation title</h1>{'\n'} <ul slot="content">{'\n'} <li>Hello</li>{'\n'} <li>World</li>{'\n'} <li>🚀</li>{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}</deckgo-deck>
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --zIndex | +1 | +The z-index of the slide | +
Slide: Youtube
+The "Youtube" slide let you add easily a Youtube video to your presentation.
+Table of contents
+-
+
- Layout +
- Usage
-
+
- Slots +
- Notes +
- Youtube component +
+ - Attributes +
- Theming +
- Methods + +
Layout
+
+
+
+
+
+
+
+A 16/9 video
+Usage
+The "Youtube" slide's Web Component could be integrated using the tag <deckgo-slide-youtube/>.
<deckgo-slide-youtube src="https://www.youtube.com/watch?v=oUOjJIfPIjw">{'\n'} <h1 slot="title">A 16/9 video</h1>{'\n'}</deckgo-slide-youtube>
+ Slots
+The slot title is 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 would need to mark them with an attribute show.
Youtube component
+The slide "Youtube" relies on the component <deckgo-youtube/> which is described in the components documentation.
Attributes
+This component offers the following options which could be set using attributes:
+| Attribute | +Type | +Default | +Description | +
|---|---|---|---|
| src | +string | ++ | The source url, the Youtube url, of the video. Not embeddable url will be automatically converted to embeddable url supported by Youtube. | +
| width | +number | +Per default the video width will be calculated according the content size available. | +Using this option you would be able to define your own width. | +
| height | +number | +Per default the video height will be calculated according the content size available. | +Using this option you would be able to define your own height. | +
Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --background | ++ | + |
| --color | ++ | + |
| --slide-padding-top | +16px | +Padding top of the all slide | +
| --slide-padding-end | +32px | +Padding right of the all slide | +
| --slide-padding-bottom | +16px | +Padding bottom of the all slide | +
| --slide-padding-start | +32px | +Padding left of the all slide | +
| --zIndex | +1 | +The z-index of the slide | +
Methods
+The slide "Youtube" offers extra methods to play and pause the Youtube video clip. These methods are notably used by the [DeckDecGo]'s remote control.
+Play the video
+const slide = deck.getElementsByTagName('deckgo-slide-youtube');{'\n'}await slide.play();
+ Pause the video
+const slide = deck.getElementsByTagName('deckgo-slide-youtube');{'\n'}await slide.pause();
+ Toggle the video
+Toggle will take care to pause or play the video according its current state.
+const slide = deck.getElementsByTagName('deckgo-slide-youtube');{'\n'}await slide.toggle();
+ Concept
+DeckDeckGo is a deck of slides where each slide is based on a template which has its own layout and behaviour. Their content could be edited and structured using slots and other attributes.
The parent deck should be declared using the tag <deckgo-deck/> and each slide should be added as its children.
<deckgo-deck>{'\n'} <deckgo-slide-title>{'\n'} <h1 slot="title">The first slide</h1>{'\n'} <p slot="content">{'\n'} Hello World 🚀{'\n'} </p>{'\n'} </deckgo-slide-title>{'\n'}{'\n'} <deckgo-slide-content>{'\n'} <h1 slot="title">The second slide</h1>{'\n'} </deckgo-slide-content>{'\n'}</deckgo-deck>
+ In the previous example, the presentation contains two slides. The first slide use the template deckgo-slide-title and the second slide use the template deckgo-slide-content.
Templates
+DeckDeckGo provide the following templates:
+-
+
- Slide: Title +
+
+
+
+
+
+
+slot="title"
++ slot="content" +
+-
+
- Slide: Content +
+
+
+
+
+
+
+slot="title"
++ slot="content" +
+-
+
- Slide: Split +
+
+
+
+
+
+
+slot="title"
++ slot="start" +
++ slot="end" +
+-
+
- Slide: Gif +
+
+
+
+
+
+
+slot="title"
+slot="header"
+slot="footer"
+-
+
- Slide: Chart +
+
+
+
+
+
+
+
+
+
+
+slot="title"
+slot="title"
+slot="title"
+-
+
- Slide: Youtube +
+
+
+
+
+
+
+slot="title"
+-
+
- Slide: Code +
+
+
+
+
+
+
+slot="title"
+-
+
- Slide: Author +
+
+
+
+
+
+
+slot="title"
+slot="author"
+ -
+
- Slide: QR Code +
+
+
+
+
+
+
+slot="title"
+slot="content"
+Note
+If you would miss or need further templates, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more options.
+