helmet stuff

Author: HappyZombies

package-lock.json

@@ -20,6 +20,7 @@
     "gray-matter": "^4.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-markdown": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-syntax-highlighter": "^15.5.0"

package.json

@@ -5,6 +5,7 @@ import { Container, Typography, Link } from "@mui/material";
 import { useParams } from "react-router-dom";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Helmet } from "react-helmet-async";
 
 function DisplayPost({ type }) {
     const params = useParams();
@@ -34,13 +35,15 @@ function DisplayPost({ type }) {
     if (markdownError) {
         return (
             <Container>
+                <Helmet title={`Daniel Reguero Blog | Post Not Found`} />
                 <Typography variant="h4" align="center" sx={{ paddingBottom: ".5em" }}>Not Found</Typography>
                 <Typography variant="body1" align="center">Sorry, couldn't find this post :&#40;</Typography>
             </Container>
         )
     }
     return (
         <Container>
+            <Helmet title={`Daniel Reguero Blog | ${title}`} />
             <Typography variant="h4" align="center" sx={{ paddingBottom: ".25em" }}>{title}</Typography>
             <Typography variant="h6" align="center" sx={{ color: "#666", fontSize: "1.1rem" }}>{date}</Typography>
             <Container maxWidth="md">

src/components/DisplayPost.jsx

@@ -1,5 +1,6 @@
 import { Typography, ListItem, ListItemText, Link, Grid } from "@mui/material";
 import { Link as LinkRouter } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 const PostsLinkListItem = ({ type, post }) => {
     if (post.draft) {
@@ -27,20 +28,23 @@ const PostsLinkListItem = ({ type, post }) => {
 
 function DisplayPostsLists({ title, type, posts }) {
     return (
-        <Grid
-            container
-            spacing={0}
-            direction="column"
-            alignItems="center"
-            justifyContent="center"
-        >
-            <Grid item xs={3}>
-                <Typography variant="h4" gutterBottom>{title}</Typography>
+        <>
+            <Helmet title={`Daniel Reguero Blog | ${title}`} />
+            <Grid
+                container
+                spacing={0}
+                direction="column"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Grid item xs={3}>
+                    <Typography variant="h4" gutterBottom>{title}</Typography>
+                </Grid>
+                <Grid item xs={5}>
+                    {posts.map((post, i) => <PostsLinkListItem post={post} type={type} key={i} />)}
+                </Grid>
             </Grid>
-            <Grid item xs={5}>
-                {posts.map((post, i) => <PostsLinkListItem post={post} type={type} key={i} />)}
-            </Grid>
-        </Grid>
+        </>
     )
 }
 

src/components/DisplayPostsList.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { HelmetProvider } from 'react-helmet-async'
+
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </React.StrictMode>,
 )

src/main.jsx

@@ -1,5 +1,6 @@
 import { Typography, Link, Container } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { Helmet } from "react-helmet-async";
 
 const StyledContainer = styled(Container)(() => ({
     "& .MuiTypography-root": {
@@ -10,6 +11,7 @@ const StyledContainer = styled(Container)(() => ({
 function About() {
     return (
         <>
+            <Helmet title="Daniel Reguero Blog | About" />
             <Typography variant="h4" align="center" gutterBottom>About</Typography>
             <StyledContainer maxWidth="md">
                 <Typography gutterBottom>

src/pages/About.jsx

@@ -1,5 +1,6 @@
 import { Container, Grid, Link, List, ListItem, ListItemText, Typography } from "@mui/material";
 import { Link as LinkRouter } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 import routes from "../routes";
 
@@ -27,6 +28,7 @@ const RouteLinkList = ({ route }) => {
 const Home = () => {
     return (
         <Container>
+            <Helmet title='Daniel Reguero Blog' />
             <Grid sx={{minHeight: "100vh"}} container spacing={0} alignItems="center" justifyItems="center">
                 <Grid item xs={12}>
                     <Typography variant="h3" align="center" gutterBottom>Daniel Reguero</Typography>

src/pages/Home.jsx

@@ -1,7 +1,13 @@
 import { Typography } from "@mui/material";
+import { Helmet } from "react-helmet";
 
 function NotFound() {
-    return <Typography variant="h4" align="center" gutterBottom>404 Not Found</Typography>;
+    return (
+        <>
+            <Helmet title="Daniel Reguero Blog | Not Found" />
+            <Typography variant="h4" align="center" gutterBottom>404 Not Found</Typography>
+        </>
+    );
 }
 
 export default NotFound;