Merge pull request reactplay#511 from reactplay/change-webiste-title-…

…dynamically

Change webiste title dynamically

src/common/playlists/PlayMeta.jsx

@@ -87,6 +87,7 @@ function PlayMeta() {
  return (
  <>
  <Helmet>
+ <title>ReactPlay - {play.name}</title>
  <meta name="description" content={play.description} />
  <meta property="og:title" content={play.name} />
  <meta property="og:description" content={play.description} />

src/common/routing/RouteDefs.jsx

@@ -19,18 +19,33 @@ const nhost = new NhostClient({
 });
 
 const RouteDefs = () => {
+ // Array of paths and it's corresponding title. This array is used for changing the title of the website dynamically.
+ const routes = [
+ {
+ path: "/",
+ title:
+ "ReactPlay - One app to learn, create, and share ReactJS projects.",
+ },
+ { path: "/plays", title: "ReactPlay - Plays" },
+ { path: "/ideas", title: "ReactPlay - Ideas" },
+ { path: "/tech-stacks", title: "ReactPlay - Tech Stacks" },
+ { path: "/plays/create", title: "ReactPlay - Create Play" },
+ ];
+
  return (
  <NhostReactProvider nhost={nhost}>
  <BrowserRouter>
  <Header />
- <DefMeta />
+ <DefMeta routes={routes} />
  <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/tech-stacks" element={<TechStack />} />
  <Route path="/plays" element={<App />}>
  <Route index element={<PlayList />} />
- <Route exact path="create" element= {<CreatePlay />}/>
- {process.env.NODE_ENV === "development" && <Route exact path="created/:playid" element={<PlayCreated />} />}
+ <Route exact path="create" element={<CreatePlay />} />
+ {process.env.NODE_ENV === "development" && (
+ <Route exact path="created/:playid" element={<PlayCreated />} />
+ )}
  <Route idex exact path=":username" element={<PlayMeta />}>
  <Route exact path=":playname" element={<PlayMeta />}>
  <Route exact path=":param1" element={<PlayMeta />}>
@@ -56,4 +71,4 @@ const RouteDefs = () => {
  );
 };
 
-export default RouteDefs;
+export default RouteDefs;

src/meta/DefMeta.jsx

@@ -1,8 +1,20 @@
 import { Helmet } from "react-helmet";
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
-function DefMeta() {
+function DefMeta({ routes }) {
+ const [title, setTitle] = useState(
+ "ReactPlay - One app to learn, create, and share ReactJS projects"
+ );
+ const currentPath = useLocation().pathname;
+
+ useEffect(() => {
+ // Logic to set title of website dynamically depending on the path.
+ routes.some((route) => route.path === currentPath && setTitle(route.title));
+ }, [currentPath, routes]);
  return (
  <Helmet>
+ <title>{title}</title>
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="ReactPlay" />
  <meta property="og:image:type" content="image/png" />
@@ -21,11 +33,7 @@ function DefMeta() {
  share ReactJS projects with the developer community."
  data-react-helmet="true"
  />
- <meta
- property="og:title"
- content="ReactPlay - One app to learn, create, and share ReactJS projects."
- data-react-helmet="true"
- />
+ <meta property="og:title" content={title} data-react-helmet="true" />
  <meta
  property="og:image"
  content="https://reactplay.io/og-image.png" // React should default these to public
@@ -41,11 +49,7 @@ function DefMeta() {
  content="https://reactplay.io"
  data-react-helmet="true"
  />
- <meta
- name="twitter:title"
- content="ReactPlay - One app to learn, create, and share ReactJS projects."
- data-react-helmet="true"
- />
+ <meta name="twitter:title" content={title} data-react-helmet="true" />
  <meta
  name="twitter:description"
  content="ReactPlay is an open-source application to learn, create and