Skip to content

Commit e4acc61

Browse files
updated blog page
Signed-off-by: JAYANTJOSHI001 <[email protected]>
1 parent 6affb2c commit e4acc61

File tree

1 file changed

+186
-28
lines changed

1 file changed

+186
-28
lines changed

app/blog/[slug]/page.tsx

+186-28
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { notFound } from 'next/navigation'
22
import { Badge } from "@/components/ui/badge"
33
import Link from 'next/link'
44
import { ArrowLeft } from 'lucide-react'
5+
import Navbar1 from '@/components/navbar'
6+
import { BookOpen, Github } from 'lucide-react'
7+
import { Button } from '@/components/ui/button'
8+
import { SocialLinks } from '@/components/SocialLinks'
59

610
interface Post {
711
slug: string
@@ -16,70 +20,70 @@ const posts: Record<string, Post> = {
1620
slug: 'release-v2',
1721
title: 'Release of Tailwind Nextjs Starter Blog v2.0',
1822
date: 'August 5, 2023',
19-
content: 'Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.',
23+
content: 'The latest version of the Tailwind Nextjs Starter Blog template comes with some exciting changes and improvements. One of the major updates is the adoption of Next.js App directory, which has revolutionized the way we handle routing and data fetching. The App directory structure is more organized, making it easier to manage the application code. Moreover, React Server Components have been incorporated, allowing for server-side rendering without sacrificing performance. These updates are tailored to streamline the development process, making it easier to build, maintain, and scale your blog. The new features in version 2.0 also include improved layout flexibility, better responsiveness across devices, and optimizations for faster load times. Whether you are a seasoned developer or just starting with Next.js and Tailwind CSS, version 2.0 offers the tools and features you need to create a high-performance, SEO-friendly blog.',
2024
tags: ['NEXT-JS', 'TAILWIND', 'GUIDE', 'FEATURE'],
2125
},
2226
'new-features-v1': {
2327
slug: 'new-features-v1',
2428
title: 'New features in v1',
2529
date: 'August 7, 2021',
26-
content: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more',
30+
content: 'The first version of the Tailwind Nextjs Starter Blog introduced several new features aimed at enhancing the blogging experience for developers. One of the most notable additions is the ability to easily copy code blocks with a single click. This simple yet effective feature allows readers to quickly grab code snippets for their own projects without the hassle of manually selecting and copying the text. The template also introduces the concept of multiple authors, which makes it ideal for collaborative blogging projects. You can now easily assign posts to different authors, and the blog will display their respective profiles and attribution. Another major improvement is the customizable frontmatter layout, which provides more control over how blog metadata such as title, description, and tags are displayed. These updates aim to create a smoother user experience while also offering more flexibility in terms of design and functionality.',
2731
tags: ['NEXT-JS', 'TAILWIND', 'GUIDE'],
2832
},
2933
'multi-part-posts': {
3034
slug: 'multi-part-posts',
3135
title: 'Introducing Multi-part Posts with Nested Routing',
3236
date: 'May 2, 2021',
33-
content: 'The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!',
37+
content: "The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route! One of the most powerful features introduced in the Tailwind Nextjs Starter Blog is support for multi-part posts using nested routing. This is particularly useful for creating content that spans multiple parts, such as a series of blog posts, a tutorial, or even an entire online course. By organizing posts into nested sub-folders, you can group related content together and provide a seamless navigation experience for your readers. This feature also supports deep linking, which allows readers to jump directly to a specific part of the series without having to scroll through unrelated posts. For developers, implementing this feature is straightforward thanks to Next.js’s built-in support for dynamic routing. You can easily create nested routes by adding folders within the pages directory and referencing them with a dynamic path. The flexibility of nested routing makes it easy to structure your content and keep it organized, especially as your blog grows.",
3438
tags: ['FEATURE', 'NEXT-JS'],
3539
},
3640
'seo-optimization-guide': {
3741
slug: 'seo-optimization-guide',
3842
title: 'SEO Optimization for Next.js Blogs',
3943
date: 'March 15, 2023',
40-
content: 'A step-by-step guide to optimizing your Next.js blog for search engines using dynamic metadata, Open Graph, and structured data.',
44+
content: 'SEO optimization is essential for any blog or website aiming to reach a wider audience, and the Next.js ecosystem offers powerful tools to help you achieve this. In this comprehensive guide, we walk you through the best practices for optimizing your Next.js blog for search engines. One of the key features of Next.js is the ability to dynamically generate metadata for each page, which is crucial for SEO. By using dynamic meta tags, you can ensure that your blog posts are optimized for search engines and shareable on social media platforms. Additionally, we dive into Open Graph tags, which enhance the way your content appears when shared on platforms like Facebook and Twitter. Structured data, such as schema.org markup, is also covered in this guide, as it allows search engines to better understand the content of your blog posts, improving the chances of ranking higher in search results. This guide is perfect for developers looking to take their Next.js blog to the next level and improve its visibility online.',
4145
tags: ['NEXT-JS', 'SEO', 'GUIDE'],
4246
},
4347
'tailwind-best-practices': {
4448
slug: 'tailwind-best-practices',
4549
title: 'Best Practices for Tailwind CSS',
4650
date: 'July 10, 2022',
47-
content: 'Learn how to use Tailwind CSS effectively with reusable components, themes, and responsive design techniques.',
51+
content: 'Tailwind CSS has quickly become one of the most popular CSS frameworks due to its utility-first approach, which allows developers to style websites faster and more efficiently. In this post, we explore the best practices for using Tailwind CSS in your projects. One of the core concepts in Tailwind is the use of utility classes to style elements directly in your HTML. However, for larger projects, it’s essential to create reusable components to avoid repetitive code. We also discuss how to implement a consistent design by creating custom themes and color schemes using Tailwind’s configuration file. Responsive design is another important aspect, and Tailwind’s mobile-first approach makes it easy to create layouts that look great on any device. By using Tailwind CSS effectively, you can improve your workflow, maintainability, and scalability, while also achieving a sleek, modern design for your website or app.',
4852
tags: ['TAILWIND', 'CSS', 'GUIDE'],
4953
},
5054
'performance-improvements': {
5155
slug: 'performance-improvements',
5256
title: 'Boosting Performance in Next.js Apps',
5357
date: 'November 22, 2023',
54-
content: 'Explore techniques to enhance the performance of your Next.js applications with lazy loading, dynamic imports, and more.',
58+
content: 'Performance is a critical factor in the success of any web application, and Next.js provides a variety of tools and techniques to ensure that your app runs efficiently. In this post, we explore several strategies for boosting performance in Next.js applications. One of the most effective methods is lazy loading, which allows you to load only the content that is visible to the user, reducing initial page load time. Dynamic imports are another key feature in Next.js that can help improve performance by splitting your code into smaller chunks and loading them on demand. This reduces the size of your initial JavaScript bundle, leading to faster load times and a better user experience. Additionally, we cover other performance optimization techniques such as image optimization, caching strategies, and server-side rendering. By implementing these techniques, you can create high-performance Next.js applications that deliver a seamless user experience.',
5559
tags: ['NEXT-JS', 'PERFORMANCE', 'FEATURE'],
5660
},
5761
'markdown-integration': {
5862
slug: 'markdown-integration',
5963
title: 'Markdown Integration in Next.js',
6064
date: 'January 5, 2022',
61-
content: 'Understand how to use markdown files with Next.js to create a seamless blogging experience.',
65+
content: 'Understand how to use markdown files with Next.js to create a seamless blogging experience. Markdown is a popular choice for writing content due to its simplicity and ease of use. Next.js makes it incredibly easy to integrate markdown files into your blog, allowing you to focus on writing while handling the heavy lifting of rendering and displaying the content. This post explains how to set up markdown integration in your Next.js project, from configuring the necessary dependencies to rendering markdown content as HTML. We also cover advanced topics such as syntax highlighting for code blocks, creating custom components for specific content types, and handling frontmatter data. By combining the flexibility of markdown with the power of Next.js, you can create a fast, efficient, and scalable blogging platform that is easy to maintain and update.',
6266
tags: ['NEXT-JS', 'MARKDOWN', 'GUIDE'],
6367
},
6468
'custom-themes': {
6569
slug: 'custom-themes',
6670
title: 'Creating Custom Themes with Tailwind CSS',
6771
date: 'February 18, 2023',
68-
content: 'Learn how to build and apply custom themes using Tailwind CSS for consistent branding across your web apps.',
72+
content: 'One of the greatest strengths of Tailwind CSS is its ability to be easily customized to fit the specific needs of your project. In this post, we delve into how you can create custom themes using Tailwind CSS. From selecting color schemes and typography to defining spacing and layout rules, Tailwind provides a flexible configuration system that allows you to tailor the design to your brand’s identity. We also discuss the importance of consistent branding across your web app and how Tailwind’s utility-first approach can help maintain that consistency throughout the design. Whether you’re building a personal portfolio or a full-fledged web app, creating a custom theme with Tailwind CSS ensures that your project not only looks great but also aligns with your brand’s visual identity.',
6973
tags: ['TAILWIND', 'CUSTOMIZATION', 'GUIDE'],
7074
},
7175
'dynamic-routing': {
7276
slug: 'dynamic-routing',
7377
title: 'Understanding Dynamic Routing in Next.js',
7478
date: 'June 20, 2021',
75-
content: 'A comprehensive explanation of dynamic routing and how to implement it in Next.js projects.',
79+
content: 'Dynamic routing is one of the most powerful features in Next.js, allowing developers to create pages with variable paths based on the content of the application. This is particularly useful for building blogs, e-commerce sites, or any project where the content is dynamically generated. In this post, we explain how dynamic routing works in Next.js and walk you through how to implement it in your projects. From defining dynamic routes using brackets in the file system to using Next.js’s getStaticPaths and getStaticProps functions for static site generation, this guide covers all you need to know. We also provide examples of how to use dynamic routing for different types of content, such as blog posts, product pages, and user profiles. Understanding dynamic routing in Next.js will give you the flexibility to create more complex and feature-rich applications.',
7680
tags: ['NEXT-JS', 'ROUTING', 'FEATURE'],
7781
},
7882
'accessibility-tips': {
7983
slug: 'accessibility-tips',
8084
title: 'Web Accessibility Tips for Tailwind CSS Users',
8185
date: 'October 10, 2022',
82-
content: 'Discover how to make your Tailwind CSS-based websites more accessible to all users.',
86+
content: 'Accessibility is a crucial aspect of web design that ensures all users, including those with disabilities, can access and interact with your website. In this post, we explore how to make your Tailwind CSS-based websites more accessible. We begin by discussing the importance of semantic HTML and how it helps screen readers and other assistive technologies interpret the content. Tailwind’s utility classes can also be used to enhance accessibility, such as adding focus styles for keyboard navigation, ensuring proper contrast ratios, and providing accessible text for images using alt attributes. Additionally, we cover how to create accessible forms, buttons, and other interactive elements using Tailwind’s built-in utilities. By following these tips, you can ensure that your website is inclusive and user-friendly for everyone.',
8387
tags: ['TAILWIND', 'ACCESSIBILITY', 'GUIDE'],
8488
},
8589
};
@@ -93,26 +97,180 @@ export default function BlogPost({ params }: { params: { slug: string } }) {
9397
}
9498

