Skip to content

Commit 1604d71

Browse files
Vatsal6288Vatsal6288
committed
refactor(link): updated links for blog-component, hero-section & footer layout
- updated font-family for global.css
1 parent 1274b89 commit 1604d71

File tree

9 files changed

+145
-182
lines changed

9 files changed

+145
-182
lines changed

‎src/components/blocks/blog-component/blog-component.tsx‎

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -42,54 +42,65 @@ const BlogGrid = ({ posts, onCategoryClick }: { posts: BlogPost[]; onCategoryCli
4242
return (
4343
<div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
4444
{posts.map(post => (
45-
<Card
45+
<a
46+
href={`/blog/${post.slug}`}
4647
key={post.id}
4748
className='h-full cursor-pointer overflow-hidden shadow-none transition-all duration-300 hover:shadow-md'
49+
onClick={e => {
50+
const target = e.target as HTMLElement
51+
52+
if (target.closest('.badge')) {
53+
e.preventDefault()
54+
e.stopPropagation()
55+
}
56+
}}
4857
>
49-
<CardContent className='space-y-3.5'>
50-
<div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
51-
<a href={`/blog/${post.slug}`}>
58+
<Card>
59+
<CardContent className='space-y-3.5'>
60+
<div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
5261
<img
5362
src={post.imageUrl}
5463
alt={post.imageAlt}
5564
className='h-59.5 w-full object-cover transition-transform duration-300 hover:scale-105'
5665
/>
57-
</a>
58-
</div>
59-
<div className='flex items-center justify-between gap-1.5'>
60-
<div className='text-muted-foreground flex items-center gap-1.5'>
61-
<CalendarDaysIcon className='size-6' />
62-
<span>{post.pubDate.toLocaleDateString()}</span>
6366
</div>
64-
<Badge
65-
className='bg-primary/10 text-primary rounded-full border-0 text-sm'
66-
onClick={e => {
67-
e.stopPropagation()
68-
onCategoryClick(post.category)
69-
}}
70-
>
71-
<a href={`/#category-${post.category}`}>{post.category}</a>
72-
</Badge>
73-
</div>
74-
<h3 className='line-clamp-2 text-lg font-medium md:text-xl'>
75-
<a href={`/blog/${post.slug}`}>{post.title}</a>
76-
</h3>
77-
<p className='text-muted-foreground line-clamp-2'>{post.description}</p>
78-
<div className='flex items-center justify-between'>
79-
<span className='text-sm font-medium'>{post.author}</span>
80-
<Button
81-
size='icon'
82-
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
83-
asChild
84-
>
85-
<a href={`/blog/${post.slug}`}>
67+
<div className='flex items-center justify-between gap-1.5'>
68+
<div className='text-muted-foreground flex items-center gap-1.5'>
69+
<CalendarDaysIcon className='size-6' />
70+
<p className='font-medium'>
71+
{new Date(post.pubDate).toLocaleDateString('en-US', {
72+
year: 'numeric',
73+
month: 'long',
74+
day: 'numeric'
75+
})}
76+
</p>
77+
</div>
78+
<Badge
79+
className='bg-primary/10 text-primary badge rounded-full border-0 text-sm'
80+
onClick={e => {
81+
e.preventDefault()
82+
e.stopPropagation()
83+
onCategoryClick(post.category)
84+
}}
85+
>
86+
{post.category}
87+
</Badge>
88+
</div>
89+
<h3 className='line-clamp-2 text-lg font-medium md:text-xl'>{post.title}</h3>
90+
<p className='text-muted-foreground line-clamp-2'>{post.description}</p>
91+
<div className='flex items-center justify-between'>
92+
<span className='text-sm font-medium'>{post.author}</span>
93+
<Button
94+
size='icon'
95+
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
96+
>
8697
<ArrowRightIcon className='size-4 -rotate-45' />
8798
<span className='sr-only'>Read more: {post.title}</span>
88-
</a>
89-
</Button>
90-
</div>
91-
</CardContent>
92-
</Card>
99+
</Button>
100+
</div>
101+
</CardContent>
102+
</Card>
103+
</a>
93104
))}
94105
</div>
95106
)

‎src/components/blocks/blog-related-post/blog-related-post.tsx‎

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,54 +36,49 @@ const Blog = ({ relatedPosts }: { relatedPosts: BlogPost[] }) => {
3636
{/* Tabs and Search */}
3737
<div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
3838
{relatedPosts.map(post => (
39-
<Card
39+
<a
40+
href={`/blog/${post.slug}`}
4041
key={post.id}
4142
className='group h-full cursor-pointer overflow-hidden shadow-none transition-all duration-300 hover:shadow-md'
42-
onClick={() => (window.location.href = `/blog/${post.slug}`)}
4343
>
44-
<CardContent className='space-y-3.5'>
45-
<div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
46-
<a href={`/blog/${post.slug}`}>
44+
<Card>
45+
<CardContent className='space-y-3.5'>
46+
<div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
4747
<img
4848
src={post.imageUrl}
4949
alt={post.imageAlt}
5050
className='h-59.5 w-full object-cover transition-transform duration-300 group-hover:scale-105'
5151
/>
52-
</a>
53-
</div>
54-
<div className='flex items-center justify-between gap-1.5'>
55-
<div className='text-muted-foreground flex items-center gap-1.5'>
56-
<CalendarDaysIcon className='size-6' />
57-
<span>{post.pubDate.toLocaleDateString()}</span>
5852
</div>
59-
<Badge
60-
className='bg-primary/10 text-primary border-0 text-sm'
61-
onClick={e => {
62-
e.stopPropagation()
63-
}}
64-
>
65-
<a href={`/#category-${post.category}`}>{post.category}</a>
66-
</Badge>
67-
</div>
68-
<h3 className='line-clamp-2 text-lg font-medium md:text-xl'>
69-
<a href={`/blog/${post.slug}`}>{post.title}</a>
70-
</h3>
71-
<p className='text-muted-foreground line-clamp-2'>{post.description}</p>
72-
<div className='flex items-center justify-between'>
73-
<span className='text-sm font-medium'>{post.author}</span>
74-
<Button
75-
size='icon'
76-
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
77-
asChild
78-
>
79-
<a href={`/blog/${post.slug}`}>
53+
<div className='flex items-center justify-between gap-1.5'>
54+
<div className='text-muted-foreground flex items-center gap-1.5'>
55+
<CalendarDaysIcon className='size-6' />
56+
<span>{post.pubDate.toLocaleDateString()}</span>
57+
</div>
58+
<Badge
59+
className='bg-primary/10 text-primary border-0 text-sm'
60+
onClick={e => {
61+
e.stopPropagation()
62+
}}
63+
>
64+
{post.category}
65+
</Badge>
66+
</div>
67+
<h3 className='line-clamp-2 text-lg font-medium md:text-xl'>{post.title}</h3>
68+
<p className='text-muted-foreground line-clamp-2'>{post.description}</p>
69+
<div className='flex items-center justify-between'>
70+
<span className='text-sm font-medium'>{post.author}</span>
71+
<Button
72+
size='icon'
73+
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
74+
>
8075
<ArrowRightIcon className='size-4 -rotate-45' />
8176
<span className='sr-only'>Read more: {post.title}</span>
82-
</a>
83-
</Button>
84-
</div>
85-
</CardContent>
86-
</Card>
77+
</Button>
78+
</div>
79+
</CardContent>
80+
</Card>
81+
</a>
8782
))}
8883
</div>
8984
</div>

‎src/components/blocks/hero-section/hero-section.tsx‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -34,54 +34,56 @@ const HeroSection = ({ blogData }: { blogData: BlogPost[] }) => {
3434

3535
<div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
3636
{featuredPosts.map((item, index) => (
37-
<Card key={`${item.author}-${index}`} className='group cursor-pointer py-0 shadow-none'>
38-
<CardContent className='grid grid-cols-1 px-0 xl:grid-cols-2'>
39-
<div className='p-6'>
40-
<div className='h-59.5 w-full overflow-hidden rounded-lg'>
41-
<a href={`/blog/${item.slug}`}>
37+
<a href={`/blog/${item.slug}`} key={`${item.author}-${index}`} className='group'>
38+
<Card className='cursor-pointer py-0 shadow-none'>
39+
<CardContent className='grid grid-cols-1 px-0 xl:grid-cols-2'>
40+
<div className='p-6'>
41+
<div className='h-59.5 w-full overflow-hidden rounded-lg'>
4242
<img
4343
src={item.imageUrl}
4444
alt={item.imageAlt}
4545
className='w-full object-cover transition-transform duration-300 group-hover:scale-105'
4646
/>
47-
</a>
48-
</div>
49-
</div>
50-
<div className='flex flex-col justify-center gap-3 p-6'>
51-
<div className='flex items-center gap-1.5 py-1'>
52-
<div className='text-muted-foreground flex grow items-center gap-1.5'>
53-
<CalendarDaysIcon className='size-6' />
54-
<p>{item.pubDate.toLocaleDateString()}</p>
5547
</div>
56-
<Badge
57-
className='bg-primary/10 text-primary cursor-pointer border-0 text-sm'
58-
onClick={e => {
59-
e.stopPropagation()
60-
}}
61-
>
62-
<a href={`/#category-${item.category}`}>{item.category}</a>
63-
</Badge>
6448
</div>
65-
<h3 className='text-xl font-medium'>
66-
<a href={`/blog/${item.slug}`}>{item.title}</a>
67-
</h3>
49+
<div className='flex flex-col justify-center gap-3 p-6'>
50+
<div className='flex items-center gap-1.5 py-1'>
51+
<div className='text-muted-foreground flex grow items-center gap-1.5'>
52+
<CalendarDaysIcon className='size-6' />
53+
<p className='font-medium'>
54+
{new Date(item.pubDate).toLocaleDateString('en-US', {
55+
year: 'numeric',
56+
month: 'long',
57+
day: 'numeric'
58+
})}
59+
</p>
60+
</div>
61+
<Badge
62+
className='bg-primary/10 text-primary cursor-pointer border-0 text-sm'
63+
onClick={e => {
64+
e.preventDefault()
65+
e.stopPropagation()
66+
}}
67+
>
68+
{item.category}
69+
</Badge>
70+
</div>
71+
<h3 className='text-xl font-medium'>{item.title}</h3>
6872

69-
<p className='text-muted-foreground'>{item.description}</p>
70-
<div className='flex w-full items-center justify-between gap-1 py-1'>
71-
<span className='cursor-pointer text-sm font-medium'>{item.author}</span>
72-
<Button
73-
size='icon'
74-
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
75-
asChild
76-
>
77-
<a href={`/blog/${item.slug}`}>
73+
<p className='text-muted-foreground'>{item.description}</p>
74+
<div className='flex w-full items-center justify-between gap-1 py-1'>
75+
<span className='cursor-pointer text-sm font-medium'>{item.author}</span>
76+
<Button
77+
size='icon'
78+
className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
79+
>
7880
<ArrowUpRightIcon />
79-
</a>
80-
</Button>
81+
</Button>
82+
</div>
8183
</div>
82-
</div>
83-
</CardContent>
84-
</Card>
84+
</CardContent>
85+
</Card>
86+
</a>
8587
))}
8688
</div>
8789
</div>

‎src/components/layout/footer.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ const Footer = () => {
4646
<div className='mx-auto flex max-w-7xl justify-center px-4 py-8 sm:px-6 lg:px-8'>
4747
<p className='flex items-center gap-1 text-center font-medium text-balance max-sm:flex-col'>
4848
<span>
49-
{`©${new Date().getFullYear()}`} <a href='#'>INK</a>
49+
{`©${new Date().getFullYear()}`}{' '}
50+
<a className='hover:underline' href='#'>
51+
INK
52+
</a>
5053
</span>
5154
<span>, Made with ❤️ for better web.</span>
5255
</p>

‎src/components/layout/header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,15 @@ const Header = ({ navigationData, className }: HeaderProps) => {
9494
<div className='flex gap-3'>
9595
<ThemeToggle />
9696
<Button variant='outline' className='max-sm:hidden' asChild>
97-
<a href='#get-in-touch'>Get in Touch</a>
97+
<a href='/#get-in-touch'>Get in Touch</a>
9898
</Button>
9999

100100
{/* Navigation for small screens */}
101101
<div className='flex gap-3'>
102102
<Tooltip>
103103
<TooltipTrigger asChild>
104104
<Button variant='outline' size='icon' className='sm:hidden' asChild>
105-
<a href='#get-in-touch'>
105+
<a href='/#get-in-touch'>
106106
<MailIcon />
107107
<span className='sr-only'>Get in Touch</span>
108108
</a>

‎src/layouts/HeadSeo.astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,20 +151,28 @@ const schemaData = schema || defaultSchema
151151
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous' />
152152
<!-- Google Fonts - Optimized Loading -->
153153
<link
154+
rel='preload'
155+
as='style'
154156
href='https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
155-
rel='stylesheet'
156157
/>
157158

158159
<link
160+
rel='preload'
161+
as='style'
159162
href='https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'
160-
rel='stylesheet'
161163
/>
162164

163165
<link
166+
rel='preload'
167+
as='style'
164168
href='https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'
169+
/>
170+
171+
<link
165172
rel='stylesheet'
166173
media='print'
167174
onload="this.media='all'"
175+
href='https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
168176
/>
169177

170178
<!-- Theme Color -->

‎src/pages/blog/[slug].astro‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const schema = {
102102
</BreadcrumbItem>
103103
<BreadcrumbSeparator />
104104
<BreadcrumbItem>
105-
<BreadcrumbLink href='/blog'>Blog</BreadcrumbLink>
105+
<BreadcrumbLink href='/#categories'>Blog</BreadcrumbLink>
106106
</BreadcrumbItem>
107107
<BreadcrumbSeparator />
108108
<BreadcrumbItem>
@@ -141,11 +141,7 @@ const schema = {
141141
{
142142
entry.data.imageUrl && (
143143
<div>
144-
<img
145-
src={entry.data.imageUrl}
146-
alt={entry.data.title}
147-
class='max-h-148 w-full rounded-xl object-cover'
148-
/>
144+
<img src={entry.data.imageUrl} alt={entry.data.title} class='max-h-148 w-full rounded-xl' />
149145
</div>
150146
)
151147
}

0 commit comments

Comments
 (0)