fix: seo update

SubstantialCattle5 · Oct 22, 2023 · 5c6e493 · 5c6e493
1 parent ad9f8a5
commit 5c6e493
Show file tree

Hide file tree

Showing 14 changed files with 636 additions and 188 deletions.
diff --git a/public/contents/projects/echoes.mdx b/public/contents/projects/echoes.mdx
diff --git a/public/contents/projects/hestia.mdx b/public/contents/projects/hestia.mdx
diff --git a/public/contents/projects/humantd.mdx b/public/contents/projects/humantd.mdx
@@ -0,0 +1,11 @@
+---
+title: 'HumanTD'
+slug: humantd
+publishedAt: '2023-06-08'
+description: 'Portal that tracks down a person of interest by using backtracking and video footage from CCTV cameras.'
+banner: 'nilaysharan/project/humantd/qwlr8aaqfn7xwb1dazqr'
+tags: 'react,tailwindcss,typescript'
+github: 'github.com/nilaysharan/humantd'
+---
+
+sabdakbsdj
diff --git a/public/contents/projects/medbud.mdx b/public/contents/projects/medbud.mdx
diff --git a/public/contents/projects/social-media-backend.mdx b/public/contents/projects/social-media-backend.mdx
diff --git a/src/app/api/blog/[slug]/route.ts b/src/app/api/blog/[slug]/route.ts
@@ -12,7 +12,8 @@ export async function GET(req: NextRequest) {
 
   try {
     const preRoutes = preFetch({ type: 'blog' });
-    const preRoute = preRoutes.find((route) => route.slug === slug);
+    const preRoute = preRoutes?.find((route) => route.slug === slug);
+    if (!preRoute) return new NextResponse(null, { status: 404 });
     const file = await getFileBySlug(
       preRoute?.source as string,
       preRoute?.slug as string

diff --git a/src/app/api/projects/[slug]/route.ts b/src/app/api/projects/[slug]/route.ts
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getFileBySlug, preFetch } from '@/lib/mdx.server';
+
+export async function GET(req: NextRequest) {
+  const BASE_URL = `${req.nextUrl.origin}/api/projects/`;
+  const url = new URL(req.url || '', BASE_URL);
+
+  const slug = url.pathname.split('/').pop() || '';
+
+  if (!slug) return new NextResponse(null, { status: 404 });
+
+  try {
+    const preRoutes = preFetch({ type: 'projects' });
+    const preRoute = preRoutes?.find((route) => route.slug === slug);
+    const file = await getFileBySlug(
+      preRoute?.source as string,
+      preRoute?.slug as string
+    );
+
+    if (!file)
+      return new NextResponse(null, { status: 404, statusText: 'Not found ' });
+
+    return NextResponse.json(file);
+  } catch (error) {
+    return NextResponse.json({ error: error });
+  }
+}
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -11,6 +11,7 @@ import BlogCard from '@/components/content/blogs/BlogCard';
 import ContentPlaceholder from '@/components/content/ContenPlaceholder';
 import StyledInput from '@/components/content/form/StyledInput';
 import Tag, { SkipNavTag } from '@/components/content/Tag';
+import Seo from '@/components/Seo';
 
 import { BlogFrontmatter } from '@/types/frontmatters';
 
@@ -77,6 +78,10 @@ const Page = () => {
 
   return (
     <>
+      <Seo
+        templateTitle='Blog'
+        description='Thoughts, mental models, and tutorials about front-end development. Rebuild your mental model so front-end development can be predictable.'
+      />
       <main>
         <section className={clsx(isLoaded && 'fade-in-start')}>
           <div className='layout py-12'>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -14,6 +14,7 @@ import ProjectCard from '@/components/content/projects/ProjectCard';
 import ButtonLink from '@/components/links/ButtonLink';
 import CustomLink from '@/components/links/CustomLink';
 import UnstyledLink from '@/components/links/UnstyledLink';
+import Seo from '@/components/Seo';
 
 import { BlogFrontmatter, ProjectFrontmatter } from '@/types/frontmatters';
 
@@ -33,157 +34,166 @@ export default function HomePage() {
     useInjectContentMeta('projects', 'featuredProjects') || [];
   const populatedPosts = useInjectContentMeta('blog', 'featuredBlogs') || [];
   return (
-    <main>
-      <section
-        className={clsx(
-          'min-h-main -mt-20 mb-20 flex flex-col justify-center',
-          isLoaded && 'fade-in-start'
-        )}
-      >
-        <article className='layout'>
-          <h2 className='text-2xl md:text-4xl 2xl:text-5xl' data-fade='1'>
-            <Typewriter
-              options={{
-                strings: [
-                  'Hello!',
-                  'नमस्ते!',
-                  'ہیلو!',
-                  'ನಮಸ್ಕಾರ!',
-                  'Привет!',
-                  'Olá!',
-                  'שָׁלוֹם!',
-                ],
-                autoStart: true,
-                loop: true,
-              }}
-            />
-          </h2>
-          <h1 className='mt-1 text-3xl md:text-5xl 2xl:text-6xl' data-fade='2'>
-            You can call me <Accent>Nilay</Accent>
-          </h1>
-          <p
-            className={clsx(
-              'mt-4 max-w-4xl text-gray-700 dark:text-gray-200 md:mt-6',
-              'md:text-lg 2xl:text-xl'
-            )}
-            data-fade='3'
-          >
-            I'm a programmer based in India. I try to solve real-world problems
-            and create value. I build products with robust functionality and
-            secure code.
-          </p>
-          <p
-            className='mt-3 max-w-4xl leading-relaxed text-gray-700 dark:text-gray-200 md:mt-4 md:text-lg 2xl:text-xl'
-            data-fade='4'
-          >
-            Don't forget to sign my{' '}
-            <CustomLink href='/guestbook'>guestbook</CustomLink>!
-          </p>
-          <div data-fade='5' className='mt-8 flex flex-wrap gap-4 md:!text-lg'>
-            <ButtonLink href='/about'>About me!</ButtonLink>
-          </div>
-          <div
-            data-fade='6'
-            className='mt-4 flex flex-wrap gap-4 gap-y-2 md:mt-8'
-          >
-            <UnstyledLink
-              href='https://drive.google.com/file/d/1dEdLkBvFTEj_hobo4R8n6jgQcIzICi1j/view'
-              className={clsx(
-                'inline-flex items-center gap-1 text-sm font-medium md:text-base',
-                'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
-                'transition-colors'
-              )}
+    <>
+      <Seo />
+      <main>
+        <section
+          className={clsx(
+            'min-h-main -mt-20 mb-20 flex flex-col justify-center',
+            isLoaded && 'fade-in-start'
+          )}
+        >
+          <article className='layout'>
+            <h2 className='text-2xl md:text-4xl 2xl:text-5xl' data-fade='1'>
+              <Typewriter
+                options={{
+                  strings: [
+                    'Hello!',
+                    'नमस्ते!',
+                    'ہیلو!',
+                    'ನಮಸ್ಕಾರ!',
+                    'Привет!',
+                    'Olá!',
+                    'שָׁלוֹם!',
+                  ],
+                  autoStart: true,
+                  loop: true,
+                }}
+              />
+            </h2>
+            <h1
+              className='mt-1 text-3xl md:text-5xl 2xl:text-6xl'
+              data-fade='2'
             >
-              <IoNewspaperSharp className='shrink-0' />
-              <span>Resume</span>
-            </UnstyledLink>
-            <UnstyledLink
-              href='https://www.instagram.com/nilay.sharan/'
+              You can call me <Accent>Nilay</Accent>
+            </h1>
+            <p
               className={clsx(
-                'inline-flex items-center gap-1 text-sm font-medium md:text-base',
-                'group text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
-                'transition-colors'
+                'mt-4 max-w-4xl text-gray-700 dark:text-gray-200 md:mt-6',
+                'md:text-lg 2xl:text-xl'
               )}
+              data-fade='3'
             >
-              <SiInstagram className='group-hover:text-red shrink-0 transition-colors' />
-              <span>nilay.sharan</span>
-            </UnstyledLink>
-            <UnstyledLink
-              href='https://github.com/substantialcattle5'
-              className={clsx(
-                'inline-flex items-center gap-1 text-sm font-medium md:text-base',
-                'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
-                'transition-colors'
-              )}
+              I'm a programmer based in India. I try to solve real-world
+              problems and create value. I build products with robust
+              functionality and secure code.
+            </p>
+            <p
+              className='mt-3 max-w-4xl leading-relaxed text-gray-700 dark:text-gray-200 md:mt-4 md:text-lg 2xl:text-xl'
+              data-fade='4'
             >
-              <SiGithub className='shrink-0' />
-              <span>SubstantialCattle5</span>
-            </UnstyledLink>
-          </div>
-        </article>
-        <UnstyledLink
-          href='#intro'
-          className={clsx(
-            'absolute bottom-2 left-1/2 -translate-x-1/2 md:bottom-10',
-            'cursor-pointer rounded-md transition-colors',
-            'hover:text-primary-300 focus-visible:text-primary-300'
-          )}
-        >
-          <IoArrowDownOutline className='h-8 w-8 animate-bounce md:h-10 md:w-10' />
-        </UnstyledLink>
-      </section>
-      {/* Projects */}
-      <section className={clsx('fade-in-start py-20')}>
-        <article className='layout' data-fade='0'>
-          <h2 className='text-2xl md:text-4xl' id='projects'>
-            <Accent>Curated Projects</Accent>
-          </h2>
-          <p className='mt-2 text-gray-600 dark:text-gray-300'>
-            Below are some of my favorite projects over the years, a few of
-            which have been featured in Yantra, Social Transformers, Devsoc and
-            more.
-          </p>
-          <ul className='mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
-            {populatedProjects.map((project, i) => (
-              <ProjectCard
-                key={project.slug}
-                project={project as ProjectFrontmatter}
-                className={clsx(i > 2 && 'hidden sm:block')}
-              />
-            ))}
-          </ul>
-          <ButtonLink className='mt-4' href='/projects'>
-            See more project
-          </ButtonLink>
-        </article>
-      </section>
-      {/* Blogs */}
-      <section className={clsx('fade-in-start py-20')}>
-        <article className='layout' data-fade='0'>
-          <h2 className='text-2xl md:text-4xl' id='blog'>
-            <Accent>Blogs Archive</Accent>
-          </h2>
-          <p className='mt-2 text-gray-600 dark:text-gray-300'>
-            When I'm not working on projects, I enjoy travelling, taking
-            pictures and writing blogs. Here are a few select.
-          </p>
-          <ul className='mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
-            {populatedPosts.map((post, i) => (
-              <BlogCard
-                key={post.slug}
-                post={post as BlogFrontmatter}
-                className={clsx(i > 2 && 'hidden sm:block')}
-              />
-            ))}
-          </ul>
-          <ButtonLink className='mt-4' href='/blog'>
-            See more Blogs
-          </ButtonLink>
-        </article>
-      </section>
-    </main>
+              Don't forget to sign my{' '}
+              <CustomLink href='/guestbook'>guestbook</CustomLink>!
+            </p>
+            <div
+              data-fade='5'
+              className='mt-8 flex flex-wrap gap-4 md:!text-lg'
+            >
+              <ButtonLink href='/about'>About me!</ButtonLink>
+            </div>
+            <div
+              data-fade='6'
+              className='mt-4 flex flex-wrap gap-4 gap-y-2 md:mt-8'
+            >
+              <UnstyledLink
+                href='https://drive.google.com/file/d/1dEdLkBvFTEj_hobo4R8n6jgQcIzICi1j/view'
+                className={clsx(
+                  'inline-flex items-center gap-1 text-sm font-medium md:text-base',
+                  'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
+                  'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
+                  'transition-colors'
+                )}
+              >
+                <IoNewspaperSharp className='shrink-0' />
+                <span>Resume</span>
+              </UnstyledLink>
+              <UnstyledLink
+                href='https://www.instagram.com/nilay.sharan/'
+                className={clsx(
+                  'inline-flex items-center gap-1 text-sm font-medium md:text-base',
+                  'group text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
+                  'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
+                  'transition-colors'
+                )}
+              >
+                <SiInstagram className='group-hover:text-red shrink-0 transition-colors' />
+                <span>nilay.sharan</span>
+              </UnstyledLink>
+              <UnstyledLink
+                href='https://github.com/substantialcattle5'
+                className={clsx(
+                  'inline-flex items-center gap-1 text-sm font-medium md:text-base',
+                  'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
+                  'focus-visible:ring-primary-300 focus:outline-none focus-visible:ring',
+                  'transition-colors'
+                )}
+              >
+                <SiGithub className='shrink-0' />
+                <span>SubstantialCattle5</span>
+              </UnstyledLink>
+            </div>
+          </article>
+          <UnstyledLink
+            href='#intro'
+            className={clsx(
+              'absolute bottom-2 left-1/2 -translate-x-1/2 md:bottom-10',
+              'cursor-pointer rounded-md transition-colors',
+              'hover:text-primary-300 focus-visible:text-primary-300'
+            )}
+          >
+            <IoArrowDownOutline className='h-8 w-8 animate-bounce md:h-10 md:w-10' />
+          </UnstyledLink>
+        </section>
+        {/* Projects */}
+        <section className={clsx('fade-in-start py-20')}>
+          <article className='layout' data-fade='0'>
+            <h2 className='text-2xl md:text-4xl' id='projects'>
+              <Accent>Curated Projects</Accent>
+            </h2>
+            <p className='mt-2 text-gray-600 dark:text-gray-300'>
+              Below are some of my favorite projects over the years, a few of
+              which have been featured in Yantra, Social Transformers, Devsoc
+              and more.
+            </p>
+            <ul className='mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
+              {populatedProjects.map((project, i) => (
+                <ProjectCard
+                  key={project.slug}
+                  project={project as ProjectFrontmatter}
+                  className={clsx(i > 2 && 'hidden sm:block')}
+                />
+              ))}
+            </ul>
+            <ButtonLink className='mt-4' href='/projects'>
+              See more project
+            </ButtonLink>
+          </article>
+        </section>
+        {/* Blogs */}
+        <section className={clsx('fade-in-start py-20')}>
+          <article className='layout' data-fade='0'>
+            <h2 className='text-2xl md:text-4xl' id='blog'>
+              <Accent>Blogs Archive</Accent>
+            </h2>
+            <p className='mt-2 text-gray-600 dark:text-gray-300'>
+              When I'm not working on projects, I enjoy travelling, taking
+              pictures and writing blogs. Here are a few select.
+            </p>
+            <ul className='mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
+              {populatedPosts.map((post, i) => (
+                <BlogCard
+                  key={post.slug}
+                  post={post as BlogFrontmatter}
+                  className={clsx(i > 2 && 'hidden sm:block')}
+                />
+              ))}
+            </ul>
+            <ButtonLink className='mt-4' href='/blog'>
+              See more Blogs
+            </ButtonLink>
+          </article>
+        </section>
+      </main>
+    </>
   );
 }