9599
return (
96-
<article className="max-w-2xl mx-auto">
97-
<Link href="/blog" className="inline-flex items-center text-sm text-muted-foreground hover:text-primary mb-8">
98-
<ArrowLeft className="mr-2 h-4 w-4" />
99-
Back to all posts
100-
</Link>
101-
<div className="space-y-4">
102-
<div className="text-sm text-muted-foreground">{post.date}</div>
103-
<h1 className="text-4xl font-bold">{post.title}</h1>
104-
<div className="flex flex-wrap gap-2">
105-
{post.tags.map((tag) => (
106-
<Badge key={tag} variant="secondary">
107-
{tag}
108-
</Badge>
109-
))}
100+
<div className="bg-gradient-to-br from-purple-50 via-white to-purple-100 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900 bg-texture">
101+
<Navbar1 />
102+
<article className="max-w-2xl mx-auto m-8 border rounded-lg shadow-lg p-8 bg-blur border-zinc-800 dark:border-zinc-500">
103+
<Link href="/blog" className="inline-flex items-center text-sm text-muted-foreground hover:text-primary mb-8">
104+
<ArrowLeft className="mr-2 h-4 w-4" />
105+
Back to all posts
106+
</Link>
107+
<div className="space-y-4">
108+
<div className="text-sm text-muted-foreground">{post.date}</div>
109+
<h1 className="text-4xl font-bold">{post.title}</h1>
110+
<div className="flex flex-wrap gap-2">
111+
{post.tags.map((tag) => (
112+
<Badge key={tag} variant="secondary" className='bg-transparent text-primary border border-primary'>
113+
{tag}
114+
</Badge>
115+
))}
116+
</div>
117+
<div className="prose dark:prose-invert mt-8">
118+
{post.content}
119+
</div>
110120
</div>
111-
<div className="prose dark:prose-invert mt-8">
112-
{post.content}
121+
</article>
122+
<footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
123+
<div className="container mx-auto">
124+
<div className="flex flex-col md:flex-row justify-between items-center mb-8">
125+
<div className="flex items-center space-x-4 mb-4 md:mb-0">
126+
<BookOpen className="h-6 w-6 text-primary" />
127+
<span className="font-bold text-lg">LeetCode Journal</span>
128+
</div>
129+
<div className="flex items-center space-x-4 -ml-2">
130+
<Button
131+
variant="outline"
132+
size="sm"
133+
className="hidden md:flex"
134+
asChild
135+
>
136+
<a
137+
href="https://github.com/yashksaini-coder/leetcode-journal"
138+
target="_blank"
139+
rel="noopener noreferrer"
140+
>
141+
<Github className="mr-2 h-4 w-4" />
142+
Star on GitHub
143+
</a>
144+
</Button>
145+
<SocialLinks />
146+
</div>
147+
</div>
148+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
149+
<div>
150+
<h3 className="font-semibold mb-3 text-lg">Product</h3>
151+
<ul className="space-y-2">
152+
<li>
153+
<Link
154+
href="#features"
155+
className="text-sm hover:text-primary transition-colors"
156+
>
157+
Features
158+
</Link>
159+
</li>
160+
<li>
161+
<Link
162+
href="#pricing"
163+
className="text-sm hover:text-primary transition-colors"
164+
>
165+
Pricing
166+
</Link>
167+
</li>
168+
<li>
169+
<Link
170+
href="#"
171+
className="text-sm hover:text-primary transition-colors"
172+
>
173+
FAQ
174+
</Link>
175+
</li>
176+
</ul>
177+
</div>
178+
<div>
179+
<h3 className="font-semibold mb-3 text-lg">Company</h3>
180+
<ul className="space-y-2">
181+
<li>
182+
<Link
183+
href="#"
184+
className="text-sm hover:text-primary transition-colors"
185+
>
186+
About
187+
</Link>
188+
</li>
189+
<li>
190+
<Link
191+
href="#"
192+
className="text-sm hover:text-primary transition-colors"
193+
>
194+
Blog
195+
</Link>
196+
</li>
197+
<li>
198+
<Link
199+
href="#"
200+
className="text-sm hover:text-primary transition-colors"
201+
>
202+
Careers
203+
</Link>
204+
</li>
205+
</ul>
206+
</div>
207+
<div>
208+
<h3 className="font-semibold mb-3 text-lg">Resources</h3>
209+
<ul className="space-y-2">
210+
<li>
211+
<Link
212+
href="#"
213+
className="text-sm hover:text-primary transition-colors"
214+
>
215+
Documentation
216+
</Link>
217+
</li>
218+
<li>
219+
<Link
220+
href="#"
221+
className="text-sm hover:text-primary transition-colors"
222+
>
223+
Community
224+
</Link>
225+
</li>
226+
<li>
227+
<Link
228+
href="#"
229+
className="text-sm hover:text-primary transition-colors"
230+
>
231+
Support
232+
</Link>
233+
</li>
234+
</ul>
235+
</div>
236+
<div>
237+
<h3 className="font-semibold mb-3 text-lg">Legal</h3>
238+
<ul className="space-y-2">
239+
<li>
240+
<Link
241+
href="#"
242+
className="text-sm hover:text-primary transition-colors"
243+
>
244+
Privacy Policy
245+
</Link>
246+
</li>
247+
<li>
248+
<Link
249+
href="#"
250+
className="text-sm hover:text-primary transition-colors"
251+
>
252+
Terms of Service
253+
</Link>
254+
</li>
255+
<li>
256+
<Link
257+
href="#"
258+
className="text-sm hover:text-primary transition-colors"
259+
>
260+
Cookie Policy
261+
</Link>
262+
</li>
263+
</ul>
264+
</div>
265+
</div>
266+
<div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
267+
<p className="text-sm text-muted-foreground mb-4 md:mb-0">
268+
© 2023 LeetCode Journal. All rights reserved.
269+
</p>
270+
</div>
113271
</div>
114-
</div>
115-
</article>
272+
</footer>
273+
</div>
116274
)
117275
}
118276

0 commit comments

Comments
 (0)