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

maw

v0.6.0

Published

Make a website with Handlebars, LESS, and JS modules

Downloads

15

Readme

Make a Website (maw)

npm install maw

npm version

Make a static HTML page with some CSS, JS, and assets. Contains just the tools you need to write modern code and avoid repeating yourself. A gulpfile and webpack config in a box. It's written for internal needs, but I'd be happy to accept improvements if you find it useful too.

If you want to make a serious website with lots of pages, or you need a lot of customization or features, this is probably not going to work for you. You'll be much better served by something like Gatsby or Hexo.

This tool is 100% convention over configuration. Check out a site built with it here.

Using the tool

maw dev in the root of the project watches the /src directory, and puts the output in /build whenever files change.

maw build builds the site and puts the output in /build.

You probably want to npm install --save-dev maw and then add the above commands to a package.json, like in this site.

Directories

All of these are nested inside /src in the root of your project.

/public

This is for static files, which are copied directly into the output. That includes images, fonts, and pre-bundled libraries you want to use.

/index.less and /less

index.less is compiled into index.css. The /less directory is watched for LESS imports, so basically put everything except index.less in there.

/index.html and /templates

index.html is compiled into index.html and any handlebars code is evaluated against the files in /templates. The name of the template is the filename without the extension, for example nav.html can be included with {{> nav}}.

Multiple index.html files

You can nest multiple index.html files, for example /about/index.html, to give your website multiple pages.

/data.js

data.js should export any data you want to use in your handlebars templates, like so:

module.exports = {
  hello: 'world',
};

And then you can use it with:

<div>
  Hello, {{hello}}!
</div>

/index.js

index.js is a JavaScript entry point module that will be compiled with Webpack. Currently, no loaders are enabled.

TODO

  • [ ] Minification
  • [ ] Make it possible to set root directory to either the root of the repo or something other than /src