JSPM

hast-util-noddity

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q31717F
  • License SEE LICENSE IN LICENSE.md

Hast extension to parse noddity flavored text within HTML.

Package Exports

  • hast-util-noddity
  • hast-util-noddity/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hast-util-noddity) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hast-util-noddity

Micromark and hast extension to parse noddity syntax from within HTML.

Note: if you're looking for a more complete library, have a look at noddity-micromark-renderer. This package does not resolve Noddity links or anything like that, it just parses text in the HTML to a tree. If you don't need to support Noddity syntax from in HTML, look at mdast-util-noddity instead.

Install

This package is ESM only.

Install the usual ways:

npm install hast-util-noddity

Use

Suppose we have some Noddity syntax that looks like this:

<p>links [[file1.md#header1|with <em>html</em> inside]] are ::file2.md|allowed=yes::</p>

The hast would look something like this:

const hast = {
    type: 'element',
    tagName: 'p',
    children: [
        {
            type: 'text',
            value: 'links [[file1.md#header1|with ',
        },
        {
            type: 'element',
            tagName: 'em',
            children: [
                {
                    type: 'text',
                    value: 'html',
                },
            ],
        },
        {
            type: 'text',
            value: ' inside]] are ::file2.md|allowed=yes::',
        },
    ]
}

Now if we use this library, we can do something like this:

import { hastUtilNoddity } from 'hast-util-noddity'

const hastWithNoddity = await hastUtilNoddity(hast, {
    urlRenderer: async ({ file, id, nodes }) => {
        // return a list of hast nodes
        return [
            {
                type: 'element',
                tagName: 'a',
                properties: { href: `https://site.com/${file}${id ? `#${id}` : ''}` },
                children: nodes,
            }
        ]
    },
    templateRenderer: async ({ file, parameters }) => {
        // grab the `file` template and render it using the
        // parameters, then return a list of hast nodes
        return [
            {
                type: 'element',
                tagName: 'strong',
                children: [
                    {
                        type: 'text',
                        value: parameters
                    }
                ]
            }
        ]
    }
})

console.log(hastWithNoddity)

…now running this yields (positional info removed for brevity):

links [[file1.md#header1|with html inside]] are possible

{
    "type": "element",
    "tagName": "p",
    "children": [
        {
            "type": "text",
            "value": "links "
        },
        {
            "type": "element",
            "tagName": "a",
            "properties": { "href": "https://site.com/file1.md#header1" },
            "children": [
                {
                    "type": "text",
                    "value": "with"
                },
                {
                    "type": "element",
                    "tagName": "em",
                    "children": [
                        {
                            "type": "text",
                            "value": "html"
                        }
                    ]
                },
                {
                    "type": "text",
                    "value": "inside"
                }
            ]
        },
        {
            "type": "text",
            "value": " are "
        },
        {
            "type": "element",
            "tagName": "strong",
            "children": [
                {
                    "type": "text",
                    "value": "allowed=yes"
                }
            ]
        }
    ]
}

Bring your own template renderer, or check out noddity-micromark-renderer for a version that handles recursive templates.

License

Published and released under the Very Open License.

If you need a commercial license, contact me here.