mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add astro props

Browse Source
This commit is contained in:
prototypa
2023-01-21 22:29:32 -05:00
parent 3933c63b68
commit dcb9350037
1 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/blog/LatestPosts.astro
View File

@ -4,27 +4,50 @@ import Grid from '~/components/blog/Grid.astro';
import { getBlogPermalink } from '~/utils/permalinks';
import { findLatestPosts } from '~/utils/blog';
const count = 4;
export interface Props {
title?: string;
allPostsText?: string;
allPostsLink?: string | URL;
information?: string;
postIds: string[];
}
const {
title = await Astro.slots.render('title'),
allPostsText = 'View all posts',
allPostsLink = getBlogPermalink(),
information = await Astro.slots.render('information'),
count = 4,
} = Astro.props;
const posts = await findLatestPosts({ count });
---
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
<span class="inline-block mb-1 sm:mb-4"
>Latest articles<br class="hidden md:block" /> in our <a
class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={getBlogPermalink()}>Blog</a
>
</span>
</h2>
<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
<div class="flex flex-col lg:justify-between lg:flex-row mb-8">
<div class="md:max-w-sm">
{
title && (
<h2
class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
set:html={title}
/>
)
}
{
allPostsText && allPostsLink && (
<a
class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
href={allPostsLink}
>
{allPostsText} »
</a>
)
}
</div>
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
very soon. Astro is a very interesting technology. Thanks.
</p>
{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
</div>
<Grid posts={posts} />
</section>
</section>