Even more pingi

lib/commands/definitions.ts

@@ -1,6 +1,7 @@
 import type { Diary, Project } from "../content/types";
 import type { Command, Flag } from "./types";
 import Color from "color";
+import styles from "../../styles/Random.module.scss";
 
 function getCommandByName(name: string): Command | undefined {
     return commandList.find(cmd => cmd.name === name);
@@ -285,7 +286,10 @@ const color: Command = {
             switch(true) {
                 case color.hex().toLowerCase() === "#1f1e33": {
                     if (cmdIf.callbacks?.setModalHTML && cmdIf.callbacks?.setModalVisible) {
-                        cmdIf.callbacks?.setModalHTML('<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w4U9S5eX3eY" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>');
+                        cmdIf.callbacks?.setModalHTML(`
+                        <div class="${styles.modalVideoContainer}">
+                            <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/w4U9S5eX3eY" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+                        </div>`);
                         cmdIf.callbacks?.setModalVisible(true);
                     }
                     break;
@@ -343,8 +347,27 @@ const pingi: Command = {
     name: "pingi",
     desc: "<3",
     execute: (_flags, _args, _raw, cmdIf) => {
+        const pingiImg = [
+            "hJQFR4dpyyZskjmbAkvlnNYi",
+            "LjwTg8qftDGLDfYyNH5OMY6L",
+            "niaM6yPxKBQV8umkh0xpkbCH",
+            "7hcMiKlbn9QWNbwA3DFcpk6A",
+            "xFnQEWlO5jqvJ4lruK4C8zfq",
+            "CplNRTMYuwmSW8WH2UxCi5NU",
+            "oQ03IzrBkLwCwsUtdp3zn0nW",
+            "36zkZSuWmhAa89ErDR4myYW0",
+            "HZvdYHr4fqYRTkTn8zw4akjA",
+            "VdTAABUXCpo5Gom7aszQDw1c",
+            "zwIJwof4beiqDiy3PBkYmZYd"
+        ];
         if (cmdIf.callbacks?.setModalHTML && cmdIf.callbacks.setModalVisible) {
-            cmdIf.callbacks.setModalHTML('<img src="https://openai-labs-public-images-prod.azureedge.net/user-jomUNcw4rd0bDGfcOQUAbYNO/generations/generation-hJQFR4dpyyZskjmbAkvlnNYi/image.webp" />');
+            const img = pingiImg[Math.floor(Math.random()*pingiImg.length)];
+            cmdIf.callbacks.setModalHTML(`
+            <a href="https://labs.openai.com/s/${img}" target="_blank" rel="noreferrer" class="${styles.modalImageContainerSquare}">
+                <span class="${styles.imgLoading}">Loading cute image...</span>
+                <img src="https://openai-labs-public-images-prod.azureedge.net/user-jomUNcw4rd0bDGfcOQUAbYNO/generations/generation-${img}/image.webp" alt="Incredibly cute AI created image of a penguin and a rabbit." />
+            </a>
+            <small><i>Made with DALL-E</i></small>`);
             cmdIf.callbacks.setModalVisible(true);
         }
         return ["<3"];

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  images: {
+    domains: ["openai-labs-public-images-prod.azureedge.net"]
+  }
 };

styles/Random.module.scss

@@ -0,0 +1,40 @@
+.modalImageContainerSquare {
+    width: 100%; 
+    height: 0; 
+    padding-bottom: 100%; 
+    display: block; 
+    position: relative;
+
+    img {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        border-radius: 5px
+    }
+
+    .imgLoading {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+    }
+}
+
+.modalVideoContainer {
+    width: 100%; 
+    height: 0;
+    padding-bottom: 56.25%;
+    display: block;
+    position: relative;
+
+    iframe {
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+    }
+}