Skip to content

Commit

Permalink
Generalized Pager more so it can be used in taxonomy contexts too
Browse files Browse the repository at this point in the history
  • Loading branch information
brklntmhwk committed Apr 2, 2024
1 parent a1b75ad commit 598c8e1
Show file tree
Hide file tree
Showing 31 changed files with 496 additions and 214 deletions.
1 change: 0 additions & 1 deletion .npmrc

This file was deleted.

3 changes: 2 additions & 1 deletion src/components/BaseHead.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="generator" content={Astro.generator} />

<!-- Font preloads -->
Expand All @@ -40,7 +41,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props
<link rel="canonical" href={canonicalURL} />

<!-- Primary Meta Tags -->
<title>{title}</title>
<title data-pagefind-meta="title">{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

Expand Down
105 changes: 105 additions & 0 deletions src/components/BlogList.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
import type { CollectionEntry } from 'astro:content'
import FormattedDate from '@/components/FormattedDate.astro'
import Svg from '@/components/Svg/index.astro'
type Props = {
entries: CollectionEntry<'blog'>[]
kind: 'blog' | 'taxonomy'
}
const { entries, kind } = Astro.props
---

{
entries.length !== 0 ? (
<ul class="entry-list">
{entries.map((entry) => (
<li>
<article>
<section class="date">
<div>
<Svg iconName="publish" width={20} height={20} />
<FormattedDate date={entry.data.publishedAt} />
</div>
{entry.data.modifiedAt && (
<div>
<Svg iconName="update" width={20} height={20} />
<FormattedDate date={entry.data.modifiedAt} />
</div>
)}
</section>
<a class="blog-title" href={`/blog/${entry.slug}`}>
{entry.data.title}
</a>
<span>{entry.data.description}</span>
{kind === 'blog' && (
<section class="taxonomies">
<a href={`/blog/categories/${entry.data.category}`}>
{entry.data.category}
</a>
<ul class="tag-list">
{entry.data.tags?.map((tag) => (
<li>
<a href={`/blog/tags/${tag}`}>#{tag}</a>
</li>
))}
</ul>
</section>
)}
</article>
</li>
))}
</ul>
) : (
<p>Woops! No entry found..</p>
)
}
<style>
a.blog-title {
font-size: 2rem;
font-weight: bolder;
text-decoration: none;
&:hover {
text-decoration: underline;
text-underline-offset: 7px;
}
}
ul.entry-list {
display: grid;
row-gap: 1.25rem;
padding: 0;
}
ul.entry-list > li {
list-style: none;
/* border: 1px solid black; */
}
ul.entry-list article {
display: grid;
row-gap: 5px;
}
ul.tag-list {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
padding: 0;
}
ul.tag-list > li {
list-style: none;
}
section.date {
display: flex;
column-gap: 10px;
}
section.date > div {
display: flex;
align-items: center;
column-gap: 5px;
}
section.taxonomies {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
text-transform: capitalize;
}
</style>
2 changes: 1 addition & 1 deletion src/components/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
const today = new Date()
---

<footer>
<footer data-pagefind-ignore="all">
&copy; {today.getFullYear()} Your name here. All rights reserved.
<div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank">
Expand Down
9 changes: 3 additions & 6 deletions src/components/Navigation.astro
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
---
// import { getEntry } from 'astro:content'
import NavLink from './NavLink.astro'
import NavLink from '@/components/NavLink.astro'
import Svg from '@/components/Svg/index.astro'
import Search from '@/components/Search.astro'
import Hamburger from '@/components/Hamburger.astro'
// const meta = await getEntry('meta', 'site-data')
---

<nav>
<nav data-pagefind-ignore="all">
<a class="blog-title" href="/"
><Svg iconName="site-logo" width={32} height={32} /></a
>
Expand Down Expand Up @@ -101,7 +98,7 @@ import Hamburger from '@/components/Hamburger.astro'
align-items: start;
position: sticky;
/* top: 0; */
padding: 1.25rem 1.75rem;
padding: 1.75rem 1.75rem;
margin: 0;
width: 18rem;
height: 100vh;
Expand Down
94 changes: 55 additions & 39 deletions src/components/Pager.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { DEFAULT_PAGINATION_WIDTH } from '@/lib/consts'
type Props = {
page?: Page<CollectionEntry<'blog'>>
}
const currentPath = Astro.url.pathname
const { page } = Astro.props
const paginator = (
Expand All @@ -33,47 +35,61 @@ const paginator = (

{
page !== undefined && (
<nav>
{page.url.prev ? (
<div>
<a href={page.url.prev}>
<Svg iconName="left-arrow" width={22} height={22} />
</a>
</div>
) : (
<Svg iconName="left-arrow" width={22} height={22} />
)}
<section class="page-nums">
{paginator(page.currentPage, page.lastPage).map((pg) => {
if (pg === page.currentPage) {
return <li>{pg}</li>
} else {
if (pg === 1) {
return (
<li>
<a href="/blog">{pg}</a>
</li>
)
<>
<nav data-pagefind-ignore="all">
{page.url.prev ? (
<div>
<a href={page.url.prev}>
<Svg iconName="left-arrow" width={22} height={22} />
</a>
</div>
) : (
<Svg iconName="left-arrow" width={22} height={22} />
)}
<section class="page-nums">
{paginator(page.currentPage, page.lastPage).map((pg) => {
if (pg === page.currentPage) {
return <li>{pg}</li>
} else {
return (
<li>
<a href={`/blog/${pg}`}>{pg}</a>
</li>
)
if (pg === 1) {
return (
<li>
<a
href={`/${currentPath.split('/').slice(1, -1).join('/')}`}
>
{pg}
</a>
</li>
)
} else {
return (
<li>
{page.currentPage === 1 ? (
<a href={`${currentPath}/${pg}`}>{pg}</a>
) : (
<a
href={`/${currentPath.split('/').slice(1, -1).join('/')}/${pg}`}
>
{pg}
</a>
)}
</li>
)
}
}
}
})}
</section>
{page.url.next ? (
<div>
<a href={page.url.next}>
<Svg iconName="right-arrow" width={22} height={22} />
</a>
</div>
) : (
<Svg iconName="right-arrow" width={22} height={22} />
)}
</nav>
})}
</section>
{page.url.next ? (
<div>
<a href={page.url.next}>
<Svg iconName="right-arrow" width={22} height={22} />
</a>
</div>
) : (
<Svg iconName="right-arrow" width={22} height={22} />
)}
</nav>
</>
)
}

Expand Down
6 changes: 3 additions & 3 deletions src/content/blog/aaa.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
tags:
- tag1
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Expand Down
6 changes: 3 additions & 3 deletions src/content/blog/bbb.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
tags:
- tag1
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Expand Down
6 changes: 3 additions & 3 deletions src/content/blog/ccc.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
tags:
- tag1
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Expand Down
6 changes: 3 additions & 3 deletions src/content/blog/ddd.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
tags:
- tag1
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Expand Down
6 changes: 3 additions & 3 deletions src/content/blog/eee.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
tags:
- tag1
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Expand Down
6 changes: 2 additions & 4 deletions src/content/blog/fff.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
---
title: Thirdddddddd post
title: Thirddddddddc post
description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
---

Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/first-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-3.jpg
category:
- Experiment
- experiment
type: blog
draft: true
---
Expand Down
6 changes: 2 additions & 4 deletions src/content/blog/ggg.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
---
title: Thirdddddddd post
title: Thirdddddddaaad post
description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
---

Expand Down
4 changes: 1 addition & 3 deletions src/content/blog/hhh.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ description: Lorem ipsum dolor sit amet
publishedAt: Jul 08 2022
heroImage: /blog-placeholder-2.jpg
category:
- Trip
- trip
draft: true
categories:
- Trip
type: blog
---

Expand Down
Loading

0 comments on commit 598c8e1

Please sign in to comment.