v0.0.11

Author: CarcajadaArtificial

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Version History
 
+### v0.0.11
+
+- Added a fix for the "Mixed content" error from the quotable API. Changed it to
+  The Quotes Hub.
+- Added extra interactions for for the gibberish chat.
+
 ### v0.0.10
 
 - Added the `<GibberishChat/>` island.

islands/GibberishChat.tsx

@@ -81,26 +81,35 @@ export default function () {
         ))}
       </div>
       <div class="p-1-2 bg-base-200">
-        <div class="join">
+        <form
+          class="join"
+          onSubmit={(ev) => {
+            ev.preventDefault();
+            const input = document
+              .getElementById("gibberish-input") as HTMLInputElement;
+
+            setMessages([{
+              user: 2,
+              content: input.value,
+            }, ...messages]);
+
+            input.value = "";
+          }}
+        >
           <input
             id="gibberish-input"
             class="join-item input input-sm"
             type="text"
+            tabindex={0}
           />
           <button
-            type="button"
+            type="submit"
             class="join-item btn btn-sm"
-            onClick={() =>
-              setMessages([{
-                user: 2,
-                content: (document.getElementById(
-                  "gibberish-input",
-                ) as HTMLInputElement).value,
-              }, ...messages])}
+            tabindex={0}
           >
             Send
           </button>
-        </div>
+        </form>
       </div>
     </div>
   );

islands/RandomQuote.tsx

@@ -1,12 +1,13 @@
 import { useState } from "preact/hooks";
 import { handleKeyboard, Key } from "@carcajada/teclas";
 
-const quotableUrl = "http://api.quotable.io/random";
+const quoteUrl = "https://thequoteshub.com/api/random-quote";
 
 async function fetchQuote() {
-  const res = await (await fetch(quotableUrl))
+  const res = await (await fetch(quoteUrl))
     .json();
-  return `${res.content} - ${res.author}`;
+  console.log(res);
+  return `${res.text} - ${res.author}`;
 }
 
 export default function () {
@@ -20,9 +21,9 @@ export default function () {
           <h2 class="mb-1-4">Random quote generator</h2>
           <p class="mb-1-1">
             This feed is brought to you by the{" "}
-            <a href="quotable.io">Quotable</a> public API of random quotes:{" "}
-            <code>{quotableUrl}</code> click on quotes or press the{" "}
-            <kbd class="kbd">Enter</kbd>{" "}
+            <a href="https://thequoteshub.com">The Quotes Hub</a>{" "}
+            public API of random quotes: <code>/api/random-quote</code>{" "}
+            click on a quote or press the <kbd class="kbd">Enter</kbd>{" "}
             key when focusing on a quote to remove it.
           </p>
         </div>