update path handling

.env.example

@@ -10,4 +10,4 @@ DISCORD_LINK=http://example.com
 PAYPAL_LINK=http://example.com
 SERVER_IP=1.1.1.1
 
-BASE_PATH=http://localhost:4321
+BASE_PATH=http://localhost:4321/varo

astro.config.mjs

@@ -33,17 +33,18 @@ export default defineConfig({
       ADMIN_USER: envField.string({ context: 'server', access: 'secret', optional: true }),
       ADMIN_PASSWORD: envField.string({ context: 'server', access: 'secret', optional: true }),
 
-      START_DATE: envField.string({ context: 'client', access: 'public', default: '1970-01-01' }),
+      START_DATE: envField.string({ context: 'server', access: 'secret', default: '1970-01-01' }),
 
-      WEBHOOK_ENDPOINT: envField.string({ context: 'client', access: 'public', optional: true }),
+      WEBHOOK_ENDPOINT: envField.string({ context: 'server', access: 'secret', optional: true }),
 
-      TEAMSPEAK_LINK: envField.string({ context: 'client', access: 'public', default: 'http://example.com' }),
-      DISCORD_LINK: envField.string({ context: 'client', access: 'public', default: 'http://example.com' }),
-      PAYPAL_LINK: envField.string({ context: 'client', access: 'public', default: 'http://example.com' }),
-      SERVER_IP: envField.string({ context: 'client', access: 'public', default: 'http://example.com' }),
+      TEAMSPEAK_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
+      DISCORD_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
+      PAYPAL_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
+      SERVER_IP: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
 
       DATABASE_URI: envField.string({ context: 'server', access: 'secret' }),
-      BASE_PATH: envField.string({ context: 'client', access: 'public', default: '' })
+
+      BASE_PATH: envField.string({ context: 'server', access: 'secret', default: '/' })
     }
   },
 

src/app/admin/feedback/Feedback.svelte

@@ -39,7 +39,7 @@
     <tbody>
       {#each $feedbacks as feedback, i (feedback.id)}
         <tr class="hover:bg-base-200" onclick={() => (activeFeedback = feedback)}>
-          <td>{(i + 1)}</td>
+          <td>{i + 1}</td>
           <td>{feedback.event}</td>
           <td>{feedback.user?.username}</td>
           <td>{dateFormat.format(new Date(feedback.lastChanged))}</td>

src/components/website/layout/Menu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { BASE_PATH } from 'astro:env/client';
   import MenuHome from '@assets/img/menu-home.webp';
   import MenuSignup from '@assets/img/menu-signup.webp';
   import MenuRules from '@assets/img/menu-rules.webp';
@@ -17,37 +16,37 @@
     {
       name: 'Startseite',
       sprite: MenuHome.src,
-      href: `${BASE_PATH}/`,
+      href: ``,
       active: false
     },
     {
       name: 'Registrieren',
       sprite: MenuSignup.src,
-      href: `${BASE_PATH}/signup`,
+      href: 'signup',
       active: false
     },
     {
       name: 'Regeln',
       sprite: MenuRules.src,
-      href: `${BASE_PATH}/rules`,
+      href: 'rules',
       active: false
     },
     {
       name: 'FAQ',
       sprite: MenuFaq.src,
-      href: `${BASE_PATH}/faq`,
+      href: 'faq',
       active: false
     },
     {
       name: 'Feedback & Kontakt',
       sprite: MenuFeedback.src,
-      href: `${BASE_PATH}/feedback`,
+      href: 'feedback',
       active: false
     },
     {
       name: 'Team',
       sprite: MenuTeam.src,
-      href: `${BASE_PATH}/team`,
+      href: 'team',
       active: false
     }
   ]);

src/components/website/signup/RegisteredPopup.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
   import { registeredPopupState } from '@components/website/signup/RegisteredPopup.ts';
   import Input from '@components/input/Input.svelte';
-  import { BASE_PATH, DISCORD_LINK, PAYPAL_LINK, START_DATE, TEAMSPEAK_LINK } from 'astro:env/client';
+
+  interface Props {
+    discordLink: string;
+    paypalLink: string;
+    teamspeakLink: string;
+    startDate: string;
+  }
+
+  let { discordLink, paypalLink, teamspeakLink, startDate }: Props = $props();
 
   let skin: string | null = $state(null);
 
@@ -43,22 +51,22 @@
       <span>{$registeredPopupState?.team}</span>
       <span>&nbsp;&nbsp;für Varo 4 registriert</span>. Spielstart ist am
       <i>
