mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-11-08 17:12:24 +05:30
Change short URL toggle and No-JS support
This commit is contained in:
parent
53d5673df9
commit
5814f14c71
@ -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;
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user