mirror of
https://codeberg.org/andyscott-pages/andyscott-dot-me.git
synced 2024-12-22 09:43:11 -05:00
creating pagination in blog
This commit is contained in:
Manuel Ernesto Garcia
parent
8529099a2e
commit
359928d136
4 changed files with 42 additions and 60 deletions
|
|
@ -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%]">
|
<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">
|
<div class="hero-content flex-col md:flex-row">
|
||||||
<img src={img} class="max-w-full md:max-w-[13rem] rounded-lg" />
|
<img src={img} class="max-w-full md:max-w-[13rem] rounded-lg" />
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<!-- Sidebar content here -->
|
<!-- Sidebar content here -->
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="/projects">Projects</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 href="/cv">CV</a></li>
|
||||||
<li><a>Support my Work</a></li>
|
<li><a>Support my Work</a></li>
|
||||||
<li><a>Contact</a></li>
|
<li><a>Contact</a></li>
|
||||||
|
|
|
||||||
|
|
@ -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
37
src/pages/blog/[page].astro
Normal 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>
|
||||||
Loading…
Reference in a new issue