npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@doc-utils/utils

v1.0.7

Published

A set of simple JS utilities for a variety of things such as generating a table of contents, or adding slugs to headers

Downloads

333

Readme

doc-utils

doc-utils is a set of Javascript utilities designed for a variety of tasks related to managing documents such as blog posts. It is particularly useful when you don't have access to the rich plugin library available for remark, rehype, and retext.

Installation

doc-utils can be installed like any other NPM package.

npm install doc-utils

Usage

Headings

doc-utils contains a processing system for headers in which headers are parsed into a tree and processed. Which headers are processed are determined by a combination of a data attribute and valid heading elements. Currently, 4 'steps' are available:

  1. slugsGenerate and add IDs to heading elements
  2. autolinkAutomatically wrap heading elements in tags which link to the heading's ID
  3. tocAutomatically generate a table of contents with support for different classes at each level or a default set of classes
  4. enumerateAdd data-header-levels to header elements describing their level (e.g. 1, 1.1)

Basic usage

import {processHeadings, slugs, autoLink, toc} from 'doc-utils/headings.js'

processHeadings([slugs(), autoLink(), toc()])

It is important to note that each step is run in the order it is passed. For this reason, it is important to generate slugs before either of the other plugins run as they both rely on the header elements having IDs.

Customising header selection

By default, processHeadings will select header elements from <h1> to <h6> with the attribute data-doc-utils="true". This can be customised by passing configuration to processHeadings

processHeadings([slugs(), autoLink(), toc()], {
                dataAttribute: 'data-toc="true"', headers: ["h1", "h2", "h3"]
                });

Planned features

Step system

Currently, the system used by the header processing is entirely specific to header elements. It would be ideal to have a generic system which is based on ASTs (hast or nlcst). This hypothetical step system would track the root node of the AST in the DOM and use it to synchronize updates between the AST and the DOM. Basically, the goal is a generic step system which:

  • Works with hast or nlcst
  • Allows generic targeting of elements by plugins
  • Can synchronise ASTs and rendered content
  • Orders steps based on the elements and properties they modify and depend on

Natural language features

In addition to HTML processing, natural language processing using nlcst would be highly useful. One immediately obvious use case is finding keywords and keyphrases. However, expanding contractions and other features could also be implemented.