Fix mode

README.md

@@ -37,6 +37,8 @@ Since everything is rendered on the server there is just a [back-end](https://un
     │   │   ├── Search.tsx      // Search component
     │   │   ├── Overview.scss   // Overview style declaration
     │   │   └── Overview.tsx    // Overview component
+    │   ├── theme.tsx           // Theme definition
+    │   ├── weather-theme.scss  // Theme stylesheet
     │   └── res/                // Ressources folder
     ├── app.dx                  // Endpoint config file
     └── deno.json               // Deno config file

backend/entrypoint.tsx

@@ -3,9 +3,10 @@ import { Logger } from "unyt_core/utils/logger.ts";
 import { Datex } from "unyt_core/datex.ts";
 import { Overview } from '../common/components/Overview.tsx';
 import { Search } from "../common/components/Search.tsx";
-import { renderStatic } from "uix/base/render-methods.ts";
+import { renderBackend, renderStatic } from "uix/base/render-methods.ts";
 import { Entrypoint } from "uix/html/entrypoints.ts";
-import { provideError } from "uix/html/entrypoint-providers.tsx";
+
+import "common/theme.tsx";
 
 const logger = new Logger("Weather");
 
@@ -77,17 +78,20 @@ const getWeather = async (location: string) => {
 }
 
 export default {
-	'/': renderStatic(<Search/>),
+	'/': renderBackend(<Search/>),
 	'/:location': async (_, { location }) => {
 		location = decodeURIComponent(location);
 		logger.info("Requesting weather info for", location);
 		try {
 			const weather = await getWeather(location);
 			logger.success("Got weather info for", location, weather.current);
 			return renderStatic(<Overview weather={weather}/>);
-		} catch (error: unknown | Error) {
+		} catch (error) {
 			console.error(error);
-			return provideError(`<h2>Could not get weather for '${decodeURIComponent(location).replace(/[^a-zA-Za-zA-ZÄÖÜäöüß\- ]/, '')}'!</h2><br><small>${error}</small>`);
+			throw <>
+				<h1>Could not get weather for '{decodeURIComponent(location).replace(/[^a-zA-Za-zA-ZÄÖÜäöüß\- ]/, '')}'!</h1>
+				<span>{error}</span>
+			</>;
 		}
 	}
 } satisfies Entrypoint;

common/components/Overview.scss

@@ -9,21 +9,8 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		overflow-y: scroll;
 		position: absolute;
-		height: 100%;
-		--color-1: #ff8080;
-		--color-2: #554afa;
 		background: linear-gradient(0deg, var(--color-1) 0%, var(--color-2));
-		h1,h2,h3,h4,a {
-			font-weight: normal!important;
-			color: white;
-			margin: 0;
-		}
-		span {
-			opacity: 0.8;
-			color: white;
-		}
 		&>.main {
 			display: flex;
 			max-width: 500px;

common/components/Search.scss

@@ -6,8 +6,6 @@
 		overflow-y: scroll;
 		position: absolute;
 		height: 100%;
-		--color-1: #ff8080;
-		--color-2: #554afa;
 		background: linear-gradient(0deg, var(--color-1) 0%, var(--color-2));
 		&>.main {
 			max-width: 800px;

common/components/Search.tsx

@@ -6,7 +6,7 @@ import { Component } from 'uix/components/Component.ts';
 		<div class="main">
 			<h1>Search your city</h1>
 			<input id="location" type={"text"} placeholder={"Type your city"}/>
-			<div onclick:frontend={() => this.search()}>Search</div>
+			<div onclick:frontend={() => use("no-datex", this) && this.search()}>Search</div>
 		</div>
 	</div>
 })

common/theme.tsx

@@ -0,0 +1,14 @@
+import { UIX } from "uix";
+import { defaultThemes } from "uix/base/themes.ts";
+
+UIX.Theme.registerTheme(UIX.Theme.extend(defaultThemes.dark, {
+	mode: undefined,
+	name: "weather-theme",
+	values: {
+		"accent": "white",
+		"color-1": "#ff8080",
+		"color-2": "#554afa"
+	},
+	stylesheets: ["./weather-theme.scss"]
+}));
+UIX.Theme.useThemes("weather-theme");

common/weather-theme.scss

@@ -0,0 +1,14 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	overflow-y: auto;
+}
+h1,h2,h3,h4,a {
+	font-weight: normal!important;
+	color: white;
+	margin: 0;
+}
+span {
+	opacity: 0.8;
+	color: white;
+}