Refactor footnote handling and update build process

Author: sy-records

.github/workflows/publish.yml

@@ -9,6 +9,7 @@ on:
 
 jobs:
   publish:
+    if: github.repository == 'sy-records/docsify-footnotes'
     runs-on: ubuntu-latest
 
     steps:

build/build.js

@@ -1,85 +1,54 @@
-const rollup = require('rollup')
-const buble = require('rollup-plugin-buble')
-const commonjs = require('rollup-plugin-commonjs')
-const nodeResolve = require('rollup-plugin-node-resolve')
-const terser = require('@rollup/plugin-terser')
-const replace = require('rollup-plugin-replace')
-const isProd = process.env.NODE_ENV === 'production'
-const version = process.env.VERSION || require('../package.json').version
+const fs = require('fs');
+const path = require('path');
+const { minify } = require('terser');
+
+const rootDir = path.resolve(__dirname, '..');
+const inputFile = path.join(rootDir, 'src', 'index.js');
+const distDir = path.join(rootDir, 'dist');
+const outputFile = path.join(distDir, 'index.js');
+const outputMinFile = path.join(distDir, 'index.min.js');
+const outputMinMapFile = path.join(distDir, 'index.min.js.map');
+
+function cleanDist() {
+  if (fs.existsSync(distDir)) {
+    fs.rmSync(distDir, { recursive: true, force: true });
+    console.log('🧹 Cleaned up dist directory');
+  }
+  fs.mkdirSync(distDir, { recursive: true });
+}
 
-/**
- * @param {{
- *   input: string,
- *   output?: string,
- *   globalName?: string,
- *   plugins?: Array<import('rollup').Plugin>
- * }} opts
- */
-async function build(opts) {
-  await rollup
-    .rollup({
-      input: opts.input,
-      plugins: (opts.plugins || []).concat([
-        buble(),
-        commonjs(),
-        nodeResolve(),
-        replace({
-          __VERSION__: version
-        })
-      ]),
-      onwarn: function (message) {
-        if (message.code === 'UNRESOLVED_IMPORT') {
-          throw new Error(
-            `Could not resolve module ` +
-            message.source +
-            `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` +
-            `Module ${message.source} is imported in ${message.importer}`
-          )
-        }
-      }
-    })
-    .then(function (bundle) {
-      var dest = 'dist/' + (opts.output || opts.input)
+async function build() {
+  cleanDist();
 
-      console.log(dest)
-      return bundle.write({
-        output: {file: dest, format: 'iife', strict: false},
-      })
-    })
-}
+  if (!fs.existsSync(inputFile)) {
+    console.error(`❌ Source file not found: ${inputFile}`);
+    return;
+  }
 
-async function buildPlugin() {
-  var plugins = [
-    {name: 'index', input: 'index.js'},
-  ]
+  let sourceCode = fs.readFileSync(inputFile, 'utf-8');
 
-  const promises = plugins.map(item => {
-    return build({
-      input: 'src/' + item.input,
-      output: item.name + '.js'
-    })
-  })
+  const wrappedCode = `(function () {\n${sourceCode}\n})();`;
+  fs.writeFileSync(outputFile, wrappedCode, 'utf-8');
+  console.log('✅ Generated non-minified version (IIFE): dist/index.js');
 
-  if (isProd) {
-    plugins.forEach(item => {
-      promises.push(build({
-        input: 'src/' + item.input,
-        output: item.name + '.min.js',
-        plugins: [terser()]
-      }))
-    })
-  }
+  try {
+    const minified = await minify(sourceCode, {
+      compress: true,
+      mangle: true,
+      sourceMap: {
+        filename: 'index.min.js',
+        url: 'index.min.js.map'
+      }
+    });
 
-  await Promise.all(promises)
-}
+    fs.writeFileSync(outputMinFile, minified.code, 'utf-8');
+    console.log('✅ Generated minified version: dist/index.min.js');
 
-async function main() {
-  await Promise.all([
-    buildPlugin()
-  ])
+    fs.writeFileSync(outputMinMapFile, minified.map, 'utf-8');
+    console.log('✅ Generated minified source map: dist/index.min.js.map');
+  } catch (err) {
+    console.error('❌ Error during minification:', err);
+  }
 }
 
-main().catch((e) => {
-  console.error(e)
-  process.exit(1)
-})
+build();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-records/docsify-footnotes",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A plugin that supports the use of footnotes in docsify.",
   "main": "dist/index.js",
   "repository": {
@@ -19,16 +19,9 @@
   },
   "homepage": "https://github.com/sy-records/docsify-footnotes#readme",
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "cross-env": "^6.0.3",
-    "rollup": "^2.79.2",
-    "rollup-plugin-async": "^1.2.0",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0"
+    "terser": "^5.37.0"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production node build/build.js"
+    "build": "node build/build.js"
   }
 }

src/index.js

@@ -1,29 +1,18 @@
 document.addEventListener('click', function (event) {
   const target = event.target.closest('.footnote-symbol, .footnote-reference-symbol');
+  if (!target?.dataset.ref) return;
 
-  if (!target || !target.hasAttribute('data-id')) return;
-
-  const dataId = target.getAttribute('data-id');
-
-  const footnotesElm = Docsify.dom.find(`.markdown-section :where(sup, strong)[id="${dataId}"]`);
-
-  if (footnotesElm) {
-    footnotesElm.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    });
-  }
+  const footnotesElm = Docsify.dom.find(`.markdown-section :where(.footnote-symbol, .footnote-reference-symbol)[id="${target.dataset.ref}"]`);
+  footnotesElm?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 });
 
 function footnotes(hook) {
-  hook.beforeEach(function (markdown) {
-    if (/\[\^([A-Za-z0-9\-]+)\][^:]/.test(markdown)) {
-      markdown = markdown
-          .replace(/\[\^([A-Za-z0-9\-]+)\][^:]/gm, '<sup class="footnote-symbol" data-id="fnref-$1" id="fn-$1">[\[$1]\](#fnref-$1)</sup>')
-          .replace(/\[\^([A-Za-z0-9\-]+)\]\: /gm, '<strong class="footnote-reference-symbol" data-id="fn-$1" id="fnref-$1">[\[$1\]](#fn-$1)</strong>:leftwards_arrow_with_hook: ');
-    }
-
-    return markdown;
+  hook.beforeEach((markdown) => {
+    return markdown.replace(/\[\^([A-Za-z0-9\-]+)\](\:)?/gm, (_, id, isDefinition) =>
+        isDefinition
+            ? `<strong class="footnote-reference-symbol" data-ref="fn-${id}" id="fnref-${id}">[${id}](#fn-${id})</strong>:leftwards_arrow_with_hook: `
+            : `<sup class="footnote-symbol" data-ref="fnref-${id}" id="fn-${id}">[${id}](#fnref-${id})</sup>`
+    );
   });
 }