i apologize severely

.gitignore

@@ -1 +1,2 @@
-.sass-cache
+.sass-cache
+node_modules

Makefile

@@ -4,7 +4,6 @@ STATICDIR = static
 CSSDIR = $(DISTDIR)/css
 SCSSDIR = $(SRCDIR)/scss
 SCSSINCDIR = $(SCSSDIR)/includes
-JSDIR = js
 
 SCSSFILES = $(wildcard $(SCSSDIR)/*.scss)
 CSSFILES = $(patsubst $(SCSSDIR)/%.scss, $(CSSDIR)/%.css, $(SCSSFILES))
@@ -16,9 +15,6 @@ TMPL = $(SRCDIR)/tmpl.html
 STATICFILES = $(shell find $(STATICDIR) -type f -name '*')
 STATICOUT = $(patsubst $(STATICDIR)/%, $(DISTDIR)/%, $(STATICFILES))
 
-JSFILES = $(shell find $(JSDIR) -type f -name '*.js')
-MINIFIEDFILES := $(patsubst $(JSDIR)/%.js, $(DISTDIR)/%.min.js, $(JSFILES))
-
 URI = "https://bear.oops.wtf"
 
 .PHONY: all
@@ -41,10 +37,8 @@ $(DISTDIR)/%.html: $(SRCDIR)/%.md $(TMPL)
 	-o $@ $<
 
 .PHONY: js
-js: $(MINIFIEDFILES)
-
-$(DISTDIR)/%.min.js: $(JSDIR)/%.js
-	uglifyjs $< -m -c --mangle-props -o $@
+js:
+	pnpm exec webpack
 
 .PHONY: css
 css: $(CSSFILES)

README.md

@@ -0,0 +1,15 @@
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application

dist/blog/index.html

@@ -37,9 +37,7 @@
             JavaScript must be enabled for the blog index to work. Otherwise visit <a href="/blogindex.txt">blogindex.txt</a> for a plaintext list.
         </div>
         <p><a
-        href="blogIndex.min.js"><script type="text/javascript" src="/blogIndex.min.js"></script></a>
-        <a
-        href=""><script type="text/javascript">blogIndex();</script></a></p>
+        href="blogIndex.min.js"><script type="text/javascript" src="/blogIndex.js"></script></a></p>
     </article>
 </body>
 </html>

dist/blogIndex.js

@@ -0,0 +1 @@
+({481:function(){var t=this&&this.__awaiter||function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{a(r.next(t))}catch(t){i(t)}}function c(t){try{a(r.throw(t))}catch(t){i(t)}}function a(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,c)}a((r=r.apply(t,e||[])).next())}))},e=this&&this.__generator||function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(a){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,r=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!((o=(o=u.trys).length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=e.call(t,u)}catch(t){c=[6,t],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}};function n(n){return t(this,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return[4,n.replace(/([a-z])([A-Z])/g,"$1 $2").replace(/(\d{4}-\d{2}-\d{2})/g," $1").replace(/\b\w/g,(function(t){return t.toUpperCase()}))];case 1:return[2,t.sent()]}}))}))}!function(){t(this,void 0,void 0,(function(){var r=this;return e(this,(function(o){return document.getElementById("blogIndex")&&document.getElementById("latestPost")?(document.getElementById("blogIndex").innerHTML="",document.getElementById("latestPost").innerHTML="",fetch("/blogindex.txt").then((function(t){return t.text()})).then((function(o){var i=o.split("\n").filter((function(t){return""!==t.trim()})).map((function(t){var e=t.split(" ");return{timestamp:parseInt(e[0]),uri:e[1]||""}}));i.sort((function(t,e){return e.timestamp-t.timestamp}));var u=document.createElement("ul");i.forEach((function(o){return t(r,void 0,void 0,(function(){var t,r,i,c;return e(this,(function(e){switch(e.label){case 0:return o.uri?[4,n(t=o.uri.split("/").pop().replace(".html",""))]:[3,2];case 1:r=e.sent(),"index"!==t.toLowerCase()&&(i=document.createElement("li"),(c=document.createElement("a")).href=o.uri.substring(o.uri.indexOf("/blog/")),c.textContent=r,i.appendChild(c),u.appendChild(i)),e.label=2;case 2:return[2]}}))}))})),document.getElementById("blogIndex").appendChild(u)})).catch((function(t){console.error("Error fetching and processing blog index:",t)})),[2]):[2]}))}))}()}})[481]();

dist/blogIndex.min.js

@@ -1 +0,0 @@
-function convertCamelCaseToReadable(e){return e.replace(/([a-z])([A-Z])/g,"$1 $2").replace(/(\d{4}-\d{2}-\d{2})/g," $1").replace(/\b\w/g,e=>e.toUpperCase())}function blogIndex(){document.getElementById("blogIndex").innerHTML=null,document.getElementById("latestPost").innerHTML=null,fetch("/blogindex.txt").then(e=>e.text()).then(e=>{e=e.split("\n").filter(e=>""!==e.trim()).map(e=>{e=e.split(" ");return{timestamp:parseInt(e[0]),uri:e[1]||""}});e.sort((e,n)=>n.timestamp-e.timestamp);const l=document.createElement("ul");e.forEach(e=>{var n,o,t;e.uri&&(n=convertCamelCaseToReadable(o=e.uri.split("/").pop().replace(".html","")),"index"!==o.toLowerCase())&&(o=document.createElement("li"),(t=document.createElement("a")).href=e.uri.substring(e.uri.indexOf("/blog/")),t.textContent=n,o.appendChild(t),l.appendChild(o))}),document.getElementById("blogIndex").appendChild(l)}).catch(e=>{console.error("Error fetching and processing blog index:",e)})}

dist/blogindex.txt

@@ -1,2 +1,2 @@
 1708193771 https://bear.oops.wtf/blog/firstPost.html
-1708193771 https://bear.oops.wtf/blog/index.html
+1709608584 https://bear.oops.wtf/blog/index.html

dist/css/blogIndex.css

@@ -1 +0,0 @@
-.article{text-align:center}

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Webpack App</title>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2>Tip: Check your console</h2>
+    </body>
+    
+</html>

js/blogIndex.ts

@@ -1,16 +1,17 @@
-function convertCamelCaseToReadable(text) {
-    return text
-      .replace(/([a-z])([A-Z])/g, '$1 $2')
-      .replace(/(\d{4}-\d{2}-\d{2})/g, ' $1')
-      .replace(/\b\w/g, c => c.toUpperCase());
+async function convertCamelCaseToReadable(text: string): Promise<string> {
+    return await text
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/(\d{4}-\d{2}-\d{2})/g, ' $1')
+    .replace(/\b\w/g, c => c.toUpperCase());
 }
 
-function blogIndex() {
-    document.getElementById('blogIndex').innerHTML = null;
-    document.getElementById('latestPost').innerHTML = null;
+async function blogIndex(): Promise<void> {
+    if (!document.getElementById('blogIndex') || !document.getElementById('latestPost')) return;
 
+    document.getElementById('blogIndex')!.innerHTML = "";
+    document.getElementById('latestPost')!.innerHTML = "";
 
-    fetch('/blogindex.txt')
+    fetch("/blogindex.txt")
     .then(response => response.text())
     .then(data => {
       const uriList = data.split('\n');
@@ -24,11 +25,11 @@ function blogIndex() {
       entries.sort((a, b) => b.timestamp - a.timestamp);
       const ulElement = document.createElement('ul');
   
-      entries.forEach(entry => {
+      entries.forEach(async entry => {
         if (entry.uri) {
-          const fileName = entry.uri.split('/').pop().replace('.html', '');
+          const fileName = entry.uri.split('/').pop()!.replace('.html', '');
 
-          const readableName = convertCamelCaseToReadable(fileName);
+          const readableName = await convertCamelCaseToReadable(fileName);
   
           if (fileName.toLowerCase() !== 'index') {
             const liElement = document.createElement('li');
@@ -42,9 +43,11 @@ function blogIndex() {
         }
       });
 
-      document.getElementById('blogIndex').appendChild(ulElement);
+      document.getElementById('blogIndex')!.appendChild(ulElement);
     })
     .catch(error => {
       console.error('Error fetching and processing blog index:', error);
     });
-}
+}
+
+blogIndex();

package.json

@@ -0,0 +1,18 @@
+{
+  "devDependencies": {
+    "@webpack-cli/generators": "^3.0.7",
+    "css-loader": "^6.10.0",
+    "mini-css-extract-plugin": "^2.8.1",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production make",
+    "dev": "NODE_ENV=development make"
+  }
+}

src/blog/index.md

@@ -17,5 +17,4 @@ header: <link rel="stylesheet" href="/css/center.css" media="print" onload="this
     JavaScript must be enabled for the blog index to work. Otherwise visit <a href="/blogindex.txt">blogindex.txt</a> for a plaintext list.
 </div>
 
-[<script type="text/javascript" src="/blogIndex.min.js"></script>](blogIndex.min.js)
-[<script type="text/javascript">blogIndex();</script>]()
+[<script type="text/javascript" src="/blogIndex.js"></script>](blogIndex.min.js)

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true
+  },
+  "include": ["./js/**/*"]
+}

webpack.config.js

@@ -0,0 +1,65 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isProduction = process.env.NODE_ENV == 'production';
+
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+
+
+
+const config = {
+    entry: {
+        blogIndex: "./js/blogIndex.ts"
+    },
+    output: {
+        filename: "[name].js",
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new MiniCssExtractPlugin(),
+
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx)$/i,
+                loader: 'ts-loader',
+                exclude: ['/node_modules/'],
+            },
+            {
+                test: /\.css$/i,
+                use: [stylesHandler,'css-loader'],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [stylesHandler, 'css-loader', 'sass-loader'],
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
+    },
+};
+
+module.exports = () => {
+    if (isProduction) {
+        config.mode = 'production';
+        
+        
+    } else {
+        config.mode = 'development';
+    }
+    return config;
+};