restructure for sveltekit

.gitignore

@@ -1,4 +1,5 @@
 **/.DS_Store
 node_modules/
 dist/
-# .secret/
+.secret/
+.svelte-kit/

package-lock.json

@@ -1,14 +1,16 @@
 {
     "name": "spacesocial-client",
-    "version": "0.1.1",
+    "version": "0.2.0_rev2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "spacesocial-client",
-            "version": "0.1.1",
+            "version": "0.2.0_rev2",
             "license": "ISC",
             "devDependencies": {
+                "@sveltejs/adapter-auto": "^3.2.2",
+                "@sveltejs/kit": "^2.5.17",
                 "@sveltejs/vite-plugin-svelte": "^3.1.1",
                 "svelte": "^4.2.18",
                 "vite": "^5.3.1"
@@ -472,6 +474,13 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@polka/url": {
+            "version": "1.0.0-next.25",
+            "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+            "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.18.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -696,6 +705,52 @@
                 "win32"
             ]
         },
+        "node_modules/@sveltejs/adapter-auto": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.2.tgz",
+            "integrity": "sha512-Mso5xPCA8zgcKrv+QioVlqMZkyUQ5MjDJiEPuG/Z7cV/5tmwV7LmcVWk5tZ+H0NCOV1x12AsoSpt/CwFwuVXMA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "import-meta-resolve": "^4.1.0"
+            },
+            "peerDependencies": {
+                "@sveltejs/kit": "^2.0.0"
+            }
+        },
+        "node_modules/@sveltejs/kit": {
+            "version": "2.5.17",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.17.tgz",
+            "integrity": "sha512-wiADwq7VreR3ctOyxilAZOfPz3Jiy2IIp2C8gfafhTdQaVuGIHllfqQm8dXZKADymKr3uShxzgLZFT+a+CM4kA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/cookie": "^0.6.0",
+                "cookie": "^0.6.0",
+                "devalue": "^5.0.0",
+                "esm-env": "^1.0.0",
+                "import-meta-resolve": "^4.1.0",
+                "kleur": "^4.1.5",
+                "magic-string": "^0.30.5",
+                "mrmime": "^2.0.0",
+                "sade": "^1.8.1",
+                "set-cookie-parser": "^2.6.0",
+                "sirv": "^2.0.4",
+                "tiny-glob": "^0.2.9"
+            },
+            "bin": {
+                "svelte-kit": "svelte-kit.js"
+            },
+            "engines": {
+                "node": ">=18.13"
+            },
+            "peerDependencies": {
+                "@sveltejs/vite-plugin-svelte": "^3.0.0",
+                "svelte": "^4.0.0 || ^5.0.0-next.0",
+                "vite": "^5.0.3"
+            }
+        },
         "node_modules/@sveltejs/vite-plugin-svelte": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.1.tgz",
@@ -737,6 +792,13 @@
                 "vite": "^5.0.0"
             }
         },
+        "node_modules/@types/cookie": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+            "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -791,6 +853,16 @@
                 "periscopic": "^3.1.0"
             }
         },
+        "node_modules/cookie": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+            "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/css-tree": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -843,6 +915,13 @@
                 "node": ">=6"
             }
         },
+        "node_modules/devalue": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
+            "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/esbuild": {
             "version": "0.21.5",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -882,6 +961,13 @@
                 "@esbuild/win32-x64": "0.21.5"
             }
         },
+        "node_modules/esm-env": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
+            "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/estree-walker": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -907,6 +993,31 @@
                 "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
             }
         },
+        "node_modules/globalyzer": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+            "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/globrex": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+            "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/import-meta-resolve": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+            "integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/is-reference": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
@@ -951,6 +1062,26 @@
             "dev": true,
             "license": "CC0-1.0"
         },
+        "node_modules/mri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+            "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/mrmime": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+            "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1061,6 +1192,41 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/sade": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+            "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mri": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/set-cookie-parser": {
+            "version": "2.6.0",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
+            "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/sirv": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+            "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@polka/url": "^1.0.0-next.24",
+                "mrmime": "^2.0.0",
+                "totalist": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 10"
+            }
+        },
         "node_modules/source-map-js": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1110,6 +1276,27 @@
                 "svelte": "^3.19.0 || ^4.0.0"
             }
         },
+        "node_modules/tiny-glob": {
+            "version": "0.2.9",
+            "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+            "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "globalyzer": "0.1.0",
+                "globrex": "^0.1.2"
+            }
+        },
+        "node_modules/totalist": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+            "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/vite": {
             "version": "5.3.1",
             "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",

package.json

@@ -2,15 +2,18 @@
     "name": "spacesocial-client",
     "version": "0.2.0_rev2",
     "description": "social media for the galaxy-wide-web! 🌌",
+    "private": true,
     "type": "module",
     "scripts": {
         "dev": "vite --host 0.0.0.0",
         "build": "vite build",
         "preview": "vite preview"
     },
-    "author": "",
+    "author": "ari melody <ari@arimelody.me>",
-    "license": "ISC",
+    "license": "GPL-3.0",
     "devDependencies": {
+        "@sveltejs/adapter-auto": "^3.2.2",
+        "@sveltejs/kit": "^2.5.17",
         "@sveltejs/vite-plugin-svelte": "^3.1.1",
         "svelte": "^4.2.18",
         "vite": "^5.3.1"

src/app.html

@@ -5,10 +5,10 @@
         <link rel="icon" type="image/png" href="/favicon.png">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>space social</title>
+        %sveltekit.head%
     </head>
-    <body>
+    <body data-sveltekit-preload-data="hover">
-        <div id="app"></div>
+        <div style="display: contents">%sveltekit.body%</div>
         <noscript>you need to enable javascript to use this app! :(</noscript>
-        <script type="module" src="/src/main.js"></script>
     </body>
 </html>

src/lib/client/client.js

@@ -1,4 +1,3 @@
-import { version as APP_VERSION } from '../../package.json';
 import { Instance, server_types } from './instance.js';
 import * as api from './api.js';
 import { get, writable } from 'svelte/store';
@@ -25,6 +24,7 @@ export class Client {
     static get() {
         if (get(client)) return client;
         let new_client = new Client();
+        if (typeof window !== typeof undefined)
             window.peekie = new_client;
         new_client.load();
         client.set(new_client);
@@ -157,6 +157,7 @@ export class Client {
     }
 
     save() {
+        if (typeof localStorage === typeof undefined) return;
         localStorage.setItem(save_name, JSON.stringify({
             version: APP_VERSION,
             instance: {
@@ -168,6 +169,7 @@ export class Client {
     }
 
     load() {
+        if (typeof localStorage === typeof undefined) return;
         let json = localStorage.getItem(save_name);
         if (!json) return false;
         let saved = JSON.parse(json);

src/lib/sound.js

@@ -1,8 +1,12 @@
-const sounds = {
+let sounds;
+
+if (typeof Audio !== typeof undefined) {
+    sounds = {
         "default": new Audio("/sound/log.ogg"),
         "post": new Audio("/sound/success.ogg"),
         "boost": new Audio("/sound/hello.ogg"),
     };
+}
 
 export function play_sound(name) {
     if (name === false) return;

src/lib/ui/Navigation.svelte

@@ -1,6 +1,5 @@
 <script>
-    import { version as APP_VERSION } from '../../package.json';
+    import Logo from '../../img/spacesocial-logo.svg';
-    import Logo from '../img/spacesocial-logo.svg';
     import Button from './Button.svelte';
     import Feed from './Feed.svelte';
     import { Client } from '../client/client.js';

src/routes/+page.svelte

@@ -0,0 +1,224 @@
+<script>
+    import '$lib/app.css';
+    import Navigation from '$lib/ui/Navigation.svelte';
+    import Widgets from '$lib/ui/Widgets.svelte';
+    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';
+
+    let client = get(Client.get());
+    let ready = client.app && client.app.token;
+    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();
+        const host = event.target.host.value;
+
+        client.init(host).then(res => {
+            logging_in = false;
+            if (!res) return;
+            if (res.constructor === String) {
+                instance_url_error = res;
+                return;
+            };
+            let oauth_url = client.getOAuthUrl();
+            location = oauth_url;
+        });
+    }
+</script>
+
+<div id="spacesocial-app">
+
+    <header>
+        <Navigation />
+    </header>
+
+    <main>
+        {#if ready}
+            <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}
+    </main>
+
+    <div id="widgets">
+        <Widgets />
+    </div>
+
+</div>
+
+<style>
+    #spacesocial-app {
+        margin: auto 0;
+        padding: 0 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 16px;
+    }
+
+    header, #widgets {
+        width: 300px;
+    }
+
+    main {
+        width: 732px;
+    }
+
+    div.pane {
+        margin-top: 16px;
+        padding: 20px 32px;
+        border: 1px solid #8884;
+        border-radius: 16px;
+        background-color: var(--bg1);
+    }
+
+    form#login {
+        margin: 25vh 0 32px 0;
+        text-align: center;
+    }
+
+    a {
+        color: var(--accent);
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    .input-wrapper {
+        width: 360px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    input[type=text] {
+        width: 100%;
+        padding: 12px;
+        display: block;
+        border-radius: 8px;
+        border: 1px solid var(--accent);
+        background-color: var(--bg-800);
+
+        font-family: inherit;
+        font-weight: bold;
+        font-size: inherit;
+        color: var(--text);
+
+        transition: box-shadow .2s;
+    }
+
+    input[type=text]::placeholder {
+        opacity: .8;
+    }
+
+    input[type=text]:focus {
+        outline: none;
+        box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
+    }
+
+    .error {
+        margin: 6px;
+        font-style: italic;
+        font-size: .9em;
+        color: red;
+        opacity: .7;
+    }
+
+    button#login {
+        margin: -8px auto 0 auto;
+        padding: 12px 24px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        font-family: inherit;
+        font-size: 1rem;
+        font-weight: 600;
+        text-align: left;
+
+        border-radius: 8px;
+        border-width: 2px;
+        border-style: solid;
+
+        background-color: var(--bg-700);
+        color: var(--text);
+        border-color: transparent;
+
+        transition-property: border-color, background-color, color;
+        transition-timing-function: ease-out;
+        transition-duration: .1s;
+
+        cursor: pointer;
+        text-align: center;
+        justify-content: center;
+    }
+
+    button#login:hover {
+        background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
+        border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
+    }
+
+    button#login:active {
+        background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
+        border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
+    }
+
+    button#login.disabled {
+        opacity: .5;
+        cursor: initial;
+    }
+
+    .form-footer {
+        opacity: .7;
+    }
+</style>

svelte.config.js

@@ -1,7 +1,18 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import adapter from '@sveltejs/adapter-auto';
+import * as child_process from 'node:child_process';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
-    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+const config = {
-    // for more information about preprocessors
+	kit: {
-    preprocess: vitePreprocess(),
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+        version: {
+            name: child_process.execSync('git rev-parse HEAD').toString().trim()
         }
+    },
+};
+
+export default config;
+

vite.config.js

@@ -1,7 +1,17 @@
-import { defineConfig } from 'vite'
+import { sveltekit } from '@sveltejs/kit/vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const packageFile = fileURLToPath(new URL('package.json', import.meta.url));
+const packageData = readFileSync(packageFile, 'utf8');
+const packageJSON = JSON.parse(packageData);
+
 
-// https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [svelte()],
+	plugins: [sveltekit()],
-})
+    define: {
+        APP_VERSION: JSON.stringify(packageJSON.version)
+    }
+});
+