#javascript #ssg #toml-config #router #built #vanilla #file

app simple-router

A very, very rudementary SSG built in Rust & vanilla JavaScript

12 releases

0.1.11 Aug 19, 2024
0.1.10 Jul 31, 2024

#363 in Web programming

Download history 442/week @ 2024-07-11 9/week @ 2024-07-18 87/week @ 2024-07-25 64/week @ 2024-08-01 156/week @ 2024-08-15 15/week @ 2024-08-22

289 downloads per month

MIT license

36KB
932 lines

simple router

A very, very rudementary SSG built in Rust.

Configuration

The configuration file is located at simple-router.toml, and must be created for the application to work.

library_version = "0.1.11" # required! make sure this is up to date.

[out] # required!
path = "path/to/output/" # required! path to output directory
lib_file = "simple-router.js" # optional. name of JS library file relative to output directory

[source] # optional.
path = "." # path to the source directory
template = "layout.html" # path to template HTML file
exclude = [] # list of paths to exclude from 

[xml] # optional.
ignore_comments = true # remove comments from html

[js] # optional.
update_anchors = true # automatically update all <a> elements to use the router.
not_found = "404.html" # path to 404 page. needs to be the same as hosting provider's!

Templating

By default, layout.html is a special file that contains the template for the page. All other html files are considered pages.

<!-- layout.html -->

<html>
    <head>
        <!-- This is a placeholder (denoted by sr-prop="name").
             When the page gets loaded, the contents of this element will be replaced. -->
        <title sr-prop="title" /> 
    </head>
    <body>
        <!-- Properties starting with '__' are special. 
             - `__page` = Current path -->
        <h1 sr-prop="__page" /> 
        <div sr-prop="content" />
    </body>
</html>

<!-- index.html -->

<content> <!-- Elements at the root of a page are considered "properties" -->
    <!-- Placeholders will be filled in using properties of the same name. -->
    <p>Templating is so cool!</p> 
</content>
<title>Hello World</title>  <!-- Placeholders can contain both plain text and html. -->

JavaScript Interface

The JavaScript library creates a window.router property that lets you navigate to pages. By default, all anchor elements (a) that link to local pages will automatically be updated to use the interface.

window.router.goto("/cat.html"); // Navigate to cat.html

window.router.goto("/"); // Navigate to the root (index.html)

window.router.goto("/cat"); // Navigate to the cat folder (cat/index.html)

// Create an anchor element and set its href to '/cat.html'.
// Note: the href attribute doesn't actually affect where this link will go.
const anchorElement = window.router.anchor("/cat.html");

await window.router.goto("/about.html"); // Wait for the about page to load, then continue.

console.log(router.path); // Print current path.

history.back(); // Go back.

Additionally, there is JSDoc in src/simple_router.js.

Dependencies

~3–11MB
~118K SLoC