Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Rewrite page in Svelte 5 #49

Merged
Neshura merged 94 commits from rewrite/svelte into main 2024-01-06 14:12:09 +00:00
Conversation 0 Commits 94 Files changed 109 +69 -79
10 changed files with 69 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5bd01c3a22 - Show all commits

54
src/lib/components/ServiceCard.svelte
View file

@ -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,19 +57,17 @@
on:mouseleave={() => (hover.title = false)}
>
{#if service.icon}
{#if img_source != ""}
{#if img_source != ''}
<img
width="24px"
class="h-6 w-6 cursor-pointer"
src={img_source}
alt="{service.name} Logo"
width="24px"
class="h-6 w-6 cursor-pointer"
src={img_source}
alt="{service.name} Logo"
/>
{: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'}"

2
src/lib/components/ui/skeleton/index.ts
View file

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

11
src/lib/components/ui/skeleton/skeleton.svelte
View file

@ -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} />

12
src/lib/types/data-types.ts
View file

@ -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'
}

6
src/routes/+page.svelte
View file

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

6
src/routes/about/+page.svelte
View file

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

12
src/routes/assets/icons/+server.ts
View file

@ -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);
}
return json(content);
}

12
src/routes/data/services/+server.ts
View file

@ -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);
}
return json(data);
}

6
src/routes/servers/+page.svelte
View file

@ -1,4 +1,4 @@
<svelte:head>
<title>Servers</title>
<meta name="description" content="Overview of Game Servers running on neshweb.net">
</svelte:head>
<title>Servers</title>
<meta name="description" content="Overview of Game Servers running on neshweb.net" />
</svelte:head>

27
src/routes/services/+page.svelte
View file

@ -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>