markdown-to-html-cli 3.2.11 → 3.2.14

package/lib/nodes/markdown-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-style.js","sourceRoot":"","sources":["../../src/nodes/markdown-style.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAs/BpB,CAAA;AAED,MAAM,UAAU,aAAa,CAAC,KAAuB;IACnD,OAAO,CAAC;YACN,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,uDAAuD;aACxD;YACD,QAAQ,EAAE,CAAC;oBACT,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,YAAY;iBACpB,CAAC;SACH,EAAE;YACD,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,KAAK;YACd,UAAU,EAAE;gBACV,KAAK,EAAE,6DAA6D;aACrE;YACD,QAAQ,EAAE,CAAC;oBACT,IAAI,EAAE,SAAS;oBACf,OAAO,EAAE,gBAAgB;oBACzB,QAAQ,EAAE,KAAK;iBAChB,CAAC;SACH,CAAC,CAAA;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-to-html-cli",
-  "version": "3.2.11",
+  "version": "3.2.14",
   "license": "MIT",
   "description": "Command line tool generates markdown as html.",
   "homepage": "https://jaywcjlove.github.io/markdown-to-html-cli",
@@ -34,31 +34,22 @@
   },
   "files": [
     "lib",
-    "github-fork-ribbon.css",
-    "github.css"
+    "src"
   ],
   "dependencies": {
-    "@mapbox/rehype-prism": "~0.8.0",
     "@types/fs-extra": "~9.0.13",
     "@types/minimist": "~1.2.2",
+    "@uiw/github-corners": "~1.5.10",
+    "@wcj/markdown-style": "~1.0.1",
+    "@wcj/markdown-to-html": "~2.0.2",
     "fs-extra": "~10.0.0",
     "minimist": "~1.2.5",
-    "rehype-attr": "~2.0.7",
     "rehype-autolink-headings": "~6.1.0",
     "rehype-document": "~6.0.1",
     "rehype-format": "~4.0.1",
-    "rehype-meta": "~3.2.0",
-    "rehype-raw": "~6.1.0",
-    "rehype-rewrite": "~3.0.4",
+    "rehype-prism-plus": "~1.3.2",
     "rehype-slug": "~5.0.0",
-    "rehype-stringify": "~9.0.2",
     "rehype-urls": "~1.1.1",
-    "rehype-video": "~1.1.1",
-    "rehype-wrap": "~1.0.10",
-    "remark-gemoji": "~7.0.1",
-    "remark-gfm": "~3.0.1",
-    "remark-parse": "~10.0.1",
-    "remark-rehype": "~10.1.0",
-    "unified": "~10.1.1"
+    "remark-gemoji": "~7.0.1"
   }
 }

package/src/cli.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { run } from './index';
+
+run();

package/src/create.ts

@@ -0,0 +1,101 @@
+import markdown, { Options } from '@wcj/markdown-to-html';
+import { getCodeString } from 'rehype-rewrite';
+import rehypeDocument from 'rehype-document';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import remarkGemoji from 'remark-gemoji';
+// @ts-ignore
+import rehypeUrls from 'rehype-urls';
+import rehypeFormat from 'rehype-format';
+import { githubCorners } from './nodes/github-corners';
+import { githubCornersFork } from './nodes/github-corners-fork';
+import { octiconLink } from './nodes/octiconLink';
+import { markdownStyle } from './nodes/markdown-style';
+import { copyElement, copyStyle, copyScript } from './nodes/copy';
+import { darkMode } from './nodes/dark-mode';
+import { MDToHTMLOptions } from './';
+
+// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-when-using-the-experimental-modules-flag
+// export const _dirname = dirname(fileURLToPath(import.meta.url));
+// const filename = fileURLToPath(import.meta.url);
+// const dirname = path.dirname(filename);
+
+export const _dirname = __dirname;
+export interface CreateOptions extends MDToHTMLOptions { }
+
+export function create(options: MDToHTMLOptions = {}) {
+  const { markdown: string, document, rewrite, reurls = {} } = options;
+  
+  const mdOptions: Options = {
+    hastNode: false,
+    remarkPlugins: [remarkGemoji],
+    rehypePlugins: [
+      [rehypeUrls, (url: any) => {
+        if (reurls[url.href]) {
+          url.path = reurls[url.href];
+          return url.path;
+        }
+      }],
+      [rehypeSlug],
+      [rehypeAutolinkHeadings],
+      [rehypeFormat],
+    ],
+    rewrite: (node, index, parent) => {
+      if ((node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root')) {
+        node.children = markdownStyle(node.children as any);
+        darkMode().forEach(item => node.children.unshift(item));
+      }
+      if (options['github-corners'] && ((document && node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root'))) {
+        node.children = Array.isArray(node.children) ? node.children : [];
+        if (options['github-corners-fork']) {
+          node.children.unshift(githubCornersFork({ href: options['github-corners'] }));
+        } else {
+          githubCorners({ href: options['github-corners'] }).forEach(item => {
+            node.children.unshift(item)
+          });
+        }
+      }
+      if (node.type == 'element' && /h(1|2|3|4|5|6)/.test(node.tagName) && node.children && Array.isArray(node.children) && node.children.length > 0) {
+        const child = node.children[0];
+        if (child && child.type === 'element' && child.properties) {
+          child.properties = { className: 'anchor', ...child.properties };
+          child.children = [octiconLink()];
+        }
+      }
+      if (node.type == 'element' && node.tagName === 'markdown-style') {
+        node.children.unshift(copyStyle())
+        node.children.unshift(copyScript())
+      }
+      if (node.type == 'element' && node.tagName === 'pre') {
+        const code = getCodeString(node.children);
+        node.children.push(copyElement(code));
+      }
+      if (rewrite && typeof rewrite === 'function') {
+        rewrite(node, index, parent);
+      }
+    }
+  }
+  
+  if (document) {
+    const documentOptions = { ...document };
+    if (document.js) {
+      documentOptions.js = Array.isArray(document.js) ? document.js : [document.js];
+    }
+
+    if (document.script) {
+      documentOptions.script = Array.isArray(document.script) ? document.script : [document.script];
+    }
+
+    if (document.link) {
+      documentOptions.link = Array.isArray(document.link) ? document.link : [document.link];
+    }
+
+    if (document.style) {
+      documentOptions.style = Array.isArray(document.style) ? document.style : [document.style];
+    }
+
+    mdOptions.rehypePlugins.unshift([rehypeDocument, documentOptions]);
+  }
+
+  return markdown(string || '', mdOptions) as string;
+}

package/src/index.ts

@@ -0,0 +1,113 @@
+import fs from 'fs-extra';
+import path from 'path';
+import minimist, { ParsedArgs } from 'minimist';
+import { Options } from 'rehype-document';
+import { RehypeRewriteOptions } from 'rehype-rewrite';
+import { create, _dirname } from './create';
+import { formatConfig } from './utils';
+
+export * from './create';
+export * from './utils';
+
+export interface RunArgvs extends Omit<ParsedArgs, '_'>  {
+  version?: string;
+  source?: string;
+  output?: string;
+  /** Add a Github corner to your project page. */
+  'github-corners'?: string;
+  /** Github corners style. */
+  'github-corners-fork'?: boolean;
+  /** Markdown string. */
+  markdown?: string;
+  /** The `<title>` tag is required in HTML documents! */
+  title?: string;
+  /** Specify the configuration file. Default: `<process.cwd()>/package.json` */
+  config?: string;
+  /** Define a description of your web page */
+  description?: string;
+  /** Define keywords for search engines */
+  keywords?: string;
+  /** Add a Favicon to your Site */
+  favicon?: string;
+  /** Define the author of a page */
+  author?: string;
+}
+
+export interface MDToHTMLOptions extends RunArgvs {
+  /** [rehype-document](https://github.com/rehypejs/rehype-document#options) options */
+  document?: Options;
+  /** Rewrite Element. [rehype-rewrite](https://github.com/jaywcjlove/rehype-rewrite#rewritenode-index-parent-void) */
+  rewrite?: RehypeRewriteOptions['rewrite'];
+  /** rewrite URLs of href and src attributes. */
+  reurls?: Record<string, string>;
+}
+
+export function run(opts = {} as Omit<RunArgvs, '_'>) {
+  const argvs = minimist<RunArgvs>(process.argv.slice(2), {
+    alias: {
+      help: 'h',
+      version: 'v',
+      config: 'c',
+      source: 's',
+      output: 'o',
+    },
+    default: {
+      version: opts.v || opts.version || false,
+      help: opts.h || opts.help || false,
+      source: opts.s || opts.source || 'README.md',
+      markdown: opts.markdown || '',
+      description: opts.description || '',
+      output: opts.o || opts.output || 'index.html',
+    },
+  });
+  if (argvs.h || argvs.help) {
+    console.log(`${cliHelp}${exampleHelp}`);
+    return;
+  }
+  const pkgPath = path.resolve(_dirname, '..', 'package.json')
+  if ((argvs.v || argvs.version) && fs.existsSync(pkgPath)) {
+    const pkg = fs.readJSONSync(pkgPath);
+    console.log(`\n \x1b[35mmarkdown-to-html-cli\x1b[0m v${pkg.version}\n`);
+    return pkg.version;
+  }
+  if (argvs.source && !argvs.markdown) {
+    argvs.markdown = fs.readFileSync(path.resolve(argvs.source)).toString();
+  }
+  const options = formatConfig({ ...opts, ...argvs });
+  const output = path.resolve(argvs.output);
+
+  const strMarkdown = create({ ...argvs, ...options });
+  fs.writeFileSync(output, strMarkdown);
+  console.log(`\nmarkdown-to-html: \x1b[32;1m${path.relative(process.cwd(), output)}\x1b[0m\n`);
+}
+
+export const cliHelp: string = `\n  Usage: markdown-to-html [options] [--help|h]
+
+  Options:\n
+    --author          Define the author of a page.
+    --config, -o      Specify the configuration file. Default: "<process.cwd()>/package.json".
+    --description     Define a description of your web page.
+    --favicon         Add a Favicon to your Site.
+    --github-corners  Add a Github corner to your project page.
+    --github-corners-fork  Github corners style.
+    --keywords        Define keywords for search engines.
+    --markdown        Markdown string.
+    --output, -o      Output static pages to the specified directory. Default: "index.html"
+    --source, -s      The path of the target file "README.md". Default: "README.md"
+    --title           The \`<title>\` tag is required in HTML documents!
+    --version, -v     Show version number
+    --help, -h        Displays help information.
+`;
+
+export const exampleHelp: string =`\n  Example:
+
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli
+    \x1b[35mnpm\x1b[0m markdown-to-html     \x1b[33m--title\x1b[0m="Hello World!"
+    \x1b[35mnpm\x1b[0m markdown-to-html     \x1b[33m--config\x1b[0m="config/conf.json"
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--markdown\x1b[0m="Hello World!"
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove/markdown-to-html-cli
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove --github-corners-fork
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--output\x1b[0m coverage/index.html
+    \x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--source\x1b[0m README.md
+  
+`;

package/src/nodes/copy.ts

@@ -0,0 +1,148 @@
+import { Element } from 'hast';
+
+const style = `.markdown-body pre .copied {
+  display: flex;
+  position: absolute;
+  cursor: pointer;
+  color: #a5afbb;
+  top: 6px;
+  right: 6px;
+  border-radius: 5px;
+  background: #82828226;
+  padding: 6px;
+  font-size: 12px;
+  transition: all .3s;
+}
+.markdown-body pre .copied:not(.active) {
+  visibility: hidden;
+}
+.markdown-body pre:hover .copied {
+  visibility: visible;
+}
+.markdown-body pre:hover .copied:hover {
+  background: #4caf50;
+  color: #fff;
+}
+.markdown-body pre:hover .copied:active,
+.markdown-body pre .copied.active {
+  background: #2e9b33;
+  color: #fff;
+}
+.markdown-body pre .copied .octicon-copy {
+  display: block;
+}
+.markdown-body pre .copied .octicon-check {
+  display: none;
+}
+.markdown-body pre .active .octicon-copy {
+  display: none;
+}
+.markdown-body pre .active .octicon-check {
+  display: block;
+}`;
+
+export function copyStyle(): Element {
+  return {
+    type: 'element',
+    tagName: 'style',
+    children: [
+      {
+        type: 'text',
+        value: style
+      }
+    ]
+  }
+}
+
+const script = `/*! @uiw/copy-to-clipboard v1.0.12 | MIT (c) 2021 Kenny Wang | https://github.com/uiwjs/copy-to-clipboard.git */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).copyTextToClipboard=t()}(this,(function(){"use strict";return function(e,t){const o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style={position:"absolute",left:"-9999px"},document.body.appendChild(o);const n=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);o.select();let c=!1;try{c=!!document.execCommand("copy")}catch(e){c=!1}document.body.removeChild(o),n&&document.getSelection&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(n)),t&&t(c)}}));
+
+function copied(target, str) {
+  target.classList.add('active');
+  copyTextToClipboard(target.dataset.code, function() {
+    setTimeout(() => {
+      target.classList.remove('active');
+    }, 2000);
+  });
+}`;
+
+export function copyScript(): Element {
+  return {
+    type: 'element',
+    tagName: 'script',
+    children: [
+      {
+        type: 'text',
+        value: script
+      }
+    ]
+  }
+}
+
+export function copyElement(str: string = ''): Element {
+  return {
+    type: 'element',
+    tagName: 'div',
+    properties: {
+      onclick: 'copied(this)',
+      'data-code': str,
+      className: 'copied',
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'svg',
+        properties: {
+          className: 'octicon-copy',
+          ariaHidden: 'true',
+          viewBox: '0 0 16 16',
+          fill: 'currentColor',
+          height: 12,
+          width: 12,
+        },
+        children: [
+          {
+            type: 'element',
+            tagName: 'path',
+            properties: {
+              fillRule: 'evenodd',
+              d: 'M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z'
+            },
+            children: []
+          }, {
+            type: 'element',
+            tagName: 'path',
+            properties: {
+              fillRule: 'evenodd',
+              d: 'M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z'
+            },
+            children: []
+          }
+        ]
+      },
+      {
+        type: 'element',
+        tagName: 'svg',
+        properties: {
+          className: 'octicon-check',
+          ariaHidden: 'true',
+          viewBox: '0 0 16 16',
+          fill: 'currentColor',
+          height: 12,
+          width: 12,
+        },
+        children: [
+          {
+            type: 'element',
+            tagName: 'path',
+            properties: {
+              fillRule: 'evenodd',
+              d: 'M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'
+            },
+            children: []
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/nodes/dark-mode.ts

@@ -0,0 +1,31 @@
+import { Element } from 'hast';
+
+const scriptString = `const t=document;const e="_dark_mode_theme_";const s="permanent";const o="colorschemechange";const i="permanentcolorscheme";const h="light";const r="dark";const n=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){const t=this.getAttribute(e);return t===null?"":t},set(t){this.setAttribute(e,t)}})};const c=(t,e,s=e)=>{Object.defineProperty(t,s,{enumerable:true,get(){return this.hasAttribute(e)},set(t){if(t){this.setAttribute(e,"")}else{this.removeAttribute(e)}}})};class a extends HTMLElement{static get observedAttributes(){return["mode",h,r,s]}LOCAL_NANE=e;constructor(){super();this.t()}connectedCallback(){n(this,"mode");n(this,r);n(this,h);c(this,s);const a=localStorage.getItem(e);if(a&&[h,r].includes(a)){this.mode=a;this.permanent=true}if(this.permanent&&!a){localStorage.setItem(e,this.mode)}const l=[h,r].includes(a);if(this.permanent&&a){this.o()}else{if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){this.mode=r;this.o()}if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches){this.mode=h;this.o()}}if(!this.permanent&&!l){window.matchMedia("(prefers-color-scheme: light)").onchange=t=>{this.mode=t.matches?h:r;this.o()};window.matchMedia("(prefers-color-scheme: dark)").onchange=t=>{this.mode=t.matches?r:h;this.o()}}const d=new MutationObserver(((s,h)=>{this.mode=t.documentElement.dataset.colorMode;if(this.permanent&&l){localStorage.setItem(e,this.mode);this.i(i,{permanent:this.permanent})}this.h();this.i(o,{colorScheme:this.mode})}));d.observe(t.documentElement,{attributes:true});this.i(o,{colorScheme:this.mode});this.h()}attributeChangedCallback(t,s,o){if(t==="mode"&&s!==o&&[h,r].includes(o)){const t=localStorage.getItem(e);if(this.mode===t){this.mode=o;this.h();this.o()}else if(this.mode&&this.mode!==t){this.h();this.o()}}else if((t===h||t===r)&&s!==o){this.h()}if(t==="permanent"&&typeof this.permanent==="boolean"){this.permanent?localStorage.setItem(e,this.mode):localStorage.removeItem(e)}}o(){t.documentElement.setAttribute("data-color-mode",this.mode)}h(){this.icon.textContent=this.mode===h?"🌒":"🌞";this.text.textContent=this.mode===h?this.getAttribute(r):this.getAttribute(h)}t(){var s=this.attachShadow({mode:"open"});this.label=t.createElement("span");this.label.setAttribute("class","wrapper");this.label.onclick=()=>{this.mode=this.mode===h?r:h;if(this.permanent){localStorage.setItem(e,this.mode)}this.o();this.h()};s.appendChild(this.label);this.icon=t.createElement("span");this.label.appendChild(this.icon);this.text=t.createElement("span");this.label.appendChild(this.text);const o=\`\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n  color-scheme: dark;\n  --color-theme-bg: #0d1117;\n  --color-theme-text: #c9d1d9;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n  color-scheme: light;\n  --color-theme-bg: #fff;\n  --color-theme-text: #24292f;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\`;const i="_dark_mode_style_";const n=t.getElementById(i);if(!n){var c=t.createElement("style");c.id=i;c.textContent=o;t.head.appendChild(c)}var a=t.createElement("style");a.textContent=\`\n    .wrapper { cursor: pointer; user-select: none; position: relative; }\n    .wrapper > span + span { margin-left: .4rem; }\n    \`;s.appendChild(a)}i(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:true,composed:true,detail:e}))}}customElements.define("dark-mode",a);`
+
+/**
+ * @wcj/dark-mode@1.0.14
+ * https://github.com/jaywcjlove/dark-mode
+ */
+export function darkMode(): Element[] {
+  return [{
+    type: 'element',
+    tagName: 'script',
+    // properties: {
+    //   src: 'https://unpkg.com/@wcj/dark-mode',
+    // },
+    children: [{
+      type: 'text',
+      value: scriptString,
+    }]
+  }, {
+    type: 'element',
+    tagName: 'dark-mode',
+    properties: {
+      permanent: true,
+      style: 'position: fixed; top: 8px; left: 10px; z-index: 999;',
+      dark: 'Dark',
+      light: 'Light',
+    },
+    children: []
+  }]
+}

package/{github-fork-ribbon.css → src/nodes/github-corners-fork.ts}

@@ -1,4 +1,6 @@
-.github-fork-ribbon {
+import { Element } from 'hast';
+
+const style = `.github-fork-ribbon {
   width: 12.1em;
   height: 12.1em;
   position: absolute;
@@ -88,4 +90,39 @@
   border-style: dotted;
   border-color: #fff;
   border-color: rgba(255, 255, 255, 0.7);
+}`;
+
+interface GithubCorners {
+  href?: string;
 }
+
+export function githubCornersFork(opts: GithubCorners): Element {
+  const { href } = opts;
+  if (!href) {
+    return;
+  }
+  return {
+    type: 'element',
+    tagName: 'a',
+    properties: {
+      'aria-label': 'Fork me on Github',
+      title: 'Fork me on GitHub',
+      target: '__blank',
+      className: 'github-fork-ribbon',
+      'data-ribbon': 'Fork me on GitHub',
+      href,
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'style',
+        children: [
+          {
+            type: 'text',
+            value: style
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/nodes/github-corners.ts

@@ -0,0 +1,116 @@
+import { Element } from 'hast';
+
+interface GithubCorners {
+  href?: string;
+}
+
+/**
+ * @uiw/github-corners@1.5.10
+ * https://github.com/uiwjs/react-github-corners
+ */
+const scriptString = `const TEMPLATE = document.createElement("template");
+TEMPLATE.innerHTML = \`
+<style>
+:host a:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+@media (max-width:500px) {
+  :host a:hover .octo-arm {
+    animation: none;
+  }
+  :host .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+</style>
+<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true" style="position: absolute; border: 0px; top: 0px;">
+  <a xlink:href="https://github.com/uiwjs/react-github-corners" target="_blank" rel="nofollow sponsored" style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255);">
+    <g>
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" style="transform-origin: 130px 106px;"></path>
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+    </g>
+  </a>
+</svg>
+\`;
+export class GithubCorners extends HTMLElement {
+    constructor() {
+        super();
+        this.right = '0';
+        this.shadow = this.attachShadow({ mode: 'open' });
+        this.shadow.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
+        this.update();
+    }
+    static get observedAttributes() {
+        return ['z-index', 'target', 'height', 'width', 'href', 'color', 'fill', 'position', 'top', 'left', 'right', 'bottom', 'transform'];
+    }
+    setAttr(name, value) {
+        const svg = this.shadow.querySelector('svg');
+        if (/(href)/.test(name.toLocaleLowerCase())) {
+            svg.lastElementChild.setAttribute('xlink:href', value);
+        }
+        else if (/(color|fill)/.test(name.toLocaleLowerCase())) {
+            svg.firstElementChild.style[name] = value;
+        }
+        else if (/(z-index|height|width|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
+            svg.style[name] = value;
+        }
+        else {
+            svg.setAttribute(name, value);
+        }
+    }
+    update() {
+        ;
+        [...this.getAttributeNames(), 'right'].forEach((name) => {
+            const value = this.getAttribute(name) || this[name] || '';
+            this.setAttr(name, value);
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.setAttr(name, newValue);
+        }
+    }
+}
+customElements.define('github-corners', GithubCorners);`;
+
+export function githubCorners(opts: GithubCorners): Element[] {
+  const { href } = opts;
+  if (!href) {
+    return;
+  }
+  return [
+    {
+      type: 'element',
+      tagName: 'github-corners',
+      properties: {
+        target: '__blank',
+        position: 'fixed',
+        href,
+      },
+      children: []
+    }, {
+      type: 'element',
+      tagName: 'script',
+      properties: {
+        type: 'module',
+        // src: 'https://unpkg.com/@uiw/github-corners?module',
+      },
+      children: [{
+        type: 'text',
+        value: scriptString,
+      }]
+    }
+  ];
+}