mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-14 04:20:00 -04:00
fix stupid view transition shit and make basic server
This commit is contained in:
rift
parent
2b7380ba57
commit
98cf07b676
7 changed files with 875 additions and 113 deletions
829
package-lock.json
generated
829
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -12,9 +12,12 @@
|
|||
"dependencies": {
|
||||
"@astrojs/check": "^0.8.2",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@fastify/compress": "^7.0.3",
|
||||
"@fastify/static": "^7.0.4",
|
||||
"@iconify-json/ph": "^1.1.13",
|
||||
"astro": "^4.12.2",
|
||||
"astro-icon": "^1.1.0",
|
||||
"fastify": "^4.28.1",
|
||||
"nanostores": "^0.10.3",
|
||||
"tailwindcss": "^3.4.6",
|
||||
"typescript": "^5.5.3"
|
||||
|
|
|
|||
22
server.js
Normal file
22
server.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import fastify from "fastify";
|
||||
import fastifyStatic from "@fastify/static";
|
||||
import path from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
const app = fastify({ logger: false });
|
||||
|
||||
await app.register(import("@fastify/compress"));
|
||||
|
||||
app.register(fastifyStatic, {
|
||||
root: path.join(__dirname, "dist"),
|
||||
prefix: "/",
|
||||
serve: true,
|
||||
wildcard: false,
|
||||
});
|
||||
|
||||
app.listen({
|
||||
port: 8080,
|
||||
host: "0.0.0.0",
|
||||
});
|
||||
|
|
@ -38,7 +38,7 @@ const t = useTranslations(lang);
|
|||
</HeaderButton>
|
||||
</div>
|
||||
{/* Mobile hamburger menu */}
|
||||
<div class="flex md:hidden" id="mobileNavTrigger">
|
||||
<div class="flex md:hidden" id="mobileNavTrigger" transition:persist>
|
||||
<Icon
|
||||
name="ph:text-align-justify-bold"
|
||||
class="h-9 w-9 text-text-color"
|
||||
|
|
@ -80,8 +80,16 @@ const t = useTranslations(lang);
|
|||
isMobileNavOpen.subscribe((open) => {
|
||||
if (open) {
|
||||
isMobileNavOpenLocal = true;
|
||||
if (hamburger_menu && right_caret) {
|
||||
hamburger_menu.style.display = "none";
|
||||
right_caret.style.display = "block";
|
||||
}
|
||||
} else {
|
||||
isMobileNavOpenLocal = false;
|
||||
if (hamburger_menu && right_caret) {
|
||||
hamburger_menu.style.display = "block";
|
||||
right_caret.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -90,11 +98,4 @@ const t = useTranslations(lang);
|
|||
if (mobileNavTrigger) {
|
||||
mobileNavTrigger.addEventListener("click", openDialog);
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", () => {
|
||||
if (mobileNavTrigger) {
|
||||
const mobileNavTrigger = document.getElementById("mobileNavTrigger")!;
|
||||
mobileNavTrigger.addEventListener("click", openDialog);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -30,5 +30,11 @@ const t = useTranslations(lang);
|
|||
</HeaderButton>
|
||||
</div>
|
||||
<script>
|
||||
const mobileNavButton = document.getElementById("mobileNavButton");
|
||||
import { fade } from "astro:transitions";
|
||||
import { isMobileNavOpen } from "../store.js";
|
||||
function closeMobileNav() {
|
||||
isMobileNavOpen.set(false);
|
||||
}
|
||||
const mobileNavMenu = document.getElementById("mobileNavMenu");
|
||||
mobileNavMenu!.addEventListener("click", closeMobileNav);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
---
|
||||
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||
import { isMobileNavOpen } from "../store.js";
|
||||
import Logo from "./Logo.astro";
|
||||
import HeaderButton from "./HeaderButton.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
---
|
||||
|
||||
<div
|
||||
id="navbar"
|
||||
class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4 z-30 relative"
|
||||
>
|
||||
<div class="w-1/8">
|
||||
{/* Typical desktop menu */}
|
||||
<div class="relative flex-row hidden md:flex">
|
||||
<HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
|
||||
<Icon
|
||||
name="ph:cube"
|
||||
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
|
||||
/>
|
||||
{
|
||||
/* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
|
||||
}
|
||||
</HeaderButton>
|
||||
<HeaderButton text={t("header.settings")}>
|
||||
<Icon
|
||||
name="ph:wrench-fill"
|
||||
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
|
||||
/>
|
||||
</HeaderButton>
|
||||
<HeaderButton text={t("header.morelinks")}>
|
||||
<Icon
|
||||
name="ph:link-bold"
|
||||
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
|
||||
/>
|
||||
</HeaderButton>
|
||||
</div>
|
||||
{/* Mobile hamburger menu */}
|
||||
<div class="flex md:hidden" id="mobileNavTrigger">
|
||||
<Icon
|
||||
name="ph:text-align-justify-bold"
|
||||
class="h-9 w-9 text-text-color"
|
||||
id="hamburger_menu"
|
||||
/>
|
||||
<Icon
|
||||
name="ph:caret-right-bold"
|
||||
class="h-9 w-9 text-text-color hidden"
|
||||
id="right_caret"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
import { isMobileNavOpen } from "../store.js";
|
||||
let isMobileNavOpenLocal = true;
|
||||
const right_caret = document.getElementById("right_caret");
|
||||
const hamburger_menu = document.getElementById("hamburger_menu");
|
||||
const mobileNavTrigger = document.getElementById("mobileNavTrigger");
|
||||
// Create a copy of the nano store so we can make this a toggle
|
||||
|
||||
// Set the store to true when the button is clicked
|
||||
function openDialog() {
|
||||
if (isMobileNavOpenLocal == false) {
|
||||
isMobileNavOpen.set(true);
|
||||
if (hamburger_menu && right_caret) {
|
||||
hamburger_menu.style.display = "none";
|
||||
right_caret.style.display = "block";
|
||||
}
|
||||
} else {
|
||||
isMobileNavOpen.set(false);
|
||||
if (hamburger_menu && right_caret) {
|
||||
hamburger_menu.style.display = "block";
|
||||
right_caret.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isMobileNavOpen.subscribe((open) => {
|
||||
if (open) {
|
||||
isMobileNavOpenLocal = true;
|
||||
} else {
|
||||
isMobileNavOpenLocal = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Add an event listener to the button
|
||||
|
||||
if (mobileNavTrigger) {
|
||||
mobileNavTrigger.addEventListener("click", openDialog);
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", () => {
|
||||
function dumbFunc() {
|
||||
alert(1);
|
||||
}
|
||||
const mobileNavTrigger = document.getElementById("mobileNavTrigger");
|
||||
if (mobileNavTrigger) {
|
||||
mobileNavTrigger.addEventListener("click", dumbFunc);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -18,6 +18,10 @@ const { title } = Astro.props;
|
|||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
|
||||
/>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
<ViewTransitions />
|
||||
|
|
@ -28,6 +32,7 @@ const { title } = Astro.props;
|
|||
<div
|
||||
id="mobileNavMenu"
|
||||
class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0"
|
||||
transition:persist
|
||||
>
|
||||
<MobileNavigation />
|
||||
</div>
|
||||
|
|
@ -57,7 +62,6 @@ const { title } = Astro.props;
|
|||
</style>
|
||||
|
||||
<style is:global>
|
||||
@import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap";
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue