Rewrite

src/components/BlogCard.astro

@@ -0,0 +1,58 @@
+---
+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>