-        {new Date(START_DATE).toLocaleString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })}
+        {new Date(startDate).toLocaleString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })}
       </i>
       um
       <i>
-        {new Date(START_DATE).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
+        {new Date(startDate).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
       </i>.
     </p>
     <p class="text-center">Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
     <p class="mt-2">
       Falls du uns unterstützen möchtest, kannst du dies ganz einfach über
-      <a class="link" href={PAYPAL_LINK} target="_blank">PayPal</a>
+      <a class="link" href={paypalLink} target="_blank">PayPal</a>
       tun. Antworten auf häufig gestellte Fragen findest du in unserer
-      <a class="link" href="{BASE_PATH}/faq" target="_blank">FAQ</a>. Außerdem freuen wir uns, dich auf unserem
-      <a class="link" href={TEAMSPEAK_LINK} target="_blank">TeamSpeak</a>
+      <a class="link" href="faq" target="_blank">FAQ</a>. Außerdem freuen wir uns, dich auf unserem
+      <a class="link" href={teamspeakLink} target="_blank">TeamSpeak</a>
       oder in unserem
-      <a class="link" href={DISCORD_LINK} target="_blank">Discord</a>
+      <a class="link" href={discordLink} target="_blank">Discord</a>
       begrüßen zu dürfen!
     </p>
     <div class="divider"></div>

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import { ClientRouter } from 'astro:transitions';
+import { BASE_PATH } from 'astro:env/server';
 
 interface Props {
   title: string;
@@ -22,6 +23,7 @@ const { title, description, keywords, viewTransition } = Astro.props;
     <meta name="og:title" content={title} />
     <meta name="description" content={description} />
     {keywords && <meta name="keywords" content={keywords.join(', ')} />}
+    <base href=`${BASE_PATH}/` />
   </head>
   <body>
     <slot />

src/layouts/admin/AdminLayout.astro

@@ -3,7 +3,6 @@ import '@assets/admin_layout.css';
 import BaseLayout from '../BaseLayout.astro';
 import { ClientRouter } from 'astro:transitions';
 import { Icon } from 'astro-icon/components';
-import { BASE_PATH } from 'astro:env/client';
 import Popup from '@components/popup/Popup.svelte';
 import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
 import { Session } from '@util/session.ts';
@@ -18,44 +17,44 @@ const session = Session.sessionFromCookies(Astro.cookies);
 
 const preTabs = [
   {
-    href: `${BASE_PATH}`,
+    href: ``,
     name: 'Varo Startseite',
     icon: 'heroicons:computer-desktop-20-solid'
   }
 ];
 const adminTabs = [
   {
-    href: `${BASE_PATH}/admin/users`,
+    href: 'admin/users',
     name: 'Registrierte Nutzer',
     icon: 'heroicons:user',
     enabled: session?.permissions.users
   },
   {
-    href: `${BASE_PATH}/admin/teams`,
+    href: 'admin/teams',
     name: 'Teams',
     icon: 'heroicons:users',
     enabled: session?.permissions.users
   },
   {
-    href: `${BASE_PATH}/admin/reports`,
+    href: 'admin/reports',
     name: 'Reports',
     icon: 'heroicons:flag',
     enabled: session?.permissions.reports
   },
   {
-    href: `${BASE_PATH}/admin/feedback`,
+    href: 'admin/feedback',
     name: 'Feedback',
     icon: 'heroicons:book-open',
     enabled: session?.permissions.feedback
   },
   {
-    href: `${BASE_PATH}/admin/admins`,
+    href: 'admin/admins',
     name: 'Website Admins',
     icon: 'heroicons:code-bracket-16-solid',
     enabled: session?.permissions.admin
   },
   {
-    href: `${BASE_PATH}/admin/settings`,
+    href: 'admin/settings',
     name: 'Einstellungen',
     icon: 'heroicons:adjustments-horizontal',
     enabled: session?.permissions.settings
@@ -113,13 +112,12 @@ const adminTabs = [
 
 <script>
   import { actions } from 'astro:actions';
-  import { BASE_PATH } from 'astro:env/client';
 
   document.addEventListener('astro:page-load', () => {
     const logout = document.getElementById('logout') as HTMLButtonElement;
     logout.addEventListener('click', async () => {
       await actions.session.logout();
-      window.location.href = `${BASE_PATH}/admin/login`;
+      window.location.href = `${document.baseURI}admin/login`;
     });
   });
 </script>

src/pages/admin/admins.astro

@@ -4,7 +4,7 @@ import Admins from '@app/admin/admins/Admins.svelte';
 import SidebarActions from '@app/admin/admins/SidebarActions.svelte';
 import { Session } from '@util/session.ts';
 import { Permissions } from '@util/permissions.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin);
 if (!session) return Astro.redirect(`${BASE_PATH}/admin`);

src/pages/admin/feedback.astro

@@ -3,7 +3,7 @@ import Feedback from '@app/admin/feedback/Feedback.svelte';
 import AdminLayout from '@layouts/admin/AdminLayout.astro';
 import { Session } from '@util/session.ts';
 import { Permissions } from '@util/permissions.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const session = Session.sessionFromCookies(Astro.cookies, Permissions.Feedback);
 if (!session) return Astro.redirect(`${BASE_PATH}/admin`);

src/pages/admin/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Session } from '@util/session.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 import AdminLayout from '@layouts/admin/AdminLayout.astro';
 
 const session = Session.sessionFromCookies(Astro.cookies);

src/pages/admin/login.astro

@@ -27,7 +27,6 @@ import Popup from '@components/popup/Popup.svelte';
 
 <script>
   import { actions } from 'astro:actions';
-  import { BASE_PATH } from 'astro:env/client';
   import { popupState } from '@components/popup/Popup';
 
   const loginForm = document.getElementById('login') as HTMLFormElement;
@@ -45,6 +44,6 @@ import Popup from '@components/popup/Popup.svelte';
       popupState.set({ type: 'error', title: 'Fehler', message: error.message });
       return;
     }
-    window.location.href = `${BASE_PATH}/admin`;
+    window.location.href = 'admin';
   });
 </script>

src/pages/admin/reports.astro

@@ -1,7 +1,7 @@
 ---
 import { Session } from '@util/session';
 import { Permissions } from '@util/permissions';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 import AdminLayout from '@layouts/admin/AdminLayout.astro';
 import SidebarActions from '@app/admin/reports/SidebarActions.svelte';
 import Reports from '@app/admin/reports/Reports.svelte';

src/pages/admin/settings.astro

@@ -4,7 +4,7 @@ import Settings from '@app/admin/settings/Settings.svelte';
 import { db } from '@db/database.ts';
 import { Session } from '@util/session.ts';
 import { Permissions } from '@util/permissions.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const session = Session.sessionFromCookies(Astro.cookies, Permissions.Settings);
 if (!session) return Astro.redirect(`${BASE_PATH}/admin`);

src/pages/admin/teams.astro

@@ -4,7 +4,7 @@ import SidebarActions from '@app/admin/teams/SidebarActions.svelte';
 import Teams from '@app/admin/teams/Teams.svelte';
 import { Session } from '@util/session.ts';
 import { Permissions } from '@util/permissions.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin);
 if (!session) return Astro.redirect(`${BASE_PATH}/admin`);

src/pages/admin/users.astro

@@ -4,7 +4,7 @@ import Users from '@app/admin/users/Users.svelte';
 import SidebarActions from '@app/admin/users/SidebarActions.svelte';
 import { Session } from '@util/session.ts';
 import { Permissions } from '@util/permissions.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin);
 if (!session) return Astro.redirect(`${BASE_PATH}/admin`);

src/pages/api/feedback/index.ts

@@ -2,7 +2,7 @@ import { z } from 'astro:schema';
 import type { APIRoute } from 'astro';
 import { API_SECRET } from 'astro:env/server';
 import { db } from '@db/database.ts';
-import { BASE_PATH } from 'astro:env/client';
+import { BASE_PATH } from 'astro:env/server';
 
 const postSchema = z.object({
   event: z.string(),

src/pages/signup.astro

@@ -8,6 +8,7 @@ import TeamPopup from '@components/website/signup/TeamPopup.svelte';
 import RegisteredPopup from '@components/website/signup/RegisteredPopup.svelte';
 import { getSettings, SettingKey } from '@util/settings';
 import { db } from '@db/database.ts';
+import { DISCORD_LINK, PAYPAL_LINK, START_DATE, TEAMSPEAK_LINK } from 'astro:env/client';
 
 const signupSetting = await getSettings(db, [
   SettingKey.SignupEnabled,
@@ -123,7 +124,13 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
 <Popup client:idle />
 <TeamPopup client:idle />
 
-<RegisteredPopup client:idle />
+<RegisteredPopup
+  client:idle
+  discordLink={DISCORD_LINK}
+  paypalLink={PAYPAL_LINK}
+  teamspeakLink={TEAMSPEAK_LINK}
+  startDate={START_DATE}
+/>
 
 {
   !signupEnabled && (