Set ntfy to low prio

This reverts commit b17de3a8e1.

src/data/links.json

@@ -20,6 +20,7 @@
         "href": "https://github.com/pancakesmeow",
         "icon": "github-mark.png",
         "iconInvert": true,
+        "mainOnly": true,
         "name": "GitHub (inactive)",
         "username": "pancakesmeow"
     },

src/lib/components/Navbar.svelte

@@ -1,6 +1,6 @@
 <script>
-    import links from "../../data/links.json";
     import { page } from "$app/stores";
+    import links from "../../data/links.json";
 </script>
 
 <a href="#main-content" class="skip-to-main">Skip to main content</a>
@@ -10,19 +10,22 @@
         <a href="/">pancakes</a>
     </span>
     {#if $page.url.pathname !== "/"}
-        <ul>
+        <ul class="links">
             {#each links as link}
-                <li>
-                    <div class="icon-link">
-                        <img
-                            src={"/assets/icons/" + link.icon}
-                            alt={link.name}
-                        />
-                        <a href={link.href} target="_blank">
-                            {link.name}
-                        </a>
-                    </div>
-                </li>
+                {#if link.href && !link.mainOnly}
+                    <li>
+                        <div class="icon-link">
+                            <img
+                                class={link.iconInvert ? "invert" : ""}
+                                src={"/assets/icons/" + link.icon}
+                                alt={link.name}
+                            />
+                            <a href={link.href} target="_blank">
+                                {link.name}
+                            </a>
+                        </div>
+                    </li>
+                {/if}
             {/each}
         </ul>
     {/if}

src/routes/+layout.svelte

@@ -17,7 +17,7 @@
         content={"https://trypancakes.com" + $page.url.pathname}
     />
     <meta property="og:title" content={$page.data.title || "pancakes"} />
-    <meta property="og:image" content="https://trypancakes.com/favicon.png" />
+    <meta property="og:image" content="/favicon.png" />
     <meta property="og:image:alt" content="a black cat with large eyes" />
 </svelte:head>
 

src/routes/+page.svelte

@@ -4,6 +4,35 @@
     import links from "../data/links.json";
 
     const pages = getPages();
+
+    async function sendNtfyMessage() {
+        const message = document.getElementById("ntfy-message").value;
+        if (message.length < 15)
+            return alert(
+                `Message must be 15 to 128 characters. Current length is ${message.length}`,
+            );
+        var resp = await fetch("https://ntfy.meow.company/pancakes", {
+            method: "POST",
+            body: message,
+            headers: {
+                Title: "pancakes.gay",
+                Priority: "low",
+                Tags: "black_cat",
+            },
+        });
+        if (resp.ok) alert(`Sent: ${message}`);
+    }
+
+    function updateNtfyCharCount(_) {
+        const message = document.getElementById("ntfy-message").value;
+        const el = document.getElementById("ntfy-char-count");
+
+        if (message.length >= 15 && message.length <= 128)
+            el.setAttribute("style", "color: var(--success);");
+        else el.setAttribute("style", "color: var(--error);");
+
+        el.innerText = 128 - message.length;
+    }
 </script>
 
 <main id="main-content">
@@ -91,6 +120,15 @@
             </a>
         </li>
 
+        <li>
+            <a href="https://meow.company" target="_blank" title="meow.company">
+                <img
+                    src="https://meow.company/88x31.png"
+                    alt="meow dot company"
+                />
+            </a>
+        </li>
+
         <li>
             <a href="https://aagaming.me/" target="_blank" title="aagaming">
                 <img
@@ -325,6 +363,28 @@
             <img src="/assets/buttons/wii.png" alt="Wii" title="Wii" />
         </li>
     </ul>
+
+    <h2 id="Notify">Notify</h2>
+
+    <p>
+        Send me a push notification. This will be a silent notification on my
+        phone with no popup, vibration, or sound.
+    </p>
+
+    <input
+        on:input={updateNtfyCharCount}
+        type="text"
+        id="ntfy-message"
+        name="ntfy-message"
+        placeholder="Message"
+        minlength="15"
+        maxlength="128"
+    />
+    <label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
+        128
+    </label>
+    <br />
+    <button on:click={sendNtfyMessage} style="margin-top: 1rem;"> Send </button>
 </main>
 
 <style>

src/routes/style.css

@@ -137,6 +137,16 @@ main:first-of-type {
     max-width: 768px;
 }
 
+nav {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+}
+
+nav .links {
+    font-size: small;
+}
+
 h1 {
     border-bottom: 2px solid var(--accent-2);
     font-size: xx-large;
@@ -386,6 +396,33 @@ mark {
     color: var(--background);
 }
 
+button,
+input[type="submit"] {
+    padding: 0.5em 1em;
+
+    background-color: var(--accent-2);
+    color: var(--background);
+    border: none;
+    border-radius: var(--radius);
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+input[type="text"] {
+    padding: 0.5em;
+
+    outline: none;
+    background-color: var(--background-2);
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    border-radius: var(--radius);
+}
+
+input[type="text"]:focus {
+    border-color: var(--accent);
+}
+
 td,
 th {
     padding: 0.25em;