Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages 1 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
data-sveltekit-preload-data="hover"
style="background-image: url('/assets/background.avif')"
class="overflow-hidden h-screen"
class="h-screen overflow-hidden"
>
<div style="display: contents">%sveltekit.body%</div>
</body>

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

@ -1,9 +1,9 @@
<svelte:options runes={true} />
<script lang="ts">
import {OpenInNewWindow} from "radix-icons-svelte";
import {quintInOut} from "svelte/easing";
import { slide } from "svelte/transition";
import { OpenInNewWindow } from 'radix-icons-svelte';
import { quintInOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
let { service } = $props();
@ -11,53 +11,87 @@
title: false,
link: false,
ext: false
})
});
</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 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}
<img width="24px" class="h-6 w-6 cursor-pointer" src={service.icon} alt="{service.name} Logo">
{:else}
{/if}
<a href={service.href} class="text-accent font-bold {hover.title ? 'text-primary': 'text-secondary'}">{service.name}</a>
<img
width="24px"
class="h-6 w-6 cursor-pointer"
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}
<div 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
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>
{/if}
</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>
<p class="text-sm text-center text-accent text-wrap">{service.desc}</p>
<p class="text-sm text-center font-bold text-destructive">{service.warn}</p>
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto">
<p class="text-wrap text-center text-sm text-accent">{service.desc}</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'} mt-auto justify-items-center">
<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}
on:mouseover={() => hover.link = true}
on:mouseleave={() => hover.link = false}
on:mouseover={() => (hover.link = true)}
on:mouseleave={() => (hover.link = false)}
>
Open
{#if hover.link}
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
<OpenInNewWindow color={ hover.link ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
<div
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>
{/if}
</a>
{#if service.extLink}
<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}
on:mouseover={() => hover.ext = true}
on:mouseleave={() => hover.ext = false}
on:mouseover={() => (hover.ext = true)}
on:mouseleave={() => (hover.ext = false)}
>
Official Site
{#if hover.ext}
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
<OpenInNewWindow color={ hover.ext ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
<div
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>
{/if}
</a>

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

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

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

@ -1,37 +1,34 @@
import type { Button as ButtonPrimitive } from "bits-ui";
import { tv, type VariantProps } from "tailwind-variants";
import Root from "./button.svelte";
import type { Button as ButtonPrimitive } from 'bits-ui';
import { tv, type VariantProps } from 'tailwind-variants';
import Root from './button.svelte';
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: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"
'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9"
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
},
defaultVariants: {
variant: "default",
size: "default"
variant: 'default',
size: 'default'
}
});
type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];
type Variant = VariantProps<typeof buttonVariants>['variant'];
type Size = VariantProps<typeof buttonVariants>['size'];
type Props = ButtonPrimitive.Props & {
variant?: Variant;

22
src/lib/utils.ts
View file

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

2
src/routes/+layout.svelte
View file

@ -1,6 +1,6 @@
<script>
import '../app.pcss';
import Header from "./Header.svelte";
import Header from './Header.svelte';
</script>
<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>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<p>gap</p>

26
src/routes/Header.svelte
View file

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

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

@ -2,18 +2,17 @@
<script lang="ts">
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);
</script>
<svelte:head>
<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>
<div class="flex flex-row flex-wrap justify-center gap-10 p-8 overflow-auto h-full">
<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
{#each services as service}
<Card {service} />
{/each}