rebrand to campfire!

SEO tags and version 0.2.0-rev3
fixed boosts not displaying properly; among
2024-06-30 17:45:04 +01:00 · 2024-06-30 00:05:35 +01:00 · 2024-06-29 23:10:29 +01:00 · 2024-06-29 20:51:50 +01:00 · 2024-06-29 19:52:52 +01:00 · 2024-06-29 17:27:46 +01:00
29 changed files with 304 additions and 259 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,5 @@
 **/.DS_Store
 node_modules/
-dist/
+build/
 .secret/
 .svelte-kit/
--- a/README.md
+++ b/README.md
@ -1,17 +1,14 @@
-# space social
+# Campfire

 social media for the galaxy-wide-web! 🌌

-this is a neat experiment in building as much of a fediverse-compatible
-software stack as i can (at least before the crippling weight of the full
-activitypub spec finally cripples me)
-
-starting, of course, with a nice frontend! ✨
+this is a *very experimental* frontend for browsing the fediverse, built
+from the ground up in svelte!

 should you choose to play around with this yourself, just know that *many
-things are bound not to work!* notably, this has only been tested on iceshrimp
-and mastodon API-compliant instances. anything beyond this will likely be
-incompatible, and the web console will get very upset.
+things are bound not to work!* notably, campfire is currently only being
+battle-tested on mastodon API-compliant instances. anything beyond this
+will likely be incompatible, and the web console will get very upset.

 ## features

@ -34,10 +31,17 @@ incompatible, and the web console will get very upset.
 - fast account switching
 - post editing/deletion
 - push notifications
+- ...and potentially much more as development continues!

 ## try it out!

 - `git clone` this repo
 - `npm install` the dependencies
 - `npm run dev` to spin up the dev environment
- have fun! ✨
+
+if you wish to run this in production, you need only `npm run build` and
+place the static files somewhere accessible by a static webhost, such as
+nginx or apache! **note:** your web server should attempt to reach
+`/fallback.html` before erroring out.
+
+have fun! ✨
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "spacesocial-client",
-    "version": "0.2.0_rev2",
+    "version": "0.2.0_rev3",
    "description": "social media for the galaxy-wide-web! 🌌",
    "private": true,
    "type": "module",
--- a/res/campfire-favicon.afdesign
+++ b/res/campfire-favicon.afdesign
--- a/res/campfire-logo.afdesign
+++ b/res/campfire-logo.afdesign
--- a/res/spacesocial-logo.afdesign
+++ b/res/spacesocial-logo.afdesign
--- a/src/app.html
+++ b/src/app.html
@ -4,7 +4,23 @@
        <meta charset="UTF-8">
        <link rel="icon" type="image/png" href="/favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>space social</title>
+
+        <title>Campfire</title>
+        <meta name="description" content="Social media for the galaxy-wide-web!">
+
+        <meta property="og:url" content="https://campfire.bliss.town">
+        <meta property="og:type" content="website">
+        <meta property="og:title" content="Campfire">
+        <meta property="og:description" content="Social media for the galaxy-wide-web!">
+        <meta property="og:image" content="https://campfire.bliss.town/favicon.png">
+
+        <meta name="twitter:card" content="summary_large_image">
+        <meta property="twitter:domain" content="campfire.bliss.town">
+        <meta property="twitter:url" content="https://campfire.bliss.town">
+        <meta name="twitter:title" content="Campfire">
+        <meta name="twitter:description" content="Social media for the galaxy-wide-web!">
+        <meta name="twitter:image" content="https://campfire.bliss.town/favicon.png">
+
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
--- a/src/img/CampfireLogo.svelte
+++ b/src/img/CampfireLogo.svelte
--- a/src/img/campfire-logo.svg
+++ b/src/img/campfire-logo.svg
--- a/src/img/spacesocial-logo.svg
+++ b/src/img/spacesocial-logo.svg
@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
-        <clipPath id="_clip1">
-            <path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
-        </clipPath>
-        <g clip-path="url(#_clip1)">
-            <g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
-                <g id="spinner">
-                    <path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z"/>
-                </g>
-            </g>
-            <g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
-                <g id="star-shine" serif:id="star shine">
-                    <rect x="383" y="377" width="11" height="11"/>
-                </g>
-            </g>
-            <g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
-                <path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z"/>
-            </g>
-        </g>
-    </g>
-    <g transform="matrix(2.67689,0,0,2.67689,-1226.58,-333.741)">
-        <g transform="matrix(13.6363,0,0,13.6363,542.101,145.423)">
-        </g>
-        <text x="457.966px" y="145.423px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;">space social</text>
-    </g>
-</svg>
--- a/src/lib/app.css
+++ b/src/lib/app.css
@ -20,6 +20,15 @@
        --accent: #CDA1EC;
        --text: #E2DFE3;
    }
+    .light-only {
+        display: none
+    }
+}
+
+@media screen and (prefers-color-scheme: light) {
+    .dark-only {
+        display: none
+    }
 }

@supports (font-variation-settings: normal) {
@ -49,7 +58,7 @@ a:hover {
    text-decoration: underline;
 }

-#spacesocial-app {
+#app {
    margin: auto 0;
    padding: 0 16px;
    display: flex;
--- a/src/lib/client/api.js
+++ b/src/lib/client/api.js
@ -7,10 +7,10 @@ import { get } from 'svelte/store';

 export async function createApp(host) {
    let form = new FormData();
-    form.append("client_name", "space social");
-    form.append("redirect_uris", `${location.origin}`);
+    form.append("client_name", "Campfire");
+    form.append("redirect_uris", `${location.origin}/callback`);
    form.append("scopes", "read write push");
-    form.append("website", "https://spacesocial.arimelody.me");
+    form.append("website", "https://campfire.bliss.town");

    const res = await fetch(`https://${host}/api/v1/apps`, {
        method: "POST",
@ -35,7 +35,7 @@ export function getOAuthUrl() {
    return `https://${client.instance.host}/oauth/authorize` +
        `?client_id=${client.app.id}` +
        "&scope=read+write+push" +
-        `&redirect_uri=${location.origin}` +
+        `&redirect_uri=${location.origin}/callback` +
        "&response_type=code";
 }

@ -44,7 +44,7 @@ export async function getToken(code) {
    let form = new FormData();
    form.append("client_id", client.app.id);
    form.append("client_secret", client.app.secret);
-    form.append("redirect_uri", `${location.origin}`);
+    form.append("redirect_uri", `${location.origin}/callback`);
    form.append("grant_type", "authorization_code");
    form.append("code", code);
    form.append("scope", "read write push");
@ -212,9 +212,6 @@ export async function parsePost(data, ancestor_count, with_context) {
    let client = get(Client.get());
    let post = new Post();

-    // if (client.instance.capabilities.includes(capabilities.MARKDOWN_CONTENT))
-    //     post.text = data.text;
-    // else
    post.text = data.content;

    post.reply = null;
@ -223,10 +220,10 @@ export async function parsePost(data, ancestor_count, with_context) {
        ancestor_count !== 0
    ) {
        const reply_data = data.reply || await getPost(data.in_reply_to_id, ancestor_count - 1);
-        post.reply = await parsePost(reply_data, ancestor_count - 1, false);
        // if the post returns false, we probably don't have permission to read it.
        // we'll respect the thread's privacy, and leave it alone :)
-        if (post.reply === false) return false;
+        if (!reply_data) return false;
+        post.reply = await parsePost(reply_data, ancestor_count - 1, false);
    }
    post.boost = data.reblog ? await parsePost(data.reblog, 1, false) : null;

@ -259,7 +256,7 @@ export async function parsePost(data, ancestor_count, with_context) {
    post.reply_count = data.replies_count;
    post.favourite_count = data.favourites_count;
    post.favourited = data.favourited;
-    post.boosted = data.boosted;
+    post.boosted = data.reblogged;
    post.mentions = data.mentions;
    post.files = data.media_attachments;
    post.url = data.url;
@ -305,7 +302,7 @@ export async function parseUser(data) {
    if (data.acct.includes('@'))
        user.host = data.acct.split('@')[1];
    else
-        user.host = get(Client.get()).instance.host;
+        user.host = client.instance.host;

    user.emojis = [];
    data.emojis.forEach(emoji_data => {
@ -315,7 +312,7 @@ export async function parseUser(data) {
        user.emojis.push(parseEmoji(emoji_data));
    });

-    get(Client.get()).putCacheUser(user);
+    client.putCacheUser(user);
    return user;
 }

--- a/src/lib/client/client.js
+++ b/src/lib/client/client.js
@ -4,7 +4,7 @@ import { get, writable } from 'svelte/store';

 let client = writable(false);

-const save_name = "spacesocial";
+const save_name = "campfire";

 export class Client {
    instance;
@ -15,6 +15,7 @@ export class Client {
    constructor() {
        this.instance = null;
        this.app = null;
+        this.user = null;
        this.cache = {
            users: {},
            emojis: {},
@ -22,10 +23,9 @@ export class Client {
    }

    static get() {
-        if (get(client)) return client;
+        let current = get(client);
+        if (current && current.app) return client;
        let new_client = new Client();
-        if (typeof window !== typeof undefined)
-            window.peekie = new_client;
        new_client.load();
        client.set(new_client);
        return client;
@ -44,13 +44,13 @@ export class Client {
        if (this.instance.type == server_types.UNSUPPORTED) {
            console.warn(`Server ${host} is unsupported - ${data.version}`);
            if (!confirm(
-		`This app does not officially support ${host}. ` +
-		`Things may break, or otherwise not work as epxected! ` +
-		`Are you sure you wish to continue?`
-	    )) return false;
+                `This app does not officially support ${host}. ` +
+                `Things may break, or otherwise not work as epxected! ` +
+                `Are you sure you wish to continue?`
+            )) return false;
        } else {
-	    console.log(`Server is "${this.instance.type}" (or compatible) with capabilities: [${this.instance.capabilities}].`);
-	}
+            console.log(`Server is "${this.instance.type}" (or compatible) with capabilities: [${this.instance.capabilities}].`);
+        }

        this.app = await api.createApp(host);

@ -85,11 +85,21 @@ export class Client {
    }

    async verifyCredentials() {
+        if (this.user) return this.user;
+        if (!this.app || !this.app.token) {
+            this.user = false;
+            return false;
+        }
        const data = await api.verifyCredentials();
-        if (!data) return false;
-        this.user = await api.parseUser(data);
-        client.set(this);
-        return data;
+        if (!data) {
+            this.user = false;
+            return false;
+        }
+        await client.update(async c => {
+            c.user = await api.parseUser(data);
+            console.log(`Logged in as @${c.user.username}@${c.user.host}`);
+        });
+        return this.user;
    }

    async getTimeline(last_post_id) {
--- a/src/lib/timeline.js
+++ b/src/lib/timeline.js
@ -4,13 +4,14 @@ import { parsePost } from '$lib/client/api.js';

 export let posts = writable([]);

-let client = get(Client.get());
 let loading = false;

 export async function getTimeline(clean) {
    if (loading) return; // no spamming!!
    loading = true;

+    let client = get(Client.get());
+
    let timeline_data;
    if (clean || get(posts).length === 0) timeline_data = await client.getTimeline()
    else timeline_data = await client.getTimeline(get(posts)[get(posts).length - 1].id);
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@ -1,13 +1,15 @@
 <script>
-    import Logo from '$lib/../img/spacesocial-logo.svg';
+    import Logo from '$lib/../img/CampfireLogo.svelte';
    import Button from './Button.svelte';
    import Feed from './Feed.svelte';
    import { Client } from '$lib/client/client.js';
    import { play_sound } from '$lib/sound.js';
    import { getTimeline } from '$lib/timeline.js';
+    import { goto } from '$app/navigation';
+    import { get } from 'svelte/store';

    const VERSION = APP_VERSION;
-
+    
    let client = false;
    Client.get().subscribe(c => {
        client = c;
@ -25,26 +27,29 @@
            });
            return;
        }
-        location = "/";
+        goto("/");
    }

-    function log_out() {
+    async function log_out() {
        if (!confirm("This will log you out. Are you sure?")) return;
-        client.logout().then(() => {
-            location = "/";
-        });
+        await get(Client.get()).logout();
+        goto("/");
    }
 </script>

 <div id="navigation">
-    <header id="instance-header"> <!-- style={`background-image: url(${banner_url})`}> -->
-        <!-- <img src={icon_url} class="instance-icon" height="92px" aria-hidden="true"> -->
-        <div class="instance-icon instance-icon-mask" style={`mask-image: url(${Logo})`} height="92px" aria-hidden="true">
-        <!-- <img src={Logo} class="instance-icon" height="92px" aria-hidden="true"> -->
-    </header>
+    {#if client.instance && client.instance.icon_url && client.instance.banner_url}
+        <header class="instance-header" style="background-image: url({client.instance.banner_url})">
+            <img src={client.instance.icon_url} class="instance-icon" height="92px" aria-hidden="true">
+        </header>
+    {:else}
+        <header class="instance-header">
+            <Logo />
+        </header>
+    {/if}

    <div id="nav-items">
-        <Button label="Timeline" on:click={() => goTimeline()} active>🖼️ Timeline</Button>
+        <Button label="Timeline" on:click={() => goTimeline()} active={client.user}>🖼️ Timeline</Button>
        <Button label="Notifications" disabled>
            🔔 Notifications
            {#if notification_count}
@ -84,7 +89,7 @@
    </div>
    {/if}
    <span class="version">
-        space social v{VERSION}
+        campfire v{VERSION}
        <br>
        <ul>
            <li><a href="https://git.arimelody.me/ari/spacesocial-client">source</a></li>
@ -104,7 +109,7 @@
        background-color: var(--bg-800);
    }

-    #instance-header {
+    .instance-header {
        width: 100%;
        height: 172px;
        display: flex;
@ -118,18 +123,14 @@
    }

    .instance-icon {
-        height: 92px;
+        height: 50%;
        border-radius: 8px;
    }

-    .instance-icon-mask {
-        width: 80%;
+    :global(.app-logo) {
+        max-width: 80%;
+        max-height: 80%;
        margin: auto;
-        background-color: var(--text);
-        mask-repeat: no-repeat;
-        -webkit-mask-repeat: no-repeat;
-        mask-origin: border-box;
-        -webkit-mask-origin: border-box;
    }

    #nav-items {
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@ -18,9 +18,8 @@

    let post_context = undefined;
    let post = post_data;
-    let is_boost = false;
-    if (post_data.boost) {
-        is_boost = true;
+    let is_boost = !!post_data.boost;
+    if (is_boost) {
        post_context = post_data;
        post = post_data.boost;
    }
@ -28,6 +27,7 @@
    function gotoPost() {
        if (focused) return;
        if (event.key && event.key !== "Enter") return;
+        console.log(`/post/${post.id}`);
        goto(`/post/${post.id}`);
    }

@ -42,8 +42,8 @@
            console.error(`Failed to boost post ${post.id}`);
            return;
        }
-        post.boosted = data.boosted;
-        post.boost_count = data.reblogs_count;
+        post.boosted = data.reblog ? data.reblog.reblogged : data.boosted;
+        post.boost_count = data.reblog ? data.reblog.reblogs_count : data.reblogs_count;
    }

    async function toggleFavourite() {
@ -126,8 +126,8 @@
            </div>
            <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
-                <ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
-                <ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
+                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
+                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
                <ActionButton type="react" label="React" disabled>😃</ActionButton>
                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
--- a/src/lib/ui/post/ReplyContext.svelte
+++ b/src/lib/ui/post/ReplyContext.svelte
@ -16,8 +16,8 @@
    let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;

    function gotoPost() {
-        if (focused) return;
        if (event.key && event.key !== "Enter") return;
+        console.log(`/post/${post.id}`);
        goto(`/post/${post.id}`);
    }

@ -108,8 +108,8 @@
            </div>
            <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
-                <ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
-                <ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
+                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
+                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
                <ActionButton type="react" label="React" disabled>😃</ActionButton>
                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,21 @@
+<script>
+    import '$lib/app.css';
+    import Navigation from '$lib/ui/Navigation.svelte';
+    import Widgets from '$lib/ui/Widgets.svelte';
+</script>
+
+<div id="app">
+
+    <header>
+        <Navigation />
+    </header>
+
+    <main>
+        <slot></slot>
+    </main>
+
+    <div id="widgets">
+        <Widgets />
+    </div>
+
+</div>
--- a/src/routes/+page.js
+++ b/src/routes/+page.js
@ -0,0 +1,15 @@
+import Feed from '$lib/ui/Feed.svelte';
+import { Client } from '$lib/client/client.js';
+import Button from '$lib/ui/Button.svelte';
+import { get } from 'svelte/store';
+
+export const prerender = true;
+export const ssr = false;
+
+export async function load() {
+    let client = get(Client.get());
+    await client.verifyCredentials();
+    return { 
+        client: client
+    };
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,42 +1,31 @@
 <script>
-    import '$lib/app.css';
-    import Navigation from '$lib/ui/Navigation.svelte';
-    import Widgets from '$lib/ui/Widgets.svelte';
+    import Logo from '$lib/../img/CampfireLogo.svelte';
    import Feed from '$lib/ui/Feed.svelte';
    import { Client } from '$lib/client/client.js';
+    import User from '$lib/user/user.js';
    import Button from '$lib/ui/Button.svelte';
    import { get } from 'svelte/store';

-    let client = get(Client.get());
-    let ready = client.app;
-    let logged_in = ready && client.app.token;
+    export let data;
+
+    let client = data.client;
+    let logged_in = client.user && client.user.constructor === User;
    let instance_url_error = false;
    let logging_in = false;

-    if (typeof location !== typeof undefined) {
-        let auth_code = new URLSearchParams(location.search).get("code");
-        if (auth_code) {
-            client.getToken(auth_code).then(() => {
-                client.save();
-                location = location.origin;
-            });
-        }
-    }
-
-    if (client.app && client.app.token) {
-        // this triggers the client actually getting the authenticated user's data.
-        client.verifyCredentials().then(res => {
-            if (res) {
-                console.log(`Logged in as @${client.user.username}@${client.user.host}`);
-            }
-        });
-    }
-
    function log_in(event) {
-        logging_in = true;
        event.preventDefault();
+        instance_url_error = false;
+
+        logging_in = true;
        const host = event.target.host.value;

+        if (!host || host === "") {
+            instance_url_error = "Please enter an instance domain.";
+            logging_in = false;
+            return;
+        }
+
        client.init(host).then(res => {
            logging_in = false;
            if (!res) return;
@ -50,67 +39,49 @@
    }
 </script>

-<div id="spacesocial-app">
-
+{#if logged_in}
    <header>
-        <Navigation />
+        <h1>Home</h1>
+        <nav>
+            <Button centered active>Home</Button>
+            <Button centered disabled>Local</Button>
+            <Button centered disabled>Federated</Button>
+        </nav>
    </header>

-    <main>
-        {#if ready}
-            {#if logged_in}
-                <header>
-                    <h1>Home</h1>
-                    <nav>
-                        <Button centered active>Home</Button>
-                        <Button centered disabled>Local</Button>
-                        <Button centered disabled>Federated</Button>
-                    </nav>
-                </header>
+    <Feed />
+{:else}
+    <form on:submit={log_in} id="login-form">
+        <Logo />
+        <p>Welcome, fediverse user!</p>
+        <p>Please enter your instance domain to log in.</p>
+        <div class="input-wrapper">
+            <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
+                         {#if instance_url_error}
+                             <p class="error">{instance_url_error}</p>
+                         {/if}
+        </div>
+        <br>
+        <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
+        <p><small>
+                              Please note this is
+                              <strong><em>extremely experimental software</em></strong>;
+                              things are likely to break!
+                              <br>
+                              If that's all cool with you, welcome aboard!
+        </small></p>

-                <Feed />
-            {:else}
-                <div>
-                    <form on:submit={log_in} id="login">
-                        <h1>Space Social</h1>
-                        <p>Welcome, fediverse user!</p>
-                        <p>Please enter your instance domain to log in.</p>
-                        <div class="input-wrapper">
-                            <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
-                            {#if instance_url_error}
-                                <p class="error">{instance_url_error}</p>
-                            {/if}
-                        </div>
-                        <br>
-                        <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
-                        <p><small>
-                            Please note this is
-                            <strong><em>extremely experimental software</em></strong>;
-                            things are likely to break!
-                            <br>
-                            If that's all cool with you, welcome aboard!
-                        </small></p>
-
-                        <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
-                    </form>
-                </div>
-            {/if}
-        {:else}
-            <div class="loading throb">
-                <span>just a moment...</span>
-            </div>
-        {/if}
-    </main>
-
-    <div id="widgets">
-        <Widgets />
-    </div>
-
-</div>
+        <p class="form-footer">made with ❤ by <a href="https://bliss.town">bliss town</a>, 2024</p>
+    </form>
+{/if}

 <style>
-    form#login {
-        margin: 25vh 0 32px 0;
+    form#login-form {
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
        text-align: center;
    }

@ -165,7 +136,7 @@
    }

    button#login {
-        margin: -8px auto 0 auto;
+        margin: 8px auto;
        padding: 12px 24px;
        display: flex;
        flex-direction: row;
@ -215,7 +186,7 @@

    .loading {
        width: 100%;
-        height: 80vh;
+        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
@ -223,21 +194,27 @@
        font-weight: bold;
    }

-    main header {
+    header {
        width: 100%;
        margin: 16px 0 8px 0;
        display: flex;
        flex-direction: row;
    }

-    main header h1 {
+    header h1 {
        font-size: 1.5em;
    }

-    main header nav {
+    header nav {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
+
+    :global(.app-logo) {
+        height: auto;
+        width: 320px;
+        margin: 8px;
+    }
 </style>
--- a/src/routes/callback/+page.js
+++ b/src/routes/callback/+page.js
@ -0,0 +1,20 @@
+import { Client } from '$lib/client/client.js';
+import { goto } from '$app/navigation';
+import { error } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+
+export const ssr = false;
+
+export async function load({ params, url }) {
+    const client = get(Client.get());
+    let auth_code = url.searchParams.get("code");
+    if (auth_code) {
+        client.getToken(auth_code).then(() => {
+            client.save();
+            goto("/");
+        });
+    }
+    error(400, {
+        message: "Bad request"
+    });
+}
--- a/src/routes/post/+page.js
+++ b/src/routes/post/+page.js
@ -0,0 +1,5 @@
+import { error } from '@sveltejs/kit';
+
+export function load(event) {
+    error(404, 'Not Found');
+}
--- a/src/routes/post/[id]/+layout.svelte
+++ b/src/routes/post/[id]/+layout.svelte
@ -1,50 +0,0 @@
-<script>
-    import Navigation from '$lib/ui/Navigation.svelte';
-    import Widgets from '$lib/ui/Widgets.svelte';
-    import Button from '$lib/ui/Button.svelte';
-</script>
-
-<div id="spacesocial-app">
-
-    <header>
-        <Navigation />
-    </header>
-
-    <main>
-        <header>
-            <h1>Home</h1>
-            <nav>
-                <Button centered active>Home</Button>
-                <Button centered disabled>Local</Button>
-                <Button centered disabled>Federated</Button>
-            </nav>
-        </header>
-
-        <slot></slot>
-    </main>
-
-    <div id="widgets">
-        <Widgets />
-    </div>
-
-</div>
-
-<style>
-    main header {
-        width: 100%;
-        margin: 16px 0 8px 0;
-        display: flex;
-        flex-direction: row;
-    }
-
-    main header h1 {
-        font-size: 1.5em;
-    }
-
-    main header nav {
-        margin-left: auto;
-        display: flex;
-        flex-direction: row;
-        gap: 8px;
-    }
-</style>
--- a/src/routes/post/[id]/+page.js
+++ b/src/routes/post/[id]/+page.js
@ -3,22 +3,11 @@ import { Client } from '$lib/client/client.js';
 import { parsePost } from '$lib/client/api.js';
 import { get } from 'svelte/store';

-export const prerender = true;
 export const ssr = false;

 export async function load({ params }) {
    let client = get(Client.get());
-    if (client.app && client.app.token) {
-        // this triggers the client actually getting the authenticated user's data.
-        const res = await client.verifyCredentials()
-        if (res) {
-            console.log(`Logged in as @${client.user.username}@${client.user.host}`);
-        } else {
-            return null;
-        }
-    } else {
-        return null;
-    }
+    await client.verifyCredentials();

    const post_id = params.id;

--- a/src/routes/post/[id]/+page.svelte
+++ b/src/routes/post/[id]/+page.svelte
@ -1,27 +1,57 @@
 <script>
    import '$lib/app.css';
    import Post from '$lib/ui/post/Post.svelte';
+    import Button from '$lib/ui/Button.svelte';

    export let data;
-    const main_post = data.posts[0];
-    const replies = data.posts.slice(1);
+    $: main_post = data.posts[0];
+    $: replies = data.posts.slice(1);
 </script>

+<header>
+    <h1>Home</h1>
+    <nav>
+        <Button centered active>Home</Button>
+        <Button centered disabled>Local</Button>
+        <Button centered disabled>Federated</Button>
+    </nav>
+</header>
+
 <div id="feed" role="feed">
    {#if data.posts.length <= 0}
        <div class="throb">
            <span>just a moment...</span>
        </div>
    {:else}
+        {#key data}
        <Post post_data={main_post} focused />
        <br>
        {#each replies as post}
            <Post post_data={post} />
        {/each}
+        {/key}
    {/if}
 </div>

 <style>
+    header {
+        width: 100%;
+        margin: 16px 0 8px 0;
+        display: flex;
+        flex-direction: row;
+    }
+
+    header h1 {
+        font-size: 1.5em;
+    }
+
+    header nav {
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+    }
+
    #feed {
        margin-bottom: 20vh;
    }
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/icon/campfire-icon.png
+++ b/static/icon/campfire-icon.png
--- a/static/robots.txt
+++ b/static/robots.txt
@ -0,0 +1,14 @@
+User-agent: *
+Disallow: /nobot/
+Disallow: /private/
+
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+
+User-agent: Google-Extended
+Disallow: /
+
+User-agent: CCBot
+Disallow: /
--- a/svelte.config.js
+++ b/svelte.config.js
@ -11,8 +11,8 @@ const config = {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
-            fallback: undefined,
-            precompress: false,
+            fallback: "fallback.html",
+            precompress: true,
            strict: true,
        }),
        version: {
Author	SHA1	Message	Date
ari melody	e5d8cafd25	rebrand to campfire!	2024-06-30 17:45:04 +01:00
ari melody	078b3c21f6	SEO tags and version 0.2.0-rev3	2024-06-30 00:05:35 +01:00
ari melody	f2c96d5968	fixed boosts not displaying properly; among	2024-06-29 23:10:29 +01:00
ari melody	5db825d97e	favicon and robots.txt!	2024-06-29 20:51:50 +01:00
ari melody	71a95c92db	fixed callback url	2024-06-29 19:52:52 +01:00
ari melody	509a817065	simplified some UI code	2024-06-29 17:27:46 +01:00
ari melody	45d57d5b96	fix private threads not being filtered	2024-06-29 17:26:31 +01:00
ari melody	6c19a4f3c9	fix navigation in post focus	2024-06-29 16:19:34 +01:00
ari melody	ce1dfc388f	fix login page showing when logged in	2024-06-29 15:52:52 +01:00
ari melody	8f41613179	fix login flow, improve light/dark theme	2024-06-29 15:24:33 +01:00