rehypejs / ideas Goto Github PK

I've created a small generic asset inliner that I'm using for one of my projects:

https://github.com/marko-knoebl/rehype-inline

It's currently installable as npm package @karuga/rehype-inline - I'm planning to drop the username prefix.

It inlines css, js and img elements. In contrast to the existing rehype-inline-svg its main goal is creating a single HTML file and not so much optimizing for speed.

I guess this could be included in the list of plugins in the rehype documentation. Before that I'm happy about feedback / testing / suggestions.

remark-lint is awesome! Let's make the same thing for rehype!

CodeMirror is a code editor. But it is also providing runmode which just does syntax highlighting like highlight.js.

I've already roughly tried in here.

BoostIO/BoostNote-App@db2e16c#diff-55439261af156770136159a7b2bd0271R33-R138

There is an API available for KaTeX.

Something like https://github.com/Smile4ever/Neat-URL

Would be nice to run this on user-generated content, e.g., on the unified explore page where we render readmes, to remove tracking for our users.

Based on a discussion with @wooorm and @kmck in gitter https://gitter.im/unifiedjs/Lobby?at=5b0db4fce26c847ac89f59bb

In a browser context parse5 add significant weight to bundled JavaScript.
Parse5 mostly functions as a replacement for the DOM model, but in a browser DOM will exist, and parse5 could be dropped.
Allowing direct conversion of DOM to HAST.

I've been thinking about how HAST can work with https://github.com/Polymer/lit-html . Some potential ideas:

• Converting the HAST to a lit-html template could allow us to use the lit-html's efficiently rendering?
• Maybe using plugins to add directives and event binding? Some experimental examples are below. I'm debating if this is any more useful than just writing custom elements.

Add a click event tolis:

export const click = () => {
  return (tree: UNIST.Node, vfile: VFile) => {
    
    visit(tree, ['element'], (node: MDAST.Link, index, parent) => {
      if (node.tagName === 'li') {
        const n = {
          type: LIT_TYPE,
          template: c => html`<li @click="${onClick}">${c}</li>`, // children are added back later
          children: node.children
        };

        parent.children.splice(index, 1, n);
        return true; 
      }
    });
  };

  function onClick(e) {
    e.stopPropagation();
    this.classList.toggle('hidden')
  }
};

Convert an elements to a timed counter:

export const clock = () => {
  const wait = (t) => new Promise((resolve) => setTimeout(resolve, t));

  async function* countUp() {
    let i = 0;
    while (true) {
      yield i++;
      await wait(1000);
    }
  }

  return (tree: UNIST.Node, vfile: VFile) => {
    visit(tree, ['element'], (node: MDAST.Link, index, parent) => {
      if (node.tagName === 'strong') {
        const n = {
          type: LIT_TYPE,
          template: c => html`<span>Count: ${asyncReplace(countUp())}</span>`,
          children: node.children
        };

        parent.children.splice(index, 1, n);
        return true; 
      }
    });
  };
};