lil home page

astro.config.mjs

@@ -1,5 +1,5 @@
 import i18n from "astro-i18n"
-import { defineConfig } from 'astro/config';
+import { defineConfig, sharpImageService } from 'astro/config';
 import svelte from "@astrojs/svelte";
 import tailwind from "@astrojs/tailwind";
 
@@ -8,5 +8,10 @@ import prefetch from "@astrojs/prefetch";
 // https://astro.build/config
 export default defineConfig({
   output: "static",
-  integrations: [i18n(), svelte(), tailwind()]
+  image: {
+    service: sharpImageService(),
+  },
+  integrations: [i18n(), svelte(), tailwind(), prefetch({
+    selector: "a"
+  })]
 });

package.json

@@ -1,27 +1,31 @@
 {
-	"name": "steamwar-website",
-	"type": "module",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "astro dev",
-		"start": "astro dev",
-		"build": "astro build",
-		"preview": "astro preview",
-		"astro": "astro",
-		"i18n:install": "astro-i18n install",
-		"i18n:sync": "astro-i18n sync",
-		"i18n:extract:keys": "astro-i18n extract:keys"
-	},
-	"devDependencies": {
-		"@astrojs/prefetch": "^0.4.0",
-		"@astrojs/svelte": "^4.0.2",
-		"@astrojs/tailwind": "^5.0.0",
-		"@astropub/icons": "^0.2.0",
-		"astro-i18n": "^1.8.1",
-		"tailwindcss": "^3.0.24",
-		"svelte": "^4.0.0"
-	},
-	"dependencies": {
-		"astro": "^3.1.1"
-	}
+  "name": "steamwar-website",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "i18n:install": "astro-i18n install",
+    "i18n:sync": "astro-i18n sync",
+    "i18n:extract:keys": "astro-i18n extract:keys"
+  },
+  "devDependencies": {
+    "@astrojs/prefetch": "^0.4.0",
+    "@astrojs/svelte": "^4.0.2",
+    "@astrojs/tailwind": "^5.0.0",
+    "@astropub/icons": "^0.2.0",
+    "@types/node": "^20.6.3",
+    "astro-i18n": "^1.8.1",
+    "cssnano": "^6.0.1",
+    "postcss-nesting": "^12.0.1",
+    "svelte": "^4.0.0",
+    "tailwindcss": "^3.0.24"
+  },
+  "dependencies": {
+    "astro": "^3.1.1",
+    "sharp": "^0.32.6"
+  }
 }

postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+        cssnano: {},
+        'tailwindcss/nesting': 'postcss-nesting',
+        tailwindcss: {},
+    },
+};

public/fonts/barlow-condensed/barlow-condensed.css

@@ -0,0 +1,127 @@
+/* barlow-condensed-thin */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 100;
+	src: local("Barlow Condensed Thin"), local("BarlowCondensed-Thin"), url(barlow-condensed-thin.woff2) format("woff2");
+}
+/* barlow-condensed-thin-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 100;
+	src: local("Barlow Condensed Thin Italic"), local("BarlowCondensed-ThinItalic"), url(barlow-condensed-thin-italic.woff2) format("woff2");
+}
+/* barlow-condensed-extralight */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Barlow Condensed ExtraLight"), local("BarlowCondensed-ExtraLight"), url(barlow-condensed-extralight.woff2) format("woff2");
+}
+/* barlow-condensed-extralight-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Barlow Condensed ExtraLight Italic"), local("BarlowCondensed-ExtraLightItalic"), url(barlow-condensed-extralight-italic.woff2) format("woff2");
+}
+/* barlow-condensed-light */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 300;
+	src: local("Barlow Condensed Light"), local("BarlowCondensed-Light"), url(barlow-condensed-light.woff2) format("woff2");
+}
+/* barlow-condensed-light-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 300;
+	src: local("Barlow Condensed Light Italic"), local("BarlowCondensed-LightItalic"), url(barlow-condensed-light-italic.woff2) format("woff2");
+}
+/* barlow-condensed-regular */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Barlow Condensed Regular"), local("BarlowCondensed-Regular"), url(barlow-condensed-regular.woff2) format("woff2");
+}
+/* barlow-condensed-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Barlow Condensed Italic"), local("BarlowCondensed-Italic"), url(barlow-condensed-italic.woff2) format("woff2");
+}
+/* barlow-condensed-medium */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 500;
+	src: local("Barlow Condensed Medium"), local("BarlowCondensed-Medium"), url(barlow-condensed-medium.woff2) format("woff2");
+}
+/* barlow-condensed-medium-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 500;
+	src: local("Barlow Condensed Medium Italic"), local("BarlowCondensed-MediumItalic"), url(barlow-condensed-medium-italic.woff2) format("woff2");
+}
+/* barlow-condensed-semibold */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Barlow Condensed SemiBold"), local("BarlowCondensed-SemiBold"), url(barlow-condensed-semibold.woff2) format("woff2");
+}
+/* barlow-condensed-semibold-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Barlow Condensed SemiBold Italic"), local("BarlowCondensed-SemiBoldItalic"), url(barlow-condensed-semibold-italic.woff2) format("woff2");
+}
+/* barlow-condensed-bold */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Barlow Condensed Bold"), local("BarlowCondensed-Bold"), url(barlow-condensed-bold.woff2) format("woff2");
+}
+/* barlow-condensed-bold-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Barlow Condensed Bold Italic"), local("BarlowCondensed-BoldItalic"), url(barlow-condensed-bold-italic.woff2) format("woff2");
+}
+/* barlow-condensed-extrabold */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Barlow Condensed ExtraBold"), local("BarlowCondensed-ExtraBold"), url(barlow-condensed-extrabold.woff2) format("woff2");
+}
+/* barlow-condensed-extrabold-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Barlow Condensed ExtraBold Italic"), local("BarlowCondensed-ExtraBoldItalic"), url(barlow-condensed-extrabold-italic.woff2) format("woff2");
+}
+/* barlow-condensed-black */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: normal;
+	font-weight: 900;
+	src: local("Barlow Condensed Black"), local("BarlowCondensed-Black"), url(barlow-condensed-black.woff2) format("woff2");
+}
+/* barlow-condensed-black-italic */
+@font-face {
+	font-family: Barlow Condensed;
+	font-style: italic;
+	font-weight: 900;
+	src: local("Barlow Condensed Black Italic"), local("BarlowCondensed-BlackItalic"), url(barlow-condensed-black-italic.woff2) format("woff2");
+}
+

