Improve performance (#85)

* Add new dependencies and initialize modules * Update permalink and include path for writing categories * Update box-shadow color in social card component * Update main.css loading method * Remove @babel/plugin-syntax-dynamic-import dependency * Update main.css link in base.njk layout * Refactor clipboard functionality * Delete writing category page
afnizarnur · May 8, 2024 · 7169868 · 7169868
1 parent dd60ace
commit 7169868
Show file tree

Hide file tree

Showing 24 changed files with 645 additions and 630 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/scripts/__scripts.11ty.js b/src/assets/scripts/__scripts.11ty.js
@@ -13,87 +13,87 @@ const Dotenv = require("dotenv-webpack")
 const isProd = process.env.ELEVENTY_ENV === "production"
 
 module.exports = class {
-    // Configure Webpack in Here
-    async data() {
-        const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
-        const outputPath = path.resolve(__dirname, "../../memory-fs/js/")
+	// Configure Webpack in Here
+	async data() {
+		const entryPath = path.join(__dirname, `/${ENTRY_FILE_NAME}`)
+		const outputPath = path.resolve(__dirname, "../../memory-fs/js/")
 
-        // Transform .js files, run through Babel
-        const rules = [
-            {
-                test: /\.m?js$/,
-                exclude: /(node_modules|bower_components)/,
-                use: {
-                    loader: "babel-loader",
-                    options: {
-                        presets: ["@babel/preset-env"],
-                        plugins: ["@babel/plugin-transform-runtime"]
-                    }
-                }
-            }
-        ]
+		// Transform .js files, run through Babel
+		const rules = [
+			{
+				test: /\.m?js$/,
+				exclude: /(node_modules|bower_components)/,
+				use: {
+					loader: "babel-loader",
+					options: {
+						presets: ["@babel/preset-env"],
+						plugins: ["@babel/plugin-transform-runtime"]
+					}
+				}
+			}
+		]
 
-        // pass environment down to scripts
-        const envPlugin = new webpack.EnvironmentPlugin({
-            ELEVENTY_ENV: process.env.ELEVENTY_ENV
-        })
+		// pass environment down to scripts
+		const envPlugin = new webpack.EnvironmentPlugin({
+			ELEVENTY_ENV: process.env.ELEVENTY_ENV
+		})
 
-        // Main Config
-        const webpackConfig = {
-            mode: isProd ? "production" : "development",
-            entry: entryPath,
-            output: { path: outputPath },
-            module: { rules },
-            plugins: [envPlugin, new Dotenv()]
-        }
+		// Main Config
+		const webpackConfig = {
+			mode: isProd ? "production" : "development",
+			entry: entryPath,
+			output: { path: outputPath },
+			module: { rules },
+			plugins: [envPlugin, new Dotenv()]
+		}
 
-        return {
-            permalink: `/assets/scripts/${ENTRY_FILE_NAME}`,
-            eleventyExcludeFromCollections: true,
-            webpackConfig
-        }
-    }
+		return {
+			permalink: `/assets/scripts/${ENTRY_FILE_NAME}`,
+			eleventyExcludeFromCollections: true,
+			webpackConfig
+		}
+	}
 
-    // Compile JS with Webpack, write the result to Memory Filesystem.
-    // this brilliant idea is taken from Mike Riethmuller / Supermaya
-    // @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-webpack.js
-    compile(webpackConfig) {
-        const compiler = webpack(webpackConfig)
-        compiler.outputFileSystem = mfs
-        compiler.inputFileSystem = fs
-        compiler.intermediateFileSystem = mfs
+	// Compile JS with Webpack, write the result to Memory Filesystem.
+	// this brilliant idea is taken from Mike Riethmuller / Supermaya
+	// @see https://github.com/MadeByMike/supermaya/blob/master/site/utils/compile-webpack.js
+	compile(webpackConfig) {
+		const compiler = webpack(webpackConfig)
+		compiler.outputFileSystem = mfs
+		compiler.inputFileSystem = fs
+		compiler.intermediateFileSystem = mfs
 
-        return new Promise((resolve, reject) => {
-            compiler.run((err, stats) => {
-                if (err || stats.hasErrors()) {
-                    const errors =
-                        err ||
-                        (stats.compilation ? stats.compilation.errors : null)
+		return new Promise((resolve, reject) => {
+			compiler.run((err, stats) => {
+				if (err || stats.hasErrors()) {
+					const errors =
+						err ||
+						(stats.compilation ? stats.compilation.errors : null)
 
-                    reject(errors)
-                    return
-                }
+					reject(errors)
+					return
+				}
 
-                mfs.readFile(
-                    webpackConfig.output.path + "/" + ENTRY_FILE_NAME,
-                    "utf8",
-                    (err, data) => {
-                        if (err) reject(err)
-                        else resolve(data)
-                    }
-                )
-            })
-        })
-    }
+				mfs.readFile(
+					webpackConfig.output.path + "/" + ENTRY_FILE_NAME,
+					"utf8",
+					(err, data) => {
+						if (err) reject(err)
+						else resolve(data)
+					}
+				)
+			})
+		})
+	}
 
-    // render the JS file
-    async render({ webpackConfig }) {
-        try {
-            const result = await this.compile(webpackConfig)
-            return result
-        } catch (err) {
-            console.log(err)
-            return null
-        }
-    }
+	// render the JS file
+	async render({ webpackConfig }) {
+		try {
+			const result = await this.compile(webpackConfig)
+			return result
+		} catch (err) {
+			console.log(err)
+			return null
+		}
+	}
 }
diff --git a/src/assets/scripts/main.js b/src/assets/scripts/main.js
@@ -1,16 +1,29 @@
 import "focus-visible"
+import initAnimations from "./modules/animation"
+import initNavigation from "./modules/nav"
+import initSpotifyFetcher from "./modules/spotify"
+import initLocalTime from "./modules/local-time"
+import initClipboard from "./modules/clipboard"
+import initModal from "./modules/modal"
+import initSmoothScroll from "./modules/smooth-scroll"
+import initThemeSwitcher from "./modules/theme-switcher"
+import initTagToggle from "./modules/tag-toggle"
+import initRecommendationAccordion from "./modules/rec-accordion"
+import initQuickNavAbout from "./modules/quick-nav-about"
+import initNavigateToUrl from "./modules/site-version"
 
 // Internal Modules
-import "./modules/animation"
-import "./modules/nav"
-import "./modules/spotify"
-import "./modules/clipboard"
-import "./modules/local-time"
-import "./modules/quick-nav-about"
-import "./modules/site-version"
-import "./modules/rec-accordion"
-import "./modules/smooth-scroll"
-import "./modules/modal"
-import "./modules/theme-switcher"
-import "./modules/tag-toggle"
 import "./modules/preload"
+
+initAnimations()
+initNavigation()
+initSpotifyFetcher()
+initLocalTime()
+initClipboard("hi@afnizarnur.com")
+initModal()
+initSmoothScroll()
+initThemeSwitcher()
+initTagToggle()
+initRecommendationAccordion()
+initQuickNavAbout()
+initNavigateToUrl()