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

simple-static-router

v1.1.0

Published

The Simple Static Router is a lightweight, easy-to-use HTTP server that serves static HTML pages. It comes with a built-in cache system and a simple way to include CSS and JavaScript files within your HTML pages.

Downloads

3

Readme

Simple Static Router

The Simple Static Router is a lightweight, easy-to-use HTTP server that serves static HTML pages. It comes with a built-in cache system and a simple way to include CSS and JavaScript files within your HTML pages.

Features

  1. Routing for multiple pages
  2. Sub-routing for nested pages
  3. Custom 404 page
  4. Built-in cache for HTML pages
  5. Support for adding styles and scripts to HTML pages
  6. Support for embedding variables in HTML pages

Usage

npm i simple-static-router

First, create an instance of the Router class by providing a port number and optional settings. The default settings are:

{
  pagesDir: 'pages', // directory where HTML pages are stored
  stylesDir: 'styles', // directory where styles are stored
  scriptsDir: 'scripts', // directory where scripts are stored
  homePage: 'home', // name of the home page (page for the "/" route)
  errorPage: 'notFound', // name of the 404 page
  defaultStyle: 'style.css', // name of the default style
  defaultScript: 'script.js', // name of the default script
  htmlFt: '.html', // file type for HTML pages
  clearCache: 10 // seconds to clear the cache
}

For Example:

const Router = require('simple-static-router');
const router = new Router(3000);

To start the server, call the start method of the Router instance:

router.start();

To specify custom settings:

const router = new Router(3000, {
  pagesDir: 'myPages',
  stylesDir: 'myStyles',
  scriptsDir: 'myScripts',
  homePage: 'index',
  errorPage: '404',
  defaultStyle: 'main.css',
  defaultScript: 'main.js',
  htmlFt: '.htm',
  clearCache: 30
});

// OR for editing specific settings:

const router = new Router(3000);
router.SETTINGS.HTML_FT = ".htm";
router.SETTINGS.CLEAR_CACHE_TIMING: 25 // seconds

Caching

Caching The router implements a simple cache that stores the processed HTML pages. The cache is cleared every clearCache seconds (as specified in the settings object passed to the constructor). You can disable caching by setting clearCache to 0.

File Management

In SS-Router, you will need to create a pages directory at the root of your project. Inside this directory, you should create a .html file for each page you want to be able to access on your server. You can also create subroutes by including a + symbol in your file names. For example, if you want to create a route at /about/team, you would create a file called about+team.html. In addition to the pages directory, you can also create a styles and scripts directory to store your CSS and JavaScript files, respectively. These will be automatically included in your HTML pages when you use the provided syntax.

Events

Two events get called on the router instance, one immediately when a request is recieved and the other when the html is being sent back as response;

router.on('get', (req, res) {
  // ...idk, change some variable value for a specific route ig, idk
})

router.on('page', (route, htmlPage) {
  // ...idk, no clue
})

get event gets called immediately on recieving a request. page event gets called afterwards (nanosecs later), when the processing is done and page is being sent.

get can be used to modify/process some values before rendering a route. page can be used to play with the actual html or route after the page is sent.

HTML Page Structure

To specify styles and scripts in an HTML page, use the following syntax: For styles:

<style>
  /*[ "style.css", "error.css" ]*/
</style>

say you only want the default stylesheet ("style.css" : or whatever you specified in the settings)
<style>
  /* [] */
</style>

For scripts:

<scripts>
  // [ "script.js", "error.js" ]
</scripts>

OR, for default script only ("script.js"):
<scripts>
  // []
</scripts>

Embed variables

Define them in the variable propery of the Router:

router.variable = {
  name: "SS-Client"
}

Refer to them as variable.name. For HTML:

<body>
  <h1>README for <!--variable.name--> (all lowercase and no space in between)</h1>
<body>

For JS:

function click() {
  alert("/*variable.name*/'s README"); // lowecase, no space
}