Merge pull request #58 from patelvivekdev/development

Get project data from MDX
patelvivekdev · May 6, 2024 · 078171b · 078171b · vercel · May 6, 2024
2 parents 8f45a01 + 978dd18
commit 078171b
Show file tree

Hide file tree

Showing 32 changed files with 271 additions and 233 deletions.
diff --git a/app/ai/page.tsx b/app/ai/page.tsx
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -28,14 +28,12 @@ export async function generateMetadata({ params }: { params: any }): Promise<Met
 
   let { title, publishedAt: publishedTime, summary: description, image, tags } = blog.metadata;
 
-  const newTags = tags ? tags.split(',') : [];
-
   let ogImage = image ? `https://patelvivek.dev${image}` : `https://patelvivek.dev/og?title=${title}`;
 
   return {
     title,
     description,
-    keywords: newTags,
+    keywords: tags ? tags : [],
     openGraph: {
       title,
       description,
@@ -108,7 +106,7 @@ export default function Blog({ params }: { params: any }) {
               &larr; Back to Blogs
             </Button>
           </Link>
-          <h1 className='text-start text-2xl sm:text-4xl font-bold'>{blog.metadata.title}</h1>
+          <h1 className='text-start text-indigo-500 text-2xl sm:text-4xl font-bold'>{blog.metadata.title}</h1>
           <h2 className='text-xl text-neutral-700 dark:text-neutral-300'>{blog.metadata.summary}</h2>
           <div className='flex flex-col gap-2 sm:flex-row sm:items-center justify-between'>
             <p className='text-base text-neutral-700 dark:text-neutral-300'>
@@ -129,6 +127,18 @@ export default function Blog({ params }: { params: any }) {
               <Views slug={blog.slug} />
             </Suspense>
           </div>
+          <div className='flex flex-row flex-wrap gap-4 mb-5'>
+            {blog.metadata.tags?.map((tag) => (
+              <Link key={tag} href={`/tag/${tag}`}>
+                <Button
+                  variant='outline'
+                  className='cursor-pointer text-lg font-semibold border border-2 border-indigo-500 hover:underline'
+                >
+                  {tag}
+                </Button>
+              </Link>
+            ))}
+          </div>
         </div>
         <article className='prose prose-zinc mx-auto my-10 max-w-none dark:prose-invert md:prose-lg lg:prose-xl'>
           <CustomMDX

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -67,7 +67,7 @@ const BlogPage = () => {
           publishedAt='Dec 4, 2020'
           views={2506}
           readingTime={'📖 8 min read'}
-          tags='machine learning, deep learning'
+          tags={['machine learning', 'deep learning']}
           external
         />
         <BlogPost
@@ -77,7 +77,7 @@ const BlogPage = () => {
           publishedAt='Oct 24, 2020'
           views={3453}
           readingTime={'📖 3 min read'}
-          tags='github, github action, jupyter notebook'
+          tags={['github', 'github action', 'jupyter notebook']}
           external
         />
         {/* <BlogPost

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import './globals.css';
-import Navbar from '@/components/Navbar';
+import Navbar from '@/components/navbar/Navbar';
 import Footer from '@/components/Footer';
 import { ThemeProvider } from 'next-themes';
 import { Inter as FontSans } from 'next/font/google';

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -5,18 +5,21 @@ import Link from 'next/link';
 
 export default function NotFound() {
   return (
-    <section className='mt-16 sm:mt-40 w-11/12 sm:w-3/4 mx-auto'>
-      <h1 className='font-medium text-2xl mb-8 tracking-tighter'>Oh no! This page does not exist.</h1>
+    <section className='h-screen mt-16 sm:mt-40 w-11/12 sm:w-3/4 mx-auto'>
+      <h1 className='font-bold text-center text-2xl mb-8 tracking-tighter'>Oh no! This page does not exist.</h1>
       <p className='text-lg mb-8'>
         The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
       </p>
       <p className='text-lg mb-8'>Please check the URL and try again.</p>
 
       <p className='text-lg mb-8'>
-        If you think this is an error, please contact me at
+        If you think this is an error, please contact me at{' '}
         <a href='mailto:me@patelvivek.dev' className='text-blue-500 hover:underline'>
-          {' '}
           me@patelvivek.dev
+        </a>{' '}
+        Or open issues at{' '}
+        <a className='text-blue-500 hover:underline' href='https://github.com/patelvivekdev/patelvivek.dev/issues/new'>
+          Github
         </a>
       </p>
 

diff --git a/app/og/route.tsx b/app/og/route.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 
-export const runtime = 'edge';
+// export const runtime = 'edge';
 
 export async function GET(req: NextRequest) {
   const { searchParams } = req.nextUrl;

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,8 +5,10 @@ import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 
 import RecentBlogs from '@/components/RecentBlogs';
+import { getLatestProjects } from '@/lib/get-projects';
 
 export default function Home() {
+  const projects = getLatestProjects();
   return (
     <div className='mt-16 sm:mt-40 relative flex w-11/12 sm:w-3/4 mx-auto text-[#31363F] dark:text-[#EEEEEE] flex-col items-center gap-3 sm:gap-6'>
       <h1 className='text-center text-2xl font-bold md:text-4xl border-b-4 border-indigo-500'>About</h1>
@@ -23,34 +25,15 @@ export default function Home() {
       </div> */}
       <h2 className='mt-2 text-center text-2xl font-bold md:text-4xl border-b-4 border-indigo-500'>Latest Project</h2>
       <div className='grid grid-cols-1 gap-4'>
-        <ProjectCard
-          title='Market Hub: A multi-vendor marketplace'
-          description="Market-hub is a MERN-powered platform for buying and selling computer items. Vendors can easily manage their products, while users enjoy a smooth shopping experience. It's a user-friendly solution for tech enthusiasts and sellers alike."
-          link='projects/market-hub'
-          tags={['MERN', 'React', 'Nodejs', 'Express', 'MongoDB', 'FullStack']}
-        />
-        <ProjectCard
-          title='True Feedback: Where your identity remains a secret'
-          description='Explore a Next.js 14 project that dive into the World of Anonymous Feedback.'
-          link='projects/true-feedback'
-          tags={['NextJs', 'Server Actions', 'Supabase', 'Next-Auth']}
-        />
-        <ProjectCard
-          title='Acme Auth: A Next.js Based Authentication'
-          description='Acme Auth is a learning project focused on integrating third-party authentication APIs. It covers registration, login, logout, password recovery, and email verification. With a responsive design and efficient routing, it showcases modern web development practices using Next.js server actions and Tailwind CSS. '
-          link='projects/acme-auth'
-          tags={[
-            'Nextjs',
-            'AppRouter',
-            'ShadcnUI',
-            'TailwindCSS',
-            'Authentication',
-            'FreeAPI',
-            'RESTAPI',
-            'ServerActions',
-            'TypeScript',
-          ]}
-        />
+        {projects.map((project) => (
+          <ProjectCard
+            key={project.slug}
+            title={project.metadata.title!}
+            description={project.metadata.description!}
+            slug={project.slug}
+            tags={project.metadata.tags!}
+          />
+        ))}
       </div>
       <Link href='/projects'>
         <Button

diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -23,14 +23,12 @@ export async function generateMetadata({ params }: { params: any }): Promise<Met
 
   let { title, publishedAt: publishedTime, description: description, image, tags } = project.metadata;
 
-  const newTags = tags ? tags.split(',') : [];
-
   let ogImage = image ? `https://patelvivek.dev${image}` : `https://patelvivek.dev/og?title=${title}`;
 
   return {
     title,
     description,
-    keywords: newTags,
+    keywords: tags ? tags : [],
     openGraph: {
       title,
       description,
@@ -102,7 +100,7 @@ export default function Project({ params }: { params: any }) {
             &larr; Back to Projects
           </Button>
         </Link>
-        <h1 className='text-start text-2xl sm:text-4xl font-bold'>{project.metadata.title}</h1>
+        <h1 className='text-start text-indigo-500 text-2xl sm:text-4xl font-bold'>{project.metadata.title}</h1>
         <div className='mb-4 mt-2 flex items-center justify-between'>
           <p className='text-lg font-normal text-neutral-700 dark:text-neutral-300'>
             <span className='flex flex-row items-center gap-2'>{project.metadata.description}</span>
@@ -115,6 +113,18 @@ export default function Project({ params }: { params: any }) {
             </span>
           </p>
         </div>
+        <div className='flex flex-row flex-wrap gap-4 mb-5'>
+          {project.metadata.tags?.map((tag) => (
+            <Link key={tag} href={`/tag/${tag}`}>
+              <Button
+                variant='outline'
+                className='cursor-pointer text-lg font-semibold border border-2 border-indigo-500 hover:underline'
+              >
+                {tag}
+              </Button>
+            </Link>
+          ))}
+        </div>
         <article className='prose prose-zinc mx-auto my-10 max-w-none dark:prose-invert md:prose-lg lg:prose-xl'>
           <CustomMDX
             components={{

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import ProjectCard from '@/components/ProjectCard';
+import { getProjects } from '@/lib/get-projects';
 
 export const metadata: Metadata = {
   title: 'My Web Development Projects',
@@ -22,54 +23,7 @@ export const metadata: Metadata = {
 };
 
 const ProjectPage = () => {
-  const projects = [
-    {
-      slug: 'market-hub',
-      title: 'Market Hub: A multi-vendor marketplace',
-      description:
-        "Market-hub is a MERN-powered platform for buying and selling computer items. Vendors can easily manage their products, while users enjoy a smooth shopping experience. It's a user-friendly solution for tech enthusiasts and sellers alike.",
-      link: 'projects/market-hub',
-      tags: ['MERN', 'React', 'Nodejs', 'Express', 'MongoDB', 'FullStack'],
-    },
-    {
-      slug: 'acme-auth',
-      title: 'Acme Auth: A Next.js Based Authentication',
-      description:
-        'Acme Auth is a learning project focused on integrating third-party authentication APIs. It covers registration, login, logout, password recovery, and email verification. With a responsive design and efficient routing, it showcases modern web development practices using Next.js server actions and Tailwind CSS.',
-      link: 'projects/acme-auth',
-      tags: [
-        'Nextjs',
-        'React',
-        'AppRouter',
-        'ShadcnUI',
-        'TailwindCSS',
-        'Authentication',
-        'FreeAPI',
-        'RESTAPI',
-        'ServerActions',
-        'TypeScript',
-      ],
-    },
-    {
-      slug: 'true-feedback',
-      title: 'True Feedback: Where your identity remains a secret',
-      description: 'Explore a Next.js 14 project that dive into the World of Anonymous Feedback.',
-      link: 'projects/true-feedback',
-      tags: ['NextJs', 'Server Actions', 'Supabase', 'Next-Auth'],
-    },
-    {
-      slug: 'nextjs-blog',
-      title: 'Next.js 14 Blog with App Router and MDX',
-      description:
-        'Explore a Next.js 14 project demonstrating the new App Router, server actions, and MDX integration for streamlined blog creation.',
-      image: {
-        src: 'https://firebasestorage.googleapis.com/v0/b/patelvivekdev.appspot.com/o/images%2Fdefault.png?alt=media&token=d917a346-35fd-4e33-ac34-3c725b6f2769',
-        alt: 'Next.js 14 Blog logo',
-      },
-      link: 'projects/nextjs-blog',
-      tags: ['NextJs', 'React', 'MDX', 'App Router', 'Server Components', 'Server Actions', 'Blog'],
-    },
-  ];
+  const projects = getProjects();
 
   return (
     <div className='mx-auto mt-16 sm:mt-40 mb-5 flex w-11/12 sm:w-3/4 flex-col items-center'>
@@ -79,10 +33,10 @@ const ProjectPage = () => {
         {projects.map((project) => (
           <ProjectCard
             key={project.slug}
-            title={project.title}
-            description={project.description}
-            link={project.link}
-            tags={project.tags}
+            title={project.metadata.title!}
+            description={project.metadata.description!}
+            slug={project.slug}
+            tags={project.metadata.tags!}
           />
         ))}
       </div>

diff --git a/app/snippet/[slug]/page.tsx b/app/snippet/[slug]/page.tsx
@@ -23,14 +23,12 @@ export async function generateMetadata({ params }: { params: any }): Promise<Met
 
   let { title, publishedAt: publishedTime, description, image, tags } = snippet.metadata;
 
-  const newTags = tags ? tags.split(',') : [];
-
   let ogImage = image ? `https://patelvivek.dev${image}` : `https://patelvivek.dev/og?title=${title}`;
 
   return {
     title,
     description,
-    keywords: newTags,
+    keywords: tags ? tags : [],
     openGraph: {
       title,
       description,
@@ -91,7 +89,7 @@ export default function Blog({ params }: { params: any }) {
             }),
           }}
         />
-        <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-4 border-b-4 border-neutral-800 dark:border-neutral-300'>
           <Link href='/snippet'>
             <Button
               variant='outline'
@@ -103,7 +101,7 @@ export default function Blog({ params }: { params: any }) {
               &larr; Back to Snippets
             </Button>
           </Link>
-          <h1 className='text-start text-2xl sm:text-4xl font-bold'>{snippet.metadata.title}</h1>
+          <h1 className='text-start text-indigo-500 text-2xl sm:text-4xl font-bold'>{snippet.metadata.title}</h1>
           <h2 className='text-xl text-neutral-700 dark:text-neutral-300'>{snippet.metadata.description}</h2>
           <div className='flex flex-col gap-2 sm:flex-row sm:items-center justify-between'>
             <p className='text-base text-neutral-700 dark:text-neutral-300'>
@@ -124,6 +122,18 @@ export default function Blog({ params }: { params: any }) {
               <Views slug={snippet.slug} />
             </Suspense>
           </div>
+          <div className='flex flex-row flex-wrap gap-4 mb-5'>
+            {snippet.metadata.tags?.map((tag) => (
+              <Link key={tag} href={`/tag/${tag}`}>
+                <Button
+                  variant='outline'
+                  className='cursor-pointer text-lg font-semibold border border-2 border-indigo-500 hover:underline'
+                >
+                  {tag}
+                </Button>
+              </Link>
+            ))}
+          </div>
         </div>
         <article className='prose prose-zinc mx-auto my-10 max-w-none dark:prose-invert md:prose-lg lg:prose-xl'>
           <CustomMDX