Updates to lots of stuff

src/lib/api/index-repository.ts

@@ -1,8 +1,8 @@
 import * as publicEnv from "$env/static/public";
 
-import type { ServerDeveloper } from "./models/base";
-import type { ServerMod, ServerSimpleMod } from "./models/mod.js";
-import type { ModStatus, ServerModVersion } from "./models/mod-version.js";
+import type { ServerDeveloper, ServerModDeveloper, GithubLogin } from "./models/developer";
+import type { ServerMod, ServerSimpleMod } from "./models/mod";
+import type { ModStatus, ServerModVersion } from "./models/mod-version";
 import type { ServerStats } from "./models/stats";
 
 const BASE_URL =
@@ -39,6 +39,19 @@ interface BaseRequest<T> {
 
 type BasePaginatedRequest<T> = BaseRequest<Paginated<T>>;
 
+function validate<T>(data: BaseRequest<T>) {
+    if (data.error) {
+        throw new IndexError(data.error);
+    }
+    return data.payload;
+}
+function validateNoThrow<T>(data: BaseRequest<T>) {
+    if (data.error) {
+        console.log("ERROR: " + data.error)
+        return null;
+    }
+    return data.payload;
+}
 export interface ModSearchParams {
     page?: number;
     developer?: string;
@@ -517,27 +530,49 @@ export class IndexClient {
         this.token = null;
     }
 
-    async deleteAllTokens(): Promise<void> {
-        this.requireAuth();
-
-        const r = await this.fetch(`${BASE_URL}/v1/me/tokens`, {
-            headers: new Headers({
-                Authorization: `Bearer ${this.token}`,
-            }),
-            method: "DELETE",
-        });
+export async function githubAuth(): Promise<GithubLogin> {
+    const r = await fetch(`${BASE_URL}/v1/login/github`, {
+        headers: new Headers({
+            "Content-Type": "application/json",
+        }),
+        method: "POST",
+    });
+    const data = await r.json();
 
-        if (r.status != 204) {
-            const data: BaseRequest<void> = await r.json();
-            throw new IndexError(data.error);
-        }
+    return validate<GithubLogin>(data);
+}
 
-        this.token = null;
+export async function githubAuthPoll(uuid: string): Promise<string | null> {
+    const r = await fetch(`${BASE_URL}/v1/login/github/poll`, {
+        headers: new Headers({
+            "Content-Type": "application/json",
+        }),
+        method: "POST",
+        body: JSON.stringify({ uuid })
+    });
+    const data = await r.json();
+
+    return validateNoThrow<string>(data);
+}
+async deleteAllTokens(): Promise<void> {
+    this.requireAuth();
+
+    const r = await this.fetch(`${BASE_URL}/v1/me/tokens`, {
+        headers: new Headers({
+            Authorization: `Bearer ${this.token}`,
+        }),
+        method: "DELETE",
+    });
+
+    if (r.status != 204) {
+        const data: BaseRequest<void> = await r.json();
+        throw new IndexError(data.error);
     }
 
-    async getServerStats(): Promise<ServerStats> {
-        const r = await this.fetch(`${BASE_URL}/v1/stats`);
-        const data = await r.json();
-        return this.validate<ServerStats>(data);
-    }
+    this.token = null;
+}
+export async function getServerStats(): Promise<ServerStats> {
+    const r = await fetch(`${BASE_URL}/v1/stats`);
+    const data = await r.json();
+    return this.validate<ServerStats>(data);
 }

src/lib/api/models/developer.ts

@@ -0,0 +1,21 @@
+export interface ServerDeveloper {
+    id: number;
+    username: string;
+    display_name: string;
+    verified: boolean;
+    admin: boolean;
+}
+
+export interface ServerModDeveloper {
+    id: number;
+    username: string;
+    display_name: string;
+    is_owner: boolean;
+}
+
+export interface GithubLogin {
+    uuid: string;
+    interval: number;
+    uri: string;
+    code: string;
+}

src/lib/api/models/mod.ts

@@ -1,4 +1,4 @@
-import type { ServerModDeveloper } from "./mod-developer.js";
+import type { ServerModDeveloper } from "./developer";
 import type {
     ServerModVersion,
     ServerSimpleModVersion,

src/lib/components/Button.svelte

@@ -5,17 +5,27 @@
     type Style = 
         'primary-filled-dark' |
         'primary-filled' |
+        'primary-hollow' |
+        'secondary-filled-dark' |
         'secondary-filled' |
+        'secondary-hollow' |
         'hollow' |
-        'dark-small';
+        'dark-small' |
+        'money-box';
     export let style: Style = 'hollow';
     export let href: string | undefined = undefined;
+    export let target: string | undefined = undefined;
     export let icon: KnownIcon | undefined = undefined;
     export let iconOnRight = false;
     export let disabled = false;
+    let enableTheDisabledStyle = false;
+    $: enableTheDisabledStyle = $$props['enable-disabled-style']
+    let additionalClasses: string | undefined = undefined;
+    $: additionalClasses = $$props['additional-classes']
+
 </script>
 
-<a href={href} class={style} class:disabled on:click>
+<a href={href} target={target} class={style + (additionalClasses == undefined ? "" : " " + additionalClasses)} class:disable-style={enableTheDisabledStyle} class:disabled on:click>
     {#if iconOnRight}
         <slot/>
     {/if}
@@ -52,7 +62,7 @@
         //     transform: scale(105%) translateY(-.2em);
         // }
 
-        &.primary-filled-dark {
+        &.primary-filled-dark, &.primary-filled-dark.disabled {
             color: var(--primary-300);
             background-color: var(--primary-950);
             border-color: var(--primary-950);
@@ -63,7 +73,7 @@
                 border-color: var(--primary-50);
             }
         }
-        &.primary-filled {
+        &.primary-filled, &.primary-filled.disabled {
             color: var(--primary-950);
             background-color: var(--primary-300);
             border-color: var(--primary-300);
@@ -74,7 +84,29 @@
                 border-color: var(--primary-50);
             }
         }
-        &.secondary-filled {
+        &.primary-hollow, &.primary-hollow.disabled {
+            color: var(--primary-300);
+            background-color: transparent;
+            border-color: var(--primary-300);
+            box-shadow: 0px .1rem .5rem color-mix(in srgb, var(--primary-950) 50%, transparent);
+            &:hover {
+                color: var(--secondary-950);
+                background-color: var(--primary-50);
+                border-color: var(--primary-50);
+            }
+        }
+        &.secondary-filled-dark, &.secondary-filled-dark.disabled {
+            color: var(--secondary-300);
+            background-color: var(--secondary-950);
+            border-color: var(--secondary-950);
+            box-shadow: 0px .1rem .5rem color-mix(in srgb, var(--secondary-950) 50%, transparent);
+            &:hover {
+                color: var(--secondary-950);
+                background-color: var(--secondary-50);
+                border-color: var(--secondary-50);
+            }
+        }
+        &.secondary-filled, &.secondary-filled.disabled {
             color: var(--secondary-950);
             background-color: var(--secondary-300);
             border-color: var(--secondary-300);
@@ -85,7 +117,7 @@
                 border-color: var(--secondary-50);
             }
         }
-        &.hollow {
+        &.secondary-hollow, &.secondary-hollow.disabled, &.hollow, &.hollow.disabled{
             color: var(--secondary-300);
             background-color: transparent;
             border-color: var(--secondary-300);
@@ -96,7 +128,7 @@
                 border-color: var(--secondary-50);
             }
         }
-        &.dark-small {
+        &.dark-small, &.dark-small.disabled {
             padding: .3rem;
             padding-top: .15rem;
             padding-bottom: .15rem;
@@ -112,8 +144,32 @@
                 border-color: var(--primary-50);
             }
         }
+        &.money-box {
+            border: .15rem color-mix(in srgb, var(--background-300) 50%, transparent) solid;
+            border-radius: .5rem;
+
+            background-color: color-mix(in srgb, var(--background-500) 20%, transparent);
+            color: var(--text-100);
+            font-size: 1.1em;
+
+            padding: .65rem;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: .25em;
+
+            &:hover {
+                color: var(--secondary-950);
+                background-color: var(--primary-50);
+                border-color: var(--primary-50);
+            }
+        }
         &.disabled {
             pointer-events: none;
+            opacity: 55%;
+        }
+        &.disabled.disable-style {
             color: var(--background-50);
             background-color: var(--background-800);
             border-color: var(--background-800);

src/lib/components/ModCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import type { ServerMod } from "$lib/api/models/mod.js";
-    import type { ServerModVersion } from "$lib/api/models/mod-version.js";
-    import { IndexClient } from "$lib/api/index-repository";
+    import type { ServerMod, ServerSimpleMod } from "$lib/api/models/mod.js";
+    import type { ServerModVersion, ServerSimpleModVersion } from "$lib/api/models/mod-version.js";
+    import { getModLogo, IndexClient } from "$lib/api/index-repository";
     import Link from "./Link.svelte";
     import Gap from "./Gap.svelte";
     import Row from "./Row.svelte";
@@ -16,9 +16,13 @@
     import iconPlaceholder from "$lib/assets/icon-placeholder.png";
     import Label from "./Label.svelte";
 
-    export let mod: ServerMod;
-    export let version: ServerModVersion;
-    export let style: "list" | "grid" = "grid";
+    export let mod: ServerMod | ServerSimpleMod;
+    export let version: ServerModVersion | ServerSimpleModVersion;
+    export let style: 'list' | 'grid' = 'grid';
+    export let versionDownloadCount: boolean = false;
+    export let hideDescription: boolean = false;
+    export let hideVersion: boolean = false;
+    export let noLinkInVersion: boolean = false;
 
     // add the version for non-accepted mods, as otherwise the endpoint will pick the latest accepted
     $: mod_url =
@@ -27,7 +31,6 @@
             : `/mods/${mod.id}`;
 
     $: logo_url = IndexClient.getModLogo(mod.id).toString();
-
     $: owner = mod.developers.filter((d) => d.is_owner)[0];
     $: paid = mod.tags.includes("paid");
 </script>
@@ -78,6 +81,7 @@
                     --link-color="var(--accent-300)">
                     {owner.display_name}
                 </Link>
+                {#if !hideDescription}
                 <p class="description" title={version.description || ""}>
                     {#if version.description}
                         {#if version.description?.length < 110}
@@ -89,27 +93,32 @@
                         <i>{"Description not provided"}</i>
                     {/if}
                 </p>
+                {/if}
             </Column>
         </div>
         <span class="do-not-shrink right">
             <Column align="right" gap="tiny">
+                {#if !hideVersion}
                 <span class="card-info">
                     <Icon icon="version" />{version.version}
                 </span>
+                {/if}
                 <span
                     class="card-info"
                     title={formatNumber(mod.download_count)}>
                     <Icon icon="download" />{abbreviateNumber(
-                        mod.download_count,
+                        versionDownloadCount ? version.download_count : mod.download_count,
                     )}
                 </span>
+                {#if mod.updated_at != undefined}
                 <span
                     class="card-info"
                     title={serverTimestampToDateString(mod.updated_at)}>
                     <Icon icon="time" />{serverTimestampToAgoString(
                         mod.updated_at,
                     )}
                 </span>
+                {/if}
             </Column>
         </span>
     {:else}
@@ -151,13 +160,16 @@
         </Link>
         <Gap size="small" />
         <Row>
+            {#if !hideVersion}
             <span class="card-info">
                 <Icon icon="version" />{version.version}
             </span>
-            <span class="card-info" title={formatNumber(mod.download_count)}>
-                <Icon icon="download" />{abbreviateNumber(mod.download_count)}
+            {/if}
+            <span class="card-info" title={formatNumber(versionDownloadCount ? version.download_count : mod.download_count)}>
+                <Icon icon="download" />{abbreviateNumber(versionDownloadCount ? version.download_count : mod.download_count)}
             </span>
         </Row>
+        {#if !hideDescription}
         <Gap size="tiny" />
         <p class="description" title={version.description || ""}>
             {#if version.description}
@@ -170,6 +182,7 @@
                 <i>{"Description not provided"}</i>
             {/if}
         </p>
+        {/if}
     {/if}
 </div>
 

src/lib/components/MoneyBox.svelte

@@ -16,6 +16,8 @@
 
     let number: HTMLSpanElement;
 
+    $: countup.set(num);
+
     onMount(() => {
         const observer = new IntersectionObserver(entries => {
             entries.reverse().forEach(entry => {

src/lib/data/faqs-en.json

@@ -13,6 +13,10 @@
             {
                 "question": "Is Geode Free?",
                 "answer": "Geode is *100% free* and always will be! However, individual mods may be paid."
+            },
+            {
+                "question": "Why is Geode not available for iOS (nor iPadOS)",
+                "answer": "Geode needs to *inject code* at runtime and iOS is very very keen on making sure that *doesn't happen*.\n\nMaybe some day with something called JIT (Just-in-time) Geode could be viable on iOS, but at the moment, there is *nothing officially released*."
             }
         ]
     },