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

Prettier changes
Some checks failed
Run Tests on Code / test (push) Has been cancelled
Details

Browse source
This commit is contained in:
Neshura 2024-01-01 20:00:35 +01:00
parent 94a8d2a8e7
commit 9d5c6db7da
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
11 changed files with 556 additions and 526 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.html
View file

@ -9,7 +9,7 @@
<body <body
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
style="background-image: url('/assets/background.avif')" style="background-image: url('/assets/background.avif')"
class="overflow-hidden h-screen" class="h-screen overflow-hidden"
> >
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>

86
src/lib/components/Card.svelte
View file

@ -1,9 +1,9 @@
<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';
let { service } = $props(); let { service } = $props();
@ -11,53 +11,87 @@
title: false, title: false,
link: false, link: false,
ext: false ext: false
}) });
</script> </script>
<div class="flex flex-col border-t-4 rounded-xl bg-black/55 border-maintenance p-4 gap-y-2 w-[30rem] h-48"> <div
class="flex h-48 w-[30rem] flex-col gap-y-2 rounded-xl border-t-4 border-maintenance bg-black/55 p-4"
>
<div class="flex flex-row justify-between pb-4"> <div class="flex flex-row justify-between pb-4">
<div class="flex flex-row gap-1 items-center" on:mouseover={() => hover.title = true} on:mouseleave={() => hover.title = false}> <div
class="flex flex-row items-center gap-1"
on:mouseover={() => (hover.title = true)}
on:mouseleave={() => (hover.title = false)}
>
{#if service.icon} {#if service.icon}
<img width="24px" class="h-6 w-6 cursor-pointer" src={service.icon} alt="{service.name} Logo"> <img
{:else} width="24px"
{/if} class="h-6 w-6 cursor-pointer"
<a href={service.href} class="text-accent font-bold {hover.title ? 'text-primary': 'text-secondary'}">{service.name}</a> src={service.icon}
alt="{service.name} Logo"
/>
{:else}{/if}
<a
href={service.href}
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
>{service.name}</a
>
{#if hover.title} {#if hover.title}
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="grid items-center"> <div
<OpenInNewWindow color={ hover.title ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/> transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
class="grid items-center"
>
<OpenInNewWindow
color={hover.title ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
class="self-center"
/>
</div> </div>
{/if} {/if}
</div> </div>
<h1 class="border-b-2 rounded-md text-sm text-center w-16 text-maintenance border-maintenance">Loading</h1> <h1 class="w-16 rounded-md border-b-2 border-maintenance text-center text-sm text-maintenance">
Loading
</h1>
</div> </div>
<p class="text-sm text-center text-accent text-wrap">{service.desc}</p> <p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
<p class="text-sm text-center font-bold text-destructive">{service.warn}</p> <p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto"> <div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
<a <a
class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
href={service.href} href={service.href}
on:mouseover={() => hover.link = true} on:mouseover={() => (hover.link = true)}
on:mouseleave={() => hover.link = false} on:mouseleave={() => (hover.link = false)}
> >
Open Open
{#if hover.link} {#if hover.link}
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center"> <div
<OpenInNewWindow color={ hover.link ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/> transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
class="grid items-center pl-1 pr-0"
>
<OpenInNewWindow
color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
class="self-center"
/>
</div> </div>
{/if} {/if}
</a> </a>
{#if service.extLink} {#if service.extLink}
<a <a
class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
href={service.extLink} href={service.extLink}
on:mouseover={() => hover.ext = true} on:mouseover={() => (hover.ext = true)}
on:mouseleave={() => hover.ext = false} on:mouseleave={() => (hover.ext = false)}
> >
Official Site Official Site
{#if hover.ext} {#if hover.ext}
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center"> <div
<OpenInNewWindow color={ hover.ext ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/> transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
class="grid items-center pl-1 pr-0"
>
<OpenInNewWindow
color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
class="self-center"
/>
</div> </div>
{/if} {/if}
</a> </a>

14
src/lib/components/ui/button/button.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui"; import { Button as ButtonPrimitive } from 'bits-ui';
import { cn } from "$lib/utils"; import { cn } from '$lib/utils';
import { buttonVariants, type Props, type Events } from "."; import { buttonVariants, type Props, type Events } from '.';
type $$Props = Props; type $$Props = Props;
type $$Events = Events; type $$Events = Events;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let variant: $$Props["variant"] = "default"; export let variant: $$Props['variant'] = 'default';
export let size: $$Props["size"] = "default"; export let size: $$Props['size'] = 'default';
export let builders: $$Props["builders"] = []; export let builders: $$Props['builders'] = [];
export { className as class }; export { className as class };
</script> </script>

39
src/lib/components/ui/button/index.ts
View file

@ -1,37 +1,34 @@
import type { Button as ButtonPrimitive } from "bits-ui"; import type { Button as ButtonPrimitive } from 'bits-ui';
import { tv, type VariantProps } from "tailwind-variants"; import { tv, type VariantProps } from 'tailwind-variants';
import Root from "./button.svelte"; import Root from './button.svelte';
const buttonVariants = tv({ const buttonVariants = tv({
base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
variants: { variants: {
variant: { variant: {
default: default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
"bg-primary text-primary-foreground shadow hover:bg-primary/90", destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: outline:
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: 'hover:bg-accent hover:text-accent-foreground',
ghost: "hover:bg-accent hover:text-accent-foreground", link: 'text-primary underline-offset-4 hover:underline'
link: "text-primary underline-offset-4 hover:underline"
}, },
size: { size: {
default: "h-9 px-4 py-2", default: 'h-9 px-4 py-2',
sm: "h-8 rounded-md px-3 text-xs", sm: 'h-8 rounded-md px-3 text-xs',
lg: "h-10 rounded-md px-8", lg: 'h-10 rounded-md px-8',
icon: "h-9 w-9" icon: 'h-9 w-9'
} }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default" size: 'default'
} }
}); });
type Variant = VariantProps<typeof buttonVariants>["variant"]; type Variant = VariantProps<typeof buttonVariants>['variant'];
type Size = VariantProps<typeof buttonVariants>["size"]; type Size = VariantProps<typeof buttonVariants>['size'];
type Props = ButtonPrimitive.Props & { type Props = ButtonPrimitive.Props & {
variant?: Variant; variant?: Variant;

22
src/lib/utils.ts
View file

@ -1,7 +1,7 @@
import { type ClassValue, clsx } from "clsx"; import { type ClassValue, clsx } from 'clsx';
import { twMerge } from "tailwind-merge"; import { twMerge } from 'tailwind-merge';
import { cubicOut } from "svelte/easing"; import { cubicOut } from 'svelte/easing';
import type { TransitionConfig } from "svelte/transition"; import type { TransitionConfig } from 'svelte/transition';
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
@ -19,13 +19,9 @@ export const flyAndScale = (
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
): TransitionConfig => { ): TransitionConfig => {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const transform = style.transform === "none" ? "" : style.transform; const transform = style.transform === 'none' ? '' : style.transform;
const scaleConversion = ( const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
valueA: number,
scaleA: [number, number],
scaleB: [number, number]
) => {
const [minA, maxA] = scaleA; const [minA, maxA] = scaleA;
const [minB, maxB] = scaleB; const [minB, maxB] = scaleB;
@ -35,13 +31,11 @@ export const flyAndScale = (
return valueB; return valueB;
}; };
const styleToString = ( const styleToString = (style: Record<string, number | string | undefined>): string => {
style: Record<string, number | string | undefined>
): string => {
return Object.keys(style).reduce((str, key) => { return Object.keys(style).reduce((str, key) => {
if (style[key] === undefined) return str; if (style[key] === undefined) return str;
return str + `${key}:${style[key]};`; return str + `${key}:${style[key]};`;
}, ""); }, '');
}; };
return { return {

2
src/routes/+layout.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import '../app.pcss'; import '../app.pcss';
import Header from "./Header.svelte"; import Header from './Header.svelte';
</script> </script>
<Header /> <Header />

2
src/routes/+page.svelte
View file

@ -1,4 +1,4 @@
<div class="overflow-auto h-full"> <div class="h-full overflow-auto">
<h1>Welcome to SvelteKit</h1> <h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<p>gap</p> <p>gap</p>

26
src/routes/Header.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import {page} from "$app/stores"; import { page } from '$app/stores';
import { Button } from "$lib/components/ui/button"; import { Button } from '$lib/components/ui/button';
const button = "border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28";
const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
</script> </script>
<ul
<ul class="w-full h-16 border-b sticky flex flex-row items-center justify-center gap-3 backdrop-blur-sm bg-black/40"> class="sticky flex h-16 w-full flex-row items-center justify-center gap-3 border-b bg-black/40 backdrop-blur-sm"
>
<li> <li>
<Button <Button
variant="ghost" variant="ghost"
href="/" href="/"
class="{button} + {$page.url.pathname == '/' ? 'border-primary text-primary' : 'text-accent'}" class="{button} + {$page.url.pathname === '/' ? 'border-primary text-primary' : 'text-accent'}"
> >
Home Home
</Button> </Button>
@ -21,7 +21,9 @@
<Button <Button
variant="ghost" variant="ghost"
href="/servers" href="/servers"
class="{button} + {$page.url.pathname.startsWith('/servers') ? 'border-primary text-primary' : 'text-accent'}" class="{button} + {$page.url.pathname.startsWith('/servers')
? 'border-primary text-primary'
: 'text-accent'}"
> >
Servers Servers
</Button> </Button>
@ -30,7 +32,9 @@
<Button <Button
variant="ghost" variant="ghost"
href="/services" href="/services"
class="{button} + {$page.url.pathname.startsWith('/services') ? 'border-primary text-primary' : 'text-accent'}" class="{button} + {$page.url.pathname.startsWith('/services')
? 'border-primary text-primary'
: 'text-accent'}"
> >
Services Services
</Button> </Button>
@ -39,7 +43,9 @@
<Button <Button
variant="ghost" variant="ghost"
href="/about" href="/about"
class="{button} + {$page.url.pathname.startsWith('/about') ? 'border-primary text-primary' : 'text-accent'}" class="{button} + {$page.url.pathname.startsWith('/about')
? 'border-primary text-primary'
: 'text-accent'}"
> >
About About
</Button> </Button>

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

@ -2,18 +2,17 @@
<script lang="ts"> <script lang="ts">
import pages from '$lib/components/pages.json'; import pages from '$lib/components/pages.json';
import Card from "$lib/components/Card.svelte"; import Card from '$lib/components/Card.svelte';
const services = $state(pages.services); const services = $state(pages.services);
</script> </script>
<svelte:head> <svelte:head>
<title>Services</title> <title>Services</title>
<meta name="description" content="Overview of Services running on neshweb.net"> <meta name="description" content="Overview of Services running on neshweb.net" />
</svelte:head> </svelte:head>
<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
<div class="flex flex-row flex-wrap justify-center gap-10 p-8 overflow-auto h-full">
{#each services as service} {#each services as service}
<Card {service} /> <Card {service} />
{/each} {/each}