adding react-helmet

Author: Tom Davis

package-lock.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

package.json

@@ -2,10 +2,31 @@ import { Outlet } from 'react-router-dom';
 import classes from '../style/Main.module.css';
 import MainNavigation from './MainNavigation';
 import MobileHeader from '../components/MobileHeader';
+import { Helmet } from 'react-helmet';
 
 let RootLayout = () => {
     return (
         <div className={classes.layout}>
+            <Helmet>
+                <title>Fast DeFi Tutorial</title>
+                <meta name="description" content="The fastest DeFi tutorial on Earth"/>
+                <meta name="author" content="tomuky"/>
+                <meta name="keywords" content="DeFi, crypto, ETH, Ethereum, BTC, Bitcoin, Tutorial, money, blockchain, decentralized, finance"/>
+
+                <meta property="og:url" content="https://fastdefitutorial.com" />
+                <meta property="og:title" content="Fast DeFi Tutorial" />
+                <meta property="og:description" content="The fastest DeFi tutorial on Earth" />
+                {/* <meta property="og:image" content={require(`../images/bolt-fb2.png`)}/> */}
+                <meta property="og:image" content={require(`../images/fast-tw2.png`)}/>
+
+                <meta name="twitter:title" content="Fast DeFi Tutorial"/>
+                <meta name="twitter:card" content="summary"/>
+                <meta name="twitter:site" content="@tomuky"/>
+                <meta name="twitter:creator" content="@tomuky"/>
+                <meta name="twitter:description" content="The fastest DeFi tutorial on Earth" />
+                {/* <meta name="twitter:image" content={require(`../images/bolt-tw.png`)}/> */}
+                <meta name="twitter:image" content={require(`../images/fast-tw2.png`)}/>
+            </Helmet>
             <MainNavigation/>
             <MobileHeader/>
             <div className={classes.main}>

src/layout/RootLayout.js

@@ -3,10 +3,14 @@ import TopicTitle from '../components/TopicTitle';
 import TopicBody from '../components/TopicBody';
 import TopicDescription from '../components/TopicDescription';
 import ExternalLink from '../components/ExternalLink';
+import { Helmet } from 'react-helmet';
 
 const Redpill = () => {
     return (
         <>
+            <Helmet>
+                <title>Red pill</title>
+            </Helmet>
             <TopicTitle title="Take the red pill" icon="redpill-icon.png"/>
             <TopicDescription>
                 <p>Material to help you go down the rabbit hole</p>