Rewrite page in Svelte 5 #49
10 changed files with 69 additions and 79 deletions
|
@ -1,14 +1,14 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import {OpenInNewWindow} from 'radix-icons-svelte';
|
||||
import {quintInOut} from 'svelte/easing';
|
||||
import {slide} from 'svelte/transition';
|
||||
import {IconType, type Service} from '$lib/types/data-types';
|
||||
import {onMount} from "svelte";
|
||||
import {Skeleton} from "$lib/components/ui/skeleton";
|
||||
import { OpenInNewWindow } from 'radix-icons-svelte';
|
||||
import { quintInOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { IconType, type Service } from '$lib/types/data-types';
|
||||
import { onMount } from 'svelte';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
|
||||
let { service, icons } = $props<{ service: Service, icons: Array<string> }>();
|
||||
let { service, icons } = $props<{ service: Service; icons: Array<string> }>();
|
||||
|
||||
let hover = $state({
|
||||
title: false,
|
||||
|
@ -16,39 +16,35 @@
|
|||
ext: false
|
||||
});
|
||||
|
||||
let img_source: string = $state("");
|
||||
let img_source: string = $state('');
|
||||
|
||||
function checkForImage(service: Service) {
|
||||
const rootSplit = service.icon.split('/');
|
||||
const root = rootSplit[rootSplit.length - 1]
|
||||
const root = rootSplit[rootSplit.length - 1];
|
||||
|
||||
if (icons.includes(`${root}.${service.iconType}`)) {
|
||||
img_source = `${service.icon}.${service.iconType}`
|
||||
}
|
||||
else {
|
||||
img_source = ""
|
||||
img_source = `${service.icon}.${service.iconType}`;
|
||||
} else {
|
||||
img_source = '';
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (icons.length != 0) {
|
||||
const rootSplit = service.icon.split('/');
|
||||
const root = rootSplit[rootSplit.length - 1]
|
||||
const root = rootSplit[rootSplit.length - 1];
|
||||
|
||||
if (service.iconType === IconType.SVG) {
|
||||
checkForImage(service)
|
||||
}
|
||||
else {
|
||||
checkForImage(service);
|
||||
} else {
|
||||
if (icons.includes(`${root}-36.${service.iconType}`)) {
|
||||
img_source = `${service.icon}-36.${service.iconType}`
|
||||
}
|
||||
else {
|
||||
checkForImage(service)
|
||||
img_source = `${service.icon}-36.${service.iconType}`;
|
||||
} else {
|
||||
checkForImage(service);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
@ -61,7 +57,7 @@
|
|||
on:mouseleave={() => (hover.title = false)}
|
||||
>
|
||||
{#if service.icon}
|
||||
{#if img_source != ""}
|
||||
{#if img_source != ''}
|
||||
<img
|
||||
width="24px"
|
||||
class="h-6 w-6 cursor-pointer"
|
||||
|
@ -71,9 +67,7 @@
|
|||
{:else}
|
||||
<Skeleton class="h-6 w-6 rounded-full" />
|
||||
{/if}
|
||||
{:else}
|
||||
|
||||
{/if}
|
||||
{:else}{/if}
|
||||
<a
|
||||
href={service.href}
|
||||
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import Root from "./skeleton.svelte";
|
||||
import Root from './skeleton.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
|
|
|
@ -1,14 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { cn } from "$lib/utils";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
let className: $$Props['class'] = undefined;
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...$$restProps}
|
||||
/>
|
||||
<div class={cn('animate-pulse rounded-md bg-primary/10', className)} {...$$restProps} />
|
||||
|
|
|
@ -10,9 +10,9 @@ export type Service = {
|
|||
};
|
||||
|
||||
export enum IconType {
|
||||
SVG = "svg",
|
||||
AVIF = "avif",
|
||||
PNG = "png",
|
||||
WEBP = "webp",
|
||||
JPG = "jpg",
|
||||
SVG = 'svg',
|
||||
AVIF = 'avif',
|
||||
PNG = 'png',
|
||||
WEBP = 'webp',
|
||||
JPG = 'jpg'
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
<svelte:head>
|
||||
<title>Home</title>
|
||||
<meta name="description" content="Landing Page for neshweb.net">
|
||||
<meta name="description" content="Landing Page for neshweb.net" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="h-full overflow-auto">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<svelte:head>
|
||||
<title>About</title>
|
||||
<meta name="description" content="Information about this Website">
|
||||
<meta name="description" content="Information about this Website" />
|
||||
</svelte:head>
|
|
@ -1,10 +1,10 @@
|
|||
import * as fs from "fs";
|
||||
import {json} from "@sveltejs/kit";
|
||||
import * as fs from 'fs';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
export function GET() {
|
||||
let content = fs.readdirSync("static/assets/icons");
|
||||
let content = fs.readdirSync('static/assets/icons');
|
||||
|
||||
content = content.filter((entry) => entry != ".directory")
|
||||
content = content.filter((entry) => entry != '.directory');
|
||||
|
||||
return json(content);
|
||||
}
|
|
@ -1,10 +1,10 @@
|
|||
import * as fs from "fs";
|
||||
import {json} from "@sveltejs/kit";
|
||||
import * as fs from 'fs';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
export function GET() {
|
||||
const content = fs.readFileSync("static/data/services.json").toString();
|
||||
const content = fs.readFileSync('static/data/services.json').toString();
|
||||
|
||||
let data = JSON.parse(content)
|
||||
let data = JSON.parse(content);
|
||||
|
||||
return json(data);
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
<svelte:head>
|
||||
<title>Servers</title>
|
||||
<meta name="description" content="Overview of Game Servers running on neshweb.net">
|
||||
<meta name="description" content="Overview of Game Servers running on neshweb.net" />
|
||||
</svelte:head>
|
|
@ -9,27 +9,26 @@
|
|||
let icons: readonly string[] = $state.frozen([]);
|
||||
|
||||
async function get(url: string): Promise<any> {
|
||||
let res = await fetch(url)
|
||||
let res = await fetch(url);
|
||||
if (res.ok) {
|
||||
let data = await res.json()
|
||||
return data
|
||||
}
|
||||
else {
|
||||
return Promise.reject()
|
||||
let data = await res.json();
|
||||
return data;
|
||||
} else {
|
||||
return Promise.reject();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
get("/data/services").then((data: Service[]) => {
|
||||
services = data
|
||||
})
|
||||
})
|
||||
get('/data/services').then((data: Service[]) => {
|
||||
services = data;
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
get("/assets/icons").then((data: string[]) => {
|
||||
icons = data
|
||||
})
|
||||
})
|
||||
get('/assets/icons').then((data: string[]) => {
|
||||
icons = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
Loading…
Reference in a new issue