feat: init web app.

src/utils/css.ts

@@ -0,0 +1,90 @@
+import { RootContent, Element, Text } from 'hast';
+
+export const getBlock = (data: any, str: string = '') => {
+  if (data && data.data && data.data.type === 'Declaration') {
+    str = `${data.data.property}: ${data.data.value.value}${data.data.important ? ' !important' : ''};`;
+    if (data.next) {
+      str += getBlock(data.next)
+    }
+  }
+  return str;
+}
+
+export const cssdata = (list: any, result: Record<string, string> = {}) => {
+  if (list.data && list.data.type === 'Rule') {
+    result[list.data.prelude.value] = getBlock(list.data.block.children.head);
+    if (list.next) {
+      result = cssdata(list.next, {...result})
+    }
+  }
+  return result;
+}
+
+export const spaceEscape = (node: RootContent) => {
+  if (node.type === 'element' && node.children) {
+    const className = (node.properties?.className as string[]);
+    if (className) {
+      if (!node.properties) {
+        node.properties = {};
+      }
+      node.properties.className = className.filter((str: string) => !/(token|control-flow)/.test(str));
+    }
+
+    node.children.map(elm => {
+      if (elm.type === 'element' && elm.children) {
+        spaceEscape(elm)
+      }
+      if (elm.type === 'text') {
+        elm.value = elm.value.replace(/\s/g, '\u00A0')
+      }
+      return elm
+    })
+  }
+}
+
+type ChildContent = Element | Text;
+const getNodeText = (node: ChildContent[]) => {
+  let str = '';
+  node.forEach((item) => {
+    if (item.type === 'text') str += item.value;
+    else if (item.type === 'element') {
+      str += getNodeText(item.children as ChildContent[]);
+    }
+  })
+  return str.replace(/↩/, '');
+}
+
+export const footnotes = (node: Element) => {
+  node.children.map((item) => {
+    if (item.type === 'element' && item.tagName === 'h2') {
+      if (!item.properties) item.properties = {};
+      item.properties.className = ['footnotes-title'];
+      item.children = [{
+        type: 'text',
+        value: '参考'
+      }];
+    }
+    if (item.type === 'element' && item.tagName === 'ol') {
+      item.children.map((li) => {
+        if (li.type === 'element' && li.tagName === 'li') {
+          if (!li.properties) li.properties = {};
+          li.properties.className = ['footnotes-list'];
+          li.children = [{
+            type: 'text',
+            value: getNodeText(li.children as ChildContent[])
+          }]
+        }
+        return li;
+      })
+    }
+    return item;
+  })
+}
+
+export const footnotesLabel = (node: Element) => {
+  const label = getNodeText(node.children as ChildContent[]);
+  node.children = [{
+    type: 'text',
+    value: `[${label}]`
+  }];
+}

src/utils/markdownToHTML.ts

@@ -0,0 +1,80 @@
+import { VFile } from 'vfile';
+import { unified } from 'unified';
+import * as csstree from 'css-tree';
+import { Element } from 'hast';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypePrism from 'rehype-prism-plus';
+import rehypeRaw from 'rehype-raw';
+import rehypeRewrite from 'rehype-rewrite';
+import stringify from 'rehype-stringify';
+import { cssdata, spaceEscape, footnotes, footnotesLabel } from './css';
+
+export type MarkdownToHTMLOptions = {
+
+}
+
+export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLOptions = {}) {
+  const ast = csstree.parse(css, {  
+    parseAtrulePrelude: false,
+    parseRulePrelude: false,
+    parseValue: false,
+    parseCustomProperty: false,
+    positions: false
+  });
+  // @ts-ignore
+  const data = cssdata(ast.children.head);
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypePrism)
+    .use(remarkGfm)
+    .use(rehypeRaw)
+    .use(rehypeRewrite, {
+      rewrite: (node, index, parent) => {
+        if (node?.type === 'element' && node?.tagName === 'code' && parent?.type === 'element' && parent?.tagName === 'pre') {
+          spaceEscape(node)
+        }
+        if (node?.type === 'element' && node.tagName === 'section' && (node?.properties?.className as string[]).includes('footnotes')) {
+          footnotes(node)
+        }
+        if (node?.type === 'element' && node.tagName === 'sup') {
+          footnotesLabel(node)
+        }
+        if (node?.type === 'element' && node?.tagName === 'code' && parent?.type === 'element' && parent?.tagName !== 'pre') {
+          if (!node.properties) node.properties = {}
+          node.properties!.className = ['code-spans'];
+        }
+        if (node?.type === 'element') {
+          if (node.tagName === 'input' && parent?.type === 'element') {
+            if (parent && parent.type === 'element') {
+              parent.children = parent?.children.filter(elm => (elm as Element).tagName !== 'input')
+            }
+            return;
+          }
+          if (!node.properties) {
+            node.properties = {};
+          }
+          const className = (node.properties?.className as string[]);
+          let style = '';
+          if (className) {
+            className.forEach((name) => {
+              if (data[`.${name}`]) {
+                style = data[`.${name}`];
+              }
+            })
+          }
+          if (!style) style = data[node.tagName];
+          if (style) {
+            node.properties.style = style;
+          }
+        }
+      }
+    })
+    .use(stringify);
+    const file = new VFile();
+    file.value = md;
+    const hastNode = processor.runSync(processor.parse(file), file);
+    return String(processor.stringify(hastNode, file));
+}