⚙️ headers-nav

In-page navigation by headers

Renders headers navigation menu. Requires JavaScript to view, does not show in preview. Example:

The example above uses almost no additional styling.

Code for this:

 ```h:headers-nav
 skipH1: true
 linkBack: <sup>&uarr;</sup>
 ```

→ See this page in edit mode.

Parameters

Parameters are YAML-formatted.

Parameter	Meaning	Type	Default
skipH1	Skips 1st level headers	Boolean	false
minLevel	Do not list headers with level less than param value	Number	0
maxLevel	Do not list headers with level higher than param value	Number	∞
appendTo	CSS selector of block, to which you want your menu to be appended to	String	undefined*
insertBefore	CSS selector of node, before which you want your menu to be appended	String	undefined
linkBack	HTML for link back to menu, which will be appended to each header (if this parameter is present)	String	undefined

* By default menu is rendered where you've inserted the helper code.

The rest of the page is here just for example!

When you load IMP! Locally, it opens up an editor, where you can enter or import your text, setup SEO tags and custom CSS. When the very same page is served over http, user gets a light, static HTML. Page does not require Java Script to be viewed, it's just plain HTML. Demo and docs.

Possible uses

Digital experiments
Small-scale sites
Anywhere, where you need "just html file".

System requirements

For authoring

Firefox or Chrome preferred (tested). If you've updated your browser within last 4 years, it should be fine.

For viewing

Any browser.

Features

Fully local thing — no server required, no setup. It's YOUR page!
Pages can be fully static, even text-based browser friendly (You'll need modern browser for editing)
You can add any HTML or JS to your page
All you need is browser, that means it fully multiplatform
Simple Markdown editor with pixel-perfect preview
Code highlighting
Customizable
Lo-fi 😃

How to start

Two clicks setup, with CDN

Click this link
Scroll down, click "Duplicate page" button
Enter any filename, ending with .html, save.

This setup does not require downloading of any other files. Editor and main CSS will be loaded from CDN. You may load newly downloaded file in your browser, edit content and settings, save it (see below) and than upload to your server.

Local setup (everything local, no CDN)

Download and unpack. There are 3 files: index.html, style.css and imp.js
Open the index.html in your browser (Firefox or Chrome is recommended)
Edit it, import or enter your text, preview it. Click the big "Export HTML" ("Save" in newer version) button and save file to the same directory. If you didn't change file name, overwrite old file.

You may skip imp.js while uploading files to server, as it's not required for viewing file.

Other

Customization

There is a field for custom CSS in each IMP! file for small adjustments. But you can replace the whole style.css with your own. There is nothing fancy about it.

More files

You can have as many imps as you want. If they would live in one directory, they will share single imp.js file.