Change short URL toggle and No-JS support

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

View File

@ -1,10 +1,18 @@
import instances from "./instances";
import type { PageServerLoad } from "./$types";
export const load = (() => {
export const load = (({ url }) => {
const meta = {
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;

View File

@ -3,15 +3,17 @@
export let data: PageData;
let insturl: "short" | "long";
$: longUrl = data.queryLongUrl;
let toggle = () => {
insturl = insturl === "long" ? "short" : "long";
longUrl = !longUrl;
};
insturl = "long";
</script>
<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>
<!-- With JavaScript -->
<a
href="/instances/advanced"
class="button sm:w-fit"
@ -20,28 +22,40 @@
>
<button
on:click={toggle}
class="text-text flex items-center text-sm js"
>
<div
class="i-ic:{longUrl
? 'baseline-toggle-off bg-alt'
: 'baseline-toggle-on bg-accent'} h-15 w-15"
/>
Use short URL
</button>
<!-- Without JavaScript -->
<noscript>
<a
href="?{data.queryLongUrl ? 'short' : ''}"
class="text-text flex items-center text-sm"
>
<div
class="i-ic:{insturl === 'long'
? 'baseline-toggle-off bg-accent'
: 'baseline-toggle-on bg-amber-500'} h-15 w-15"
class="i-ic:{data.queryLongUrl
? 'baseline-toggle-off bg-alt'
: 'baseline-toggle-on bg-accent'} h-15 w-15"
/>
{#if insturl === "long"}
Long URL
{:else}
Short URL
{/if}
</button>
Use short URL
</a>
<style>
.js {
display: none;
}
</style>
</noscript>
</div>
<div class="flex flex-col">
{#if insturl === "long"}
{#if longUrl}
{#each data.instances as category}
<div class="flex flex-col">
<h2>{category.name}</h2>
@ -74,7 +88,10 @@
<div class="flex flex-row flex-wrap gap-4">
{#each category.data as instance}
<a
href={instance.short_geo || instance.short_eu || instance.geo || instance.eu}
href={instance.short_geo ||
instance.short_eu ||
instance.geo ||
instance.eu}
class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text"
>
{#if instance.icon}