Merge pull request #76 from JHWelch/use-made-with-package

Use made-with from package

package.json

@@ -34,6 +34,7 @@
     }
   },
   "dependencies": {
+    "@jhwelch/made-with": "^0.0.0",
     "@notionhq/client": "^2.2.5",
     "@types/express": "^4.17.17",
     "@types/node": "^18.16.19",

src/config/express.ts

@@ -9,6 +9,10 @@ export default function setupExpress (): express.Express {
   const filename = fileURLToPath(import.meta.url)
   const dirname = path.dirname(filename)
   app.use('/public', express.static(`${dirname}/../../public`))
+  app.use(
+    '/made-with',
+    express.static(`${dirname}/../../node_modules/@jhwelch/made-with`)
+  )
   app.use(bodyParser.json())
 
   return app

views/partials/footer.ejs

@@ -15,6 +15,8 @@
       This product uses the TMDb API but is not endorsed or certified by TMDb.
     </p>
   </footer>
+
+  <script src="/made-with/made-with.js"></script>
 </body>
 
 </html>

views/partials/header.ejs

@@ -9,6 +9,7 @@
   <title>Thursday Night Movie Club</title>
 
   <link rel="stylesheet" href="/public/app.css">
+  <link rel="stylesheet" href="/made-with/made-with.css">
 
   <link rel="icon" href="https://fav.farm/🎥" />
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

views/partials/made_with.ejs

@@ -1,102 +1 @@
-<div
-  x-data="{
-    emojis: [
-      '❤',
-      '🍜',
-      '🍕',
-      '🍔',
-      '🦇',
-      '🎃',
-      '👻',
-      '🍬',
-      '🐱',
-      '🐶',
-      '👽',
-      '🚀',
-      '👾',
-    ],
-    firstEmoji: '❤',
-    init: function (firstInit = true, groups = 1, duration = 1) {
-      const spinner = document.querySelector('#spinner');
-      const emojis = spinner.querySelector('#emojis');
-      const emojisClone = emojis.cloneNode(false);
-      if (firstInit) {
-        this.firstEmoji = this.randomEmoji();
-      }
-      const pool = [this.firstEmoji];
-
-      if (!firstInit) {
-        const arr = [];
-        for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
-          arr.push(...this.emojis);
-        }
-        pool.push(...this.shuffle(arr));
-        this.firstEmoji = pool[pool.length - 1];
-
-        emojisClone.addEventListener(
-          'transitionend',
-          function () {
-            this.querySelectorAll('.emoji').forEach((emoji, index) => {
-              if (index > 0) this.removeChild(emoji);
-            });
-          },
-          { once: true }
-        );
-      }
-
-      for (let i = pool.length - 1; i >= 0; i--) {
-        const emoji = document.createElement('div');
-        emoji.classList.add('emoji');
-        emoji.style.width = spinner.clientWidth + 'px';
-        emoji.style.height = spinner.clientHeight + 'px';
-        emoji.textContent = pool[i];
-        emojisClone.appendChild(emoji);
-      }
-      emojisClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
-      emojisClone.style.transform = `translateY(-${spinner.clientHeight * (pool.length - 1)}px)`;
-      spinner.replaceChild(emojisClone, emojis);
-    },
-
-    randomEmoji: function () {
-      return this.emojis[Math.floor(Math.random() * this.emojis.length)];
-    },
-
-    spin: async function() {
-      this.init(false, 1, 2);
-
-      await new Promise((resolve) => setTimeout(resolve, 1));
-
-      const emojis = document.getElementById('emojis');
-      emojis.style.transform = 'translateY(0)';
-    },
-
-    shuffle: function ([...arr]) {
-      let m = arr.length;
-      while (m) {
-        const i = Math.floor(Math.random() * m--);
-        [arr[m], arr[i]] = [arr[i], arr[m]];
-      }
-      return arr;
-    }
-  }"
-  x-init="init()"
-  class="flex items-center my-6 space-x-1 text-lg text-gray-800"
->
-  <span>Made with </span>
-
-  <button
-    id="spinner"
-    @click="spin"
-    class="w-12 h-40 overflow-hidden text-xl"
-  >
-    <div
-      id="emojis"
-      class="flex flex-col items-center justify-center transition-transform duration-1000 ease-in-out"
-    ></div>
-  </button>
-
-  <span>
-    in Chicago by
-    <a class="font-semibold text-violet-800 hover:text-violet-600" href="https://www.jordanwelch.com">Jordan Welch</a>
-  </span>
-</div>
+<div id="made-with"></div>