Updated no posts behaviour

This commit is contained in:
srleom
2024-03-20 10:47:12 +08:00
parent 63ece67478
commit 0a6f8ab699
3 changed files with 86 additions and 74 deletions

View File

@ -64,15 +64,20 @@ const paginationProps = {
</Button> </Button>
<h1 class='mb-6 mt-5 text-2xl font-bold'>Blog</h1> <h1 class='mb-6 mt-5 text-2xl font-bold'>Blog</h1>
{page.data.length === 0 && <p>No posts yet.</p>}
{
page.data.length > 0 && (
<div class='grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8'> <div class='grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8'>
<section aria-label='Blog posts list'> <section aria-label='Blog posts list'>
<ul class='flex flex-col gap-y-4 text-start'> <ul class='flex flex-col gap-y-4 text-start'>
{page.data.map((p) => <PostPreview post={p} withDesc />)} {page.data.map((p) => (
<PostPreview post={p} withDesc />
))}
</ul> </ul>
<Pagination {...paginationProps} /> <Pagination {...paginationProps} />
</section> </section>
{ {!!uniqueTags.length && (
!!uniqueTags.length && (
<aside> <aside>
<h2 class='mb-4 flex items-center text-lg font-semibold'> <h2 class='mb-4 flex items-center text-lg font-semibold'>
<svg <svg
@ -106,9 +111,11 @@ const paginationProps = {
</a> </a>
</span> </span>
</aside> </aside>
)}
</div>
) )
} }
</div>
<a <a
href='https://github.com/srleom/astro-theme-resume.git' href='https://github.com/srleom/astro-theme-resume.git'
class='mt-16 inline-flex flex-row items-center gap-x-3 rounded-3xl border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md' class='mt-16 inline-flex flex-row items-center gap-x-3 rounded-3xl border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'

View File

@ -93,18 +93,19 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
consectetur adipisicing elit. Alias quia, doloribus ut beatae perspiciatis voluptatibus. consectetur adipisicing elit. Alias quia, doloribus ut beatae perspiciatis voluptatibus.
</p> </p>
</Section> </Section>
{
allPostsByDate.length > 0 && (
<Section title='Posts'> <Section title='Posts'>
<ul class='flex flex-col gap-y-2'> <ul class='flex flex-col gap-y-2'>
{ {allPostsByDate.map((p) => (
allPostsByDate.map((p) => (
<li class='flex flex-col gap-x-2 sm:flex-row'> <li class='flex flex-col gap-x-2 sm:flex-row'>
<PostPreview post={p} /> <PostPreview post={p} />
</li> </li>
)) ))}
}
</ul> </ul>
</Section> </Section>
)
}
<Section title='Experience'> <Section title='Experience'>
<Card <Card

View File

@ -31,10 +31,12 @@ const meta = {
</Button> </Button>
<h1 class='mb-6 mt-5 text-2xl font-bold'>Tags</h1> <h1 class='mb-6 mt-5 text-2xl font-bold'>Tags</h1>
{allTags.length === 0 && <p>No posts yet.</p>}
<ul class='flex flex-col gap-y-3'>
{ {
allTags.map(([tag, val]) => ( allTags.length > 0 && (
<ul class='flex flex-col gap-y-3'>
{allTags.map(([tag, val]) => (
<li class='flex items-center gap-x-2 '> <li class='flex items-center gap-x-2 '>
<a <a
class='inline-block underline underline-offset-4 hover:text-foreground/75' class='inline-block underline underline-offset-4 hover:text-foreground/75'
@ -48,9 +50,11 @@ const meta = {
- {val} post{val > 1 && 's'} - {val} post{val > 1 && 's'}
</span> </span>
</li> </li>
)) ))}
}
</ul> </ul>
)
}
<a <a
href='https://github.com/srleom/astro-theme-resume.git' href='https://github.com/srleom/astro-theme-resume.git'
class='mt-16 inline-flex flex-row items-center gap-x-3 rounded-3xl border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md' class='mt-16 inline-flex flex-row items-center gap-x-3 rounded-3xl border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'