Add dynamic page titles, add external links

Signed-off-by: Param Siddharth <[email protected]>

package.json

@@ -18,6 +18,7 @@
     "match-sorter": "^6.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.4",
     "react-router-dom": "^6.21.3",
     "sort-by": "^0.0.2"
   },

src/components/footer/index.jsx

@@ -13,9 +13,9 @@ const Footer = () => {
 				<Link to="/contact" className={styles.link}>
 					Contact
 				</Link>
-				<Link to="/github" className={styles.link}>
+				<a target="_blank" href="https://github.com/heyrema" className={styles.link}>
 					GitHub
-				</Link>
+				</a>
 			</div>
 			<div className={styles.copyright}>
 				&copy; Rema 2021-{new Date().getFullYear()}

src/components/header/index.jsx

@@ -23,7 +23,7 @@ const Header = () => {
 						<NavLink className="nav-link p-0" to="/">Home</NavLink>
 					</li>
 					<li className="nav-item">
-						<NavLink className="nav-link p-0" to="/docs">Docs</NavLink>
+						<a className="nav-link p-0" href="https://rema.js.org" target="_blank">Docs</a>
 					</li>
 					<li className="nav-item">
 						<NavLink className="nav-link p-0" to="/about">About</NavLink>

src/main.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap';
@@ -14,6 +15,8 @@ import App from './app.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </React.StrictMode>,
 );

src/pages/about/index.jsx

@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet-async';
+
 import * as styles from './style.module.scss';
 import vectorLogo from '../../assets/logo.svg';
 
@@ -9,6 +11,9 @@ function About() {
 	return <>
 		<Header/>
 		<div className={`${styles.container}`}>
+			<Helmet>
+				<title>Rema - About</title>
+			</Helmet>
 			<h1>About</h1>
 			<h2>
 				Managing and distributing certifications for all, since 2021.

src/pages/contact/index.jsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { Helmet } from 'react-helmet-async';
 
 import * as styles from './style.module.scss';
 import vectorLogo from '../../assets/logo.svg';
@@ -20,6 +21,9 @@ function Contact() {
 	return <>
 		<Header/>
 		<div className={`${styles.container}`}>
+			<Helmet>
+				<title>Rema - Contact</title>
+			</Helmet>
 			<h1>Contact</h1>
 			<h4>
 				For requesting a quote or any other enquiries, contact us on <a href="mailto:[email protected]">[email protected]</a>, or fill the form below:

src/pages/docs/index.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { Helmet } from 'react-helmet-async';
 
 import * as styles from './style.module.scss';
 import vectorLogo from '../../assets/logo.svg';
@@ -17,6 +18,9 @@ function Docs() {
 	return <>
 		<Header/>
 		<div className={`${styles.container}`}>
+			<Helmet>
+				<title>Rema - Documentation</title>
+			</Helmet>
 			<h1>Documentation</h1>
 			<h2>
 				Redirecting...

src/pages/error/index.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 
 import * as styles from './style.module.scss';
 import vectorLogo from '../../assets/logo.svg';
@@ -11,6 +12,9 @@ function Error({ type = '404' }) {
 	return <>
 		<Header/>
 		<div className={`${styles.container}`}>
+			<Helmet>
+				<title>Rema - {type === '404' ? '404 - Not Found' : 'Error'}</title>
+			</Helmet>
 			<h1>{type === '404' ? '404 - Not Found' : 'Error'}</h1>
 			<h2>
 				{type === '404' ? 'The page you are trying to access is invalid or has been moved/expired.' : 'An unknown mishap happened.'}

src/pages/github/index.jsx

@@ -17,6 +17,9 @@ function GitHub() {
 	return <>
 		<Header/>
 		<div className={`${styles.container}`}>
+			<Helmet>
+				<title>Rema - GitHub</title>
+			</Helmet>
 			<h1>GitHub</h1>
 			<h2>
 				Redirecting...

src/pages/home/index.jsx

@@ -1,4 +1,4 @@
-
+import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
 
 import * as styles from './style.module.scss';
@@ -16,6 +16,9 @@ import Footer from '../../components/footer';
 function Home() {
 	return <>
 		<Header/>
+		<Helmet>
+			<title>Rema - Home</title>
+		</Helmet>
 		<div className={`${styles.container} ${styles.part_1}`}>
 			<img src={ganesh} className={styles.ganesh} />
 			<img src={homeLogo} className={styles.logo} />