added seo to readArticle

Author: truethari

src/data/articles.js

@@ -6,6 +6,12 @@ function article_1() {
 		title: "The Benefits of Cloud Computing",
 		description:
 			"Cloud computing offers a range of benefits, including cost savings and increased flexibility. Find out why more businesses are turning to the cloud.",
+		keywords: [
+			"The Benefits of Cloud Computing",
+			"Tharindu",
+			"Tharindu N",
+			"Tharindu Nayanajith",
+		],
 		style: `
 				.article-content {
 					display: flex;
@@ -40,6 +46,12 @@ function article_2() {
 		description:
 			"AI is transforming the healthcare industry, from improving patient outcomes to streamlining operations. Discover the latest applications of this game-changing technology.",
 		style: ``,
+		keywords: [
+			"Artificial Intelligence in Healthcare",
+			"Tharindu",
+			"Tharindu N",
+			"Tharindu Nayanajith",
+		],
 		body: (
 			<React.Fragment>
 				<h1>Content of article 2</h1>

src/pages/readArticle.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
 import styled from "styled-components";
 
 import NavBar from "../components/common/navBar";
@@ -20,7 +21,6 @@ const ReadArticle = () => {
 	const article = myArticles[slug - 1];
 
 	useEffect(() => {
-		document.title = `${article().title} | ${INFO.main.title}`;
 		window.scrollTo(0, 0);
 	}, [article]);
 
@@ -30,6 +30,12 @@ const ReadArticle = () => {
 
 	return (
 		<React.Fragment>
+			<Helmet>
+				<title>{`${article().title} | ${INFO.main.title}`}</title>
+				<meta name="description" content={article().description} />
+				<meta name="keywords" content={article().keywords.join(", ")} />
+			</Helmet>
+
 			<div className="page-content">
 				<NavBar />