<script>
    import DateTime from "$lib/components/DateTime.svelte";
    import {getPages} from "$lib/pages";
    import contributions from "../data/contributions.json"
    import links from "../data/links.json";
    import projects from "../data/projects.json";

    const pages = getPages();

    let ntfyLock = $state(false);

    async function sendNtfyMessage() {
        if (ntfyLock) return;
        ntfyLock = true;
        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) {
            document.getElementById("ntfy-message").value = "";
            alert(`Sent: ${message}`);
        }
        ntfyLock = false;
    }

    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>

<header>
    <img src="/favicon.png" alt="a black cat with large eyes"/>
    <h1>pancakes</h1>
</header>

<main id="main-content">
    <p>
        I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
            title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
        that likes cats, Linux, and programming. You can find my
        links, projects, and other pages here.
    </p>

    <h2 id="accounts">Accounts</h2>

    <p>Other places you can find me</p>

    <ul class="account-links">
        {#each links as link}
            <li class="foreground card">
                <img class={link.iconInvert ? "invert" : ""} src={"/assets/icons/" + link.icon} alt={link.name}/>
                <span class="account-details">
                    {#if link.href}
                        <a href={link.href} rel="me" target="_blank">
                            {link.name}
                        </a>
                    {:else}
                    <span>
                        {link.name}
                    </span>
                    {/if}
                    <span class="account-username">{link.username}</span>
                </span>
            </li>
        {/each}
    </ul>

    <h2 id="projects">Projects</h2>

    <p>Projects made by me</p>

    <ul class="page-links">
        {#each projects as project}
            <li class="foreground card">
                <h3>
                    <a href={project.href} target="_blank">
                        {project.name}
                    </a>
                </h3>
                <p>{project.description}</p>
            </li>
        {/each}
    </ul>

    <h2 id="contributions">Contributions</h2>

    <p>Projects not made by me that I have contributed to</p>

    <ul class="page-links">
        {#each contributions as contribution}
            <li class="foreground card">
                <h3>
                    <a href={contribution.href} target="_blank">
                        {contribution.name}
                    </a>
                </h3>
                <p>{contribution.description}</p>
                {#if contribution.activity}
                    <p>
                        <small>
                            <a href={contribution.activity} target="_blank">View activity</a>
                        </small>
                    </p>
                {/if}
            </li>
        {/each}
    </ul>

    <h2 id="pages">Pages</h2>

    <p>Things I've written</p>

    <div class="notice">
        <p>
            Content under the pages section uses the
            <a
                    href="https://creativecommons.org/licenses/by-sa/4.0/"
                    target="_blank"
            >
                Creative Commons Attribution-ShareAlike 4.0 International (CC
                BY-SA 4.0)
            </a>
            license unless specified in the page footer.
        </p>
    </div>

    <ol class="page-links">
        {#each pages as page}
            <li class="foreground card">
                <h3>
                    <a href={"/" + page.slug + "/"}>
                        {page.title}
                    </a>
                </h3>
                <p>{page.description}</p>
                {#if page.published}
                    <p>
                        <small>
                            Published:
                            <DateTime datetime={page.published}/>
                            {#if page.edited}
                                &bull; Last edited:
                                <DateTime
                                        datetime={page.edited}
                                        display="dateTime"
                                />
                            {/if}
                        </small>
                    </p>
                {/if}
            </li>
        {/each}
    </ol>

    <h2 id="buttons">Buttons</h2>

    <p>Click my buttons</p>

    <div class="foreground card">
        <h3>pancakes</h3>

        <ul class="buttons">
            <li>
                <a href="/" title="pancakes">
                    <img src="/assets/88x31.png" alt="pancakes"/>
                </a>
            </li>
            <li>
                <img
                        src="/assets/buttons/anythingbutchrome.gif"
                        alt="Anything But Chrome"
                        title="Anything But Chrome"
                />
            </li>
            <li>
                <a href="https://archlinux.org" target="_blank" title="arch linux">
                    <img src="/assets/buttons/archlinux.gif" alt="arch linux"/>
                </a>
            </li>
            <li>
                <img
                        src="/assets/buttons/emulate.gif"
                        alt="Emulate Now!"
                        title="Emulate Now!"
                />
            </li>
            <li>
                <a
                        href="https://www.mozilla.org/en-US/firefox/"
                        target="_blank"
                        title="Get Firefox"
                >
                    <img src="/assets/buttons/getfirefox.gif" alt="Get Firefox"/>
                </a>
            </li>
            <li>
                <a
                        href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET"
                        target="_blank"
                        title="Iceshrimp.NET"
                >
                    <img src="/assets/buttons/iceshrimp_now_dark.png" alt="Iceshrimp Now!"/>
                </a>
            </li>
            <li>
                <img
                        src="/assets/buttons/fediverse.gif"
                        alt="Join the Fediverse"
                        title="Join the Fediverse"
                />
            </li>
            <li>
                <img
                        src="/assets/buttons/xenia.gif"
                        alt="Linux Now!"
                        title="Linux Now!"
                />
            </li>
            <li>
                <img
                        src="/assets/buttons/paws.png"
                        alt="made with My Own Two Paws"
                        title="made with MY OWN TWO PAWS"
                />
            </li>
            <li>
                <img
                        src="/assets/buttons/nonbinary.png"
                        alt="Non-binary flag"
                        title="Non-binary"
                />
            </li>
            <li>
                <a
                        href="https://www.debian.org/"
                        target="_blank"
                        title="Powered by debian"
                >
                    <img src="/assets/buttons/debian.png" alt="Powered by debian"/>
                </a>
            </li>
            <li>
                <a href="https://scp-wiki.wikidot.com/" target="_blank" title="SCP">
                    <img src="/assets/buttons/scp.png" alt="SCP"/>
                </a>
            </li>
            <li>
                <a
                        href="https://store.steampowered.com/app/440/Team_Fortress_2/"
                        target="_blank"
                        title="Team Fortress GET IT!"
                >
                    <img
                            src="/assets/buttons/team_fortress_get_it.gif"
                            alt="Team Fortress Get It!"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://ublockorigin.com/"
                        target="_blank"
                        title="uBlock Origin Now!"
                >
                    <img
                            src="/assets/buttons/ublock.png"
                            alt="uBlock Origin Now!"
                    />
                </a>
            </li>
            <li>
                <img src="/assets/buttons/wii.png" alt="Wii" title="Wii"/>
            </li>
        </ul>
    </div>

    <div class="foreground card">
        <h3>Other sites</h3>

        <ul class="buttons">
            <li>
                <a href="https://aagaming.me/" target="_blank" title="aagaming">
                    <img
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
                            alt="AA gaming"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://astrid.tech/"
                        target="_blank"
                        title="astrid dot tech"
                >
                    <img
                            src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
                            alt="astrid dot tech"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://atapi.space/"
                        target="_blank"
                        title="Atapi's Homepage"
                >
                    <img
                            src="https://atapi.space/assets/img/buttons/atapi.gif"
                            alt="Atapi"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://blueb.pages.gay"
                        target="_blank"
                        title="blueb's website"
                >
                    <img
                            src="/assets/buttons/kattgutte.png"
                            alt="kattgutte er ikke ekte"
                    />
                </a>
            </li>
            <li>
                <a href="https://elke.cafe/" target="_blank" title="elke.cafe">
                    <img
                            src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"
                            alt="elke dot cafe"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://eris.meows.gay/"
                        target="_blank"
                        title="eris meow :3"
                >
                    <img
                            src="https://eris.meows.gay/images/badges/eris.png"
                            alt="eris"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://houl.floof.company/"
                        target="_blank"
                        title="Houl Floof :3c"
                >
                    <img
                            src="https://houl.floof.company/assets/images/buttons/houl.png"
                            alt="Houl"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://lilysthings.org/"
                        target="_blank"
                        title="Lily's Things at The Cool Site"
                >
                    <img
                            src="https://lilysthings.org/buttons/lilysthings.png"
                            alt="lily!!"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://microspinny.zip/"
                        target="_blank"
                        title="microsite"
                >
                    <img src="/assets/buttons/micro.png" alt="Micro"/>
                </a>
            </li>
            <li>
                <a
                        href="https://nelle.observer/"
                        target="_blank"
                        title="nelle.observer"
                >
                    <img
                            src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
                            alt="nelle observer"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://notfire.cc"
                        target="_blank"
                        title="home // notfire.cc"
                >
                    <img
                            src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
                            alt="not fire dot CC"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://floof.gay/"
                        target="_blank"
                        title="olivia"
                >
                    <img
                            src="https://floof.gay/img/badges/olivia.png"
                            alt="oli"
                    />
                </a>
            </li>
            <li>
                <a
                        href="https://synth.download"
                        target="_blank"
                        title="synth download!"
                >
                    <img
                            src="https://synth.download/assets/buttons/synth.download.svg"
                            alt="Synth.Download!"
                    />
                </a>
            </li>
            <li>
                <a href="https://void.rehab" target="_blank" title="void.rehab">
                    <img
                            src="https://void.rehab/88x31/void.rehab.png"
                            alt="void dot rehab"
                    />
                </a>
            </li>
            <li>
                <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
                    <img
                            src="https://w.on-t.work/assets/88x31.png"
                            alt="wont work"
                    />
                </a>
            </li>
            <li>
                <a href="https://zvava.org/" target="_blank" title="zvava.org">
                    <img
                            src="https://zvava.org/images/buttons/zvava.org.png"
                            alt="zvava dot org"
                    />
                </a>
            </li>
        </ul>
    </div>

    <h2 id="webrings">Webrings</h2>

    <p>Adjacent websites</p>

    <p>
        <a href="https://fediring.net/previous?host=pancakes.gay">←</a>
        <a href="https://fediring.net/">Fediring</a>
        <a href="https://fediring.net/next?host=pancakes.gay">→</a>
    </p>

    <h3 id="Notify">Notify</h3>

    <p>
        Send me a push notification. This will be a silent notification on my
        phone with no popup, vibration, or sound.
    </p>

    <input
            oninput={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 onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send</button>
</main>

<style>
    header {
        padding-top: 4rem;
        text-align: center;
    }

    header img {
        height: 8rem;
        border-radius: var(--radius);
    }

    .account-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding-left: 0;
        list-style: none;
    }

    .account-links li {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        margin-top: 0;
    }

    .account-links img {
        width: 2em;
        height: 2em;
        object-fit: contain;
    }

    .account-details {
        display: flex;
        flex-direction: column;
    }

    .account-username {
        font-size: 0.9em;
    }

    .page-links {
        padding-left: 0;
        list-style: none;
    }

    .page-links li {
        margin-top: 1rem;
    }

    ul.buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0;
        margin: 0;

        list-style: none;
    }

    ul.buttons img {
        image-rendering: pixelated;
        width: 88px;
        height: 31px;
    }

    @media screen and (max-width: 768px) {
        .account-links {
            flex-direction: column;
        }

        .account-username {
            font-size: inherit;
        }
    }
</style>
