From 0fbf62f99e543939d27bcf68df21119aa0295f9d Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Sun, 3 Nov 2024 03:06:06 +0530 Subject: [PATCH 1/3] revamp blog page ui, updated --- public/blog1.svg | 1 + src/app/(app)/blogs/page.tsx | 133 +++++++++++++++++++++++++++++++++-- 2 files changed, 127 insertions(+), 7 deletions(-) create mode 100644 public/blog1.svg diff --git a/public/blog1.svg b/public/blog1.svg new file mode 100644 index 0000000..9ab1272 --- /dev/null +++ b/public/blog1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/(app)/blogs/page.tsx b/src/app/(app)/blogs/page.tsx index a44c0da..4fb2476 100644 --- a/src/app/(app)/blogs/page.tsx +++ b/src/app/(app)/blogs/page.tsx @@ -1,17 +1,136 @@ -import Blog from '@/app/(app)/blog/blogfinal'; +'use client'; // Add this line at the top + +import Link from 'next/link'; +import Image from 'next/image'; +import { Post } from '@/types/posts'; +import Container from '@/components/Container'; import Footer from '@/components/footer'; +import { fetchBlogPosts } from '@/utils/hashnode'; + +// Blog component with revamped layout, styles, and gradient effect +export async function Blog() { + const publication = await fetchBlogPosts(); + if (!publication) { + throw new Error('Failed to fetch blog posts'); + } + + const posts: Array = publication.posts.edges.map( + ({ node }: { node: Post }) => node, + ); -const Blogs = () => { return ( -
-
Blogs
-
- - + + {/* Header */} +
+

+ Insights for Building Web Applications +

+

+ Dive deep into the latest trends, tips, and techniques for creating + powerful, user-focused web applications. +

+
+ + {/* Featured Post */} +
+
+
+

+ 10 Inspiring Web Application Designs for 2024 +

+

+ Discover some of the most innovative and visually stunning web + applications that have set the bar high in 2024. Perfect for + inspiration and design ideas. +

+ +
+ Featured Post Image
+ + {/* Blog Grid */} +
    + {posts.map((post) => ( +
  • + +
    + {post.title} +
    + ➔ +
    +
    +
    +

    + {post.title} +

    +

    + {new Date(post.publishedAt).toLocaleDateString('en-us', { + weekday: 'long', + year: 'numeric', + month: 'short', + day: 'numeric', + })} +

    +

    {post.excerpt}

    +
    +
    + +
    + +
    • + ))} +
+ + ); +} + +// Blogs page wrapper +const Blogs = () => { + return ( +
+
); }; export default Blogs; + +// CSS for liquid effect +; From 39be8336a74b2c2fa0894bd9f78c2fbb03042145 Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Mon, 4 Nov 2024 19:55:46 +0530 Subject: [PATCH 2/3] add mobile responsiveness --- src/app/(app)/blogs/page.tsx | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/src/app/(app)/blogs/page.tsx b/src/app/(app)/blogs/page.tsx index 4fb2476..3812ff4 100644 --- a/src/app/(app)/blogs/page.tsx +++ b/src/app/(app)/blogs/page.tsx @@ -32,27 +32,24 @@ export async function Blog() {
{/* Featured Post */} -
+ {/* Featured Post */} +
-
-

- 10 Inspiring Web Application Designs for 2024 -

-

- Discover some of the most innovative and visually stunning web - applications that have set the bar high in 2024. Perfect for - inspiration and design ideas. -

- +
+

{posts[0].title}

+

{posts[0].excerpt}

+ + +
Featured Post Image
From c91881a094ae6ebcd72fb7ae45e9a346cb8c661a Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 5 Nov 2024 11:01:21 +0530 Subject: [PATCH 3/3] refactor : refactoring the dynamic blog flow and breaking code into components. --- src/app/(app)/blog/blogfinal.tsx | 53 -------- .../(app)/{blog => blogs}/[postSlug]/page.tsx | 2 +- src/app/(app)/blogs/page.tsx | 122 +----------------- src/app/(app)/components/[[...slug]]/page.tsx | 1 - src/components/blog-grid.tsx | 59 +++++++++ src/components/blog.tsx | 36 ++++++ src/components/featured-blog-post.tsx | 30 +++++ src/types/blog.ts | 5 + 8 files changed, 132 insertions(+), 176 deletions(-) delete mode 100644 src/app/(app)/blog/blogfinal.tsx rename src/app/(app)/{blog => blogs}/[postSlug]/page.tsx (98%) create mode 100644 src/components/blog-grid.tsx create mode 100644 src/components/blog.tsx create mode 100644 src/components/featured-blog-post.tsx create mode 100644 src/types/blog.ts diff --git a/src/app/(app)/blog/blogfinal.tsx b/src/app/(app)/blog/blogfinal.tsx deleted file mode 100644 index 9978e61..0000000 --- a/src/app/(app)/blog/blogfinal.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Link from 'next/link'; -import Image from 'next/image'; - -import { Post } from '@/types/posts'; - -import Container from '@/components/Container'; -import { fetchBlogPosts } from '@/utils/hashnode'; - -export default async function Blog() { - const publication = await fetchBlogPosts(); - - if (!publication) { - throw new Error('Failed to fetch blog posts'); - } - - const posts: Array = publication.posts.edges.map( - ({ node }: { node: Post }) => node, - ); - return ( - <> - -
    - {posts.map((post) => ( -
  • - - {post.title} - -
    -

    - {post.title} -

    -

    - {new Date(post.publishedAt).toLocaleDateString('en-us', { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - })} -

    -
    -
    • - ))} -
- - - ); -} diff --git a/src/app/(app)/blog/[postSlug]/page.tsx b/src/app/(app)/blogs/[postSlug]/page.tsx similarity index 98% rename from src/app/(app)/blog/[postSlug]/page.tsx rename to src/app/(app)/blogs/[postSlug]/page.tsx index e0e91bc..615e3ba 100644 --- a/src/app/(app)/blog/[postSlug]/page.tsx +++ b/src/app/(app)/blogs/[postSlug]/page.tsx @@ -74,7 +74,7 @@ export default async function PageComponent({ params }: PageParams) { })}

