Add head-title to pages (#252)

* add titles to pages * import Seminar type and resolve optional title
ZdruzenieSTROM · Dec 9, 2023 · 5df8ae8 · 5df8ae8
1 parent 3bc981e
commit 5df8ae8
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 25 deletions.
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -1,8 +1,10 @@
 import clsx from 'clsx'
+import Head from 'next/head'
 import {FC, ReactNode} from 'react'
 
 import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
+import {Seminar, useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
@@ -16,31 +18,46 @@ type PageLayoutProps = {
   children: ReactNode
 }
 
+const seminarTitle: Record<Seminar, string> = {
+  strom: 'STROM',
+  matik: 'Matik',
+  malynar: 'Malynár',
+}
+
 // pre pouzitie len na seminarovych strankach a podstrankach - `/matik(/*)`
 // ked budeme potrebovat top-level stranky ako `/ina-stranka`, budeme musiet upravit, ako sa pracuje s `useSeminarInfo`
 export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', children}) => {
+  const {seminar} = useSeminarInfo()
   return (
-    <PageTitleContainer.Provider initialState={title}>
-      <BannerContainer.Provider>
-        <div className={styles.pageContainer}>
-          <TopGrid />
-          <MenuMain />
-          <div className={styles.grid}>
-            <StromLogo />
-            <div
-              className={clsx(
-                styles.mainContent,
-                contentWidth === 1 && styles.col1,
-                contentWidth === 2 && styles.col2,
-                contentWidth === 3 && styles.col3,
-              )}
-            >
-              {children}
+    <>
+      <Head>
+        <title>
+          {title && `${title} | `}
+          {seminarTitle[seminar]}
+        </title>
+      </Head>
+      <PageTitleContainer.Provider initialState={title}>
+        <BannerContainer.Provider>
+          <div className={styles.pageContainer}>
+            <TopGrid />
+            <MenuMain />
+            <div className={styles.grid}>
+              <StromLogo />
+              <div
+                className={clsx(
+                  styles.mainContent,
+                  contentWidth === 1 && styles.col1,
+                  contentWidth === 2 && styles.col2,
+                  contentWidth === 3 && styles.col3,
+                )}
+              >
+                {children}
+              </div>
             </div>
+            <Footer />
           </div>
-          <Footer />
-        </div>
-      </BannerContainer.Provider>
-    </PageTitleContainer.Provider>
+        </BannerContainer.Provider>
+      </PageTitleContainer.Provider>
+    </>
   )
 }
diff --git a/src/pages/malynar/index.tsx b/src/pages/malynar/index.tsx
@@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Posts} from '@/components/Posts/Posts'
 
 const Malynar: NextPage = () => (
-  <PageLayout title="Seminár Malynár" contentWidth={1}>
+  <PageLayout title="Novinky" contentWidth={1}>
     <Posts />
   </PageLayout>
 )

diff --git a/src/pages/matik/index.tsx b/src/pages/matik/index.tsx
@@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Posts} from '@/components/Posts/Posts'
 
 const Matik: NextPage = () => (
-  <PageLayout title="Seminár Matik" contentWidth={1}>
+  <PageLayout title="Novinky" contentWidth={1}>
     <Posts />
   </PageLayout>
 )

diff --git a/src/pages/strom/index.tsx b/src/pages/strom/index.tsx
@@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Posts} from '@/components/Posts/Posts'
 
 const Strom: NextPage = () => (
-  <PageLayout title="Seminár Strom" contentWidth={1}>
+  <PageLayout title="Novinky" contentWidth={1}>
     <Posts />
   </PageLayout>
 )

diff --git a/src/pages/strom/vysledky/[[...params]].tsx b/src/pages/strom/vysledky/[[...params]].tsx
@@ -5,7 +5,7 @@ import {Results} from '@/components/Results/Results'
 
 const Vysledky: NextPage = () => {
   return (
-    <PageLayout contentWidth={2}>
+    <PageLayout contentWidth={2} title="Výsledky">
       <Results />
     </PageLayout>
   )

diff --git a/src/pages/strom/zadania/[[...params]].tsx b/src/pages/strom/zadania/[[...params]].tsx
@@ -5,7 +5,7 @@ import {Problems} from '@/components/Problems/Problems'
 
 const Zadania: NextPage = () => {
   return (
-    <PageLayout contentWidth={2}>
+    <PageLayout contentWidth={2} title="Zadania">
       <Problems />
     </PageLayout>
   )