https://github.com/morganconrad/outliner
Create outlines from HTML Headings
https://github.com/morganconrad/outliner
Last synced: 11 months ago
JSON representation
Create outlines from HTML Headings
- Host: GitHub
- URL: https://github.com/morganconrad/outliner
- Owner: MorganConrad
- License: mit
- Created: 2021-12-24T20:36:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-24T20:54:20.000Z (over 4 years ago)
- Last Synced: 2025-03-01T00:11:44.409Z (over 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
outliner
====
Convert Heading tags (h2, h3, ...) to an outline with links. _e.g._
```html
Top Heading
Heading 1
lorem ipsum
Heading 2
lorem ipsum
Heading 2.1
lorem ipsum
Heading 2.2
lorem ipsum
Heading 2.3
lorem ipsum
Heading 2.3.1
lorem ipsum
Heading 2.3.2
lorem ipsum
Heading 3
```
becomes something like (spacing added for clarity):
```html
```
## Usage
```js
import { buildOutline } from "outliner";
let inputHtml = get html from your webpage
let outline = buildOutline(inputHtml, options);
// insert outline.html into your web page somewhere
```
## Options
### minH (default = 2)
Minimum header level to use
### maxH (default = 3)
Maximum header level to use
### linkRoot (default = "#")
Preprend this to all created hrefs, _unless_ they start with "http"
### a (default = '')
Add this inside all a tags. In the example above, `options.a = 'class="outliner-a"'`
### ul (default = '')
Add this inside all ul tags. In the example above, `options.ul = 'class="outliner-ul"'`
### li (default = '')
Add this inside all a tags. In the example above, `options.li = ''`
### rootEl (default = null)
A "root node" is needed to hold the headings, at least temporarily. By default, one will be created, and then "left out" when creating the resulting outline. However, if you want it kept, provide an object here for the rootElement. It may contain
```
{
id, // the href or id
text
}
```
## Complex Options
By passing functions for `createA`, `createUL`, or `openLI` you can take near complete control over the format of your outline. All three take the form (e.g. createA)
```js
function createA(node, options) {
// return a string bound by ' ...
}
function createUL(node, children, options) {
// return a string bound by '
- ...
// (or, if you prefer order,
- )
- when appropriate
}```
The `node` is an instance of an HNode, with the fields
```js
{
parent: an HNode or null,
children: HNode[],
attribs: {},
id: a String, or '', used for the href link
level: integer, for example 2 for an h2,
name: string, for example "h2",
text: string or ''
}
```
}
function openLI(node, options) {
// return a string starting with '