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-yomonger

v0.1.5

Published

A yeoman generator for MODX Manager custom themes.

Downloads

26

Readme

yomonger

Meet yomonger (yo-modx-manager), a friendly little monster that lives in your computer. He loves three things:

Getting Started

The first thing we need to do, is make sure yomonger is happy. He is self consious about not being installed on every computer, but once he is setup on yours he is quickly satisfied. If you need some more convicing, you can watch a 3min screencast on Yomonger in action.

From your terminal, run:

npm install -g yo generator-yomonger

Now that you've installed yo and generator-yomonger globally you can use it from within any directory. While yomonger can occupy any directory, he'd much prefer to be within a local MODX install so he knows his way around a bit. So if you have one, let's head there and make our own theme. We'll call it custom-theme.

Creating a Theme Directory

# go to wherever your MODX install is
cd ~/Sites/modx/revolution/
# make a template directory
mkdir manager/templates/custom-theme

Note: Manually creating the theme directory is optional. Yomonger will take it upon himself if necessary, but he just wants to make sure you know where your stuff will wind up.

Great, that is where yomonger will assume he should create your project. Let's get him focused on the task at hand.

Creating a build directory

# go to wherever your MODX install is
cd ~/Sites/modx/revolution/
# make a build directory
cd _build/templates
mkdir custom-theme && cd $_

We are almost ready to let yomonger do his thing. But first, make note of your manager/templates/custom-theme directory relative to your build directory. It should be ../../../manager/templates/custom-theme. By default yomonger will hop up three directories (you should see him do it to) and then scurry into the manager/templates directory looking for a folder with the name of your theme. If you want him to go somewhere else, you can tell him so but not until he asks.

Generating a Project

From the terminal, run:

yo yomonger

You'll be greated by a friendly fellow named yeoman and then be asked several questions. Choose your answers carefully and let's meet back here when you are through.

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

...

Well hello there. That didn't take log. Let's see if he generated all your stuff.

├── .editorconfig
├── .jshintrc
├── bower.json
├── Gruntfile.js
├── package.json

He snuck a little something in there didn't he? Well probably that's because you told him to. If you asked for Sass you'll have a sass directory:

├── sass
│   ├── index.scss
│   ├── login.scss

If you asked to start with the included Sass files of the default manager theme he moved several files into place for you. Did you give him a tip?

├── sass
│   ├── _box-sizing.scss
│   ├── __buttons.scss
│   ├── _colors-and-vars.scss
│   ├── _forms.scss
│   ├── _help.scss
│   ├── _image-set.scss
│   ├── _navbar.scss
│   ├── _tabs.scss
│   ├── _tree.scss
│   ├── _uberbar.scss
│   ├── _utility.scss
│   ├── _xtheme-modx.scss
│   ├── components
│       ├── _components.scss
│       ├── _primary-button.scss
│       ├── _shaded-box.scss
│   ├── index.scss
│   ├── index.scss

If you went with Less or raw CSS, well you know what you got.

Building a Project

Now yomonger is a little compulsive, so he probably already did this for you. That's why you saw a bunch of npm stuff get installed. Let's have a look at what he did.

First he installed your node dependencies for you like this:

npm install

Then he just couldn't stand it, and had to see if your project would build successfully. Awesome, you got the works, all the grunt tasks you expect when contributing to the default Manager theme.

grunt build

Grunt Commands

Build Fetch dependencies (such as bourbon), move items into place and compile by running:

grunt build

Watch Compile the Sass and watch files for changes type the following:

grunt

Note: grunt is now watching files for changes. When Sass files are changed CSS will automatically be generated.Install the LiveReload browser extension to inject CSS changes without a page refresh.

Expand Compile Sass using expanded output style for development by running:

grunt expand