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

vuepress-theme-canvas

v0.2.0

Published

Custom theme for blogging based on Canvas

Downloads

5

Readme

Vuepress Canvas

Vuepress custom theme for blogging inspired on Canvas: a Simple, Powerful Blog Publishing Platform

You can see my own blog as an example.

Installation

As Easy as 1,2,3

First, create a docs folder if you don't have one yet:

mkdir docs && cd docs

Clone the repo:

git clone https://github.com/whoan/vuepress-canvas.git .vuepress

See it run:

.vuepress/run.sh

You will see a README file in your docs folder and it's there to let vuepress render the Home page. See more information here.

Important note: The root README will be ignored by the theme and it won't be listed as a blog post. For the same reason, all its content (except for the front matter) will be ignored.

Building your brand new blog

Once you placed your fantastic posts in your docs folder, build your blog like this:

# cd $your_docs_dir
.vuepress/node_modules/.bin/vuepress build

Set the config file to your needs

Now it's time to personalize your blog's information. Go and change the congif.js file with your personal data.

Features

You can set the lastModified date of a blog post in the Front Matter like this:

lastModified: '2018-05-09'

And you can set prev and next posts in the footer of your posts adding something like this also in the Front Matter:

prev: /some-prev-blog
next: /some-next-blog

To set your personal links in the header of the pages, you have the array usefulLinks in the config file.
You can also set the icon you want to show in each link. Here an example:

[{
  href: 'https://github.com/whoan',
  cssIcon: 'fa fa-fw fa-github'
}]

Limitations

This project is meant to be simple and it has some limitations. Some of them can be addressed with the time, others will never be implemented to maintain its simplicity.

These are the current limitations, based on what you can expect for a blog:

  • It lists all the markdown files at the same level regardless the directory they are placed in.
  • It doesn't have tags.
  • It doesn't have a search bar.
  • It doesn't have a lot of other things you can find in other blogs; but it's beautiful, something you don't find in a lot of other blogs.

Troubleshooting

I get a 404 error

It's due to you need a README.md in the root of the project. See the installation section.

I can't see the posts titles in the main page

Each markdown file (your posts) need a h1 header, so here you have a suggestion to write:

# My Awesome Post

I get compiling template errors

You need to see which are the hurting files and modify them accordingly to make them markdown compliant. Don't know really which are the common reasons for this problem.

Now you will see the titles the Home page.

License

MIT