federating my verse (iceshrimp & mastodon API compat, read-only)

src/App.svelte

@@ -0,0 +1,154 @@
+<script>
+    import Feed from './Feed.svelte';
+    import Error from './Error.svelte';
+    import Instance from './instance.js';
+
+    let ready = false;
+    if (localStorage.getItem("fedi_host") && localStorage.getItem("fedi_token")) {
+        Instance.setup(
+            localStorage.getItem("fedi_host"),
+            localStorage.getItem("fedi_token"),
+            true
+        ).then(() => {
+            ready = true;
+        });
+    }
+
+    function log_in(event) {
+        event.preventDefault();
+        localStorage.setItem("fedi_host", event.target.instance_host.value);
+        localStorage.setItem("fedi_token", event.target.session_token.value);
+        location = location;
+    }
+
+    function log_out() {
+        localStorage.removeItem("fedi_host");
+        localStorage.removeItem("fedi_token");
+        location = location;
+    }
+</script>
+
+<header>
+    <h1>space social</h1>
+    <p>social media for the galaxy-wide-web! 🌌</p>
+    <button id="log-out" on:click={log_out}>log out</button>
+</header>
+
+<main>
+    {#if ready}
+        <Feed />
+    {:else if !Instance.get_instance().ok}
+        <Error>
+            <p>this app requires a <strong>instance host</strong> and <strong>session token</strong> to work! you may enter these below:</p>
+
+            <form on:submit={data => (log_in(data))}>
+                <label for="instance host">instance host: </label>
+                <input type="text" id="instance_host">
+                <br>
+                <label for="session token">session token: </label>
+                <input type="password" id="session_token">
+                <br>
+                <button type="submit" id="log-in">log in</button>
+            </form>
+
+            <hr>
+
+            <h4>how do i get these?</h4>
+            <ul>
+                <li>
+                    <strong>instance host</strong> refers to the domain of your fediverse instance. i.e. <code>ice.arimelody.me</code>.
+                </li>
+                <li>
+                    a <strong>token</strong> is a unique code that grants applications permission to act on your behalf.
+                    you can find it in your browser's cookies for your instance.
+                    (instructions for <a href="https://support.mozilla.org/en-US/questions/1219653">firefox</a>
+                    and <a href="https://superuser.com/questions/1715037/how-can-i-view-the-content-of-cookies-in-chrome">chrome</a>)
+                </li>
+            </ul>
+
+            <p><small>
+                your login credentials will not be saved to an external server.
+                they are required for communication with the fediverse instance, and are saved entirely within your browser.
+                a cleaner login flow will be built in the future.
+            </small></p>
+            <p><small>
+                oh yeah i should also probably mention this is <strong><em>extremely experimental software</em></strong>;
+                even if you use the exact same instance as me, you may encounter problems.
+                if that's all cool with you, welcome aboard!
+            </small></p>
+
+            <p>made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
+        </Error>
+    {/if}
+</main>
+
+<footer>
+</footer>
+
+<style>
+    header {
+        width: min(768px, calc(100vw - 32px));
+        margin: 16px auto;
+        padding: 0 16px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    h1 {
+        color: var(--accent);
+        margin: 0 16px 0 0;
+    }
+
+    main {
+        width: min(800px, calc(100vw - 16px));
+        margin: 0 auto;
+    }
+
+    a {
+        color: var(--accent);
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    input[type="text"], input[type="password"] {
+        margin-bottom: 8px;
+        padding: 4px 6px;
+        font-family: inherit;
+        border: none;
+        border-radius: 8px;
+    }
+
+    button#log-in, button#log-out {
+        margin-left: auto;
+        padding: 8px 12px;
+        font-size: 1em;
+        background-color: var(--bg2);
+        color: inherit;
+        border: none;
+        border-radius: 16px;
+        cursor: pointer;
+        transition: color .1s, background-color .1s;
+    }
+
+    button#log-in.active, button#log-out.active {
+        background: var(--accent);
+        color: var(--bg0);
+    }
+
+    button#log-in:hover, button#log-out:hover {
+        color: var(--bg0);
+        background: var(--fg0);
+    }
+
+    button#log-in:active, button#log-out:active {
+        background: #0001;
+    }
+
+    code {
+        font-size: 1.2em;
+    }
+</style>