From ae96648faccf63a654034a2214ce2f7b75ec9e28 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 15 Jan 2024 22:10:43 +0100
Subject: [PATCH] chore: rework js imports (#489)

---
 .eslintrc.json                   | 15 +++------------
 src/js/app.js                    | 26 --------------------------
 src/js/colorTheme.js             |  5 ++---
 src/js/{copycode.js => index.js} | 28 +++++++++++++++++++++++++++-
 src/js/katex.js                  | 10 ++--------
 src/js/mermaid.js                |  6 +++---
 webpack.config.js                |  3 ++-
 7 files changed, 39 insertions(+), 54 deletions(-)
 delete mode 100644 src/js/app.js
 rename src/js/{copycode.js => index.js} (50%)

diff --git a/.eslintrc.json b/.eslintrc.json
index 1cfcc37..e946021 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,22 +1,13 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
-    "amd": true
+    "es2017": true
   },
   "extends": ["plugin:prettier/recommended"],
   "parser": "@babel/eslint-parser",
   "parserOptions": {
     "sourceType": "module",
-    "requireConfigFile": false,
-    "allowImportExportEverywhere": true
+    "requireConfigFile": false
   },
-  "plugins": ["prettier"],
-  "rules": {
-    "require-await": "warn"
-  },
-  "globals": {
-    "require": false,
-    "requirejs": false
-  }
+  "plugins": ["prettier"]
 }
diff --git a/src/js/app.js b/src/js/app.js
deleted file mode 100644
index a2a4285..0000000
--- a/src/js/app.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const { createCopyButton } = require("./copycode.js")
-const Clipboard = require("clipboard")
-
-document.addEventListener("DOMContentLoaded", function (event) {
-  let clipboard = new Clipboard(".clip")
-
-  clipboard.on("success", function (e) {
-    const trigger = e.trigger
-
-    if (trigger.hasAttribute("data-copy-feedback")) {
-      trigger.classList.add("gblog-post__codecopy--success", "gblog-post__codecopy--out")
-      trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
-      trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
-
-      setTimeout(function () {
-        trigger.classList.remove("gblog-post__codecopy--success", "gblog-post__codecopy--out")
-        trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
-        trigger.querySelector(".gblog-icon.check").classList.add("hidden")
-      }, 3000)
-    }
-
-    e.clearSelection()
-  })
-
-  document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv))
-})
diff --git a/src/js/colorTheme.js b/src/js/colorTheme.js
index edca610..8f6a818 100644
--- a/src/js/colorTheme.js
+++ b/src/js/colorTheme.js
@@ -1,6 +1,5 @@
-const Storage = require("store2")
-const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js")
-
+import Storage from "store2"
+import { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } from "./config.js"
 ;(() => {
   applyTheme()
 })()
diff --git a/src/js/copycode.js b/src/js/index.js
similarity index 50%
rename from src/js/copycode.js
rename to src/js/index.js
index da55c56..33e375f 100644
--- a/src/js/copycode.js
+++ b/src/js/index.js
@@ -1,4 +1,30 @@
-export function createCopyButton(highlightDiv) {
+import Clipboard from "clipboard"
+
+document.addEventListener("DOMContentLoaded", function (event) {
+  let clipboard = new Clipboard(".clip")
+
+  clipboard.on("success", function (e) {
+    const trigger = e.trigger
+
+    if (trigger.hasAttribute("data-copy-feedback")) {
+      trigger.classList.add("gblog-post__codecopy--success", "gblog-post__codecopy--out")
+      trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
+      trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
+
+      setTimeout(function () {
+        trigger.classList.remove("gblog-post__codecopy--success", "gblog-post__codecopy--out")
+        trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
+        trigger.querySelector(".gblog-icon.check").classList.add("hidden")
+      }, 3000)
+    }
+
+    e.clearSelection()
+  })
+
+  document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv))
+})
+
+function createCopyButton(highlightDiv) {
   const button = document.createElement("span")
 
   let codeSelector = "pre > code"
diff --git a/src/js/katex.js b/src/js/katex.js
index a8d4ad9..b321b8d 100644
--- a/src/js/katex.js
+++ b/src/js/katex.js
@@ -1,9 +1,3 @@
-import "katex/dist/katex.css"
+import renderMathInElement from "katex/dist/contrib/auto-render.mjs"
 
-document.addEventListener("DOMContentLoaded", function () {
-  import("katex/dist/contrib/auto-render")
-    .then(({ default: renderMathInElement }) => {
-      renderMathInElement(document.body)
-    })
-    .catch((error) => console.error(error))
-})
+renderMathInElement(document.body)
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index 39cbddf..11107cf 100644
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@@ -1,6 +1,6 @@
-const Storage = require("store2")
-const { v4: uuidv4 } = require("uuid")
-const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
+import Storage from "store2"
+import { v4 as uuidv4 } from "uuid"
+import { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } from "./config.js"
 
 import mermaid from "mermaid"
 
diff --git a/webpack.config.js b/webpack.config.js
index a4a439a..37a87f4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,7 +17,7 @@ var config = {
       path.resolve("src", "sass", "mobile.scss"),
       path.resolve("src", "sass", "print.scss")
     ],
-    main: path.resolve("src", "js", "app.js"),
+    main: path.resolve("src", "js", "index.js"),
     colortheme: path.resolve("src", "js", "colorTheme.js"),
     mermaid: path.resolve("src", "js", "mermaid.js"),
     katex: [path.resolve("src", "js", "katex.js")].concat(
@@ -33,6 +33,7 @@ var config = {
   watchOptions: {
     ignored: ["/exampleSite/", "/node_modules/"]
   },
+  target: ["web", "es2017"],
   plugins: [
     new CopyPlugin({
       patterns: [