@infosupport/kc-cli

kc-cli

The one-stop-shop for @infosupport employees to create and serve slick Reveal.js presentations.

Install

Both local and global installations are possible.

Local

With this, you are free to choose when you want to upgrade to newer versions containing, for example, a new corporate design.

You will have to make it an npm project.

npm init --yes
npm install @infosupport/kc-cli # Windows
npm install @infosupport/kc-cli --unsafe-perm=true # Linux

Then, in the package.json, add a start script:

{
    "scripts": {
        "start": "kc serve"
    }
}

Global

This has the advantage that you only have to install it and you're ready to go.

npm install --global @infosupport/kc-cli # Windows
npm install --global @infosupport/kc-cli --unsafe-perm=true # Linux

PDF printer

The print-to-PDF command, kc print, has been placed in a different repo to circumvent installation problems. If you want to use this command, this dependency needs to be installed as well.

# Local
npm install @infosupport/kc-print # Windows
npm install @infosupport/kc-print --unsafe-perm=true # Linux

# Global
npm install --global @infosupport/kc-print # Windows
npm install --global @infosupport/kc-print --unsafe-perm=true # Linux

Should this command fail, please read the README on the kc-print repo.

Usage

1. Open your favorite texteditor (e.g., Visual Studio Code)
2. Create a ./slides folder and add markdown slides
3. Create a ./labs folder and add markdown files

Check the example/ folder for an example presentation with custom CSS and web component.

To view your presentation:

npm start    # for local installations

kc serve     # for global installations

Serve

option	description
kc serve	serve presentation from current directory on default port
kc serve -o	open presentation in default browser
kc serve -p	use random port
kc serve -p <port>	use specified <port>

Print

This will export your slides to PDF using Decktape and Hummus. First, Decktape reads all the presentation slides and uses Hummus to generate a PDF where every page is a slide. With a bit of custom code, this PDF is transformed into a PDF that fits our corporate design.

First, serve your presentation (kc serve). Then run kc print.

option	description
kc print	print presentation to pdf using default url (http://localhost:15000) and the folder name as filename
kc print --url [url]	use specified url
kc print --output [filename]	use specified filename
kc print --per-module	generate a PDF for each module

Linting

option	description
kc lint	diagnose issues for when the presentation isn't running as it should

Corporate identity

By default, the corporate identity is applied to every slide. Certain slides can receive specific theming.

• For the welcoming slide, often the very first slide, add <!-- .slide: class="is-welcome" -->
• For a new chapter, add <!-- .slide: class="is-module" -->
• For the closing slide, the very last slide, add <!-- .slide: class="is-closing" -->
• To add a lab slide, add <!-- .slide: class="is-lab" -->
• To disable theming, add <!-- .slide: class="is-empty" -->

Web Components

With Reveal.js, we can leverage Web Components to make slides more awesome. Right now, you can use these components out-of-the-box.

Note that web components are not natively supported in IE/Edge and this CLI is quite comfortable with not making any effort whatsoever to make it work in those browsers.

web component	description
<kc-timeline events='[{ "year": 2019, "caption": "cool stuff", "description": "detailed explanation of cool stuff" }]'>	A graphical visualization of a timeline.

If you have (created or not) a web component that should be in this list, please let us know.

Customization and fun stuff

• The free version of font awesome v5 is included by default.
• Add your own custom CSS by creating a folder css and placing .css files in there.
• Add your own web components by creating a folder web-components with subfolders for every components. The main .js file should be the same name as the folder it's in.

Example folder structure:

|-- css
    |-- code.css
    |-- layout.css
|-- labs
    |-- ...
|-- slides
    |-- ...
|-- web-components
    |-- cool-graph
        |-- cool-graph.js
        |-- cool-graph.html.js
        |-- cool-graph.css.js

Roadmap

Nothing in particular at the moment.

Known issues

• When printing to PDF using kc print, some fonts, especially the font for the code blocks, don't render as they're shown on-screen. See this issue.
• When printing to PDF using kc print, the HummusJS library is deprecated and doesn't work on Node 13