rewrite website
This commit is contained in:
43
src/layouts/BaseLayout.astro
Normal file
43
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
import { BASE_PATH } from 'astro:env/server';
|
||||
import logo512 from '@assets/img/logo-512.webp';
|
||||
import favicon from '@assets/favicon.png';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
keywords?: string[];
|
||||
openGraph?: boolean;
|
||||
viewTransition?: boolean;
|
||||
}
|
||||
|
||||
const { title, description, keywords, openGraph, viewTransition } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" transition:name="root" transition:animate="none">
|
||||
<head>
|
||||
{viewTransition && <ClientRouter />}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/png" href={favicon.src} />
|
||||
<title>{title}</title>
|
||||
{
|
||||
openGraph && (
|
||||
<>
|
||||
<meta name="og:title" content={title} />
|
||||
<meta property="og:url" content={Astro.url.pathname} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content={logo512.src} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<meta name="description" content={description} />
|
||||
{keywords && <meta name="keywords" content={keywords.join(', ')} />}
|
||||
<base href=`${BASE_PATH}/` />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
152
src/layouts/admin/AdminLayout.astro
Normal file
152
src/layouts/admin/AdminLayout.astro
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import '@assets/admin_layout.css';
|
||||
import BaseLayout from '../BaseLayout.astro';
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Popup from '@components/popup/Popup.svelte';
|
||||
import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
|
||||
import { Session } from '@util/session.ts';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
const session = Session.sessionFromCookies(Astro.cookies);
|
||||
|
||||
const preTabs = [
|
||||
{
|
||||
href: '',
|
||||
name: 'Startseite',
|
||||
icon: 'heroicons:computer-desktop-20-solid'
|
||||
}
|
||||
];
|
||||
const adminTabs = [
|
||||
{
|
||||
href: 'admin/users',
|
||||
name: 'Registrierte Nutzer',
|
||||
icon: 'heroicons:user',
|
||||
subTabs: [
|
||||
{
|
||||
href: 'admin/users/blocked',
|
||||
name: 'Blockierte Nutzer',
|
||||
icon: 'heroicons:user-minus'
|
||||
}
|
||||
],
|
||||
enabled: session?.permissions.users
|
||||
},
|
||||
{
|
||||
href: 'admin/reports',
|
||||
name: 'Reports',
|
||||
icon: 'heroicons:flag',
|
||||
enabled: session?.permissions.reports
|
||||
},
|
||||
{
|
||||
href: 'admin/feedback',
|
||||
name: 'Feedback',
|
||||
icon: 'heroicons:book-open',
|
||||
enabled: session?.permissions.feedback
|
||||
},
|
||||
{
|
||||
href: 'admin/admins',
|
||||
name: 'Website Admins',
|
||||
icon: 'heroicons:code-bracket-16-solid',
|
||||
subTabs: [
|
||||
{
|
||||
href: 'admin/admins/strike_reasons',
|
||||
name: 'Strikegründe',
|
||||
icon: 'heroicons:shield-exclamation'
|
||||
}
|
||||
],
|
||||
enabled: session?.permissions.admin
|
||||
},
|
||||
{
|
||||
href: 'admin/settings',
|
||||
name: 'Einstellungen',
|
||||
icon: 'heroicons:adjustments-horizontal',
|
||||
enabled: session?.permissions.settings
|
||||
},
|
||||
{
|
||||
href: 'admin/tools',
|
||||
name: 'Tools',
|
||||
icon: 'heroicons:wrench-screwdriver',
|
||||
enabled: session?.permissions.tools
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title={title}>
|
||||
<ClientRouter />
|
||||
<div class="flex flex-row max-h-[100vh]">
|
||||
<ul class="menu bg-base-200 w-68 h-[100vh] flex">
|
||||
{
|
||||
preTabs.map((tab) => (
|
||||
<li>
|
||||
<a href={tab.href}>
|
||||
<Icon name={tab.icon} />
|
||||
<span>{tab.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<div class="divider mx-1 my-1"></div>
|
||||
{
|
||||
adminTabs.map(
|
||||
(tab) =>
|
||||
tab.enabled && (
|
||||
<li>
|
||||
<a href={tab.href}>
|
||||
<Icon name={tab.icon} />
|
||||
<span>{tab.name}</span>
|
||||
</a>
|
||||
{tab.subTabs && (
|
||||
<ul>
|
||||
{tab.subTabs.map((subTab) => (
|
||||
<li>
|
||||
<a href={subTab.href}>
|
||||
<Icon name={subTab.icon} />
|
||||
<span>{subTab.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
Astro.slots.has('actions') && (
|
||||
<fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2 -ml-1.5 -mr-1.5 mt-auto">
|
||||
<slot name="actions" />
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
<li class:list={[Astro.slots.has('actions') ? null : 'mt-auto']}>
|
||||
<button id="logout">
|
||||
<Icon name="heroicons:arrow-left-end-on-rectangle" />
|
||||
<span>Ausloggen</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full overflow-scroll relative">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<Popup client:idle />
|
||||
<ConfirmPopup client:idle />
|
||||
|
||||
<script>
|
||||
import { actions } from 'astro:actions';
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const logout = document.getElementById('logout') as HTMLButtonElement;
|
||||
logout.addEventListener('click', async () => {
|
||||
await actions.session.logout();
|
||||
window.location.href = `${document.baseURI}admin/login`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
16
src/layouts/admin/AdminLoginLayout.astro
Normal file
16
src/layouts/admin/AdminLoginLayout.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import '@assets/admin_layout.css';
|
||||
import BaseLayout from '../BaseLayout.astro';
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={title}>
|
||||
<ClientRouter />
|
||||
<slot />
|
||||
</BaseLayout>
|
||||
43
src/layouts/website/WebsiteLayout.astro
Normal file
43
src/layouts/website/WebsiteLayout.astro
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import '@assets/website_layout.css';
|
||||
import BaseLayout from '../BaseLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Menu from '@app/layout/Menu.svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
|
||||
footer?: boolean;
|
||||
}
|
||||
|
||||
const { title, description, footer = true } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={title} description={description} openGraph={true} viewTransition>
|
||||
<main class="min-h-[calc(100vh-3.5rem)] h-full w-full relative overflow-y-hidden">
|
||||
<slot />
|
||||
</main>
|
||||
<nav>
|
||||
<Menu client:load transition:persist />
|
||||
</nav>
|
||||
<footer class="flex justify-around items-center h-14 w-full bg-base-300 relative" hidden={!footer}>
|
||||
<div class="hidden sm:block">
|
||||
<p>© {new Date().getFullYear()} mhsl.eu</p>
|
||||
</div>
|
||||
<div class="flex gap-12">
|
||||
<div class="flex gap-4">
|
||||
<a class="link" href="https://mhsl.eu/id.html" target="_blank">Impressum</a>
|
||||
<a class="link" href="https://mhsl.eu/datenschutz.html" target="_blank">Datenschutz</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex gap-2 items-center">
|
||||
<a href="ts3server://mhsl.eu?port=9987" target="_blank">
|
||||
<Icon name="fa-brands:teamspeak" />
|
||||
</a>
|
||||
<a href="https://discord.gg/EBGefWPc2K" target="_blank">
|
||||
<Icon name="fa-brands:discord" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user