a/andyscott-dot-me
1
0
Fork 0
mirror of https://codeberg.org/andyscott-pages/andyscott-dot-me.git synced 2024-09-19 11:08:05 -04:00
Code Issues Projects Releases Packages Wiki Activity

creating pagination in blog

Browse source
This commit is contained in:
Manuel Ernesto Garcia 2022-09-23 15:36:19 -04:00
parent 8529099a2e
commit 359928d136
4 changed files with 42 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/HorizontalCard.astro
View file

@ -1,9 +1,11 @@
---
const { title, img, desc, url, badge, tags } = Astro.props;
const { title, img, desc, url, badge, tags, target } = Astro.props;
let cardTarget = target ? target : "_blank";
---
<div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
<a href={url} target="_blank">
<a href={url} target={cardTarget}>
<div class="hero-content flex-col md:flex-row">
<img src={img} class="max-w-full md:max-w-[13rem] rounded-lg" />
<div class="grow">

2
src/components/SideBar.astro
View file

@ -12,7 +12,7 @@
<!-- Sidebar content here -->
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blog/1">Blog</a></li>
<li><a href="/cv">CV</a></li>
<li><a>Support my Work</a></li>
<li><a>Contact</a></li>

57
src/pages/blog.astro
View file

@ -1,57 +0,0 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
// Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
(a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
);
---
<!DOCTYPE html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
ul {
list-style-type: none;
padding: unset;
}
ul li {
display: flex;
}
ul li time {
flex: 0 0 130px;
font-style: italic;
color: #888;
}
ul li a:visited {
color: #8e32dc;
}
</style>
</head>
<body>
<Header />
<main>
<section>
<ul>
{posts.map((post) => (
<li>
<time datetime={post.frontmatter.pubDate}>
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</time>
<a href={post.url}>{post.frontmatter.title}</a>
</li>
))}
</ul>
</section>
</main>
<Footer />
</body>
</html>

37
src/pages/blog/[page].astro Normal file
View file

@ -0,0 +1,37 @@
---
import PageLayout from "../../layouts/Page.astro";
import HorizontalCard from "../../components/HorizontalCard.astro";
export async function getStaticPaths({ paginate }) {
const posts = (await Astro.glob("./*.{md,mdx}")).sort(
(a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
);
return paginate(posts, { pageSize: 10 });
}
const { page } = Astro.props;
---
<PageLayout>
<ul>
<!--List the array of astronaut info-->
{page.data.map(( post ) => (
<HorizontalCard
title={post.frontmatter.title}
img={post.frontmatter.heroImage}
desc={post.frontmatter.description}
url={post.url}
target="_self"
/>
<div class="divider my-0"></div>
))}
</ul>
<div class="flex justify-between">
{page.url.prev ? <a href={page.url.prev} class="btn btn-ghost my-10 mx-5" > <svg class="h-6 w-6 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg> Previous page</a> : <div></div>}
{page.url.next ? <a href={page.url.next} class="btn btn-ghost my-10 mx-5">Next <svg class="h-6 w-6 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg></a> : <div></div>}
</div>
</PageLayout>