= publication.posts.edges.map( - ({ node }: { node: Post }) => node, - ); - - return ( - - {/* Header */} -
-

- Insights for Building Web Applications -

-

- Dive deep into the latest trends, tips, and techniques for creating - powerful, user-focused web applications. -

-
+import { Blog } from '@/components/blog'; - {/* Featured Post */} - {/* Featured Post */} -
-
-
-

{posts[0].title}

-

{posts[0].excerpt}

- - - -
- Featured Post Image -
- - {/* Blog Grid */} -
    - {posts.map((post) => ( -
  • - -
    - {post.title} -
    - ➔ -
    -
    -
    -

    - {post.title} -

    -

    - {new Date(post.publishedAt).toLocaleDateString('en-us', { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - })} -

    -

    {post.excerpt}

    -
    -
    - -
    - -
    • - ))} -
- - ); -} - -// Blogs page wrapper const Blogs = () => { return (
@@ -111,23 +11,3 @@ const Blogs = () => { }; export default Blogs; - -// CSS for liquid effect -; diff --git a/src/app/(app)/components/[[...slug]]/page.tsx b/src/app/(app)/components/[[...slug]]/page.tsx index 5ade23f..d53fb5b 100644 --- a/src/app/(app)/components/[[...slug]]/page.tsx +++ b/src/app/(app)/components/[[...slug]]/page.tsx @@ -1,6 +1,5 @@ import { allDocuments } from 'contentlayer/generated'; import { notFound } from 'next/navigation'; - import { ChevronRightIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import Balancer from 'react-wrap-balancer'; diff --git a/src/components/blog-grid.tsx b/src/components/blog-grid.tsx new file mode 100644 index 0000000..524f605 --- /dev/null +++ b/src/components/blog-grid.tsx @@ -0,0 +1,59 @@ +import { Post } from '@/types/posts'; +import Image from 'next/image'; +import Link from 'next/link'; +import React from 'react'; +import { Button } from './ui/button'; + +interface BlogGridProps { + posts: Post[]; +} + +const BlogGrid = ({ posts }: BlogGridProps) => { + return ( + <> +
    + {posts?.slice(1)?.map((post) => ( +
  • + +
    + {post.title} +
    + ➔ +
    +
    +
    +

    + {post.title} +

    +

    + {new Date(post.publishedAt).toLocaleDateString('en-us', { + weekday: 'long', + year: 'numeric', + month: 'short', + day: 'numeric', + })} +

    +
    +
    + +
    + +
    • + ))} +
+ + ); +}; + +export default BlogGrid; diff --git a/src/components/blog.tsx b/src/components/blog.tsx new file mode 100644 index 0000000..c69db77 --- /dev/null +++ b/src/components/blog.tsx @@ -0,0 +1,36 @@ +import { Post } from '@/types/posts'; +import { fetchBlogPosts } from '@/utils/hashnode'; +import Container from '@/components/Container'; +import FeaturedBlogPost from './featured-blog-post'; +import BlogGrid from './blog-grid'; + +export async function Blog() { + const publication = await fetchBlogPosts(); + if (!publication) { + throw new Error('Failed to fetch blog posts'); + } + + const posts: Array = publication.posts.edges.map( + ({ node }: { node: Post }) => node, + ); + return ( + +
+

+ Insights for Building Web Applications +

+

+ Dive deep into the latest trends, tips, and techniques for creating + powerful, user-focused web applications. +

+
+ + + + + ); +} diff --git a/src/components/featured-blog-post.tsx b/src/components/featured-blog-post.tsx new file mode 100644 index 0000000..f736d45 --- /dev/null +++ b/src/components/featured-blog-post.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Button } from './ui/button'; +import Image from 'next/image'; +import { BlogParams } from '@/types/blog'; +import Link from 'next/link'; + +const FeaturedBlogPost = ({ title, slug, imageUrl }: BlogParams) => { + return ( +
+
+
+

{title}

+ + + +
+ Featured Post Image +
+ ); +}; + +export default FeaturedBlogPost; diff --git a/src/types/blog.ts b/src/types/blog.ts new file mode 100644 index 0000000..afa7f16 --- /dev/null +++ b/src/types/blog.ts @@ -0,0 +1,5 @@ +export interface BlogParams { + title: string; + slug: string; + imageUrl: string; +}