Add SEO updates

sanketjo96 · Oct 4, 2024 · cd092f7 · cd092f7
1 parent 57f3415
commit cd092f7
Show file tree

Hide file tree

Showing 14 changed files with 220 additions and 114 deletions.
diff --git a/components/ui/Business/MainMenu/Login.tsx b/components/ui/Business/MainMenu/Login.tsx
@@ -36,7 +36,7 @@ export const Login = ({ user, setUser }: LoginProps) => {
           !user?.email ? router.push("/login") : onLogoutHandler()
         }
       >
-        {t("login")}
+        {!user?.email ? t("login") : t("logout")}
       </span>
     </li>
   );

diff --git a/components/ui/Business/MainMenu/MainMenu.tsx b/components/ui/Business/MainMenu/MainMenu.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "next-i18next";
 import { User } from "@/components/context/UserContext";
 import { useMediaQuery } from "@/hooks/use-media.query";
 import { Login } from "./Login";
+import { useLoggedInUser } from "@/components/providers/UserProvider";
 
 export type MainMenuProps = {
   user: User | null;
@@ -11,6 +12,7 @@ export type MainMenuProps = {
 export const AppNavLinks = ({ user }: MainMenuProps) => {
   const { t } = useTranslation("common");
   const isDesktop = useMediaQuery("(min-width: 768px)");
+  const { setUser } = useLoggedInUser();
   return (
     <>
       {!isDesktop && (
@@ -28,7 +30,7 @@ export const AppNavLinks = ({ user }: MainMenuProps) => {
         <Link href="/contacts">{t("contacts")}</Link>
       </li>
 
-      <Login user={user} setUser={() => {}}></Login>
+      <Login user={user} setUser={setUser}></Login>
 
       {user?.email ? (
         <li className="hover:text-orange-600">

diff --git a/next-seo.config.js b/next-seo.config.js
@@ -0,0 +1,34 @@
+// next-seo.config.js
+const nextSeoConfig = {
+  title: 'Sanket Joshi | Frontend Developer with Nodejs and AWS',
+  description: 'Portfolio of Sanket Joshi, showcasing expertise in React, Node.js, AWS, and software development.',
+  openGraph: {
+    url: "https://www.techsanket.in/",
+    title: "Home | Sanket Joshi",
+    description:
+      "Home Page of Sanket Joshi, showcasing expertise in React, Node.js, AWS, and software development.",
+    images: [
+      {
+        url: "https://www.techsanket.in/sj-og-image.jpg",
+        width: 800,
+        height: 600,
+        alt: "TechSanket Portfolio OG Image",
+      },
+    ],
+    site_name: "TechSanket Portfolio",
+  },
+  additionalMetaTags:
+    [
+      {
+        property: "keywords",
+        content: "Full-Stack Developer, React, Node.js, AWS, Portfolio",
+      },
+    ],
+  twitter: {
+    handle: '@sanketjoshi',
+    site: '@techsanket',
+    cardType: 'summary_large_image',
+  },
+};
+
+export default nextSeoConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "next": "14.2.12",
     "next-i18next": "^15.3.1",
     "next-mdx-remote": "^5.0.0",
+    "next-seo": "^6.6.0",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,17 +4,22 @@ import AppThemeProvider from "@/components/providers/AppThemeProvider";
 import AppHeader from "@/components/ui/Business/AppHeader";
 import AppFooter from "@/components/ui/Business/AppFooter";
 import { Toaster } from "@/components/ui/toaster";
+import { DefaultSeo } from "next-seo";
 import { UserProvider } from "@/components/providers/UserProvider";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { appWithTranslation } from "next-i18next";
+
 import nextI18NextConfig from "../next-i18next.config";
+import nextSeoConfig from "../next-seo.config";
+
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <div className="flex min-h-screen flex-col font-sans">
       <AppThemeProvider>
         <UserProvider>
           <AppHeader></AppHeader>
           <main className="grow">
+            <DefaultSeo {...nextSeoConfig} />
             <Component {...pageProps} />
           </main>
           <Toaster />

diff --git a/pages/contacts/index.tsx b/pages/contacts/index.tsx
@@ -2,17 +2,24 @@ import ContactForm from "@/components/ui/Business/Contact/ContactForm";
 import { GetStaticProps } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { NextSeo } from "next-seo";
 
 export default function Page() {
   const { t } = useTranslation("contacts");
   return (
-    <section className="pb-24 mt-8">
-      <div className="container max-w-3xl">
-        <h1 className="title text-xl mb-8">{t("header")}</h1>
-        <p className="text-muted-foreground text-md">{t("body")}</p>
-        <ContactForm></ContactForm>
-      </div>
-    </section>
+    <>
+      <NextSeo
+        title="Sanket Joshi | Contacts"
+        canonical="https://www.techsanket.in/login"
+      />
+      <section className="pb-24 mt-8">
+        <div className="container max-w-3xl">
+          <h1 className="title text-xl mb-8">{t("header")}</h1>
+          <p className="text-muted-foreground text-md">{t("body")}</p>
+          <ContactForm></ContactForm>
+        </div>
+      </section>
+    </>
   );
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,5 @@
 import Introduction from "@/components/ui/Business/Introduction";
+import { NextSeo } from "next-seo";
 import { MarkdownMetaData } from "@/components/ui/Business/Markdown/MarkDownList";
 import RecentPosts from "@/components/ui/Business/Post/RecentPosts";
 import { ResumeDownloader } from "@/components/ui/Business/ResumeDownloader";
@@ -16,14 +17,20 @@ type PageProps = {
 
 export default function Page({ recentPosts }: PageProps) {
   return (
-    <div className="container max-w-3xl">
-      <section>
-        <Introduction></Introduction>
-        <ResumeDownloader></ResumeDownloader>
-        <SkillMetric></SkillMetric>
-        <RecentPosts list={recentPosts}></RecentPosts>
-      </section>
-    </div>
+    <>
+      <NextSeo
+        title="Sanket Joshi | Home"
+        canonical="https://www.techsanket.in/"
+      />
+      <div className="container max-w-3xl">
+        <section>
+          <Introduction></Introduction>
+          <ResumeDownloader></ResumeDownloader>
+          <SkillMetric></SkillMetric>
+          <RecentPosts list={recentPosts}></RecentPosts>
+        </section>
+      </div>
+    </>
   );
 }
 

diff --git a/pages/login/index.tsx b/pages/login/index.tsx
@@ -9,6 +9,7 @@ import { ErrorLine } from "@/components/ui/ErrorLines";
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
+import { NextSeo } from "next-seo";
 
 export type LoginInputs = z.infer<typeof LoginFormSchema>;
 
@@ -44,38 +45,44 @@ export default function LoginPage() {
   };
 
   return (
-    <section className="container max-w-md mt-8">
-      <form onSubmit={handleSubmit(handleLoginSubmit)}>
-        <div className="flex flex-col gap-3 bg-gray-100 p-16 rounded-lg">
-          <Input
-            className="dark:border-orange-600"
-            id="email"
-            placeholder="Email"
-            {...register("email")}
-          />
-          {errors.email?.message && (
-            <ErrorLine message={errors.email.message} />
-          )}
-          <Input
-            className="dark:border-orange-600"
-            type="password"
-            id="password"
-            placeholder="Password"
-            {...register("password")}
-          />
-          {errors.password?.message && (
-            <ErrorLine message={errors.password.message} />
-          )}
-          <Button
-            disabled={isSubmitting}
-            className="max-w-[200] self-center"
-            type="submit"
-          >
-            {t("login")}
-          </Button>
-        </div>
-      </form>
-    </section>
+    <>
+      <NextSeo
+        title="Sanket Joshi | Login"
+        canonical="https://www.techsanket.in/login"
+      />
+      <section className="container max-w-md mt-8">
+        <form onSubmit={handleSubmit(handleLoginSubmit)}>
+          <div className="flex flex-col gap-3 bg-gray-100 p-16 rounded-lg">
+            <Input
+              className="dark:border-orange-600"
+              id="email"
+              placeholder="Email"
+              {...register("email")}
+            />
+            {errors.email?.message && (
+              <ErrorLine message={errors.email.message} />
+            )}
+            <Input
+              className="dark:border-orange-600"
+              type="password"
+              id="password"
+              placeholder="Password"
+              {...register("password")}
+            />
+            {errors.password?.message && (
+              <ErrorLine message={errors.password.message} />
+            )}
+            <Button
+              disabled={isSubmitting}
+              className="max-w-[200] self-center"
+              type="submit"
+            >
+              {t("login")}
+            </Button>
+          </div>
+        </form>
+      </section>
+    </>
   );
 }
 

diff --git a/pages/posts/[postId]/index.tsx b/pages/posts/[postId]/index.tsx
@@ -9,6 +9,7 @@ import { getPostFileContent, getPostFileNames } from "@/lib/data/posts";
 import { MarkdownMetaData } from "@/components/ui/Business/Markdown/MarkDownList";
 import MdxContent from "@/components/ui/Business/Markdown/MdxContent";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { NextSeo } from "next-seo";
 
 type PostPageProps = {
   source: MDXRemoteSerializeResult;
@@ -18,29 +19,38 @@ type PostPageProps = {
 function PostPage({ source, metaData }: PostPageProps) {
   const { title, image, author, publishDate } = metaData;
   return (
-    <div className="container max-w-3xl prose dark:prose-invert mt-16">
-      <Link href="/posts" className="no-underline flex items-center gap-3 mb-8">
-        <ArrowLeftIcon></ArrowLeftIcon>
-        <span>Back To Posts</span>
-      </Link>
-      {image && (
-        <div>
-          <Image
-            height={200}
-            width={800}
-            src={image}
-            alt={title}
-            className="object-cover"
-          ></Image>
-        </div>
-      )}
-      <header>
-        <p>
-          {author} | {formatDate(publishDate)}
-        </p>
-      </header>
-      <MdxContent {...source} />
-    </div>
+    <>
+      <NextSeo
+        title="Sanket Joshi | Posts"
+        canonical="https://www.techsanket.in/posts"
+      />
+      <div className="container max-w-3xl prose dark:prose-invert mt-16">
+        <Link
+          href="/posts"
+          className="no-underline flex items-center gap-3 mb-8"
+        >
+          <ArrowLeftIcon></ArrowLeftIcon>
+          <span>Back To Posts</span>
+        </Link>
+        {image && (
+          <div>
+            <Image
+              height={200}
+              width={800}
+              src={image}
+              alt={title}
+              className="object-cover"
+            ></Image>
+          </div>
+        )}
+        <header>
+          <p>
+            {author} | {formatDate(publishDate)}
+          </p>
+        </header>
+        <MdxContent {...source} />
+      </div>
+    </>
   );
 }
 

diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx
@@ -4,21 +4,28 @@ import { getPosts } from "@/lib/data/posts";
 import MarkDownListWithFilter from "@/components/ui/Business/Markdown/MarkdownListWithFilter";
 import { MarkdownMetaData } from "@/components/ui/Business/Markdown/MarkDownList";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { NextSeo } from "next-seo";
 
 type PostsPageProps = {
   metaList: MarkdownMetaData[];
 };
 
 function Posts({ metaList }: PostsPageProps) {
   return (
-    <section className="mt-8">
-      <div className="container max-w-3xl">
-        <MarkDownListWithFilter
-          redirectBase="posts"
-          metaList={metaList}
-        ></MarkDownListWithFilter>
-      </div>
-    </section>
+    <>
+      <NextSeo
+        title="Sanket Joshi | Posts"
+        canonical="https://www.techsanket.in/posts"
+      />
+      <section className="mt-8">
+        <div className="container max-w-3xl">
+          <MarkDownListWithFilter
+            redirectBase="posts"
+            metaList={metaList}
+          ></MarkDownListWithFilter>
+        </div>
+      </section>
+    </>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ export const Login = ({ user, setUser }: LoginProps) => { @@
               !user?.email ? router.push("/login") : onLogoutHandler()
             }
           >
-            {t("login")}
+            {!user?.email ? t("login") : t("logout")}
           </span>
         </li>
       );
@@ Expand Down @@