Pink is a tool for writing and running HTML based slide decks.
Pink can be installed via npm:
$ npm install -g pink
$ mkdir ohai-presentation$ cd ohai-presentation$ pink init
The above gives you a template project, containing the following:
slides.js. This file is responsible for running your slide deck, and it's where you can add functionality to your slides through modules, and load CSS themes.
index.htmlfile, which is where your actual slides go.
You can launch your slides as a web server using this command launched from your presentation directory:
$ pink run
Using the template project, this should get you a single slide containing the words "OMG SLIDES."
The following keybindings allow you to navigate the slides:
Left- navigate backwards
Right- navigate forwards
F9- toggle dual screen mode
If you're on a device with a touchscreen, you can also navigate backwards and forwards by swiping horizontally.
Looking at the
index.html file, you'll notice that there's not much in it apart from the HTML header, a script tag which loads Pink, and a
<div id="slides"> containing a single
<section> represents one single slide. Sections can't be nested—Pink slide decks have only one dimension.
<section> block, you'll describe a slide using HTML. Pink is designed to be accommodating about what consititutes a slide, but usually you'll have one or a combination of a header, a paragraph of text, a bullet list, or just an image.
How Do I Shot Webhello internets, can u pls halp how do i shot webengage web shoterdouble click on shot button
A Pink slide deck is physically organised as a sequence of slides, but it's more correct to think of one as a sequence of fragments. There's nothing worse than a slide throwing several minutes worth of exposition in your face in one go, so usually you want to split it up into parts which will appear gradually as you advance through the presentation.
hello this is my first pointthis point appears when I ask for the next slideand this appears as the next next slideand this is the next next next slide
The above example is all a single slide, but it's actually four distinct events as you page through your presentation. First, the slide appears containing only the first bullet point. Navigate forward, and instead of a new slide the second bullet point will appear, and so on until you have four bullet points on screen. Only then will navigating forward advance to the next slide. Of course, navigating backwards through the presentation will remove each fragment in turn until you get to the slide's initial state, then move to the previous slide.
Themes are simply CSS files modifying the appearance of your HTML slides. To load one of Pink's bundled themes, add the following line to the start of your
This will load the specified CSS (or, in this case, a LESS file which will be converted to CSS) and apply it to your HTML document.
Pink uses Webpack to assemble the presentation code. The
require function in the example above is like the CommonJS
require, except it can load anything Pink's Webpack configuration supports. This includes CSS and LESS.
If you've got your own local CSS file, you might thus load it using something like this:
Or you could even load one from an external package:
This would attempt to load the file
node_modules/very-good-theme/theme.less relative to your project directory. Pink will search for modules just like you'd expect from Node, as well as inside the global Pink module. Loading the
dijkstra.less theme above was an example of the latter.
Naturally, you can add a
package.json file to set up dependencies to be installed. It's not required by Pink, but it's the recommended way to deal with dependencies for your slide deck.
You can add functionality to Pink through its module system. Modules are normally enabled on a per-slide basis, and the set of modules to use is configured in the Pink constructor.
In addition to
require functions loading themes and Pink itself, the
slides.js file contains a constructor
new Pink(...);, which takes as its first argument a DOM element or CSS selector describing where to install Pink in your document, and a list of modules to load represented by a map from module name to module content.
You get the two most basic modules by default with the template:
background module lets you add slide specific backgrounds by adding a
data-background attribute to the slide's
section tag. Likewise, the
image module supports a
data-image attribute on the
section tag which sets the background of the slide area, as opposed to the area behind the slide.
data-background attribute corresponds directly to the
"background" key on the object you pass to the constructor. You could change it to something else if you like; the
background module has no other relationship to it. Pink simply looks at each
section tag, and if it has a data attribute corresponding to a module as defined in the constructor, it enabled the module for that slide and passes the contents of the data attribute as an argument.
If you want a module to be active on every slide, set the data attribute on the container element (the element you pass as the constructor's first argument). The value of this data attribute can be overridden on each section, so if you set
data-background="doge.png" on the parent element,
doge.png will be the background for all slides without a
data-background attribute, but a
section tag with
data-background="catte.png" would instead have
catte.png as its background.
Some modules may observe other data attributes as well, but they do so by their own mechanisms.
As well as the
pink run command to launch a local web server, there's the
pink build command, which will build the required assets for your presentation to be run as a static web page. Simply run
pink build slides.js, and the
dist directory inside your project will be populated with the necessary assets. You can deploy this along with the
index.html file and whatever other assets you may have added (such as an image directory, maybe) to a static web server anywhere you like.
Pink comes with the following modules bundled:
background module lets you specify an image to be displayed behind a slide. It will be automatically scaled to fill the available space completely.
image module lets you set a background image for the slide's body. This is primarily useful for slides meant to only show an image, with perhaps a caption overlaid on it.
This is Pink's embedded code editor, intended for live coding presentations. It's nowhere close to stable at the moment, nor is its API. It'll be documented when it is.
Copyright 2014 Bodil Stokke
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.