Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ytkj/outliner-loader

Last synced: 10 days ago
JSON representation

Host: GitHub
URL: https://github.com/ytkj/outliner-loader
Owner: ytkj
Created: 2017-05-12T11:14:38.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-01-06T02:15:11.000Z (almost 2 years ago)
Last Synced: 2024-11-28T23:18:17.323Z (27 days ago)
Language: JavaScript
Size: 173 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 8
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# outliner-loader

Extract outline structure from HTML, and generate table-of-contents.

## Example

### Input

```HTML

1. Chapter

aaa

1.1 Section

bbb

1.2 Section

ccc

2. Chapter

ddd

```

### Output

```HTML

1. Chapter
1. 1.1 Section
2. 1.2 Section

2. Chapter

1. Chapter

aaa

1.1 Section

bbb

1.2 Section

ccc

2. Chapter

ddd

```

## Install

1. `npm install -D outliner-loader`

## Usage

1. Configuration for Webpack 2
```javascript
module.exports = function(env) {
/* ... */
module: {
rules: [
{
test: /\.html$/,
use: [
/* ... */
{
loader: 'outliner-loader',
options: {/* */}
}
/* ... */
]
}
]
},
/* ... */
}
```
2. Write HTML Template file.
- template.html
```HTML

1. Chapter

```
- entry.js
```javascript
var template = require('./template.html');
document.getElementById('app').innerHTML = template;
```

## API (Options)

### outline.chapter

`outline.chpater` has two properties.

- `selector`: CSS selector for Level-1 element.
- Type: `string`
- Default: `'h1'`
- `hashAttr`: HTML attribute for URL hash.
- Type: `string`
- Default: `id`

### outline.section

`outline.section` has two properties.

- `selector`: CSS selector for Level-2 element.
- Type: `string`
- Default: `'h2'`
- `hashAttr`: HTML attribute for URL hash.
- Type: `string`
- Default: `id`

### outline.subsection

`outline.subsection` has two properties.

- `selector`: CSS selector for Level-3 element.
- Type: `string`
- Default: `'h3'`
- `hashAttr`: HTML attribute for URL hash.
- Type: `string`
- Default: `id`

### contents.outlet

`contents.outlet` has one property.

- `selector`: CSS selector for the element which generated table-of-contents append to.
- Type: `string`
- Default: `'#contents'`

### contents.list

`contents.list` has two properties.

- `parentTagName`: HTML Tag name for parent element of generated table-of-contents.
- Type: `string`
- Default: `'ol'`
- `childTagName`: HTML Tag name for child element of generated table-of-contents.
- Type: `string`
- Default: `'li'`

### contents.anchor

`contents.anchor` has one property.

- `template`: Template for anchor element in generated table-of-contents. Special key word '[hash]' and '[content]' is replaced by URL hash and headline title, respectively.
- Type: `string`
- Default: `'[content]'`

## Advanced example

### Options

- webpack.config.js
```javascript
module.exports = function() {
return {
module: {
rules: [{
test: /\.html$/,
use: [{
loader: 'outliner-loader',
options: {
outine: {
chapter: {
selector: 'custom-h[h-level="1"]',
hashAttr: 'h-id'
}
},
contents: {
outlet: {
selector: '#table-of-contents'
},
list: {
parentTagname: 'ul'
},
anchor: {
template: '[content]'
}
}
}
}]
}]
}
};
};
```

### Input
```HTML

1. Chapter

```

### Output
```HTML

1. Chapter

1. Chapter

```

## Setup for developers

1. `git clone https://github.com/ytkj/outliner-loader.git`
2. `cd outliner-loader`
3. `npm install`
4. `npm test`