Updated: Blog page updated.

CHANGELOG.md

@@ -57,6 +57,7 @@ We are thrilled to announce the initial release of Keep React, our open-source c
 - Notification Animation changed
 - Popover component package changed
 - Select component added
+- Steps component updated
 - Slider component color updated
 - Spinner component remove extra color variant
 - Tabs component package changed

app/blog/[slug]/page.tsx

@@ -1,33 +1,34 @@
-import Markdown from 'react-markdown'
-import getMarkDownContent from '~/utils/GetMarkDownContent'
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { Suspense } from 'react'
+import rehypePrettyCode from 'rehype-pretty-code'
+import BlogHeader from '~/app/components/BlogHeader'
+import { getBlogs } from '~/utils/getMdxContent'
 
 export async function generateStaticParams() {
-  const posts = getMarkDownData('data/blogs')
-
+  const posts = getBlogs()
   return posts.map((post) => ({
     slug: post.slug,
   }))
 }
 
 const page = async ({ params }: { params: { slug: string } }) => {
-  const folder = 'data/blogs/'
-  const slug = params.slug
-  const post: { [key: string]: any } = getMarkDownContent(folder, slug)
-
-  const { title, date } = post.data
+  const posts = getBlogs()
+  const post = posts.find((post) => post.slug === params.slug)
 
   return (
     <section>
-      <div className="mx-auto my-12 max-w-7xl px-6 text-center 2xl:px-0">
-        <div className="py-12 text-left">
-          <p className="mb-1 text-body-3 font-medium text-primary-500">{date}</p>
-          <p className="text-heading-5 font-medium text-metal-900 dark:text-white">{title}</p>
-          <hr className="my-5 block border-b border-b-metal-100 dark:border-b-metal-800" />
-          <div className="mt-10">
-            <Markdown className="post">{post.content}</Markdown>
-          </div>
-        </div>
+      <div id="blog-content" className="mx-auto max-w-5xl overflow-hidden px-6 py-12 2xl:px-0">
+        <Suspense fallback={<>Loading...</>}>
+          <MDXRemote
+            components={{ BlogHeader }}
+            source={post?.content ? post.content : ''}
+            options={{
+              mdxOptions: {
+                rehypePlugins: [[rehypePrettyCode, { theme: 'poimandres' }]],
+              },
+            }}
+          />
+        </Suspense>
       </div>
     </section>
   )

app/blog/page.tsx

@@ -1,9 +1,8 @@
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { getBlogs } from '~/utils/getMdxContent'
 import Blog from '../components/Blog'
 
 const page = () => {
-  const blogs: { slug: string; content: string; [key: string]: any }[] = getMarkDownData('data/blogs')
-
+  const blogs = getBlogs()
   return (
     <section>
       <div className="-mt-2 py-20 ">
@@ -16,7 +15,7 @@ const page = () => {
               Keep React library continues to evolve with new features, bug fixes, and performance improvements.
             </p>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 ">
             {blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
           </div>
         </div>

app/components/Blog.tsx

@@ -1,29 +1,34 @@
 'use client'
+import Image from 'next/image'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Card, CardContent, CardTitle } from '../src'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
 
 export interface BlogProps {
   [key: string]: any
 }
 
-const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
+const Blog: FC<BlogProps> = ({ title, date, tag, slug, version }) => {
   return (
-    <Card className="max-w-full lg:col-span-1">
-      <CardContent className="flex flex-col justify-between gap-y-3 text-left">
-        <p className="text-body-4 text-metal-600 dark:text-white">{date}</p>
-        <CardTitle>{title}</CardTitle>
-        <ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
-          {keyFeatures?.map((item: string) => <li key={item}>{item}</li>)}
-        </ul>
-
-        <Link
-          href={`/blog/${slug}`}
-          className="flex w-full items-center justify-center rounded-lg bg-metal-900 px-5 py-2.5 text-body-4 font-medium text-white transition-all duration-150 hover:bg-metal-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-metal-200 dark:bg-metal-800">
-          Read More
-        </Link>
-      </CardContent>
-    </Card>
+    <div className="space-y-2.5">
+      <Link
+        href={`/blog/${slug}`}
+        className="blog-post relative flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015]">
+        <Image src={KeepDarkLogo} alt="Keep React" width="100" height="40" />
+        <p className="text-body-2 font-semibold text-white">{version}</p>
+      </Link>
+      <div className="space-y-2.5">
+        <p className="text-body-5 text-primary-500">{tag}</p>
+        <div className="flex items-center justify-between">
+          <Link
+            href={`/blog/${slug}`}
+            className="cursor-pointer text-body-3 text-metal-900 dark:text-white dark:hover:text-primary-500">
+            {title}
+          </Link>
+          <p className="text-body-4 text-metal-600 dark:text-metal-300">{date}</p>
+        </div>
+      </div>
+    </div>
   )
 }
 

app/components/BlogHeader.tsx

@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
+
+const BlogHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="blog-post relative mb-6 flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015] lg:h-[300px]">
+      <Image src={KeepDarkLogo} alt="Keep React" width="130" height="55" />
+      <h1 className="text-heading-6 font-semibold text-white lg:text-heading-4">{title}</h1>
+    </div>
+  )
+}
+
+export default BlogHeader

app/docs.css

@@ -125,3 +125,74 @@ body::-webkit-scrollbar-thumb {
 .theme-switch {
   @apply flex w-full items-center gap-3 rounded-lg px-3 py-2 text-body-4 font-medium text-metal-900 hover:bg-metal-25 dark:text-white dark:hover:bg-metal-800;
 }
+
+#blog-content {
+  h2 {
+    @apply my-4 border-b pb-2.5 text-body-1 font-medium dark:border-b-metal-800;
+  }
+
+  p {
+    @apply text-body-3 font-normal;
+  }
+
+  ul {
+    li {
+      @apply text-body-4 font-normal;
+    }
+    @apply my-3 space-y-2 *:ml-4 *:list-inside *:list-disc;
+  }
+
+  pre {
+    @apply overflow-auto;
+  }
+
+  a {
+    @apply text-primary-500 hover:underline;
+  }
+
+  [data-rehype-pretty-code-figure] {
+    @apply my-4 border border-metal-800 font-serif;
+  }
+
+  [data-rehype-pretty-code-figure] code {
+    @apply py-6;
+  }
+
+  [data-line] {
+    @apply my-0.5 px-5;
+  }
+
+  code[data-line-numbers] {
+    counter-reset: line;
+  }
+
+  code[data-line-numbers] > [data-line]::before {
+    display: inline-block;
+    counter-increment: line;
+    margin-right: 2rem;
+    width: 0.75rem;
+    content: counter(line);
+    text-align: right;
+  }
+
+  [data-rehype-pretty-code-figure] [data-highlighted-chars] {
+    @apply rounded bg-metal-800 px-1;
+  }
+
+  [data-rehype-pretty-code-figure] [data-highlighted-line] {
+    background: rgba(200, 200, 255, 0.1);
+    @apply border-l-blue-400;
+  }
+
+  code[data-line-numbers-max-digits='2'] > [data-line]::before {
+    width: 1.25rem;
+  }
+
+  code[data-line-numbers-max-digits='3'] > [data-line]::before {
+    width: 1.75rem;
+  }
+
+  code[data-line-numbers-max-digits='4'] > [data-line]::before {
+    width: 2.25rem;
+  }
+}

app/globals.css

@@ -95,7 +95,8 @@ pre::-webkit-scrollbar-thumb {
 /* ============community================ */
 
 .community,
-.hero-area {
+.hero-area,
+.blog-post {
   @apply relative z-40;
 }
 
@@ -114,6 +115,21 @@ pre::-webkit-scrollbar-thumb {
   content: '';
 }
 
+.blog-post::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: -1;
+  background: url('/images/home/community.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  content: '';
+}
+
 .hero-area::before {
   display: block;
   position: absolute;

data/blogs/keep-react-v1.3.0.md → data/blogs/keep-react-v1.3.0.mdx

@@ -1,22 +1,14 @@
 ---
 title: 'Keep React V1.3.0'
 date: 'April 22, 2024'
-description: 'Experience smoother navigation with an updated Carousel Component, say goodbye to pesky scrollbar with the Modal Scrollbar Issue fix...'
 author: Md Ariful Islam
-slug: keep-react-v1.3.0
-keyFeatures:
-  [
-    'Update Carousel Component',
-    'Modal Scrollbar Issue fixed',
-    'Remove Typography component',
-    'Color page added',
-    'Toast component with sooner',
-    'Layout style added',
-    'And more...',
-  ]
+tag: Releases
+version: V1.3.0
 ---
 
-## Keep React V1.3.0 Release Notes
+<BlogHeader title="Keep React v1.3.0" />
+
+## Release Notes
 
 Welcome to the latest release of Keep React! We're excited to introduce several new features and enhancements to improve your development experience. Let's dive in and explore what's new: