Files
portfolio/src/pages/blog/[...page].astro
patrick d21806dfd1
All checks were successful
Generate a build and push to Cloudflare Pages / Build and Deploy to Cloudflare Pages (push) Successful in 1m24s
initial commit
2026-03-25 18:53:21 -04:00

63 lines
2.0 KiB
Plaintext

---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import Search from '../../components/svelte/Search.svelte'
import Pagination from '../../components/svelte/ui/Pagination.svelte'
import Layout from '@/layouts/Layout.astro'
import { getAllPosts } from '@/lib/data-utils'
import type { PaginateFunction } from 'astro'
import { Icon } from 'astro-icon/components'
export async function getStaticPaths({
paginate,
}: {
paginate: PaginateFunction
}) {
const allPosts = await getAllPosts()
return paginate(allPosts, { pageSize: 5 })
}
const { page } = Astro.props
const searchList = await getAllPosts()
const currentUrl = Astro.url;
---
<Layout canonicalUrl={currentUrl}>
<PageHead slot="head" title="Blog" />
<Breadcrumbs
items={[
{ label: 'Blog', href: '/blog', icon: 'lucide:archive' },
{ label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
]}
/>
<section class="max-screen mt-12 px-4 md:px-6">
<div class="flex w-fit items-center gap-2 text-primary">
<Icon class="h-4 w-4 text-secondary-foreground animate-pulse" name="lucide:brain" />
<p class="shimmer word-spacing font-mono text-sm uppercase leading-none text-secondary-foreground">
Quick Thoughts
</p>
</div>
<h2
id="skills-title"
class="font-custom text-foreground text-4xl font-bold mt-2"
>
Blog
</h2>
<p class="text-muted-foreground text-md max-w-2xl mt-3">
Welcome to my blog! Here, I share AI generated content, tutorials, and insights on various topics. I hope you find the information helpful and engaging. If you have any questions or suggestions, feel free to reach out!
</p>
<div class="flex min-h-[calc(100vh-18rem)] flex-col gap-y-8 my-12">
<Search client:load searchList={searchList} initialPosts={page.data} />
</div>
<Pagination
currentPage={page.currentPage}
totalPages={page.lastPage}
baseUrl="/blog/"
client:load
/>
</section>
</Layout>