Merge pull request #392 from msqd/helmets

feat: pages meta via helmets
msqd · Jun 14, 2024 · fc2513c · fc2513c
2 parents 170e5b6 + 45dba8d
commit fc2513c
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 3 deletions.
diff --git a/harp_apps/dashboard/frontend/index.html b/harp_apps/dashboard/frontend/index.html
@@ -1,11 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/harp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Harp UI</title>
+    <title>Harp</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/harp_apps/dashboard/frontend/package.json b/harp_apps/dashboard/frontend/package.json
@@ -39,6 +39,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "@types/lodash": "^4.17.4",
+    "@types/react-helmet": "^6.1.11",
     "date-fns": "^3.6.0",
     "http-status-codes": "^2.3.0",
     "localforage": "^1.10.0",
@@ -49,6 +50,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
+    "react-helmet": "^6.1.0",
     "react-is": "18.2.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.23.1",

diff --git a/harp_apps/dashboard/frontend/pnpm-lock.yaml b/harp_apps/dashboard/frontend/pnpm-lock.yaml
diff --git a/harp_apps/dashboard/frontend/src/Pages/Overview/OverviewPage.tsx b/harp_apps/dashboard/frontend/src/Pages/Overview/OverviewPage.tsx
@@ -1,11 +1,16 @@
+import { Helmet } from "react-helmet"
+
 import { Page, PageTitle } from "Components/Page"
 
 import { HistorySection } from "./Sections/HistorySection.tsx"
 import { SummarySection } from "./Sections/SummarySection.tsx"
-
 export const OverviewPage = () => {
   return (
     <Page title={<PageTitle title="Overview" />}>
+      <Helmet>
+        <title>Harp</title>
+        <meta name="description" content="Overview page" />
+      </Helmet>
       <SummarySection />
       <HistorySection />
     </Page>

diff --git a/harp_apps/dashboard/frontend/src/Pages/System/SystemPage.tsx b/harp_apps/dashboard/frontend/src/Pages/System/SystemPage.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from "react-helmet"
+
 import { Page, PageTitle } from "Components/Page"
 import { Tab } from "ui/Components/Tabs"
 
@@ -8,6 +10,10 @@ import { SystemStorageTabPanel } from "./SystemStorageTabPanel.tsx"
 export const SystemPage = () => {
   return (
     <Page title={<PageTitle title="System" description="Informations about the running instance." />}>
+      <Helmet>
+        <title>System | Harp</title>
+        <meta name="description" content="System page" />
+      </Helmet>
       <Tab.Group>
         <Tab.List as="nav" aria-label="Tabs">
           <Tab>Settings</Tab>

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx
@@ -1,5 +1,6 @@
 import { isEqual } from "lodash"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { Helmet } from "react-helmet"
 import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
 
 import { Page } from "Components/Page"
@@ -124,6 +125,11 @@ export function TransactionListPage() {
         </PageTitle>
       }
     >
+      <Helmet>
+        <title>Transactions | Harp</title>
+        <meta name="description" content="Transactions list page" />
+      </Helmet>
+
       <OnQuerySuccess query={query}>
         {(query) => <TransactionListOnQuerySuccess query={query} filters={filters} />}
       </OnQuerySuccess>