@substrate-system/anchor v0.0.5

anchor

Add anchor links to the headings in a document.

See a live demo

This has been adapted from bryanbraun/anchorjs. Thanks @bryanbraun for working in open source.

• install
• Example
• Modules
  • ESM
  • Common JS
  • pre-built JS
• API
  • options
  • Upper case Anchor
  • Lower case anchor

install

npm i -S @substrate-system/anchor

Example

See the example page: substrate-system.github.io/anchor/

// import a function
import { anchor } from '@substrate-system/anchor'

// import the class
import { Anchor } from '@substrate-system/anchor'

// Use defaults for everything.
// This will target any h2, h3, h4, or h5 tags
anchor()

// Or use the class.
// Must call a.add after creating an instance
const a = new Anchor()

Modules

This exposes ESM and common JS via package.json exports field.

ESM

import { Anchor } from '@substrate-system/anchor'

Common JS

const Anchor = require('@substrate-system/anchor/module')

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/anchor/dist/index.min.js ./public/anchor.min.js

HTML

<script type="module" src="./anchor.min.js"></script>

API

options

type AnchorOpts = {
    // Characters like  '#', '¶', '❡', or '§'.
    icon:string;
    visible:'hover'|'always'|'touch';
    placement:'right'|'left';
    ariaLabel:string;  // any text, default "Anchor"
    class:string;  // css class name
    base:string;  // any base URI
    truncate:number;  // Max length. Default 64
    titleText:string;  // any text
}

Upper case Anchor

class Anchor {
    constructor (opts:Partial<AnchorOpts> = {
        icon: '\uE9CB',
        visible: 'always'
    })
}

Lower case anchor

Lower case anchor is a function that will create a new Anchor and call .add().

!NOTE
Call this with { visible: 'touch' } to create anchor links that are always visible on touch devices.

function anchor (opts:Partial<AnchorOpts> = {}):Anchor

import { anchor } from '@substrate-system/anchor'

anchor({ visible: 'touch' })