Skip to content

Commit c55e301

Browse files
ekrishnachaitanya2004ekrishnachaitanya2004
committed
Updated blogpage
1 parent a7cd657 commit c55e301

File tree

4 files changed

+83
-84
lines changed

4 files changed

+83
-84
lines changed

‎src/config/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"sticky_header": true,
1818
"theme_switcher": true,
1919
"default_theme": "system",
20-
"pagination": 2,
20+
"pagination": 12,
2121
"summary_length": 200,
2222
"blog_folder": "blog",
2323
"default_language": "en",

‎src/layouts/partials/PostSidebar.astro

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,55 @@ const { tags, categories, allCategories } = Astro.props;
66
const lang = getLangFromUrl(Astro.url);
77
---
88

9-
<div class="lg:col-4">
10-
<!-- categories -->
11-
<div class="mb-8">
12-
<h5 class="mb-6">Categories</h5>
13-
<div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
14-
<ul class="space-y-4">
15-
{
16-
categories.map((category: any) => {
17-
const count = allCategories.filter(
18-
(c: any) => c === category
19-
).length;
20-
return (
21-
<li>
22-
<a
23-
class="flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
24-
href={slugSelector(`/categories/${category}`, lang)}
25-
>
26-
{humanize(category)} <span>({count})</span>
27-
</a>
28-
</li>
29-
);
30-
})
31-
}
32-
</ul>
9+
<div class="w-full">
10+
<div class="flex flex-col gap-8">
11+
<!-- categories -->
12+
<div>
13+
<h5 class="mb-6">Categories</h5>
14+
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
15+
<ul class="flex flex-wrap gap-2">
16+
{
17+
categories.map((category: any) => {
18+
const count = allCategories.filter(
19+
(c: any) => c === category
20+
).length;
21+
return (
22+
<li class="inline-block">
23+
<a
24+
class="block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
25+
href={slugSelector(`/categories/${category}`, lang)}
26+
>
27+
{humanize(category)} <span class="text-sm">({count})</span>
28+
</a>
29+
</li>
30+
);
31+
})
32+
}
33+
</ul>
34+
</div>
3335
</div>
34-
</div>
35-
<!-- tags -->
36-
<div class="mb-8">
37-
<h5 class="mb-6">Tags</h5>
38-
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
39-
<ul>
40-
{
41-
tags.map((tag: any) => {
42-
return (
43-
<li class="inline-block">
44-
<a
45-
class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
46-
href={slugSelector(`/tags/${tag}`, lang)}
47-
>
48-
{humanize(tag)}
49-
</a>
50-
</li>
51-
);
52-
})
53-
}
54-
</ul>
36+
37+
<!-- tags -->
38+
<div>
39+
<h5 class="mb-6">Tags</h5>
40+
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
41+
<ul class="flex flex-wrap gap-2">
42+
{
43+
tags.map((tag: any) => {
44+
return (
45+
<li class="inline-block">
46+
<a
47+
class="block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
48+
href={slugSelector(`/tags/${tag}`, lang)}
49+
>
50+
{humanize(tag)}
51+
</a>
52+
</li>
53+
);
54+
})
55+
}
56+
</ul>
57+
</div>
5558
</div>
5659
</div>
5760
</div>

‎src/pages/[...lang]/blog/index.astro

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -43,26 +43,24 @@ const currentPosts = sortedPosts.slice(0, config.settings.pagination);
4343
<PageHeader title={postIndex[0].data.title} />
4444
<section class="section">
4545
<div class="container">
46-
<div class="row gx-5">
47-
<!-- blog posts -->
48-
<div class="lg:col-8">
49-
<div class="row">
50-
{
51-
currentPosts.map((post) => (
52-
<div class="mb-14 md:col-6">
53-
<BlogCard data={post} />
54-
</div>
55-
))
56-
}
57-
</div>
58-
<Pagination
59-
section={BLOG_FOLDER}
60-
currentPage={1}
61-
totalPages={totalPages}
62-
/>
63-
</div>
46+
<!-- blog posts -->
47+
<div class="row">
48+
{
49+
currentPosts.map((post) => (
50+
<div class="mb-14 md:col-4">
51+
<BlogCard data={post} />
52+
</div>
53+
))
54+
}
55+
</div>
56+
<Pagination
57+
section={BLOG_FOLDER}
58+
currentPage={1}
59+
totalPages={totalPages}
60+
/>
6461

65-
<!-- sidebar -->
62+
<!-- Categories and Tags -->
63+
<div class="mt-10">
6664
<PostSidebar
6765
categories={categories}
6866
tags={tags}

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -79,26 +79,24 @@ export async function getStaticPaths() {
7979
<PageHeader title={postIndex[0].data.title} />
8080
<section class="section">
8181
<div class="container">
82-
<div class="row gx-5">
83-
<!-- blog posts -->
84-
<div class="lg:col-8">
85-
<div class="row">
86-
{
87-
currentPosts.map((post) => (
88-
<div class="mb-14 md:col-6">
89-
<BlogCard data={post} />
90-
</div>
91-
))
92-
}
93-
</div>
94-
<Pagination
95-
section={BLOG_FOLDER}
96-
currentPage={currentPage}
97-
totalPages={totalPages}
98-
/>
99-
</div>
82+
<!-- blog posts -->
83+
<div class="row">
84+
{
85+
currentPosts.map((post) => (
86+
<div class="mb-14 md:col-4">
87+
<BlogCard data={post} />
88+
</div>
89+
))
90+
}
91+
</div>
92+
<Pagination
93+
section={BLOG_FOLDER}
94+
currentPage={currentPage}
95+
totalPages={totalPages}
96+
/>
10097

101-
<!-- sidebar -->
98+
<!-- Categories and Tags -->
99+
<div class="mt-10">
102100
<PostSidebar
103101
categories={categories}
104102
tags={tags}

0 commit comments

Comments
 (0)