site-archive / rehype-custom-html.ts

import type { Plugin } from "unified";
import type {
  Root,
  Element,
  Node,
  ElementContent,
  RootContent,
  Text,
} from "hast";
type Options = {};

/*
  blockquote flags go in the first line
  they are formatted as:
  `$FLAG  `, where `FLAG` is the flag name
  there can only be one flag per blockquote
*/

function blockquote(node: Element) {
  for (const child of node.children) {
    if (child.type === "element" && child.children[0].type === "text") {
      const flag = child.children[0].value.match(/(?<=^\$).*/gm);
      if (flag?.length !== 1) continue;
      child.children.shift();
      // finiky to get types working bc shift mutation etc
      if (
        (child.children[0] as Node).type === "element" &&
        (child.children[0] as Node as Element).tagName === "br"
      )
        child.children.shift();

      node.properties[`data-bq-flag--${flag[0].toLowerCase()}`] = true;
    }
  }
}

/*
  image flags go in alt text
  if alt text has a pipe (|), there are flags
  all words up to the first pipe are treated as flags in a space seperated list
  they are added to the data tag as [data-img-flag--<name>="true"]
*/

function image(node: Element) {
  // get alt; throw error if missing; convert to string
  const alt = (
    node.properties.alt ??
    (() => {
      throw new Error("NO ALT TEXT!!!");
    })()
  ).toString();

  // match section before |
  const prefixes = alt.match(/.*?(?= \|.*)/gm);
  if (!prefixes) return;

  node.properties.alt = alt.match(/(?<= \| ).*/gm);
  const flags = prefixes[0].split(" ");
  for (const flag of flags) {
    node.properties[`data-img-flag--${flag}`] = true;
  }
}

/*
  paragraph flags go at the start 
  to use paragraph flags, include the following syntax at the start of a paragraph:
  `::FLAG[::FLAG]*::`, where FLAG is a flag which is included as [data-para-flag--FLAG]
  if FLAG starts with an `@`, it will be treated as a directive
  current directives:
    - @nest: replaces children with a p tag and moves children into it
    - @div: replaces self with div
*/

function para(value: Text, parent: Element) {
  const flags = value.value.match(/(?<=^::).*(?=::)/gm);

  if (!flags) return;

  const txt = value.value.match(/(?<=^::.*:: ).*/gm);
  value.value =
    !txt || txt.length !== 1 ? "Err: Parser Error (custom HTML)" : txt[0];

  for (const flag of flags[0].split("::")) {
    if (flag[0] === "@") {
      switch (flag.slice(1)) {
        case "nest": {
          const prevChildren = parent.children;
          parent.children = [
            {
              type: "element",
              tagName: "p",
              properties: {},
              children: prevChildren,
            } satisfies Element,
          ];
          break;
        }
        case "div": {
          parent.tagName = "div";
          break;
        }
        default: {
          console.warn("Unknown paragraph directive:", flag);
        }
      }
    } else parent.properties[`data-para-flag--${flag}`] = true;
  }
}

const forChild = (children: ElementContent[] | RootContent[]) => {
  for (const node of children) {
    if (node.type !== "element") continue;

    switch (node.tagName) {
      case "blockquote": {
        blockquote(node);
        break;
      }

      case "img": {
        image(node);
        break;
      }

      case "p": {
        if (node.children[0].type === "text") para(node.children[0], node);
        forChild(node.children);
        break;
      }

      case "pre": {
        if (node.properties["tabindex"]) node.properties["tabindex"] = "-1";
        break;
      }

      case "ul":
        {
          node.children.forEach((x) => {
            if (x.type === "element" && x.tagName === "li") {
              const contents = x.children.map((y) => {
                if (
                  y.type === "element" &&
                  y.tagName === "input" &&
                  y.properties.type === "checkbox"
                )
                  y.properties["aria-label"] = y.properties.checked
                    ? "Checked checkbox"
                    : "Unchecked checkbox";
                return y;
              });

              x.children = [
                {
                  type: "element",
                  tagName: "label",
                  properties: {},
                  children: contents,
                },
              ];
            }
          });
        }

        break;
    }
  }
};

const plugin: Plugin<[Options], Root> = function (options) {
  return function (root, _) {
    forChild(root.children);
  };
};

export default plugin;