npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

md2impress

v0.2.0

Published

a Markdown to Impress.js presentation generator

Downloads

4

Readme

md2impress Build Status

:pencil: generate web presentations from markdown!

Web App Demo

Installation

md2impress requires Node v8.3.0+ and npm. Download Node + npm here.

Run these commands to install the package and its dependencies

$ cd path/to/directory
$ npm install --save md2impress

or clone this repo using this command git clone [email protected]:louisjordan/md2impress.git

Developers

To run the web application locally, first clone the repository then navigate to the app directory. Next, install the dependencies and finally run npm start.

$ git clone [email protected]:louisjordan/md2impress.git
$ cd app
$ npm install
$ npm start

Usage

md2impress works in the browser and in Node and has a CLI interface

CLI

$ npm install --global md2impress
$ md2impress --input <file|dir> --output <dir> [options]

Options:

    -v, --version          output the version number
    -i, --input [input]    Markdown input directory or file path (default: current directory)
    -o, --output [output]  HTML output directory (default: input directory)
    -l, --layout [layout]  Presentation layout (default: 'manual')
    -s, --style [style]    Presentation style (default: 'basic')
    -t, --title [title]    Presentation title (default: input filename)
    -h, --help             output usage information

e.g:

$ md2impress -i ~/Documents/presentations -l spiral -s deep-purple

Node

$ npm install --save md2impress
const md2impress = require('md2impress');

const markdown = `
# Example Slide
Welcome to my *example* slide
------
# Slide 2
This is the second slide
`;

const html = md2impress(markdown, { layout: 'horizontal', style: 'basic', title: 'My Presentation' });

NOTE: if using md2impress in a bundled application, it is recommended to build the file separately by cloning the repository and running npm run build then importing it using a script tag as shown below.

Browser

<!doctype html>
<html>
  <body>
    <script src="path/to/md2impress.min.js"></script>
    <script>
      const markdown = `
# Example Slide
Welcome to my *example* slide
------
# Slide 2
This is the second slide
`;

      const html = window.md2impress(markdown, { layout: 'horizontal', style: 'basic', title: 'My Presentation' });
    </script>
  </body>
</html>

Features

Layouts

Layouts apply step coordinate attributes including x & y positions, rotation and scaling allowing for consistent presentation transitions.

In the CLI you can specify the layout using the -l [layout] (default is manual) flag e.g:

$ md2impress -i input/path -o output/path -l horizontal

Via the API you specify the layout in the options object e.g:

const html = md2impress(markdown, { layout: 'horizontal' });

Alternatively, you can specify your own attributes using the 'manual' layout mode. md2impress will read attributes for each slide like this:

<!-- x:100 y:200 rotation:90 -->

# Hello World!

======

<!-- x: 1000 y:500 rotation:0 scale:2 -->

## Example slide

Supported layouts:

| Layout Name | Description | | ----------- | ------------------------------------------------------------------------------------------ | | manual | Reads from each step's attributes comment | | horizontal | Display each step one after the other horizontally | | vertical | Display each step one after the other vertically | | spiral | Display steps as an Archimedean Spiral |

Styles

Styles apply CSS to your presentations allowing for consistent presentation designs with zero effort.

In the CLI you can specify the style using the -s [style] flag (default is basic) e.g:

$ md2impress -i input/path -o output/path -s minimalist

Via the API you specify the style in the options object e.g:

const html = md2impress(markdown, { style: 'minimalist' });

Supported styles:

| Name | Description | | ------------ | ---------------------------------- | | basic | Simple design, nothing too fancy | | impress-demo | Impress.js demo presentation style | | simple-blue | | | deep-purple | | | retro | |

Custom layouts and style

To create a custom layout or style, first clone this repository then:

Style

  • add the CSS file to ./src/styles/

Layout

  • add a JS file to ./src/layouts/ that exports a map iteration function (NOTE: see examples in ./src/layouts/)

then...

  • add the layout/style name to ./src/supported.json (NOTE: name must be the same as filename e.g. ./src/style/basic.css = 'basic')
  • run npm run build

Custom Styles

It is recommended to import the _defaults.css file to your custom stylesheets as a base to work from:

@import '_defaults.css';

.step {
  ...;
}