diff --git a/.idea/runConfigurations/Run_client.xml b/.idea/runConfigurations/Run_client.xml
index fcea7d1..d062d06 100644
--- a/.idea/runConfigurations/Run_client.xml
+++ b/.idea/runConfigurations/Run_client.xml
@@ -8,8 +8,9 @@
-
-
+
+
+
diff --git a/todoblue/src/app/CreatePublicBoardPanel.tsx b/todoblue/src/app/CreatePublicBoardPanel.tsx
index 7029ed5..07aa60e 100644
--- a/todoblue/src/app/CreatePublicBoardPanel.tsx
+++ b/todoblue/src/app/CreatePublicBoardPanel.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
import {useBoardCreator} from "@/app/useBoardCreator"
import {useLowerKebabState} from "@/app/useKebabState"
diff --git a/todoblue/src/app/RootFooter.tsx b/todoblue/src/app/RootFooter.tsx
new file mode 100644
index 0000000..b18bb69
--- /dev/null
+++ b/todoblue/src/app/RootFooter.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import style from "@/app/page.module.css"
+import {useServersideConfiguration} from "@/app/ServersideConfigurationManager"
+import {default as React} from "react"
+
+
+export function RootFooter() {
+ const {baseURL} = useServersideConfiguration()
+
+ return (
+
+ )
+}
diff --git a/todoblue/src/app/RootHeader.tsx b/todoblue/src/app/RootHeader.tsx
new file mode 100644
index 0000000..4628cae
--- /dev/null
+++ b/todoblue/src/app/RootHeader.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import style from "@/app/page.module.css"
+import {useServersideConfiguration} from "@/app/ServersideConfigurationManager"
+import {default as React} from "react"
+
+
+export function RootHeader() {
+ const {siteName} = useServersideConfiguration()
+
+ return (
+
+ )
+}
diff --git a/todoblue/src/app/RootMain.tsx b/todoblue/src/app/RootMain.tsx
new file mode 100644
index 0000000..2b16623
--- /dev/null
+++ b/todoblue/src/app/RootMain.tsx
@@ -0,0 +1,19 @@
+import {CreatePrivateBoardPanel} from "@/app/CreatePrivateBoardPanel"
+import {CreatePublicBoardPanel} from "@/app/CreatePublicBoardPanel"
+import style from "@/app/page.module.css"
+import {default as React} from "react"
+
+
+export function RootMain() {
+ return (
+
+
+
+ Crea un nuovo tabellone
+
+
+
+
+
+ )
+}
diff --git a/todoblue/src/app/ServersideConfigurationManager.tsx b/todoblue/src/app/ServersideConfigurationManager.tsx
new file mode 100644
index 0000000..732cd72
--- /dev/null
+++ b/todoblue/src/app/ServersideConfigurationManager.tsx
@@ -0,0 +1,47 @@
+"use client";
+import {createContext, ReactNode, useContext} from "react"
+
+
+/**
+ * **Object** containing the site options configurable via runtime environment variables.
+ */
+export interface ServersideConfiguration {
+ siteName: string,
+ baseURL: string,
+}
+
+/**
+ * **Context** where the {@link ServersideConfiguration} is stored in.
+ */
+export const ServersideConfigurationContext = createContext(null);
+
+/**
+ * **Component** acting as a provider for the {@link ServersideConfigurationContext} for its children.
+ *
+ * Required to execute only on the client.
+ *
+ * @param value The {@link ServersideConfiguration} to provide.
+ * @param children The {@link ReactNode}s to provide the {@link ServersideConfiguration} to.
+ * @constructor
+ */
+export function ServersideConfigurationManager({value, children}: {value: ServersideConfiguration, children: ReactNode}) {
+ return (
+
+ {children}
+
+ )
+}
+
+/**
+ * **Hook** to access the globally provided {@link ServersideConfiguration} from children components.
+ */
+export function useServersideConfiguration(): ServersideConfiguration {
+ const context = useContext(ServersideConfigurationContext);
+
+ if(context === null) {
+ console.error("[useServersideConfiguration] Was used outside of a ServersideConfigurationContext!")
+ throw Error("Used useServersideConfiguration outside of a ServersideConfigurationContext.")
+ }
+
+ return context
+}
diff --git a/todoblue/src/app/SiteName.tsx b/todoblue/src/app/SiteName.tsx
deleted file mode 100644
index df2421c..0000000
--- a/todoblue/src/app/SiteName.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import "server-only"
-
-export function SiteName() {
- return <>
- {process.env["NEXT_PUBLIC_SITE_NAME"] ?? "Todoblue"}
-
-}
diff --git a/todoblue/src/app/board/[board]/TaskDisplay.tsx b/todoblue/src/app/board/[board]/TaskDisplay.tsx
index 7b17071..5cdd582 100644
--- a/todoblue/src/app/board/[board]/TaskDisplay.tsx
+++ b/todoblue/src/app/board/[board]/TaskDisplay.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import {TaskIconEl} from "@/app/board/[board]/TaskIconEl"
import {TaskWithId} from "@/app/board/[board]/Types"
import {useManagedBoard} from "@/app/board/[board]/BoardManager"
diff --git a/todoblue/src/app/board/[board]/page.tsx b/todoblue/src/app/board/[board]/page.tsx
index 07f2b89..1a84432 100644
--- a/todoblue/src/app/board/[board]/page.tsx
+++ b/todoblue/src/app/board/[board]/page.tsx
@@ -6,7 +6,6 @@ import {BoardHeader} from "@/app/board/[board]/BoardHeader"
import {BoardTaskEditor} from "@/app/board/[board]/BoardTaskEditor"
import style from "./page.module.css"
-
export default function Page({params: {board}}: {params: {board: string}}) {
return (
diff --git a/todoblue/src/app/board/[board]/useBoardWebSocketURL.ts b/todoblue/src/app/board/[board]/useBoardWebSocketURL.ts
index fd3bb94..0914d8c 100644
--- a/todoblue/src/app/board/[board]/useBoardWebSocketURL.ts
+++ b/todoblue/src/app/board/[board]/useBoardWebSocketURL.ts
@@ -1,7 +1,10 @@
+import {useServersideConfiguration} from "@/app/ServersideConfigurationManager"
import {useMemo} from "react"
export function useBoardWebSocketURL(name: string) {
- const webSocketURL = useMemo(() => `${process.env.NEXT_PUBLIC_API_BASE_URL}/board/${name}/ws`, [name]);
+ const {baseURL} = useServersideConfiguration()
+
+ const webSocketURL = useMemo(() => `${baseURL}/board/${name}/ws`, [name]);
return {webSocketURL}
}
diff --git a/todoblue/src/app/layout.tsx b/todoblue/src/app/layout.tsx
index b55c79a..301e9fc 100644
--- a/todoblue/src/app/layout.tsx
+++ b/todoblue/src/app/layout.tsx
@@ -2,25 +2,32 @@
import "./layout.css";
import {AppBody} from "@/app/AppBody"
-
-import { config } from '@fortawesome/fontawesome-svg-core';
-config.autoAddCss = false; /* eslint-disable import/first */
-
+import {ServersideConfigurationManager} from "@/app/ServersideConfigurationManager"
+import {useServersideConfigurationEnvvars} from "@/app/useServersideConfigurationEnvvars"
import type {Metadata as NextMetadata} from "next"
import {default as React, ReactNode} from "react"
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false;
+
export const metadata: NextMetadata = {
- title: "Todoblue",
- description: "Self-hostable todo app",
+ applicationName: process.env["TODOBLUE_SITE_NAME"] ?? "Todoblue",
+ title: "Home",
+ description: process.env["TODOBLUE_SITE_DESCRIPTION"] ?? "Self-hosted multiplayer todo app",
+ viewport: {userScalable: false}
}
-export default function RootLayout({children}: { children: ReactNode }) {
+export default function layout({children}: { children: ReactNode }) {
+ const serversideConfiguration = useServersideConfigurationEnvvars()
+
return (
-
- {children}
-
+
+
+ {children}
+
+
)
}
diff --git a/todoblue/src/app/page.tsx b/todoblue/src/app/page.tsx
index 1db888c..1f55eec 100644
--- a/todoblue/src/app/page.tsx
+++ b/todoblue/src/app/page.tsx
@@ -1,50 +1,17 @@
-import {CreatePrivateBoardPanel} from "@/app/CreatePrivateBoardPanel"
-import {CreatePublicBoardPanel} from "@/app/CreatePublicBoardPanel"
-import {SiteName} from "@/app/SiteName"
+import {RootFooter} from "@/app/RootFooter"
+import {RootHeader} from "@/app/RootHeader"
+import {RootMain} from "@/app/RootMain"
import {default as React} from "react";
import style from "./page.module.css"
-export default function Page() {
- return
-}
-
-function PageHeader() {
+export default function page() {
return (
-
+
+
+
+
+
)
}
-function PageMain() {
- return (
-
-
-
- Crea un nuovo tabellone
-
-
-
-
-
- )
-}
-
-function PageFooter() {
- return (
-
- )
-}
diff --git a/todoblue/src/app/useServersideConfigurationEnvvars.ts b/todoblue/src/app/useServersideConfigurationEnvvars.ts
new file mode 100644
index 0000000..510df38
--- /dev/null
+++ b/todoblue/src/app/useServersideConfigurationEnvvars.ts
@@ -0,0 +1,17 @@
+import "server-only";
+import {ServersideConfiguration} from "@/app/ServersideConfigurationManager"
+
+
+export function useServersideConfigurationEnvvars(): ServersideConfiguration {
+ const siteName = process.env["TODOBLUE_SITE_NAME"]
+ const baseURL = process.env["TODORED_BASE_URL"]
+
+ if(!siteName) {
+ throw Error("TODOBLUE_SITE_NAME is not set.")
+ }
+ if(!baseURL) {
+ throw Error("TODORED_BASE_URL is not set.")
+ }
+
+ return {siteName, baseURL}
+}