ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2024-11-23 00:22:59 +05:30
Code Issues 1 Projects Releases Wiki Activity

Change short URL toggle and No-JS support

Browse Source
This commit is contained in:
supercolbat 2023-08-05 01:57:08 -05:00
parent 53d5673df9
commit 5814f14c71
No known key found for this signature in database
GPG Key ID: 4C9B319E75DD8072
2 changed files with 97 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/routes/instances/+page.server.ts
View File

@ -1,10 +1,18 @@
import instances from "./instances"; import instances from "./instances";
import type { PageServerLoad } from "./$types"; import type { PageServerLoad } from "./$types";
export const load = (() => { export const load = (({ url }) => {
const meta = { const meta = {
title: "Instances" title: "Instances"
}; };
return { instances, ...meta }; // If the ?short url query exists, then longUrl is false
// Every other case is true
const queryLongUrl = !url.searchParams.has("short");
return {
instances,
queryLongUrl,
...meta
};
}) satisfies PageServerLoad; }) satisfies PageServerLoad;

157
src/routes/instances/+page.svelte
View File

@ -3,95 +3,112 @@
export let data: PageData; export let data: PageData;
let insturl: "short" | "long"; $: longUrl = data.queryLongUrl;
let toggle = () => { let toggle = () => {
insturl = insturl === "long" ? "short" : "long"; longUrl = !longUrl;
}; };
insturl = "long";
</script> </script>
<div class="h1-no-lg flex flex-col sm:(flex-row items-center) gap-4 !mb-0"> <div class="h1-no-lg flex flex-col sm:(flex-row items-center) gap-4 !mb-0">
<span class="text-4xl font-bold">{data.title}</span> <span class="text-4xl font-bold">{data.title}</span>
<!-- With JavaScript -->
<a <a
href="/instances/advanced" href="/instances/advanced"
class="button sm:w-fit" class="button sm:w-fit"
><div class="i-ic:outline-computer" /> ><div class="i-ic:outline-computer" />
Advanced</a Advanced</a
> >
<button <button
on:click={toggle} on:click={toggle}
class="text-text flex items-center text-sm" class="text-text flex items-center text-sm js"
> >
<div <div
class="i-ic:{insturl === 'long' class="i-ic:{longUrl
? 'baseline-toggle-off bg-accent' ? 'baseline-toggle-off bg-alt'
: 'baseline-toggle-on bg-amber-500'} h-15 w-15" : 'baseline-toggle-on bg-accent'} h-15 w-15"
/> />
{#if insturl === "long"} Use short URL
Long URL </button>
{:else}
Short URL
{/if}
</button>
<!-- Without JavaScript -->
<noscript>
<a
href="?{data.queryLongUrl ? 'short' : ''}"
class="text-text flex items-center text-sm"
>
<div
class="i-ic:{data.queryLongUrl
? 'baseline-toggle-off bg-alt'
: 'baseline-toggle-on bg-accent'} h-15 w-15"
/>
Use short URL
</a>
<style>
.js {
display: none;
}
</style>
</noscript>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
{#if longUrl}
{#if insturl === "long"} {#each data.instances as category}
{#each data.instances as category} <div class="flex flex-col">
<div class="flex flex-col"> <h2>{category.name}</h2>
<h2>{category.name}</h2> <div class="flex flex-row flex-wrap gap-4">
<div class="flex flex-row flex-wrap gap-4"> {#each category.data as instance}
{#each category.data as instance} <a
<a href={instance.geo || instance.eu}
href={instance.geo || instance.eu} class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text"
class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text" >
> {#if instance.icon}
{#if instance.icon} <img
<img src={instance.icon}
src={instance.icon} alt="{instance.name} logo"
alt="{instance.name} logo" class="h-20 rounded"
class="h-20 rounded" />
/> {/if}
{/if} <div>
<div> <span class="text-2xl">{instance.name}</span>
<span class="text-2xl">{instance.name}</span> <p>{instance.description}</p>
<p>{instance.description}</p> </div>
</div> </a>
</a> {/each}
{/each} </div>
</div> </div>
</div> {/each}
{/each}
{:else} {:else}
{#each data.instances as category} {#each data.instances as category}
<div class="flex flex-col"> <div class="flex flex-col">
<h2>{category.name}</h2> <h2>{category.name}</h2>
<div class="flex flex-row flex-wrap gap-4"> <div class="flex flex-row flex-wrap gap-4">
{#each category.data as instance} {#each category.data as instance}
<a <a
href={instance.short_geo || instance.short_eu || instance.geo || instance.eu} href={instance.short_geo ||
class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text" instance.short_eu ||
> instance.geo ||
{#if instance.icon} instance.eu}
<img class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text"
src={instance.icon} >
alt="{instance.name} logo" {#if instance.icon}
class="h-20 rounded" <img
/> src={instance.icon}
{/if} alt="{instance.name} logo"
<div> class="h-20 rounded"
<span class="text-2xl">{instance.name}</span> />
<p>{instance.description}</p> {/if}
</div> <div>
</a> <span class="text-2xl">{instance.name}</span>
{/each} <p>{instance.description}</p>
</div>
</a>
{/each}
</div>
</div> </div>
</div> {/each}
{/each}
{/if} {/if}
</div> </div>