Customize meta description and title for each gallery, fixes #3

icpc · Aug 1, 2023 · 1393357 · 1393357
1 parent b27487a
commit 1393357
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 13 deletions.
diff --git a/data/consts.js b/data/consts.js
@@ -30,6 +30,8 @@ export const places =
 
 export const api_key = "d30033b3d833adaace90f8487da70bba";
 export const user_id = "141939107@N06";
+export const title = "ICPC Gallery";
+export const description = "The International Collegiate Programming Contest World Finals Photo Gallery.";
 
 export const FLICKR_IMAGE_PREFIX = "https://www.flickr.com/photos/icpcnews/";
 

diff --git a/dataNAC/consts.js b/dataNAC/consts.js
@@ -15,6 +15,8 @@ export const places =
 
 export const api_key = "d30033b3d833adaace90f8487da70bba";
 export const user_id = "141939107@N06";
+export const title = "NAC Gallery";
+export const description = "NAC Photo Gallery.";
 
 export const FLICKR_IMAGE_PREFIX = "https://www.flickr.com/photos/icpcnews/";
 

diff --git a/dataNERC/consts.js b/dataNERC/consts.js
@@ -26,6 +26,8 @@ export const places =
 
 export const api_key = "d30033b3d833adaace90f8487da70bba";
 export const user_id = "141939107@N06";
+export const title = "NERC Gallery";
+export const description = "NERC Photo Gallery.";
 
 export const FLICKR_IMAGE_PREFIX = "https://www.flickr.com/photos/icpcnews/";
 

diff --git a/index.html b/index.html
@@ -1,19 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="theme-color" content="#000000"/>
-    <meta
-            name="description"
-            content="The International Collegiate Programming Contest World Finals Photo Gallery."
-    />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
     <script type="module" src="/src/index.jsx"></script>
-    <title>ICPC Gallery</title>
 </head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
 
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
 </body>
-</html>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "lightbox2": "^2.11.3",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
+    "react-helmet": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
     "react-masonry-infinite": "^1.2.2",
     "react-router-dom": "^6.3.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,5 @@
-import { Box, Container, Grid, Stack } from "@mui/material";
+import { Helmet } from "react-helmet";
+import { Grid } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
 
@@ -7,6 +8,7 @@ import Body from "./components/Body/Body";
 import Header from "./components/Header/Header";
 import { DesktopLogo } from "./components/Logo";
 import Sidebar from "./components/Sidebar";
+import { description, title } from "./consts";
 import theme from "./theme";
 
 import "./styles/App.css";
@@ -17,6 +19,10 @@ function App() {
 
     return (
         <ThemeProvider theme={theme}>
+            <Helmet>
+                <title>{title}</title>
+                <meta name="description" content={description}/>
+            </Helmet>
             <CssBaseline />
             <Grid container columns={10} height="100vh" p={2} pb={0} spacing={1}>
                 {desktop &&

diff --git a/src/consts.js b/src/consts.js
@@ -20,6 +20,8 @@ export const years = consts.years;
 export const places = consts.places;
 export const api_key = consts.api_key;
 export const user_id = consts.user_id;
+export const title = consts.title;
+export const description = consts.description;
 export const TAG_EVENT = consts.TAG_EVENT;
 export const TAG_TEAM = consts.TAG_TEAM;
 export const TAG_ALBUM = consts.TAG_ALBUM;