SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Updates and more

Browse Source
This commit is contained in:
Chaoscaot
2023-11-03 20:31:27 +01:00
parent b5a54d087b
commit e97e86f9ac
22 changed files with 363 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/[...slug].astro
View File

@ -2,14 +2,16 @@
import { getCollection } from 'astro:content'
import NavbarLayout from "../layouts/NavbarLayout.astro";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import localBau from "../images/2023-10-08_20.43.43.png";
import {Image} from "astro:assets";
export const getStaticPaths = async () => {
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("pages");
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) )
}
})
const { page } = Astro.props;
const { Content } = await page.render();
@ -17,16 +19,19 @@ const { Content } = await page.render();
<NavbarLayout title={page.data.title}>
<article>
<h1 class="text-left">{page.data.title}</h1>
<Content />
</article>
<div>
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
<article>
<h1 class="text-left">{page.data.title}</h1>
<Content />
</article>
</div>
</NavbarLayout>
<style is:global>
article {
width: clamp(75%, 25rem, 100vw);
@apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
width: min(100vw, 75em);
@apply mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
dark:text-white dark:bg-neutral-900;
p {
@ -65,6 +70,10 @@ const { Content } = await page.render();
@apply list-disc;
}
code {
@apply dark:text-neutral-400 text-neutral-800;
}
pre.astro-code {
@apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
}

7
src/pages/blog.astro
View File

@ -1,7 +0,0 @@
---
import NavBarLayout from '../layouts/NavbarLayout.astro'
---
<NavBarLayout title="Blog">
<h1>Blog!</h1>
</NavBarLayout>

3
src/pages/event/[...slug].astro Normal file
View File

@ -0,0 +1,3 @@
---
---

72
src/pages/help/[...slug].astro Normal file
View File

@ -0,0 +1,72 @@
---
import { getCollection } from 'astro:content'
import NavbarLayout from "../../layouts/NavbarLayout.astro";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("help");
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) )
})
const { page } = Astro.props;
const { Content } = await page.render();
---
<NavbarLayout title={page.data.title}>
<article>
<h1 class="text-left">{page.data.title}</h1>
<Content />
</article>
</NavbarLayout>
<style is:global>
article {
width: clamp(75%, 25rem, 100vw);
@apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
dark:text-white dark:bg-neutral-900;
p {
@apply my-4 leading-7;
}
h1 {
@apply text-4xl font-bold mt-4 text-center;
}
h2 {
@apply text-3xl font-bold mt-4;
}
h3 {
@apply text-2xl font-bold mt-4;
}
h4 {
@apply text-xl font-bold mt-4;
}
a {
@apply text-blue-500 hover:text-blue-700;
}
ol>li, ul>li {
@apply ml-4;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
pre.astro-code {
@apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
}
}
</style>

26
src/pages/help/index.astro Normal file
View File

@ -0,0 +1,26 @@
---
import {getCollection} from "astro:content";
import {astroI18n} from "astro-i18n";
import NavbarLayout from "../../layouts/NavbarLayout.astro";
import {l} from "../../util/util";
let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale);
---
<NavbarLayout title="Helpcenter">
<div>
<h1>Helpcenter</h1>
{posts.map(value => (
<a href={l("/help/" + value.slug)}>
<h2>{value.data.title}</h2>
</a>
))}
</div>
</NavbarLayout>
<style>
div {
@apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
dark:text-white dark:bg-neutral-900;
}
</style>

17
src/pages/index.astro
View File

@ -4,7 +4,9 @@ import NavbarLayout from "../layouts/NavbarLayout.astro";
import { Image } from "astro:assets";
import localBau from "../images/2023-10-08_20.43.43.png";
import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
import {astroI18n, l, t} from "astro-i18n";
import {astroI18n, t} from "astro-i18n";
import {l} from "../util/util"
import PlayerCount from "../components/PlayerCount.svelte";
const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json())
@ -38,13 +40,13 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
<div class="w-screen h-screen relative mb-4">
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<h1 class="text-2xl sm:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
<span class="text-yellow-400">{t("home.title.first")}</span>
<span class="text-neutral-600">{t("home.title.second")}</span>
</h1>
<text-carousel class="h-20 w-full relative select-none">
<h2 class="-translate-y-16">{t("home.subtitle.1")}<player-count /></h2>
<h2>{t("home.subtitle.2")}</h2>
<h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
<h2>{t("home.subtitle.2")}<PlayerCount client:only="svelte" /></h2>
<h2>{t("home.subtitle.3")}</h2>
</text-carousel>
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
@ -81,12 +83,6 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
}
}
class PlayerCount extends HTMLElement {
connectedCallback() {
this.innerText = String(Math.floor(Math.random() * 100))
}
}
class DropIn extends HTMLElement {
connectedCallback() {
for (let child of this.children) {
@ -101,7 +97,6 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
}
}
customElements.define("player-count", PlayerCount);
customElements.define("text-carousel", TextCarousel);
customElements.define("drop-in", DropIn);
</script>

42
src/pages/login.astro Normal file
View File

@ -0,0 +1,42 @@
---
import NavbarLayout from "../layouts/NavbarLayout.astro";
import localBau from "../images/2023-10-08_20.43.43.png";
import {Image} from "astro:assets";
---
<NavbarLayout title="Login">
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
<div class="h-screen mx-auto p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center
dark:text-white " style="width: min(100vw, 75em);">
<div class="bg-gray-100 dark:bg-neutral-900 p-12 rounded-2xl shadow-2xl border-2 border-gray-600 flex flex-col">
<h1 class="text-4xl text-white text-center">Login</h1>
<div class="ml-2 flex flex-col">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username..." />
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="****************" />
</div>
<button class="btn mt-4 !mx-0 justify-center">Login</button>
</div>
</div>
<script>
import {l} from "../util/util";
if (localStorage.getItem("sw-api-token") !== null) {
window.location.href = l("/account")
}
</script>
</NavbarLayout>
<style>
input {
@apply border-2 rounded-md p-2 shadow-2xl w-80
dark:bg-neutral-800
focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-transparent;
}
label {
@apply text-neutral-300;
}
</style>