Add dynamic title generation.

lPrimemaster · Feb 10, 2025 · 44e6dfe · 44e6dfe
1 parent 44dad55
commit 44e6dfe
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 8 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/favicon.ico" />
-    <title>MxFrontend</title>
+    <!-- <title>MxFrontend</title> -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@kobalte/core": "^0.13.7",
     "@solid-primitives/websocket": "^1.2.2",
+    "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.1",
     "@zag-js/solid": "^0.77.1",
     "class-variance-authority": "^0.7.0",

diff --git a/frontend/src/HistoryViewer.tsx b/frontend/src/HistoryViewer.tsx
@@ -16,6 +16,7 @@ import { BadgeLabel } from './components/ui/badge-label';
 import { Tooltip, TooltipContent, TooltipTrigger } from './components/ui/tooltip';
 import { Checkbox } from './components/ui/checkbox';
 import { MxRdb } from './lib/rdb';
+import { DynamicTitle } from './components/DynamicTitle';
 
 interface DisplayOptions {
 	color: string;
@@ -371,6 +372,7 @@ const HistoryPlot : Component<{name: string, options: Array<DisplayOptions>}> =
 export const HistoryViewer : Component = () => {
 	return (
 		<div>
+			<DynamicTitle title="History"/>
 			<Sidebar/>
 			<div class="p-5 ml-36 mr-auto">
 				<div class="container">

diff --git a/frontend/src/Home.tsx b/frontend/src/Home.tsx
@@ -12,7 +12,7 @@ import { timestamp_tohms } from './lib/utils';
 import { LogTable } from './components/LogTable';
 import { ResourcePanel } from './components/ResourcePanel';
 import { ClientsTable } from './components/ClientsTable';
-import { Hello } from 'mulex-api';
+import { DynamicTitle } from './components/DynamicTitle';
 
 const [socketStatus, setSocketStatus] = createSignal<boolean>(true);
 const [runStatus, setRunStatus] = createSignal<string>('Stopped');
@@ -118,6 +118,7 @@ const Home: Component = () => {
 
 	return (
 		<div>
+			<DynamicTitle title="Home"/>
 			<Sidebar/>
 			<div class="p-5 ml-36 mr-auto">
 				<div class="columns-1 xl:columns-2 gap-5">

diff --git a/frontend/src/Project.tsx b/frontend/src/Project.tsx
@@ -1,5 +1,4 @@
-import { Component, createSignal, For, Show, useContext } from 'solid-js';
-import { MxGenericPlot, MxHistogramPlot, MxScatterPlot } from './api/Plot';
+import { Component, For, Show, useContext } from 'solid-js';
 import Sidebar from './components/Sidebar';
 import { MxPlugin, mxRegisterPluginFromFile, mxDeletePlugin, plugins } from './lib/plugin';
 import { MxRdb } from './lib/rdb';
@@ -9,7 +8,7 @@ import Card from './components/Card';
 import { MxDynamicRouterContext, DynamicRouterContext } from './components/DynamicRouter';
 import { createMapStore } from './lib/rmap';
 import { A } from '@solidjs/router';
-import { check_condition } from './lib/utils';
+import { DynamicTitle } from './components/DynamicTitle';
 
 export const Project : Component = () => {
 	const { addRoute, removeRoute } = useContext(DynamicRouterContext) as MxDynamicRouterContext;
@@ -19,6 +18,7 @@ export const Project : Component = () => {
 		const RenderPlug : Component = () => {
 			return (
 				<div>
+					<DynamicTitle title={plugin.name}/>
 					<Sidebar/>
 					<div class="p-5 ml-36 mr-auto">
 						<plugin.render/>
@@ -77,6 +77,7 @@ export const Project : Component = () => {
 
 	return (
 		<div>
+			<DynamicTitle title="Project"/>
 			<Sidebar/>
 			<div class="p-5 ml-36 mr-auto">
 				<div class="flex gap-5 flex-wrap">

diff --git a/frontend/src/RdbViewer.tsx b/frontend/src/RdbViewer.tsx
@@ -18,6 +18,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { scroll_to_element, array_chunkify } from './lib/utils';
 import { TextField, TextFieldLabel, TextFieldInput, TextFieldErrorMessage } from './components/ui/text-field';
 import { Tooltip, TooltipContent, TooltipTrigger } from './components/ui/tooltip';
+import { DynamicTitle } from './components/DynamicTitle';
 
 class RdbStats {
 	read: number;
@@ -416,6 +417,7 @@ export const RdbViewer: Component = () => {
 
 	return (
 		<div>
+			<DynamicTitle title="RDB"/>
 			<Sidebar/>
 			<div class="p-5 ml-36 mr-auto">
 				<SearchBarProvider>

diff --git a/frontend/src/components/DynamicTitle.tsx b/frontend/src/components/DynamicTitle.tsx
@@ -0,0 +1,9 @@
+import { Title } from "@solidjs/meta";
+import { Component } from "solid-js"
+import metadata from "~/lib/metadata";
+
+export const DynamicTitle : Component<{ title: string }> = (props) => {
+	return (
+		<Title>{props.title} • {metadata.expname()}</Title>
+	);
+};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web';
+import { render, Show } from 'solid-js/web';
 import { Router, Route } from '@solidjs/router';
 import { Toaster } from '~/components/ui/toast';
 
@@ -10,6 +10,8 @@ import { RdbViewer } from './RdbViewer';
 import { LogProvider } from './components/LogTable';
 import { HistoryViewer } from './HistoryViewer';
 import { DynamicRouter, DynamicRouterProvider } from './components/DynamicRouter';
+import { MetaProvider } from '@solidjs/meta';
+import metadata from './lib/metadata';
 
 const root = document.getElementById('root');
 
@@ -20,7 +22,7 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 }
 
 render(() => (
-		<>
+		<MetaProvider>
 			<DynamicRouterProvider>
 				<LogProvider maxLogs={100}>
 					<Router>
@@ -33,5 +35,5 @@ render(() => (
 					<Toaster/>
 				</LogProvider>
 			</DynamicRouterProvider>
-		</>
+		</MetaProvider>
 	), root!);