Merge pull request #133 from codebayu/feature-revamp-blog

Feature -  Revamp Blog Page

Author: codebayu

.DS_Store

@@ -40,7 +40,7 @@ export default async function BlogDetailPage({ params, searchParams }: Props) {
   return (
     <>
       <Container data-aos="fade-left">
-        <BackButton url="/blog" />
+        <BackButton url="/blog?category=home" />
         <ReaderPage content={blog} pageViewCount={pageViewCount} comments={comments} />
       </Container>
     </>

app/blog/[slug]/page.tsx

@@ -1,9 +1,12 @@
 import { Metadata } from 'next'
+import { revalidatePath } from 'next/cache'
 
 import Container from '@/components/elements/Container'
-import PageHeading from '@/components/elements/PageHeading'
+import { getBlogData } from '@/services/blog'
 
+import { BLOG_LINK } from '@/common/constant/menu'
 import { METADATA } from '@/common/constant/metadata'
+import { BlogItem } from '@/common/types/blog'
 
 import Blog from '@/modules/blog'
 
@@ -16,16 +19,22 @@ export const metadata: Metadata = {
   }
 }
 
-const PAGE_TITLE = 'Blog'
-const PAGE_DESCRIPTION = 'Exploring the world of code, creativity, and constant learning.'
-
-export default async function BlogPage() {
+export default async function BlogPage({ searchParams }: { searchParams: { category: string } }) {
+  const blogs = await getBlog(searchParams.category)
   return (
-    <>
-      <Container data-aos="fade-left">
-        <PageHeading title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
-        <Blog />
-      </Container>
-    </>
+    <Container data-aos="fade-left">
+      <Blog blogs={blogs} />
+    </Container>
   )
 }
+
+async function getBlog(category: string) {
+  revalidatePath('/blog')
+  const blogs = await getBlogData()
+
+  const data: BlogItem[] = blogs?.filter((blog: BlogItem) => {
+    const activeId = BLOG_LINK.find(link => link.value === category)?.id
+    return blog.collection_id === activeId
+  })
+  return data
+}

app/blog/page.tsx

@@ -35,26 +35,35 @@ export const MENU_ITEMS: MenuItemProps[] = [
     eventName: 'Pages: Home'
   },
   {
-    title: 'Projects',
-    href: '/projects',
-    icon: <ProjectIcon size={iconSize} />,
+    title: 'About',
+    href: '/about',
+    icon: <ProfileIcon size={iconSize} />,
     isShow: true,
     isExternal: false,
-    eventName: 'Pages: Projects'
+    eventName: 'Pages: About'
   },
   {
     title: 'Blog',
-    href: '/blog',
+    href: '/blog?category=home',
     icon: <BlogIcon size={iconSize} />,
     isShow: true,
     isExternal: false,
     eventName: 'Pages: Blog'
   },
+  {
+    title: 'Projects',
+    href: '/projects',
+    icon: <ProjectIcon size={iconSize} />,
+    isShow: true,
+    isExternal: false,
+    eventName: 'Pages: Projects'
+  },
+
   {
     title: 'Learn',
     href: '/learn',
     icon: <LearnIcon size={iconSize} />,
-    isShow: true,
+    isShow: false,
     isExternal: false,
     eventName: 'Pages: Learn'
   },
@@ -82,14 +91,6 @@ export const MENU_ITEMS: MenuItemProps[] = [
     isExternal: false,
     eventName: 'Pages: Chat Room'
   },
-  {
-    title: 'About',
-    href: '/about',
-    icon: <ProfileIcon size={iconSize} />,
-    isShow: true,
-    isExternal: false,
-    eventName: 'Pages: About'
-  },
   {
     title: 'Contact',
     href: '/contact',
@@ -189,3 +190,30 @@ export const SOCIAL_MEDIA: MenuItemProps[] = [
     backgroundColor: 'bg-black'
   }
 ]
+
+export const BLOG_LINK = [
+  {
+    id: null,
+    href: '?category=home',
+    label: 'Home',
+    value: 'home'
+  },
+  {
+    id: 24593,
+    href: '?category=nextjs',
+    label: 'Next.js',
+    value: 'nextjs'
+  },
+  {
+    id: 24596,
+    href: '?category=typescript',
+    label: 'TypeScript',
+    value: 'typescript'
+  },
+  {
+    id: null,
+    href: '/roadmap?tribe=frontend-developer',
+    label: 'Roadmap',
+    value: 'roadmap'
+  }
+]

common/constant/menu.tsx

@@ -1,6 +1,6 @@
 export default function ShootingStar() {
   return (
-    <div className="absolute left-40 top-20">
+    <div className="absolute left-40 top-20 z-30">
       <div className="night">
         <div className="star"></div>
         <div className="star"></div>

components/elements/ShootingStar.tsx

@@ -1,63 +1,24 @@
-'use client'
-
-import EmptyState from '@/components/elements/EmptyState'
-import LoadingCard from '@/components/elements/LoadingCard'
-import { fetcher } from '@/services/fetcher'
-import clsx from 'clsx'
-import { motion } from 'framer-motion'
-import useSWR from 'swr'
-
-import { DEVTO_BLOG_API } from '@/common/constant'
 import { BlogItem } from '@/common/types/blog'
 
-import { useBlogView } from '@/stores/blog-view'
-
-import useIsMobile from '@/hooks/useIsMobile'
-
 import BlogCard from './BlogCard'
-import BlogListHeader from './BlogListHeader'
-
-export default function Blog() {
-  const isMobile = useIsMobile()
-  const { viewOption, setViewOption } = useBlogView()
-  const { data, isLoading } = useSWR(DEVTO_BLOG_API, fetcher, {
-    revalidateOnMount: true
-  })
+import BlogHeader from './BlogHeader'
+import BlogThumbnail from './BlogThumbnail'
 
-  const blogs: BlogItem[] = data?.filter((blog: BlogItem) => blog.collection_id === null)
-
-  if (isLoading)
-    return (
-      <div
-        className={clsx(
-          'gap-5 sm:gap-4',
-          viewOption === 'list' || isMobile ? 'flex flex-col' : 'grid grid-cols-2 sm:!gap-5'
-        )}
-      >
-        {[1, 2].map(item => (
-          <LoadingCard key={item} view={viewOption} />
-        ))}
-      </div>
-    )
-
-  if (blogs.length === 0 && !isLoading) {
-    return <EmptyState message="No Data" />
-  }
+interface BlogProps {
+  blogs: BlogItem[]
+}
 
+export default function Blog({ blogs }: BlogProps) {
   return (
     <>
-      {!isMobile && <BlogListHeader viewOption={viewOption} setViewOption={setViewOption} />}
-      <div className={clsx('gap-5 sm:gap-4', viewOption === 'list' || isMobile ? 'flex flex-col' : 'grid grid-cols-2')}>
-        {blogs?.map((item: BlogItem, index: number) => (
-          <motion.div
-            key={index}
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.3, delay: index * 0.1 }}
-          >
-            <BlogCard view={viewOption} {...item} />
-          </motion.div>
-        ))}
+      <BlogHeader />
+      <BlogThumbnail newestBlog={blogs[0]} />
+      <h3 className="mb-4 mt-10 hidden font-semibold text-neutral-700 transition-all duration-300 dark:text-neutral-200 md:block md:text-xl">
+        Related Articles
+      </h3>
+
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        {blogs?.slice(1).map((item: BlogItem, index: number) => <BlogCard key={index} {...item} />)}
       </div>
     </>
   )

modules/blog/components/Blog.tsx

@@ -1,18 +1,15 @@
+'use client'
+
 import { usePathname, useRouter } from 'next/navigation'
 
-import Card from '@/components/elements/Card'
 import Image from '@/components/elements/Image'
-import { useEffect, useState } from 'react'
 import { TbMessage2 as CommentIcon } from 'react-icons/tb'
 
 import { PLACEHOLDER_URL } from '@/common/constant'
 import { formatBlogSlug, formatDate } from '@/common/helpers'
-import { cn } from '@/common/libs/cn'
 import { sendDataLayer } from '@/common/libs/gtm'
 import { BlogItem } from '@/common/types/blog'
 
-import useIsMobile from '@/hooks/useIsMobile'
-
 interface BlogCardProps extends BlogItem {
   view?: string
   isExcerpt?: boolean
@@ -27,26 +24,16 @@ export default function BlogCard({
   description,
   slug,
   comments_count,
-  view,
-  isExcerpt = true,
-  isCarousel = false,
   collection_id
 }: BlogCardProps) {
-  const [viewOption, setViewOption] = useState<string>()
-  const isMobile = useIsMobile()
   const router = useRouter()
   const pathname = usePathname()
 
   const newSlug = formatBlogSlug(slug)
 
-  const trimmedTitle = viewOption === 'grid' ? title.slice(0, 70) + (title.length > 70 ? '...' : '') : title
+  const trimmedTitle = title.slice(0, 70) + (title.length > 70 ? '...' : '')
   const trimmedContent = description.slice(0, 100) + (description.length > 100 ? '...' : '')
 
-  const contentContainerClasses = cn(
-    'flex flex-col self-center w-full sm:w-4/5 flex-grow space-y-3 px-5 sm:p-0 mb-5 sm:mb-0',
-    view === 'grid' ? 'sm:w-full sm:!p-6' : ''
-  )
-
   function handleCardClick() {
     sendDataLayer({
       event: 'article_clicked',
@@ -58,33 +45,18 @@ export default function BlogCard({
     router.push(`/blog/${newSlug}?id=${id}&read-mode=true`)
   }
 
-  useEffect(() => {
-    isMobile ? setViewOption('grid') : setViewOption(view)
-  }, [isMobile, view])
-
   return (
-    <Card
-      onClick={handleCardClick}
-      className={cn(
-        'flex w-full cursor-pointer items-center gap-6 border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-800 sm:flex-row lg:hover:scale-[102%]',
-        viewOption === 'grid' ? 'w-full !flex-col sm:h-full' : '!flex-row sm:p-5 sm:px-6',
-        isCarousel && 'min-w-[350px]',
-        !isExcerpt && 'sm:h-[320px]'
-      )}
-    >
-      <div className={`${viewOption === 'grid' ? 'w-full' : 'w-fit'}`}>
+    <div className="flex w-full cursor-pointer flex-col text-start" onClick={handleCardClick}>
+      <div className="overflow-hidden rounded-lg">
         <Image
           src={cover_image || PLACEHOLDER_URL}
-          width={isMobile || viewOption === 'grid' ? 400 : 240}
+          width={200}
           height={100}
           alt={title}
-          className={cn(
-            'w-full object-cover sm:h-[8.5rem] sm:rounded-xl',
-            viewOption === 'grid' ? '!h-48 !rounded-b-none !rounded-t-xl' : ''
-          )}
+          className="!h-48 w-full  object-cover"
         />
       </div>
-      <article className={contentContainerClasses}>
+      <article className="mt-4 flex w-full flex-grow flex-col space-y-3 self-center">
         <h2 className="font-medium text-neutral-600 transition-all duration-300 dark:text-neutral-200 dark:hover:text-teal-400 md:text-[17px] lg:hover:text-teal-800">
           {trimmedTitle}
         </h2>
@@ -102,12 +74,10 @@ export default function BlogCard({
             </span>
           </div>
         </div>
-        {isExcerpt && (
-          <p className="hidden text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 sm:block">
-            {trimmedContent}
-          </p>
-        )}
+        <p className="hidden text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 sm:block">
+          {trimmedContent}
+        </p>
       </article>
-    </Card>
+    </div>
   )
 }

modules/blog/components/BlogCard.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import { useTheme } from 'next-themes'
+
+import { BLOG_LINK } from '@/common/constant/menu'
+import { cn } from '@/common/libs/cn'
+
+export default function BlogHeader() {
+  const { resolvedTheme } = useTheme()
+  const searchParams = useSearchParams()
+  const activeCategory = searchParams.get('category')
+  return (
+    <div className="flex flex-col items-center">
+      <Image
+        src={resolvedTheme === 'dark' ? '/img/logo-white.png' : '/img/logo-black.png'}
+        width={90}
+        height={90}
+        alt="logo"
+      />
+      <p className="text-center text-sm text-neutral-600 dark:text-neutral-500">
+        Welcome to my blog! Your Source for Expert Tips and Insights!
+      </p>
+
+      <nav className="my-6 flex w-full justify-between gap-4 border-y border-neutral-200 p-3 dark:border-neutral-800 md:w-max md:justify-center md:gap-10">
+        {BLOG_LINK.map((link, index) => (
+          <Link
+            key={index}
+            href={link.href}
+            className={cn(
+              'text-sm ',
+              activeCategory === link.value
+                ? 'text-emerald-500 dark:text-emerald-300'
+                : 'text-neutral-500 dark:text-neutral-300'
+            )}
+          >
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  )
+}