Rewrite page in Svelte 5 #49

Merged
Neshura merged 94 commits from rewrite/svelte into main 2024-01-06 14:12:09 +00:00
10 changed files with 69 additions and 79 deletions
Showing only changes of commit 5bd01c3a22 - Show all commits

View file

@ -1,14 +1,14 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import {OpenInNewWindow} from 'radix-icons-svelte'; import { OpenInNewWindow } from 'radix-icons-svelte';
import {quintInOut} from 'svelte/easing'; import { quintInOut } from 'svelte/easing';
import {slide} from 'svelte/transition'; import { slide } from 'svelte/transition';
import {IconType, type Service} from '$lib/types/data-types'; import { IconType, type Service } from '$lib/types/data-types';
import {onMount} from "svelte"; import { onMount } from 'svelte';
import {Skeleton} from "$lib/components/ui/skeleton"; 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({ let hover = $state({
title: false, title: false,
@ -16,39 +16,35 @@
ext: false ext: false
}); });
let img_source: string = $state(""); let img_source: string = $state('');
function checkForImage(service: Service) { function checkForImage(service: Service) {
const rootSplit = service.icon.split('/'); const rootSplit = service.icon.split('/');
const root = rootSplit[rootSplit.length - 1] const root = rootSplit[rootSplit.length - 1];
if (icons.includes(`${root}.${service.iconType}`)) { if (icons.includes(`${root}.${service.iconType}`)) {
img_source = `${service.icon}.${service.iconType}` img_source = `${service.icon}.${service.iconType}`;
} } else {
else { img_source = '';
img_source = ""
} }
} }
$effect(() => { $effect(() => {
if (icons.length != 0) { if (icons.length != 0) {
const rootSplit = service.icon.split('/'); const rootSplit = service.icon.split('/');
const root = rootSplit[rootSplit.length - 1] const root = rootSplit[rootSplit.length - 1];
if (service.iconType === IconType.SVG) { if (service.iconType === IconType.SVG) {
checkForImage(service) checkForImage(service);
} } else {
else {
if (icons.includes(`${root}-36.${service.iconType}`)) { if (icons.includes(`${root}-36.${service.iconType}`)) {
img_source = `${service.icon}-36.${service.iconType}` img_source = `${service.icon}-36.${service.iconType}`;
} } else {
else { checkForImage(service);
checkForImage(service)
} }
} }
} }
}); });
</script> </script>
<div <div
@ -61,7 +57,7 @@
on:mouseleave={() => (hover.title = false)} on:mouseleave={() => (hover.title = false)}
> >
{#if service.icon} {#if service.icon}
{#if img_source != ""} {#if img_source != ''}
<img <img
width="24px" width="24px"
class="h-6 w-6 cursor-pointer" class="h-6 w-6 cursor-pointer"
@ -71,9 +67,7 @@
{:else} {:else}
<Skeleton class="h-6 w-6 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full" />
{/if} {/if}
{:else} {:else}{/if}
{/if}
<a <a
href={service.href} href={service.href}
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}" class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"

View file

@ -1,4 +1,4 @@
import Root from "./skeleton.svelte"; import Root from './skeleton.svelte';
export { export {
Root, Root,

View file

@ -1,14 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils"; import { cn } from '$lib/utils';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div <div class={cn('animate-pulse rounded-md bg-primary/10', className)} {...$$restProps} />
class={cn("animate-pulse rounded-md bg-primary/10", className)}
{...$$restProps}
/>

View file

@ -10,9 +10,9 @@ export type Service = {
}; };
export enum IconType { export enum IconType {
SVG = "svg", SVG = 'svg',
AVIF = "avif", AVIF = 'avif',
PNG = "png", PNG = 'png',
WEBP = "webp", WEBP = 'webp',
JPG = "jpg", JPG = 'jpg'
} }

View file

@ -1,6 +1,6 @@
<svelte:head> <svelte:head>
<title>Home</title> <title>Home</title>
<meta name="description" content="Landing Page for neshweb.net"> <meta name="description" content="Landing Page for neshweb.net" />
</svelte:head> </svelte:head>
<div class="h-full overflow-auto"> <div class="h-full overflow-auto">

View file

@ -1,4 +1,4 @@
<svelte:head> <svelte:head>
<title>About</title> <title>About</title>
<meta name="description" content="Information about this Website"> <meta name="description" content="Information about this Website" />
</svelte:head> </svelte:head>

View file

@ -1,10 +1,10 @@
import * as fs from "fs"; import * as fs from 'fs';
import {json} from "@sveltejs/kit"; import { json } from '@sveltejs/kit';
export function GET() { 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); return json(content);
} }

View file

@ -1,10 +1,10 @@
import * as fs from "fs"; import * as fs from 'fs';
import {json} from "@sveltejs/kit"; import { json } from '@sveltejs/kit';
export function GET() { 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); return json(data);
} }

View file

@ -1,4 +1,4 @@
<svelte:head> <svelte:head>
<title>Servers</title> <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> </svelte:head>

View file

@ -9,27 +9,26 @@
let icons: readonly string[] = $state.frozen([]); let icons: readonly string[] = $state.frozen([]);
async function get(url: string): Promise<any> { async function get(url: string): Promise<any> {
let res = await fetch(url) let res = await fetch(url);
if (res.ok) { if (res.ok) {
let data = await res.json() let data = await res.json();
return data return data;
} } else {
else { return Promise.reject();
return Promise.reject()
} }
} }
$effect(() => { $effect(() => {
get("/data/services").then((data: Service[]) => { get('/data/services').then((data: Service[]) => {
services = data services = data;
}) });
}) });
$effect(() => { $effect(() => {
get("/assets/icons").then((data: string[]) => { get('/assets/icons').then((data: string[]) => {
icons = data icons = data;
}) });
}) });
</script> </script>
<svelte:head> <svelte:head>