DeckDeckGo

DeckDeckGo is the new tool to create lightweight presentation using HTML and Ionic components.

DeckDeckGo let you create without effort your slides and allows you to add some extra interactive features with the help of the Ionic Web Components.

Moreover, DeckDeckGo bundles your presentation with services workers letting you publish it online with an offline support.

Features
Getting Started
Editing
- Samples
Theming
Development
Build
- Before going online
Talks
Backstory
License

Features

Use HTML and CSS to create without effort your presentation
Use Ionic components and icons to create the content or even add extra features
Style your presentation quickly
Lightweight and lazy loaded images
Bundles the presentation with an offline support
Let you create slides which looks good on mobile devices too
Free and open source

Getting Started

To get started, simply clone this repository, install the dependencies and start editing your presentation while editing src/index.html 😉

git clone https://github.com/fluster/deckdeckgo
cd deckdeckgo
npm install
npm run dev

Editing

To develop your presentation, simply edit src/index.html and add your slides using Ionic tags ion-slide.

Each ion-slide inside ion-slides is a slide of your presentation. Inside each ion-slide you could add and edit the content to display.

Samples

A slide with only a title:

<ion-slide>
    <ion-card no-shadow>
        <h1>Hello, this is my awesome title 🚀</h1>
    </ion-card>
</ion-slide>

A slide with a list:

<ion-slide>
    <ion-card no-shadow>
        <h1>Here I display a list</h1>

        <ion-list lines="none" padding-top>
            <ion-item>
                <ion-label text-wrap><strong>Point 1</strong>: something really cool</ion-label>
                <ion-checkbox slot="start" checked></ion-checkbox>
            </ion-item>

            <ion-item>
                <ion-label text-wrap>or something <strong>awesome</strong></ion-label>
                <ion-checkbox slot="start" checked></ion-checkbox>
            </ion-item>
        </ion-list>
    </ion-card>
</ion-slide>

A slide with two columns:

<ion-slide>
    <ion-card no-shadow>
        <h1>Two columns</h1>

        <ion-grid padding-top>
            <ion-row align-items-center justify-content-center>
                <ion-col size="6">
                    This is the column left 
                </ion-col>
                
                <ion-col size="6">
                    This is the column right 
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-card>
</ion-slide>

A slide where you display code:

<ion-slide>
        <ion-card no-shadow>
            <h1>Here we display code</h1>

            <code padding margin text-left>&lt;ion-button&gt;
    &lt;ion-label&gt;Hello world&lt;/ion-label&gt;
    &lt;ion-icon name="happy" slot="start"&gt;&lt;/ion-icon&gt;
&lt;/ion-button&gt;</code>
        </ion-card>
    </ion-slide>

Theming

Theming a DeckDeckGo presentation is easy and quick.

Simply use the Ionic Color Generator to select the colors of your choice, copy the generated CSS variables, parse them into src/css/variables.css and voilà 😁

Development

lite-server and Webpack are use to helps you during the development of your presentation.

In a terminal, start the following command to bundle your slides and to keep listening to modifications:

npm run watch

In another terminal, start a local server using the following command:

npm run dev

Build

Once you are ready for your talk or ready to publish online your slides, run the following command in a terminal:

npm run build

Before going online

Before your final build and before deploying online your slides, don't forget to edit the information regarding your presentation in the following files:

Edit the meta tags in the <head/> of src/index.html
Generate your favicons and replace the respective files in the assets folder. For that purpose I suggest you to use the real great tool RealFaviconGenerator
Update your information in the manifest.json file

Talks

A collection of talks where DeckDecoGo was used:

Title	Author and repo	Available online
Ionic v4, web components, shadow dom and beyond	Peterpeterparker

Send me your talks

If you would publish online a talk you would have built with DeckDeckGo, reach me out, I would be super duper happy to list these ❤️

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 lightweight presentation using HTML and Ionic components.

Furthermore this project also allowed me to discover how to embed @ionic/core in a index.html and how to use it with vanilla Javascript.

dboscanv/deckdeckgo