Rewrite page in Svelte 5 #49
10 changed files with 69 additions and 79 deletions
|
@ -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,19 +57,17 @@
|
||||||
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"
|
||||||
src={img_source}
|
src={img_source}
|
||||||
alt="{service.name} Logo"
|
alt="{service.name} Logo"
|
||||||
/>
|
/>
|
||||||
{: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'}"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import Root from "./skeleton.svelte";
|
import Root from './skeleton.svelte';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
|
|
|
@ -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}
|
|
||||||
/>
|
|
||||||
|
|
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<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">
|
||||||
<h1>Home Page</h1>
|
<h1>Home Page</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue