mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-17 16:01:22 +08:00
Updated no posts behaviour
This commit is contained in:
srleom
@ -64,51 +64,58 @@ 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>
|
||||||
<div class='grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8'>
|
{page.data.length === 0 && <p>No posts yet.</p>}
|
||||||
<section aria-label='Blog posts list'>
|
|
||||||
<ul class='flex flex-col gap-y-4 text-start'>
|
{
|
||||||
{page.data.map((p) => <PostPreview post={p} withDesc />)}
|
page.data.length > 0 && (
|
||||||
</ul>
|
<div class='grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8'>
|
||||||
<Pagination {...paginationProps} />
|
<section aria-label='Blog posts list'>
|
||||||
</section>
|
<ul class='flex flex-col gap-y-4 text-start'>
|
||||||
{
|
{page.data.map((p) => (
|
||||||
!!uniqueTags.length && (
|
<PostPreview post={p} withDesc />
|
||||||
<aside>
|
|
||||||
<h2 class='mb-4 flex items-center text-lg font-semibold'>
|
|
||||||
<svg
|
|
||||||
aria-hidden='true'
|
|
||||||
class='h-6 w-6'
|
|
||||||
fill='none'
|
|
||||||
stroke='currentColor'
|
|
||||||
stroke-linecap='round'
|
|
||||||
stroke-linejoin='round'
|
|
||||||
stroke-width='1.5'
|
|
||||||
viewBox='0 0 24 24'
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
>
|
|
||||||
<path d='M0 0h24v24H0z' fill='none' stroke='none' />
|
|
||||||
<path d='M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z' />
|
|
||||||
<path d='M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116' />
|
|
||||||
<path d='M6 9h-.01' />
|
|
||||||
</svg>
|
|
||||||
Tags
|
|
||||||
</h2>
|
|
||||||
<ul class='text-bgColor flex flex-wrap gap-2'>
|
|
||||||
{uniqueTags.map((tag) => (
|
|
||||||
<li>
|
|
||||||
<Button title={tag} href={`/tags/${tag}/`} style='pill' />
|
|
||||||
</li>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<span class='mt-4 block sm:text-end'>
|
<Pagination {...paginationProps} />
|
||||||
<a aria-label='View all blog categories' class='' href='/tags/' data-astro-prefetch>
|
</section>
|
||||||
View all →
|
{!!uniqueTags.length && (
|
||||||
</a>
|
<aside>
|
||||||
</span>
|
<h2 class='mb-4 flex items-center text-lg font-semibold'>
|
||||||
</aside>
|
<svg
|
||||||
)
|
aria-hidden='true'
|
||||||
}
|
class='h-6 w-6'
|
||||||
</div>
|
fill='none'
|
||||||
|
stroke='currentColor'
|
||||||
|
stroke-linecap='round'
|
||||||
|
stroke-linejoin='round'
|
||||||
|
stroke-width='1.5'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
>
|
||||||
|
<path d='M0 0h24v24H0z' fill='none' stroke='none' />
|
||||||
|
<path d='M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z' />
|
||||||
|
<path d='M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116' />
|
||||||
|
<path d='M6 9h-.01' />
|
||||||
|
</svg>
|
||||||
|
Tags
|
||||||
|
</h2>
|
||||||
|
<ul class='text-bgColor flex flex-wrap gap-2'>
|
||||||
|
{uniqueTags.map((tag) => (
|
||||||
|
<li>
|
||||||
|
<Button title={tag} href={`/tags/${tag}/`} style='pill' />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<span class='mt-4 block sm:text-end'>
|
||||||
|
<a aria-label='View all blog categories' class='' href='/tags/' data-astro-prefetch>
|
||||||
|
View all →
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</aside>
|
||||||
|
)}
|
||||||
|
</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'
|
||||||
|
|||||||
@ -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>
|
||||||
|
{
|
||||||
<Section title='Posts'>
|
allPostsByDate.length > 0 && (
|
||||||
<ul class='flex flex-col gap-y-2'>
|
<Section title='Posts'>
|
||||||
{
|
<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
|
||||||
|
|||||||
@ -31,26 +31,30 @@ 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>}
|
||||||
|
|
||||||
|
{
|
||||||
|
allTags.length > 0 && (
|
||||||
|
<ul class='flex flex-col gap-y-3'>
|
||||||
|
{allTags.map(([tag, val]) => (
|
||||||
|
<li class='flex items-center gap-x-2 '>
|
||||||
|
<a
|
||||||
|
class='inline-block underline underline-offset-4 hover:text-foreground/75'
|
||||||
|
data-astro-prefetch
|
||||||
|
href={`/tags/${tag}/`}
|
||||||
|
title={`View posts with the tag: ${tag}`}
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</a>
|
||||||
|
<span class='inline-block'>
|
||||||
|
- {val} post{val > 1 && 's'}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
<ul class='flex flex-col gap-y-3'>
|
|
||||||
{
|
|
||||||
allTags.map(([tag, val]) => (
|
|
||||||
<li class='flex items-center gap-x-2 '>
|
|
||||||
<a
|
|
||||||
class='inline-block underline underline-offset-4 hover:text-foreground/75'
|
|
||||||
data-astro-prefetch
|
|
||||||
href={`/tags/${tag}/`}
|
|
||||||
title={`View posts with the tag: ${tag}`}
|
|
||||||
>
|
|
||||||
#{tag}
|
|
||||||
</a>
|
|
||||||
<span class='inline-block'>
|
|
||||||
- {val} post{val > 1 && 's'}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</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'
|
||||||
|
|||||||
Reference in New Issue
Block a user