58 lines
1.6 KiB
Text
58 lines
1.6 KiB
Text
---
|
|
import Datetime from "./Datetime.astro";
|
|
import { Card, Heading } from "react-bulma-components";
|
|
import { slugifyStr } from '../utils/slugify.js';
|
|
import { SITE } from '../config.js';
|
|
import Tag from "./Tag.astro";
|
|
|
|
interface Frontmatter {
|
|
title: string;
|
|
pubDatetime: Date | string;
|
|
modDatetime?: Date | null | string;
|
|
description: string;
|
|
ogImage?: string | object;
|
|
tags: string[];
|
|
}
|
|
|
|
export interface Props {
|
|
href?: string;
|
|
frontmatter: Frontmatter;
|
|
secHeading?: boolean;
|
|
}
|
|
|
|
const { href, frontmatter } = Astro.props;
|
|
|
|
function getOgImageUrl(frontmatter: Frontmatter): string {
|
|
if (typeof frontmatter.ogImage === 'string') {
|
|
return frontmatter.ogImage !== ''
|
|
? frontmatter.ogImage
|
|
: SITE.ogImage;
|
|
}
|
|
if (typeof frontmatter.ogImage === 'object' && 'src' in frontmatter.ogImage) {
|
|
return (frontmatter.ogImage as { src: string }).src;
|
|
}
|
|
return SITE.ogImage;
|
|
}
|
|
|
|
---
|
|
|
|
<a href={href}>
|
|
<Card className={"view-transition-" + slugifyStr(frontmatter.title) + " mb-3" } >
|
|
<div class="card-image">
|
|
<figure class="image">
|
|
<img
|
|
src={getOgImageUrl(frontmatter)}
|
|
alt="Article image preview"
|
|
onerror='this.onerror = null; this.src="./og.webp"'
|
|
fetchpriority="low"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<Card.Content>
|
|
<Heading size={3}>{frontmatter.title}</Heading>
|
|
{frontmatter.tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
|
|
<Datetime pubDatetime={frontmatter.pubDatetime} modDatetime={frontmatter.modDatetime} className="mb-1" />
|
|
<p>{frontmatter.description}</p>
|
|
</Card.Content>
|
|
</Card>
|
|
</a>
|