-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #447 from Shariq2003/ExtendedBlogs
Implemented the Extended Blogs Page | Fully Responsive | Issue #427
- Loading branch information
Showing
5 changed files
with
172 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,104 @@ | ||
| const blogs = [ | ||
| { id: 1, title: 'Understanding Next.js for Modern Web Development', description: 'A deep dive into Next.js and how it helps you build scalable, performant websites.', date: '2024-11-06', author: 'John Doe' }, | ||
| { id: 2, title: 'Introduction to Server-side Rendering in React', description: 'Explaining SSR, its importance, and how to implement it in your React apps.', date: '2024-11-05', author: 'Jane Smith' }, | ||
| { id: 3, title: 'Google Material UI in React: A Practical Guide', description: 'Learn how to integrate Material UI into your React applications for a modern UI.', date: '2024-11-04', author: 'Alice Brown' }, | ||
| { id: 4, title: 'React Hooks: The Power of Functional Components', description: 'Explore the power of React hooks and why they are important for modern web development.', date: '2024-10-29', author: 'Bob Green' }, | ||
| { id: 5, title: 'A Beginner\'s Guide to Tailwind CSS', description: 'Learn how to create beautiful and responsive UIs with Tailwind CSS, a utility-first CSS framework.', date: '2024-09-15', author: 'Sally Adams' }, | ||
| { id: 6, title: 'JavaScript ES6 Features You Should Know', description: 'A look at some of the most useful ES6 features and how they make JavaScript development easier.', date: '2024-07-10', author: 'Carlos Mendez' }, | ||
| { id: 7, title: 'Building Scalable APIs with Node.js and Express', description: 'A detailed guide on how to create scalable APIs with Node.js and Express.', date: '2024-06-25', author: 'Emma White' }, | ||
| { id: 8, title: 'CSS Grid Layout: A Comprehensive Guide', description: 'An in-depth guide to CSS Grid and how to use it to create flexible layouts for your websites.', date: '2024-06-01', author: 'David Lee' }, | ||
| { id: 9, title: 'Design Patterns in JavaScript: An Overview', description: 'Understand the most common design patterns in JavaScript and how to apply them effectively in your code.', date: '2024-05-20', author: 'Fiona Clark' }, | ||
| { id: 10, title: 'The Complete Guide to TypeScript for React', description: 'Learn how to use TypeScript in your React applications for better type safety and easier maintenance.', date: '2024-04-10', author: 'Grace Johnson' }, | ||
| { | ||
| id: 1, | ||
| title: 'Understanding Next.js for Modern Web Development', | ||
| description: 'A deep dive into Next.js and how it helps you build scalable, performant websites.', | ||
| date: '2024-11-06', | ||
| author: 'John Doe', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Next.js, developed by Vercel, has become a go-to framework for developers who want to build scalable and high-performing web applications. With built-in support for server-side rendering (SSR) and static site generation (SSG), Next.js enables faster page loads and better SEO. In this article, we explore the key features that make Next.js unique, including API routes, middleware, and how to optimize data fetching...', | ||
| tags: ['Next.js', 'JavaScript', 'Web Development', 'Frontend'] | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: 'Introduction to Server-side Rendering in React', | ||
| description: 'Explaining SSR, its importance, and how to implement it in your React apps.', | ||
| date: '2024-11-05', | ||
| author: 'Jane Smith', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Server-side rendering (SSR) is a technique for improving the loading speed and SEO of your React applications. By rendering the initial HTML on the server, SSR helps deliver faster content to users. This blog discusses how SSR works, the benefits of using it, and practical steps to implement SSR in a React application...', | ||
| tags: ['SSR', 'React', 'Web Performance', 'JavaScript'] | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'Google Material UI in React: A Practical Guide', | ||
| description: 'Learn how to integrate Material UI into your React applications for a modern UI.', | ||
| date: '2024-11-04', | ||
| author: 'Alice Brown', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Material UI is a popular React UI framework based on Google’s Material Design principles. With Material UI, you can quickly build stylish and responsive applications. In this guide, we cover installation, basic components, themes, and customizations to get you started with Material UI in your React projects...', | ||
| tags: ['Material UI', 'React', 'Frontend', 'UI Design'] | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: 'React Hooks: The Power of Functional Components', | ||
| description: 'Explore the power of React hooks and why they are important for modern web development.', | ||
| date: '2024-10-29', | ||
| author: 'Bob Green', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'React hooks introduced a new way to handle state and lifecycle events in functional components, revolutionizing the way React developers build components. This article delves into useState, useEffect, and custom hooks, highlighting how these tools simplify state management and create more reusable code...', | ||
| tags: ['React', 'Hooks', 'Functional Components', 'JavaScript'] | ||
| }, | ||
| { | ||
| id: 5, | ||
| title: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| description: 'Learn how to create beautiful and responsive UIs with Tailwind CSS, a utility-first CSS framework.', | ||
| date: '2024-09-15', | ||
| author: 'Sally Adams', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Tailwind CSS is a utility-first CSS framework that enables developers to create custom designs without leaving their HTML files. This guide introduces Tailwind’s philosophy, key concepts, and essential classes, providing everything you need to get started with building fast, responsive interfaces...', | ||
| tags: ['Tailwind CSS', 'CSS', 'Frontend', 'Web Design'] | ||
| }, | ||
| { | ||
| id: 6, | ||
| title: 'JavaScript ES6 Features You Should Know', | ||
| description: 'A look at some of the most useful ES6 features and how they make JavaScript development easier.', | ||
| date: '2024-07-10', | ||
| author: 'Carlos Mendez', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'The ES6 (ECMAScript 2015) release brought significant improvements to JavaScript, making it more developer-friendly and powerful. In this article, we explore some of the must-know features, such as let and const, arrow functions, destructuring, promises, and more, with code examples to illustrate each feature...', | ||
| tags: ['JavaScript', 'ES6', 'Programming', 'Web Development'] | ||
| }, | ||
| { | ||
| id: 7, | ||
| title: 'Building Scalable APIs with Node.js and Express', | ||
| description: 'A detailed guide on how to create scalable APIs with Node.js and Express.', | ||
| date: '2024-06-25', | ||
| author: 'Emma White', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Node.js and Express are popular choices for building scalable, server-side applications. This article covers the fundamentals of creating an API, from setting up an Express server to managing routes, middleware, and error handling, with best practices to ensure your API is efficient and maintainable...', | ||
| tags: ['Node.js', 'Express', 'API', 'Backend'] | ||
| }, | ||
| { | ||
| id: 8, | ||
| title: 'CSS Grid Layout: A Comprehensive Guide', | ||
| description: 'An in-depth guide to CSS Grid and how to use it to create flexible layouts for your websites.', | ||
| date: '2024-06-01', | ||
| author: 'David Lee', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'CSS Grid has revolutionized layout design on the web. With CSS Grid, developers can create complex, responsive grid structures in a more intuitive way than ever before. This guide explains how to get started with CSS Grid, covering key properties, grid lines, and layout techniques...', | ||
| tags: ['CSS Grid', 'CSS', 'Frontend', 'Web Design'] | ||
| }, | ||
| { | ||
| id: 9, | ||
| title: 'Design Patterns in JavaScript: An Overview', | ||
| description: 'Understand the most common design patterns in JavaScript and how to apply them effectively in your code.', | ||
| date: '2024-05-20', | ||
| author: 'Fiona Clark', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'Design patterns are essential for building scalable and maintainable JavaScript applications. This article covers commonly used patterns such as Singleton, Module, and Observer, providing examples of how to use these patterns in JavaScript projects to write cleaner, more organized code...', | ||
| tags: ['JavaScript', 'Design Patterns', 'Programming', 'Architecture'] | ||
| }, | ||
| { | ||
| id: 10, | ||
| title: 'The Complete Guide to TypeScript for React', | ||
| description: 'Learn how to use TypeScript in your React applications for better type safety and easier maintenance.', | ||
| date: '2024-04-10', | ||
| author: 'Grace Johnson', | ||
| image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUm-zensaemw84polm_x9DwmIfRr1mDkSkg&s', | ||
| content: 'TypeScript enhances React applications with static typing, making your code safer and easier to maintain. This comprehensive guide covers TypeScript basics, key types, interfaces, and how to apply TypeScript in a React project, with examples and best practices...', | ||
| tags: ['TypeScript', 'React', 'JavaScript', 'Web Development'] | ||
| } | ||
| ]; | ||
|
|
||
| export default blogs; | ||
| export default blogs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| "use client"; | ||
| import React from 'react'; | ||
| import { Container, Card, Typography, Box, Chip } from '@mui/material'; | ||
| import blogs from '../Blogs'; | ||
|
|
||
| const SingleBlogPage = ({ params }) => { | ||
| const { id } = params; | ||
| const blog = blogs.find((blog) => blog.id.toString() === id); | ||
|
|
||
| if (!blog) { | ||
| return ( | ||
| <Container> | ||
| <Typography variant="h4" gutterBottom> | ||
| Blog not found | ||
| </Typography> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="min-h-screen py-8"> | ||
| <Container maxWidth="lg" className="px-6"> | ||
| <Card className="bg-white shadow-lg rounded-2xl p-6 overflow-hidden"> | ||
| <Box | ||
| component="img" | ||
| src={blog.image} | ||
| alt={blog.title} | ||
| className="w-full h-64 object-cover rounded-t-2xl mb-4" | ||
| /> | ||
| <Typography variant="h4" className="text-2xl font-semibold text-gray-800 mb-4"> | ||
| {blog.title} | ||
| </Typography> | ||
| <Box display="flex" justifyContent="space-between" className="text-sm text-gray-500 mb-4"> | ||
| <Typography>{`By ${blog.author}`}</Typography> | ||
| <Typography>{blog.date}</Typography> | ||
| </Box> | ||
| <Typography | ||
| variant="body1" | ||
| className="text-gray-700 mt-2 blog-content" | ||
| dangerouslySetInnerHTML={{ __html: blog.content }} | ||
| /> | ||
| <Box className="mt-6"> | ||
| <Typography variant="subtitle1" className="text-gray-600 mb-2"> | ||
| Tags: | ||
| </Typography> | ||
| {blog.tags.map((tag, index) => ( | ||
| <Chip | ||
| key={index} | ||
| label={tag} | ||
| variant="outlined" | ||
| className="mr-2 mb-2" | ||
| color="primary" | ||
| /> | ||
| ))} | ||
| </Box> | ||
| </Card> | ||
| </Container> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SingleBlogPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters