6 files changed, 53 insertions(+), 50 deletions(-)

M .gitignore
M docker-compose.yml
R js/analytics.js => script/analytics.js
R js/console.js => script/console.js
R js/dimension.js => script/dimension.js
M templates/layout.html

@@ 4,5 4,5 @@
 
 /.env
 /assets/css/
-/assets/js/
+/assets/script/
 /logs/access.log

@@ 26,5 26,5 @@ services:
     image: kvikshaug.no
     volumes:
       - ".:/app"
-    command: babel --verbose --watch js -d assets/js
+    command: babel --verbose --watch script -o assets/script/bundle.js
     stop_signal: SIGKILL

@@ 1,29 1,31 @@
-const chars = " .,:;=|iI+hHOE#$-";
-let output = "%c";
-for (let imag = -1.2; imag <= 1.2; imag += 0.05) {
-  for (let real = -2; real <= 1; real += 0.03) {
-    let Zr = real;
-    let Zi = imag;
-    let n = 0;
-    for (; n < 16; n++) {
-      let Zr2 = Zr * Zr;
-      let Zi2 = Zi * Zi;
-      if (Zr2 + Zi2 > 4) {
-        break;
+(function () {
+  const chars = " .,:;=|iI+hHOE#$-";
+  let output = "%c";
+  for (let imag = -1.2; imag <= 1.2; imag += 0.05) {
+    for (let real = -2; real <= 1; real += 0.03) {
+      let Zr = real;
+      let Zi = imag;
+      let n = 0;
+      for (; n < 16; n++) {
+        let Zr2 = Zr * Zr;
+        let Zi2 = Zi * Zi;
+        if (Zr2 + Zi2 > 4) {
+          break;
+        }
+        Zi = 2 * Zr * Zi + imag;
+        Zr = Zr2 - Zi2 + real;
       }
-      Zi = 2 * Zr * Zi + imag;
-      Zr = Zr2 - Zi2 + real;
+      output += chars.charAt(n);
     }
-    output += chars.charAt(n);
+    output += "\n";
   }
-  output += "\n";
-}
 
-output +=
-  "\n%cScience is not only compatible with spirituality; it is a profound source of spirituality.\n\n%c- Carl Sagan";
-console.log(
-  output,
-  "display:block;text-align:center;color:#1b1b1b",
-  "display:block;margin:0 auto;width:300px;text-align:center;color:#bf3211;",
-  "display:block;margin:0 auto;width:300px;text-align:right;color:#1b1b1b;"
-);
+  output +=
+    "\n%cScience is not only compatible with spirituality; it is a profound source of spirituality.\n\n%c- Carl Sagan";
+  console.log(
+    output,
+    "display:block;text-align:center;color:#1b1b1b",
+    "display:block;margin:0 auto;width:300px;text-align:center;color:#bf3211;",
+    "display:block;margin:0 auto;width:300px;text-align:right;color:#1b1b1b;"
+  );
+})();

@@ 1,23 1,26 @@
-const image = document.querySelector("article.home .hello");
-if (image) {
-  const threshold = 5;
+(function () {
+  const image = document.querySelector("article.home .hello");
+  if (image) {
+    const threshold = 5;
 
-  image.addEventListener("mousemove", (event) => {
-    const { clientX, clientY, currentTarget } = event;
-    const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget;
-    const horizontal = (clientX - offsetLeft) / clientWidth;
-    const vertical = (clientY - offsetTop) / clientHeight;
+    image.addEventListener("mousemove", (event) => {
+      const { clientX, clientY, currentTarget } = event;
+      const { clientWidth, clientHeight, offsetLeft, offsetTop } =
+        currentTarget;
+      const horizontal = (clientX - offsetLeft) / clientWidth;
+      const vertical = (clientY - offsetTop) / clientHeight;
 
-    const rotateX = (threshold / 2 - horizontal * threshold).toFixed(2);
-    const rotateY = (vertical * threshold - threshold / 2).toFixed(2);
-    if (image.style.transition) {
-      image.style.transition = null;
-    }
-    image.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`;
-  });
+      const rotateX = (threshold / 2 - horizontal * threshold).toFixed(2);
+      const rotateY = (vertical * threshold - threshold / 2).toFixed(2);
+      if (image.style.transition) {
+        image.style.transition = null;
+      }
+      image.style.transform = `perspective(${clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg) scale3d(1, 1, 1)`;
+    });
 
-  image.addEventListener("mouseleave", (event) => {
-    image.style.transition = "0.1s ease-in-out transform";
-    image.style.transform = `perspective(${event.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`;
-  });
-}
+    image.addEventListener("mouseleave", (event) => {
+      image.style.transition = "0.1s ease-in-out transform";
+      image.style.transform = `perspective(${event.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`;
+    });
+  }
+})();

@@ 13,9 13,7 @@
     <link rel="stylesheet" href="/assets/fontawesome/css/all.min.css">
 
     <link rel="icon" href="/assets/favicon.png" type="image/png">
-    <script src="/assets/js/analytics.js" async></script>
-    <script src="/assets/js/console.js" async></script>
-    <script src="/assets/js/dimension.js" async></script>
+    <script src="/assets/script/bundle.js" defer></script>
   </head>
 
   <body>