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

architekt

v1.2.0

Published

A Dead Simple Static Site Generator Powered by Handlebars

Downloads

15

Readme

Architekt

Architekt is a dead-simple static site generator powered by Handlebars. It lets you dynamically run code to build page templates into static pages for you to use as documentation sites, static landing pages, etc.

Architekt is heavily inspired by Ruby on Rail's ActionView

Installation

Install Architekt globally from NPM

npm install -g architekt

Getting Started

Start by creating a new project

ark init MyProject # run ark gen -h for more options
cd MyProject

This will create a project skeleton for you to get started with. In the project root, you'll notice the following folders and directories:

  • build/ - Directory where the static pages will be put after rendering
  • src/ - Contains source code for pages
  • architekt.json - Configuration file

You can change where Architekt looks for resources, puts static pages, etc. in the architekt.json config file.

Now, navigate into the src/ directory and take a look at the folders that exist there. Each folder represents a resource that can be used to build your site.

Views

Views contains handlebars templates that will be rendered into web pages. Every template must follow the <page-name>.html.hbs naming convention. The resulting web page will be named <page-name>.html.

Controllers

Controllers contain the logic/data that will be plugged into each view. Controllers may be JSON or JavaScript files and must follow the naming convention <page-name>.[js,json]. When a JavaScript file is used, the module.exports object will be plugged into the page template. Files that start with an underscore will be ignored.

Stylesheets

Architect renders SASS stylesheets for you. All stylesheets must end in .scss or .sass, according to SASS conventions. Stylesheets must be in the stylesheets/ subdirectory within your assets directory. Partial stylesheets must start with an underscore, such as _stylesheet.scss. Partials are not outputted as css stylesheets, but may be imported into other stylesheets. The @import statement resolves stylesheets within the stylesheets/ directory or in node_modules.

Partials

Partials simply contain handlebars partials, and must follow the naming convention _<partial-name>.html.hbs. When using a partial in your pages, omit the leading underscore from the name. Partials must have a leading underscore in their name, otherwise they will be ignored!

Layouts

Layouts are simply advanced partials and are powered by handlebars-layouts. They follow the naming convention <layout-name>.html.hbs. For more information on how to use layouts, see the handlebars-layouts README.

Helpers

Helpers are JavaScript files that export Handlebars helper functions. The name of the file does not matter, as long as it ends in .js. You may export more that one helper function per file.

Rendering Your Site

Once you have written your templates, render the source code into a static site by running

ark render # See ark render -h for command options

Features TODO

The following are features we are planning on adding to Architekt:

  • Allowing subdirectories in resource/views/controllers directories
  • Assets resource directory support
  • SASS language compilation on ark render

Authors

License

Copyright (c) 2019 Open Sourcery. Licensed under the MIT license.