diff --git a/astro.config.mjs b/astro.config.mjs index efc4ca2..9f587d9 100644 --- a/astro.config.mjs +++ b/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" + })] }); diff --git a/package.json b/package.json index d5d1275..2025eb9 100644 --- a/package.json +++ b/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" + } } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..767a642 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,8 @@ +module.exports = { + plugins: { + autoprefixer: {}, + cssnano: {}, + 'tailwindcss/nesting': 'postcss-nesting', + tailwindcss: {}, + }, +}; diff --git a/public/fonts/barlow-condensed/barlow-condensed-black-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-black-italic.woff2 new file mode 100644 index 0000000..5078876 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-black-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-black.woff2 b/public/fonts/barlow-condensed/barlow-condensed-black.woff2 new file mode 100644 index 0000000..43429ff Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-black.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-bold-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-bold-italic.woff2 new file mode 100644 index 0000000..1684a3d Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-bold-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-bold.woff2 b/public/fonts/barlow-condensed/barlow-condensed-bold.woff2 new file mode 100644 index 0000000..090464b Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-bold.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-extrabold-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-extrabold-italic.woff2 new file mode 100644 index 0000000..748c1f8 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-extrabold-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-extrabold.woff2 b/public/fonts/barlow-condensed/barlow-condensed-extrabold.woff2 new file mode 100644 index 0000000..3445cf7 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-extrabold.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-extralight-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-extralight-italic.woff2 new file mode 100644 index 0000000..df70b37 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-extralight-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-extralight.woff2 b/public/fonts/barlow-condensed/barlow-condensed-extralight.woff2 new file mode 100644 index 0000000..e5c0e41 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-extralight.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-italic.woff2 new file mode 100644 index 0000000..de913f4 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-light-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-light-italic.woff2 new file mode 100644 index 0000000..5afb1df Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-light-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-light.woff2 b/public/fonts/barlow-condensed/barlow-condensed-light.woff2 new file mode 100644 index 0000000..a95a574 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-light.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-medium-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-medium-italic.woff2 new file mode 100644 index 0000000..29cc85c Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-medium-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-medium.woff2 b/public/fonts/barlow-condensed/barlow-condensed-medium.woff2 new file mode 100644 index 0000000..e4af97d Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-medium.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-regular.woff2 b/public/fonts/barlow-condensed/barlow-condensed-regular.woff2 new file mode 100644 index 0000000..ad72750 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-regular.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-semibold-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-semibold-italic.woff2 new file mode 100644 index 0000000..a00e3d1 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-semibold-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-semibold.woff2 b/public/fonts/barlow-condensed/barlow-condensed-semibold.woff2 new file mode 100644 index 0000000..afe9016 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-semibold.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-thin-italic.woff2 b/public/fonts/barlow-condensed/barlow-condensed-thin-italic.woff2 new file mode 100644 index 0000000..8fd26ef Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-thin-italic.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed-thin.woff2 b/public/fonts/barlow-condensed/barlow-condensed-thin.woff2 new file mode 100644 index 0000000..4e268e9 Binary files /dev/null and b/public/fonts/barlow-condensed/barlow-condensed-thin.woff2 differ diff --git a/public/fonts/barlow-condensed/barlow-condensed.css b/public/fonts/barlow-condensed/barlow-condensed.css new file mode 100644 index 0000000..1633a43 --- /dev/null +++ b/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"); +} + diff --git a/src/images/2022-03-28_13.18.25.png b/src/images/2022-03-28_13.18.25.png new file mode 100644 index 0000000..5ad72b2 Binary files /dev/null and b/src/images/2022-03-28_13.18.25.png differ diff --git a/src/images/bau.jpg b/src/images/bau.jpg new file mode 100644 index 0000000..6dfc8d7 Binary files /dev/null and b/src/images/bau.jpg differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000..ac0cd5b Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/layouts/Basic.astro b/src/layouts/Basic.astro new file mode 100644 index 0000000..411fd28 --- /dev/null +++ b/src/layouts/Basic.astro @@ -0,0 +1,21 @@ +--- + +import {astroI18n} from "astro-i18n"; +const { title, description } = Astro.props.frontmatter || Astro.props; +--- + + + + + + + + {title} + + + + + + + diff --git a/src/layouts/NavbarLayout.astro b/src/layouts/NavbarLayout.astro new file mode 100644 index 0000000..e89554f --- /dev/null +++ b/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; +--- + + + + +
+ + + {t("navbar.logo.alt")} +

+ {t("navbar.title")} +

+ +
+ + Start + + + Blog + + + Login + +
+ + +
+ +
+
+ + + + diff --git a/src/locales/en.json b/src/locales/en.json index f33655b..039f20f 100644 --- a/src/locales/en.json +++ b/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" + } + } } diff --git a/src/pages/blog.astro b/src/pages/blog.astro new file mode 100644 index 0000000..a88dcd7 --- /dev/null +++ b/src/pages/blog.astro @@ -0,0 +1,7 @@ +--- +import NavBarLayout from '../layouts/NavbarLayout.astro' +--- + + +

Blog!

+ diff --git a/src/pages/index.astro b/src/pages/index.astro index f836ebd..e79e19e 100644 --- a/src/pages/index.astro +++ b/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" --- - - - - - - - Astro - - -

{t("hello")}

- - + +
+ Bau + +

{t("home.title")}

+ +

{t("home.subtitle.1")}

+

{t("home.subtitle.2")}

+

{t("home.subtitle.3")}

+ + {t("home.join")} + + +
+

HELLO!

+ + + diff --git a/src/pages/join.astro b/src/pages/join.astro new file mode 100644 index 0000000..284ea45 --- /dev/null +++ b/src/pages/join.astro @@ -0,0 +1,7 @@ +--- + +import NavbarLayout from "../layouts/NavbarLayout.astro";--- + + + + diff --git a/src/styles/button.css b/src/styles/button.css new file mode 100644 index 0000000..2b8cfc1 --- /dev/null +++ b/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; + } +} diff --git a/src/util/util.ts b/src/util/util.ts new file mode 100644 index 0000000..441308c --- /dev/null +++ b/src/util/util.ts @@ -0,0 +1,14 @@ + +import { randomBytes } from 'crypto' + +const usedIds = new Set() + +export const getRandomId = () => { + while (true) { + const id = randomBytes(4).toString('hex') + if (!usedIds.has(id)) { + usedIds.add(id) + return id + } + } +} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f5368a7..a07817c 100644 --- a/tailwind.config.cjs +++ b/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: [], }