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

hackers-tiny-slide-deck

v0.4.2

Published

Turn a Markdown document into a slide deck quickly.

Downloads

121

Readme

Hacker's Tiny Slide Deck (HTSD)

npm version CI

Turn a Markdown document into a slide deck, in two steps:

  1. Add a <script> tag referring the HTSD JavaScript bundle to the end of the Markdown document. For example, accessing the bundle from jsDelivr service:

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hackers-tiny-slide-deck@VERSION/build/htsd.min.js"></script>

    (Replace VERSION with the version of this npm package.)

  2. Convert the Markdown document into html. For example, using marked:

    marked -i example.md > example.html

This might be the preferable option for preparing a quick presentation.

Use an editor plugin to make step 2 easier, preferably via a keyboard shortcut. For example, markdown-mode for Emacs has the markdown-export-and-preview (C-c C-c v) command, which converts the .md file in the current buffer to a .html file and opens the html in the default browser.

To demonstrate the features quickly, see the sources of example.md and the converted html.

Features

  • Responsive CSS, with automatically scaling text size.
  • You can still adjust text size with the browser's zoom function.
  • Keyboard shortcuts to change slides:
    • ⬅️ (left arrow) to show the previous slide
    • ➡️ (right arrow) to show the next slide
    • Home to show the first slide
    • End to show the last slide
  • Keyboard shortcut to toggle fullscreen, Shift+F.
  • Swipe left and right gestures to change slides on mobile browsers.
  • Built for modern browsers (no support for old browsers).
  • Support browser history, remember current slide shown on reload.
  • Easy slide specific CSS styles with id attributes generated from headers.
  • Intentionally kept simple to allow easy hacking and customization. If you don't like something, download the source code and change it.
  • Tiny, currently 12 KiB in size (bundled, minified, not compressed).
  • Printing the html document is unaffected; CSS styles are for screen media only.
  • Might be one of the fastest ways to prepare a slide deck!

Usage

Prepare a Markdown document, with a <script> tag referring htsd.min.js:

# Title

I'm the first slide.

---

## Topic 1

I'm the second slide.

---

# End

Thank you!

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hackers-tiny-slide-deck@VERSION/build/htsd.min.js"></script>

Where VERSION in the <script>'s src attribute refers to a version of this npm package.)

Convert the .md file prepared above to .html. Here, using marked:

marked -i example.md > example.html

Conventions to turn Markdown into slides

This section lists the special conventions to turn the content of html generated from a Markdown document into slides.

Horizontal separators (<hr>) separate slides

## Slide 1

---

## Slide 2

The contents of each slide get wrapped in a <div> tag, with style class htsd-slide. Every slide will have that as the base class. In addition, slides may have additional modifier classes and id attributes; read below for more.

You can utilize the base class (htsd-slide) for styling global to all slides.

Modifier class for the highest level header in a slide

# Title

## Topic 1

I'm centered.

---

## Topic 2

I'm not centered.

Here, the slide with <h1>Title</h1> will have the htsd-slide--h1 modifier class in addition to the htsd-slide base class. HTSD includes CSS styles to center the content having the htsd-slide--h1 class.

The slide with <h2>Topic 2</h2> gets htsd-slide--h2 as the modifier class. HTSD has no special CSS styles for header levels below level 2, but you can add them yourself.

Id attribute for the highest level header in a slide

The text contents of the highest level header in each slide is used to generate the id attributes for them. You can use this in the CSS selectors to customize styles (see example.md).

Customization

Customize styles

Use a <style media="screen"> tag to customize styles. There are custom CSS properties to help your tuning needs:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700);

/* override css custom properties */
:root {
  --htsd-sans-font-family: 'Roboto', sans-serif;
  --htsd-slide-bg-color: #f6f6f6;
  --htsd-header-color: #262626;
  --htsd-text-color: #1a1a1a;
}

/* override rules with selectors */
.htsd-slide em {
  font-weight: bold;
}

See the end of example.md for more examples.

Syntax highlighting inside <code> tags

You can enable syntax highlighting inside <code> tags with an external JavaScript library, such as Prism.js.

See the end of example.md to see how to highlight code with Prism.js.

Install HTSD manually

By default, loading htsd.min.js with the <script> tag automatically installs all features. If you want to install features manually, use the data-manual attribute in the <script> tag. For example:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hackers-tiny-slide-deck@VERSION/build/htsd.min.js" data-manual></script>

HTSD provides the following object in window:

window.htsd = {
  // calls, in order:
  //
  // 1. installStyles
  // 2. installSlides
  // 3. installNavigation
  // 4. markInstalled
  installAll: () => undefined,

  // apply CSS styles by injecting a <style> tag into <head>;
  // this will make <body> invisible (the document goes blank)
  installStyles: () => undefined,

  // wrap content into <div class="htsd-slide"> tags, to be used as slides
  installSlides: () => undefined,

  // 1. enable handling the hash part of browser location
  // 2. show the selected slide (requires <body> to be visible, see `markInstalled`)
  // 3. make keyboard shortcuts and swipe gestures available
  installNavigation: () => undefined,

  // add `htsd--installed` class to the <body> tag, make <body> visible
  markInstalled: () => undefined

  // contains HTSD version number
  version: string
}

Now, you can call installAll manually:

<script type="text/javascript">htsd.installAll()</script>

Calling the install* or markInstalled functions more than once leads to undefined behavior. The implementation is simpler without attempting to handle the complexities in different call combinations.

License

MIT. See LICENSE.txt.