src/layouts/Basic.astro

@@ -0,0 +1,21 @@
+---
+
+import {astroI18n} from "astro-i18n";
+const { title, description } = Astro.props.frontmatter || Astro.props;
+---
+
+<html lang={astroI18n.langCode}>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description" content={description}/>
+    <title>{title}</title>
+    <slot name="head" />
+
+</head>
+<body>
+    <slot />
+</body>
+</html>

src/layouts/NavbarLayout.astro

@@ -0,0 +1,72 @@
+---
+import Basic from "./Basic.astro";
+import { Image } from 'astro:assets';
+import '../styles/button.css';
+import localLogo from "../images/logo.png"
+import {l, t} from "astro-i18n";
+
+const { title } = Astro.props;
+---
+
+<Basic title={title}>
+    <slot name="head" slot="head" />
+    <Fragment>
+        <div>
+            <nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
+                            before:bg-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
+                <a class="flex items-center" href={l("/")}>
+                    <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
+                    <h1 class="text-2xl uppercase font-bold inline-block">
+                        {t("navbar.title")}
+                    </h1>
+                </a>
+                <div class="flex items-center">
+                    <a class="btn btn-gray" href={l("/")}>
+                        <span class="btn__text">Start</span>
+                    </a>
+                    <a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
+                        <span class="btn__text">Blog</span>
+                    </a>
+                    <a class="btn">
+                        <span class="btn__text">Login</span>
+                    </a>
+                </div>
+            </nav-bar>
+            <script>
+                class Navbar extends HTMLElement {
+                    constructor() {
+                        super();
+                        if (window.scrollY != 0) {
+                            this.classList.add("scrolled");
+                        } else {
+                            this.classList.remove("scrolled");
+                        }
+
+                        window.onscroll = e => {
+                            if (window.scrollY != 0) {
+                                this.classList.add("scrolled");
+                            } else {
+                                this.classList.remove("scrolled");
+                            }
+                        }
+                    }
+                }
+
+                customElements.define('nav-bar', Navbar);
+            </script>
+            <main>
+                <slot />
+            </main>
+        </div>
+    </Fragment>
+</Basic>
+
+<style>
+    .scrolled {
+        @apply text-white;
+
+        &::before {
+            @apply scale-y-100;
+        }
+    }
+</style>

src/locales/en.json

@@ -1,3 +1,17 @@
 {
-  "hello": "Hello, World!"
+  "home": {
+    "title": "SteamWar.de",
+    "subtitle": {
+      "1": "Players Online: ",
+      "2": "WarGears, AirShips, WarShips",
+      "3": "Version: 1.12 - 1.20"
+    },
+    "join": "Join Now"
+  },
+  "navbar": {
+    "title": "SteamWar.de",
+    "logo": {
+      "alt": "SteamWar.de Logo"
+    }
+  }
 }

src/pages/blog.astro

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

src/pages/index.astro

@@ -1,17 +1,105 @@
 ---
-import { t } from "astro-i18n";
-import * as Icon from '@astropub/icons';
+import NavbarLayout from "../layouts/NavbarLayout.astro";
+
+import { Image } from "astro:assets";
+import localBau from "../images/2022-03-28_13.18.25.png";
+import {l, t} from "astro-i18n";
+import {CaretRight} from "@astropub/icons"
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>{t("hello")}</h1>
-	</body>
-</html>
+<NavbarLayout title="SteamWar.de - Home">
+	<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" 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">{t("home.title")}</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>{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>
+			<script>
+				class TextCarousel extends HTMLElement {
+					current = 0;
+
+					constructor() {
+						super();
+					}
+
+					connectedCallback() {
+						this.children[this.current].classList.add("!opacity-100")
+
+						for (let i = 0; i < this.children.length; i++) {
+							if (i !== this.current) {
+								this.children[i].classList.add("translate-y-8")
+							}
+						}
+
+						setInterval(() => {
+							this.next()
+						}, 5000)
+					}
+
+					next() {
+						this.children[this.current].classList.remove("!opacity-100")
+						this.children[this.current].classList.add("translate-y-8")
+						this.children[this.current].classList.remove("!delay-500")
+						this.current = (this.current + 1) % this.children.length
+						this.children[this.current].classList.add("!opacity-100")
+						this.children[this.current].classList.remove("translate-y-8")
+						this.children[this.current].classList.add("!delay-500")
+					}
+				}
+
+				class PlayerCount extends HTMLElement {
+					constructor() {
+						super();
+					}
+
+					connectedCallback() {
+						this.innerText = String(Math.floor(Math.random() * 100))
+					}
+				}
+
+				class DropIn extends HTMLElement {
+					constructor() {
+						super();
+					}
+
+					connectedCallback() {
+						for (let child of this.children) {
+							if(child.classList.contains("opacity-0")) {
+								child.classList.remove("opacity-0")
+								child.classList.remove("-translate-y-16")
+							} else {
+								child.children[0].classList.remove("opacity-0")
+								child.children[0].classList.remove("-translate-y-16")
+							}
+						}
+					}
+				}
+
+				customElements.define("player-count", PlayerCount);
+				customElements.define("text-carousel", TextCarousel);
+				customElements.define("drop-in", DropIn);
+			</script>
+		</drop-in>
+	</div>
+	<h2>HELLO!</h2>
+</NavbarLayout>
+
+<style>
+	@import url("/fonts/barlow-condensed/barlow-condensed.css");
+
+	text-carousel{
+		>* {
+			@apply absolute top-0 left-0 w-full text-xl sm:text-4xl underline text-white text-center opacity-0;
+			transition: transform .5s ease-out, opacity .5s linear;
+			text-shadow: 2px 2px 5px black;
+		}
+	}
+
+	.barlow {
+		font-family: Barlow Condensed;
+	}
+</style>

src/pages/join.astro

@@ -0,0 +1,7 @@
+---
+
+import NavbarLayout from "../layouts/NavbarLayout.astro";---
+
+<NavbarLayout title="Join">
+
+</NavbarLayout>

src/styles/button.css

@@ -0,0 +1,26 @@
+.btn {
+    @apply bg-blue-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
+    @apply hover:bg-blue-700;
+    transition: all 0.5s cubic-bezier(.2,3,.67,.6),
+                background-color .1s ease-in-out,
+                outline-width .1s ease-in-out,
+                outline-color .1s ease-in-out;
+    @apply active:scale-90;
+
+    .btn__text {
+        @apply inline-block;
+    }
+}
+
+.btn-gray {
+    @apply bg-gray-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
+}
+
+.btn-text {
+    @apply bg-transparent underline;
+    @apply hover:bg-transparent hover:outline hover:outline-1;
+
+    .btn__text {
+        @apply underline;
+    }
+}

src/util/util.ts

@@ -0,0 +1,14 @@
+
+import { randomBytes } from 'crypto'
+
+const usedIds = new Set<string>()
+
+export const getRandomId = () => {
+    while (true) {
+        const id = randomBytes(4).toString('hex')
+        if (!usedIds.has(id)) {
+            usedIds.add(id)
+            return id
+        }
+    }
+}

tailwind.config.cjs

@@ -1,8 +1,11 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
-		extend: {},
+		extend: {
+		},
 	},
 	plugins: [],
 }