feat(view): add option to set page title

fixes #189
MauriceNino · Jul 8, 2022 · e42fb84 · e42fb84
1 parent d26c451
commit e42fb84
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/apps/api/src/config.ts b/apps/api/src/config.ts
@@ -23,6 +23,7 @@ export const CONFIG: Config = {
   disable_integrations: penv('DISABLE_INTEGRATIONS') === 'true',
 
   show_host: penv('SHOW_HOST') === 'true',
+  page_title: penv('PAGE_TITLE') ?? 'dash.',
   use_imperial: penv('USE_IMPERIAL') === 'true',
   enable_storage_split_view: penv('ENABLE_STORAGE_SPLIT_VIEW') === 'true',
   always_show_percentages: penv('ALWAYS_SHOW_PERCENTAGES') === 'true',

diff --git a/apps/docs/docs/config/index.mdx b/apps/docs/docs/config/index.mdx
@@ -71,6 +71,13 @@ they will only be shown on lower resolution devices (mobile phones).
 | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
 | <img src="/img/screenshot_darkmode.png" alt="Dashboard iwith no percentages" style={{maxHeight: "250px"}} /> | <img src="/img/screenshot_darkmode_with_perc.png" alt="Dashboard with percentages" style={{maxHeight: "250px"}} /> |
 
+### `DASHDOT_PAGE_TITLE`
+
+If you want to show a custom string in the browser page title.
+
+- type: `string`
+- default: `dash.`
+
 ## General
 
 ### `DASHDOT_PORT`

diff --git a/apps/view/src/components/main-widget-container.tsx b/apps/view/src/components/main-widget-container.tsx
@@ -1,5 +1,5 @@
 import { motion, Variants } from 'framer-motion';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { default as styled } from 'styled-components';
 import { GlassPane } from '../components/glass-pane';
 import { useIsMobile } from '../services/mobile';
@@ -80,6 +80,12 @@ export const MainWidgetContainer: FC = () => {
   const storageData = serverInfo?.storage;
   const gpuData = serverInfo?.gpu;
 
+  useEffect(() => {
+    if (config?.page_title) {
+      document.title = config.page_title;
+    }
+  }, [config?.page_title]);
+
   if (error) {
     return (
       <ErrorContainer

diff --git a/libs/common/src/index.ts b/libs/common/src/index.ts
@@ -92,6 +92,7 @@ export type Config = {
   disable_integrations: boolean;
 
   show_host: boolean;
+  page_title: string;
   use_imperial: boolean;
   enable_cpu_temps: boolean;
   enable_storage_split_view: boolean;