feat: support local images in markdown. #41

Author: jaywcjlove

docs/quickreference.md

@@ -243,6 +243,26 @@ LICENSE=Copyright (c) <b>2022</b> Support for HTML strings
 
 Create `.env` file in project root directory.
 
+### Image
+
+![](./quickreference.svg?#sss=1)
+
+<img src="./quickreference.svg?#sss=1" height="95" width="95" />
+
+<hr />
+
+```markdown
+![](./quickreference.svg?#sss=1)
+
+<img
+  src="./quickreference.svg?#sss=1"
+  height="95"
+  width="95"
+/>
+```
+
+在 Markdown 中引入图片
+
 Markdown Comments Syntax
 ---
 
@@ -1148,4 +1168,9 @@ Each section can have the following subitems:
 注释配置：
 `<!--rehype:wrap-style=background: #1b5064;-->`
 ```
-<!--rehype:className=wrap-text -->
+<!--rehype:className=wrap-text -->
+
+另见
+---
+
+- [首页](../README.md)

docs/quickreference.svg

@@ -0,0 +1,37 @@
+import fs from 'fs-extra';
+import path from 'path';
+import type { Root, RootContent } from 'hast';
+import * as log from './log.js';
+import { Options } from './create.js';
+
+export function copyied(fromPath: string, toPath: string) {
+  const stat = fs.statSync(fromPath);
+  if (!stat.isFile()) {
+    return;
+  }
+  fs.ensureDir(path.dirname(toPath), (err) => {
+    if (err) {
+      console.log(` \x1b[31midoc:copy:\x1b[0m`, err);
+      return;
+    }
+    fs.copyFile(decodeURIComponent(fromPath), decodeURIComponent(toPath))
+      .then((result) => {
+        log.output('\x1b[35;1mcopy\x1b[0m')(decodeURIComponent(fromPath), decodeURIComponent(toPath));
+      })
+      .catch((err) => {
+        console.log(` \x1b[31midoc:asset:copy:\x1b[0m`, err);
+      });
+  });
+}
+
+export function copyAsset(node: Root | RootContent, options: Options = {}) {
+  let mdpath = options.fromPath || '';
+
+  if (node.type !== 'element' || !/^(img|a|video|source|audio)$/.test(node.tagName)) return;
+  let src = node.properties.src as string;
+  if (typeof src !== 'string' || /^https?:\/\//.test(src) || !src || /^data:/.test(src)) return;
+  let outputHTMLPath = options.outputHTMLPath || '';
+  const assetFromPath = path.resolve(path.dirname(mdpath), decodeURIComponent(src)).replace(/[?#].*$/, '');
+  const assetToPath = path.resolve(path.dirname(outputHTMLPath), decodeURIComponent(src)).replace(/[?#].*$/, '');
+  copyied(assetFromPath, assetToPath);
+}

src/utils/copyAsset.ts

@@ -13,6 +13,7 @@ import { giscus } from '../nodes/giscus.js';
 import { googleAnalytics } from '../nodes/google.js';
 import { rehypeUrls } from './rehypeUrls.js';
 import { tooltips } from './tooltips.js';
+import { copyAsset } from './copyAsset.js';
 import { homeCardIcons } from './homeCardIcons.js';
 import { getTocsTree, getTocsTitleNode, getTocsTitleNodeWarpper, addTocsInWarp } from './getTocsTree.js';
 import { rehypeTitle } from './rehypeTitle.js';
@@ -116,6 +117,7 @@ export function create(str = '', options: Options = {}) {
       return plugins;
     },
     rewrite: (node, index, parent) => {
+      copyAsset(node, options);
       const iconName = rehypeTitle(node, options);
       if (iconName) {
         detailData.icon = iconName;

src/utils/create.ts

@@ -0,0 +1,13 @@
+import path from 'path';
+
+export const log =
+  (mark: string = 'refs') =>
+  (filepath: string) => {
+    console.log(`  \x1b[32;1m✔\x1b[0m ${mark}: \x1b[37;1m${filepath}\x1b[0m`);
+  };
+
+export const output =
+  (mark: string = 'idoc') =>
+  (form: string, to: string) => {
+    console.log(`  \x1b[32;1m✔\x1b[0m ${mark}: \x1b[37;1m${form}\x1b[0m -> \x1b[32;1m${to}\x1b[0m`);
+  };

src/utils/log.ts

@@ -112,7 +112,12 @@ export async function createHTML(files: IFileDirStat[] = [], opts: Options, num
     ],
   };
   process.env.RELATIVE_PATH = path.relative(path.dirname(outputHTMLPath), opts.output).replace(/[\\/]/g, '/');
-  const { html, data } = create(mdstr.toString(), { ...options, ...opts });
+  const { html, data } = create(mdstr.toString(), {
+    ...options,
+    ...opts,
+    fromPath: dataFile.path,
+    outputHTMLPath,
+  });
   if (!options.isHome) {
     const searchData = await fs.readJSON(SEARCH_DATA_CACHE);
     data.path = path.relative(opts.output, outputHTMLPath).replace(/[\\/]/g, '/');