toniebox-reverse-engineeringgh-99 added better page title

henryk86 · Aug 15, 2024 · bbc8aa8 · bbc8aa8
1 parent 76c63d9
commit bbc8aa8
Show file tree

Hide file tree

Showing 24 changed files with 74 additions and 69 deletions.
diff --git a/src/components/StyledComponents.tsx b/src/components/StyledComponents.tsx
@@ -3,10 +3,19 @@ import Sider from "antd/es/layout/Sider";
 import Item from "antd/es/list/Item";
 import styled from "styled-components";
 import { theme } from "antd";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 const { useToken } = theme;
 const useThemeToken = () => useToken().token;
 
+type BreadcrumbItem = {
+    title: string;
+};
+
+type BreadcrumbWrapperProps = {
+    items: BreadcrumbItem[];
+};
 export const StyledSubMenu = styled(Menu)`
     height: 100%;
     border-right: 0;
@@ -50,3 +59,22 @@ export const HiddenMobile = styled.span`
 export const StyledBreadcrumbItem = styled(Item)`
     padding: 10px;
 `;
+
+const BreadcrumbWrapper: React.FC<BreadcrumbWrapperProps> = ({ items }) => {
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        if (items.length === 1) {
+            document.title = "TeddyCloud";
+        } else {
+            const breadcrumbTitles = items
+                .slice(1)
+                .map((item) => t(item.title))
+                .join(" - ");
+            document.title = "TeddyCloud - " + breadcrumbTitles;
+        }
+    }, [items, t]);
+    return <StyledBreadcrumb items={items} />;
+};
+
+export default BreadcrumbWrapper;
diff --git a/src/pages/community/ChangelogPage.tsx b/src/pages/community/ChangelogPage.tsx
@@ -3,9 +3,8 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Typography, List } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -200,7 +199,7 @@ export const ChangelogPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("community.navigationTitle") },

diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -25,7 +24,7 @@ export const CommunityPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("community.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/community/ContributionPage.tsx b/src/pages/community/ContributionPage.tsx
@@ -2,9 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -44,7 +43,7 @@ export const ContributionPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("community.navigationTitle") },

diff --git a/src/pages/community/ContributionToniesJsonPage.tsx b/src/pages/community/ContributionToniesJsonPage.tsx
@@ -2,9 +2,8 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Typography, List, Collapse } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -88,7 +87,7 @@ export const ContributionToniesJsonPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("community.navigationTitle") },

diff --git a/src/pages/community/ContributorsPage.tsx b/src/pages/community/ContributorsPage.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Space, Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -26,7 +25,7 @@ export const ContributorsPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("community.navigationTitle") },

diff --git a/src/pages/community/FAQPage.tsx b/src/pages/community/FAQPage.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -25,7 +24,7 @@ export const FAQPage = () => {
                 <HiddenDesktop>
                     <CommunitySubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("community.navigationTitle") },

diff --git a/src/pages/home/FeaturesPage.tsx b/src/pages/home/FeaturesPage.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -76,7 +75,7 @@ export const FeaturesPage = () => {
                 <HiddenDesktop>
                     <HomeSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("home.features.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -2,9 +2,8 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Typography, Button, Alert, message } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -154,7 +153,7 @@ export const HomePage = () => {
                 <HiddenDesktop>
                     <HomeSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb items={[{ title: t("home.navigationTitle") }]} />
+                <BreadcrumbWrapper items={[{ title: t("home.navigationTitle") }]} />
                 <StyledContent>
                     <Paragraph>
                         <h1>{t(`home.title`)}</h1>

diff --git a/src/pages/home/StatsPage.tsx b/src/pages/home/StatsPage.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -45,7 +44,7 @@ export const StatsPage = () => {
                 <HiddenDesktop>
                     <HomeSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("home.stats.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/home/TonieMeeting.tsx b/src/pages/home/TonieMeeting.tsx
@@ -1,8 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -24,7 +23,7 @@ export const TonieMeetingPage = () => {
                 <HiddenDesktop>
                     <HomeSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("home.tonieMeeting.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/settings/RtnlPage.tsx b/src/pages/settings/RtnlPage.tsx
@@ -1,8 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Switch, Typography, Divider, Button } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -186,7 +185,7 @@ export const RtnlPage = () => {
                 <HiddenDesktop>
                     <SettingsSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("settings.rtnl.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -2,9 +2,8 @@ import React from "react";
 import { Form, Alert, Divider, Radio, message } from "antd";
 import { Link } from "react-router-dom"; // Import Link from React Router
 import { useTranslation } from "react-i18next";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -95,7 +94,7 @@ export const SettingsPage = () => {
                 <HiddenDesktop>
                     <SettingsSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("settings.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/settings/certificates/CertificatesPage.tsx b/src/pages/settings/certificates/CertificatesPage.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Alert, Typography } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -24,7 +23,7 @@ export const CertificatesPage = () => {
                 <HiddenDesktop>
                     <SettingsSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("settings.navigationTitle") },

diff --git a/src/pages/tonieboxes/CC3200BoxFlashing.tsx b/src/pages/tonieboxes/CC3200BoxFlashing.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -25,7 +24,7 @@ export const CC3200BoxFlashingPage = () => {
                 <HiddenDesktop>
                     <TonieboxesSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("tonieboxes.navigationTitle") },

diff --git a/src/pages/tonieboxes/CC3235BoxFlashing.tsx b/src/pages/tonieboxes/CC3235BoxFlashing.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Typography } from "antd";
 
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -25,7 +24,7 @@ export const CC3235BoxFlashingPage = () => {
                 <HiddenDesktop>
                     <TonieboxesSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("tonieboxes.navigationTitle") },

diff --git a/src/pages/tonieboxes/ESP32BoxFlashing.tsx b/src/pages/tonieboxes/ESP32BoxFlashing.tsx
@@ -6,9 +6,8 @@ import { useTranslation } from "react-i18next";
 import { Alert, Button, Col, Divider, Form, Input, Progress, Row, Steps, Typography } from "antd";
 import { TeddyCloudApi } from "../../api";
 import { defaultAPIConfig } from "../../config/defaultApiConfig";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -1372,7 +1371,7 @@ mv certs/client/CA.DER certs/client/ca.der`}
                 <HiddenDesktop>
                     <TonieboxesSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("tonieboxes.navigationTitle") },

diff --git a/src/pages/tonieboxes/TonieboxesPage.tsx b/src/pages/tonieboxes/TonieboxesPage.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, message } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -65,7 +64,7 @@ export const TonieboxesPage = () => {
                 <HiddenDesktop>
                     <TonieboxesSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[{ title: t("home.navigationTitle") }, { title: t("tonieboxes.navigationTitle") }]}
                 />
                 <StyledContent>

diff --git a/src/pages/tonies/ContentPage.tsx b/src/pages/tonies/ContentPage.tsx
@@ -1,8 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Select } from "antd";
-import {
+import BreadcrumbWrapper, {
     HiddenDesktop,
-    StyledBreadcrumb,
     StyledContent,
     StyledLayout,
     StyledSider,
@@ -28,7 +27,7 @@ export const ContentPage = () => {
                 <HiddenDesktop>
                     <ToniesSubNav />
                 </HiddenDesktop>
-                <StyledBreadcrumb
+                <BreadcrumbWrapper
                     items={[
                         { title: t("home.navigationTitle") },
                         { title: t("tonies.navigationTitle") },