flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
1.5 kB
48 lines
1---
2import { BASE, SHOW_IMAGES } from "../config.ts";
3import FormattedDate from "./FormattedDate.astro";
4import Tag from "./Tag.astro";
5import HeroImage from "./HeroImage.astro";
6
7const { title, description, pubDate, slug, heroImage, tags, noImage } =
8 Astro.props;
9---
10
11<article
12 class={"relative isolate flex flex-col gap-8 lg:flex-row group mt-8" +
13 (noImage || !SHOW_IMAGES || !heroImage ? "" : " lg:grid lg:grid-cols-2")}
14>
15 {
16 noImage || !SHOW_IMAGES || !heroImage ? null : (
17 <div class="relative aspect-[16/9] lg:w-full lg:shrink-0">
18 <HeroImage image={heroImage} />
19 </div>
20 )
21 }
22 <div class="h-full flex flex-col justify-center">
23 <div class="flex items-center gap-x-4 text-xs">
24 <time datetime="2020-03-16" class="text-base-500">
25 <FormattedDate date={pubDate} />
26 </time>
27 {tags?.map((tag: string) => <Tag {tag} />)}
28 </div>
29 <div class="max-w-xl">
30 <div
31 class="mt-3 text-xl md:text-2xl font-bold leading-6 text-base-900 dark:text-base-50"
32 >
33 <a href={BASE + `/posts/${slug}/`}>
34 <span class="absolute inset-0"></span>
35 {title}
36 </a>
37
38 <div
39 class="absolute -inset-2 md:-inset-4 rounded-2xl opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 bg-base-200/20 dark:bg-base-800/20 -z-10 transition-all duration-150"
40 >
41 </div>
42 </div>
43 <p class="mt-5 text-sm leading-6 text-base-600 dark:text-base-400">
44 {description}
45 </p>
46 </div>
47 </div>
48</article>