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

generator-simple-bespoke

v1.0.0

Published

Yeoman generator for a simple Bespoke.js setup

Downloads

10

Readme

generator-simple-bespoke

Yeoman generator for a simple Bespoke.js setup.

Bespoke.js is a module to create HTML 5 slideshows. It's design is extremely modular, and functionality is usually achieved via plugins. There is an official generator for Yeoman, but I'm not very happy with its setup, so I decided to roll out my own.

Yeoman is a scaffolding tool. It will produce templates for different types of projects, which you can configure.

The slideshow template that is generated features the following:

Installation

Install Yeoman if you don't have it in your system. The generated template uses Gulp to run tasks (build Browserify, publish the slideshow in Github pages) so you will need to install it as well.

npm -g install yo gulp

Install the generator:

npm install generator-simple-bespoke

To build the slideshow, publish it on Github, etc. you will need Gulp as a task runner:

npm install -g gulp

Usage

### Generate the template

Now create an empty directory for your slideshow project, and run Yeoman inside it:

mkdir slides
cd slides
yo simple-bespoke

You will be asked the title of your talk, whether you need syntax highlighting code, etc.

Making the slideshow

You can create a release in a dist directory, ready to be consumed (or deployed via rsync to a server):

gulp dist

While you are writing the presentation, it is usually more convenient to have Gulp automatically rebuild the assets as you are modifying them. You can use the dev task to do this. This will also reload your browser automatically.

gulp dev

To clean up the dist folder and development build files, run:

gulp clean

Deploying to Github Pages

If you want to deploy to Github Pages, you will need to answer Y when prompted and setup a Github repository for this project. Then run:

gulp deploy

About themes

I find that Bespoke.js theme plugins are hard to work with. The way the work is by analysing a stylesheet and then applying those styles, inline, with JavaScript, to elements of the DOM.

This has several disadvantages, such as ruining the CSS cascade and making the theme extremely hard to customise.

This generator does not use that theme system. Instead, a simple stylesheet is provided with barebones functionality (so you can have an actual slideshow). You can add your own styles to this stylesheet.

Changelog

1.0.0:

  • First version

License

generator-simple-bespoke is released under the MIT license. Read LICENSE for details.