deckgo / starter-kit Goto Github PK

1. Watch is triggered but doesn't automatically start a refresh of the browser -> use path.resolve for the full path -> solved

2. There was a bug in the copy-webpack-plugin (webpack-contrib/copy-webpack-plugin#359) -> update the plugin -> solved

3. ENOTEMPTY from the clean webpack plugin should be solved in its version 2 (see johnagan/clean-webpack-plugin#59) but actually doesn't seems to be solved yet

See screenshot, title is pushed on previous and next slide

Right now, as long as no "local" options are used, all presentations even these in development are listed in the list of available presentations

Good: it's easy and handy
Less good: maybe you are ok to have it listed when you develop your deck but would be happy not to always list it?

maybe I could just add an optional parameter "--hidden" to "npm run start" of the starter kit, that would be an easy win...

Would it be cool to have a Cli?

npm install deckdeckgo-cli
deckdeckgo init my-presentation

or something à la stencil?

goal -> with the help of a cli the user could be prompted to enter projects' name, description etc. and these information could be use to create the meta tags, manifest file etc. per default

When writing a presentation using the starter kit, on modifications, the page is reloaded and the deck began again from the begin which isn't use friendly and neither good for production

At least, after rebuild, the user should land on the same slide as the one previously displayed

Currently the project doesn't contains a favicon and logo. I've ask a friend to quick and dirty build one in order to be able to unleash this icon as open source under MIT licence too :)

P.S.: Note for myself, use https://realfavicongenerator.net to generate the icons

The feature #37 was introduced to keep track of the slides history while developing in order to always land on the currently edited slide if the local server live reload

On the other hand, on a prod build and when the app is deployed online, tweaking the navigation is a bit unexpected

It's a bit a pain that the starter kit js files aren't in a separate project, specially when I upgrade and have to create the changelog, it's difficult to follow and to update and existing project

Would be cool to have a the js files in a separate "starter kit js"

Also typescript

Right now Ionic (core, css and ionicons) aren't bundled with Webpack, they are still referenced as external scripts in index.html

For a better offline support, these should be bundled with the webpack build

I wasn't able to make it so far but a documentation "how to bundle Ionic core" should be published by Ionic soonish

But if someone knows how to solves, would love to hear from you or even don't hesitate to send me a PR

Probably only a few but to improve even a bit the performance some js files/functions of the starter kit might be better to be loaded if the code would be splitted (for example modals)

P.S.: Note most of the js in the starter kit probably need to be set at boot time as they are use to integrate the deck

If editor provides notes and wish them to be displayed, let reader access and see them in a modal

I'm working on providing some default templates/layout and a custom slides, to let user create their presentations faster using templates.

Once this split project done, user will be able to write presentation like the following:

<deckdeckgo-deck>
  <deckdeckgo-slide-title>
    <h1 slot="title">DeckDeckGo</h1>
    <p slot="content">Hello World  🚀</p>
  </deckdeckgo-slide-title>
</deckdeckgo-deck>

This will be split in a separate project built with StencilJS and published in npm. Following this I'm not sure about how I should structure all the DeckDeckGo components.

Idea 1

• deckdeckgo: the project where I write my presentation + webpack for the bundle
• deckdeckgo-deck: the templates and custom slider, published in npm

aka

git clone https://github.com/fluster/deckdeckgo my-presentation
cd my-presentation
npm install
-- optionaly npm i deckdeckgo-deck, the templates
-- I write my presentation
npm run build

Idea 2

• deckdeckgo: the templates and custom slider, published in npm
• deckdeckgo-starter: the project where I write my presentation + webpack for the bundle

aka

git clone https://github.com/fluster/deckdeckgo-starter my-presentation
cd my-presentation
npm install
-- optionaly npm i deckdeckgo, the templates
-- I write my presentation
npm run build

Idea 3

In case I would add a Cli (deckgo/deckdeckgo#10)

• deckdeckgo: the templates and custom slider, published in npm
• deckdeckgo-starter: the project where I write my presentation + webpack for the bundle
• deckdeckgo-cli: the cli which allows me to create deckdeckgo-starters with the meta I entered during the process of creation

npm install -g deckdeckgo-cli
deckdeckgo go my-presentation
cd my-presentation
-- I write my presentation
npm run build

Bundle and use the new custom made slide https://github.com/fluster/deckdeckgo

In the same time, update the content to reflect the new assets

Before publishing a talk, it's important that user update their meta tags and manifest.json

Maybe when they run "npm run build" I could display a message or question like "Hey, did you thought about updating your meta tags, favicon and manifest.json before publishing your talk online ?"

This issue intend to add the support for a new DeckDeckGo presenter

For the purpose of this project, at least in a first place, I will use socket.io

Therefore:

a. It should add the server side `socket.io support

b. It should add the client side socket.io-client, the presentation side, support. This support might be externalized and imported through a new Web Component

This a Feature Request for enhancing somewhat the dev/local experience 😎🤞.

It seems you are fond of QR Codes 🤓so here we go:

There exists a BrowserSync plugin called bs-console-qrcode.

• npm i bs-console-qrcode --save-dev
• Since there is a BrowserSync config file (bs-config.json), you just need to add a line :

{
  "files": [
    "./dist/**/*.{html,htm,css,js,svg}"
  ],
  "plugins": ["bs-console-qrcode"],
  "server": { "baseDir": "./dist" }
}

• Then run npm start, and you will see something like this :

• then scan it from a mobile device to open up the local PWA for example.

On iOS, this is as easy as opening up the photo app, looking at the QR Code, a popup will appear and you can click it, avoiding typing manually the address+port !

(I seem to recall having seen this idea from React Native CLI and found it useful)

Comments welcome, thank for your awesome work, btw! 👍

It seems that if the deck is deployed in domain.com/subpath then the service worker won't be registered, which is probably correct according the code:

<script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', async () => {
                try {
                    await navigator.serviceWorker.register('/service-worker.js');
                } catch (e) {
                    console.warn('No service worker registered');
                }
            });
        }
    </script>

But is there a way to make the service worker also registered if subcontext?
or should I just add a topic about this in the documentation?

It looks like the index.html generated by the starterkit is preprocessed after the workbox precache has been generated:

/tmp/tmp.m7nFVASGDh$ cat precache-manifest.*.js | grep -C 1 robots
    "revision": "48e31a01d05bbdc082454484a79bc663",
    "url": "robots.txt"
  }
/tmp/tmp.m7nFVASGDh$ cat robots.txt | md5sum
48e31a01d05bbdc082454484a79bc663  -
/tmp/tmp.m7nFVASGDh$ cat precache-manifest.*.js | grep -C 1 manifest
    "revision": "8aecb31893b276a119b944e6d023127f",
    "url": "manifest.json"
  },
/tmp/tmp.m7nFVASGDh$ cat manifest.json | md5sum
8aecb31893b276a119b944e6d023127f  -
/tmp/tmp.m7nFVASGDh$ cat precache-manifest.*.js | grep -C 1 index
    "revision": "d62f97ebf178d86897b025754caf96fb",
    "url": "index.html"
  },
/tmp/tmp.m7nFVASGDh$ cat index.html | md5sum
49b4f9d769a4aa5913f9de8adec8eb55  -

Is it possible that something is post-processing the index.html?

Add the ability to code the presentation using markdown

what do I have to do to update my deckdeckgo version?
this is my package.js file:

{ "name": "deckdeckgo-starter", "version": "1.0.0-beta.9", "description": "DeckDeckGo, the new tool to create lightweight presentation using HTML and Ionic components", "homepage": "https://deckdeckgo.com", "scripts": { "start": "concurrently --kill-others \"npm run watch\" \"npm run dev\"", "start-no-remote": "concurrently --kill-others \"npm run watch-no-remote\" \"npm run dev\"", "dev": "lite-server", "watch": "webpack --watch --mode development", "watch-no-remote": "webpack --watch --mode development --env.no-remote=true", "build": "webpack --mode production", "local": "concurrently --kill-others \"webpack --watch --mode development --env.local=true\" \"npm run dev\"" }, "author": { "name": "David Dal Busco", "email": "[email protected]", "web": "https://fluster.io" }, "repository": { "type": "git", "url": "git://github.com/fluster/deckdeckgo-starter.git" }, "devDependencies": { "clean-webpack-plugin": "^1.0.0", "concurrently": "^4.1.0", "copy-webpack-plugin": "^4.6.0", "css-loader": "^1.0.1", "file-loader": "^2.0.0", "html-webpack-plugin": "^4.0.0-beta.2", "lite-server": "^2.4.0", "style-loader": "^0.23.1", "webpack": "^4.26.1", "webpack-cli": "^3.1.2", "workbox-webpack-plugin": "^3.6.3" }, "license": "MIT", "dependencies": { "@ionic/core": "^4.0.0-beta.16", "@webcomponents/custom-elements": "^1.2.1", "deckdeckgo": "^1.0.0-beta.12", "deckdeckgo-remote": "^1.0.0-alpha.3", "ionicons": "^4.4.8" }, "keywords": [ "ionic", "stencil", "stenciljs", "web components", "pwa", "progressive web app", "presentation", "slides", "slideshow", "talk" ] }

If possible add only for prod build

Sometimes after a redeploy, the error "Service worker: Uncaught SyntaxError: Unexpected token <" at runtime is catcher by Google Chrome

Hello @peterpeterparker,

I was just trying the print result button but it seems not to be working, at least from my computer, as shown in this screenshot:

Result is just a blank page. Could you please confirm this?

I've tried it in Chrome and Safari.

Thank you.

David.

The size of the starter kit has become a bit bigger. I think it would be a great enhancement to:

• Use Typescript instead of plain JS
• Add Prettier

Should DeckDeckGo be provided as a snap package?

https://snapcraft.io

The short_name for the manifest.json should be trimmed to 12 characters

Failure: Manifest's short_name is too long (>12 characters) to be displayed on a homescreen without truncation.

When "connect" is explicitly called from the fab-buttons, slideTo() for slide of the deck to avoid to be not synchronized in term of slide number with the remote control

I visited the beta site in an up to date Firefox, version 60.9.0esr. (This browser version is less than a year old.) Pressing either the right arrow key or the next-slide button does nothing more than change the circle in the lower left from blue to white. I also get this in the browser console: TypeError: Argument 1 of IntersectionObserver.observe is not an object.

Firefox < v63 doesn't support (at least per default in v62) custom elements

Workaround: add the polyfill https://github.com/webcomponents/custom-elements

See discussion https://stackoverflow.com/questions/40677265/how-to-get-custom-elements-working-in-firefox

I could sit down next to a huge beamer, stream a presentation and adjust the text font-size (span, p, ul, ol mainly) on big screen

If possible, PWA/service worker cached the images (like Giphy gifs) fetched from other domains

Right now, there is an issue open in Ionic regarding the positioning of the fab when horizontal="end" and RTL

ionic-team/ionic-framework#17157
ionic-team/ionic-framework#17012

As a workaround the starterkit modifies end with start if set to RTL. When Ionic will be fixed, this should be removed

Maybe at the top right, add three dots icon or share icon something like that to add a social share action.

It would be cool to be able to quickly share the presentation as it is deployed as a PWA

For that purpose use the https://websocialshare.com Web Component ;)

Terser v3.16 break the prod build. In the meantime, downgrading to v3.14 solve the issue.

Once a fix will be released, the direct dependency could be removed

Reference: vuejs/vue-cli#3407 (comment)