67 lines
2.7 KiB
Plaintext
67 lines
2.7 KiB
Plaintext
---
|
|
import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
|
|
import FeatureImage from "./FeatureImage.astro";
|
|
import AuthorList from "./AuthorList.astro";
|
|
import { formatDate } from "utils";
|
|
export type Props = {
|
|
posts: Post[];
|
|
settings: Settings;
|
|
};
|
|
const { posts, settings } = Astro.props as Props;
|
|
|
|
const latestFeatured = posts[0]
|
|
---
|
|
{latestFeatured && (
|
|
<main
|
|
class="grid place-items-center pt-16 pb-8 md:pt-12 md:pb-24">
|
|
{latestFeatured.feature_image && (
|
|
<FeatureImage
|
|
image={latestFeatured.feature_image}
|
|
alt={latestFeatured.feature_image_alt ? latestFeatured.feature_image_alt : latestFeatured.title}
|
|
caption={latestFeatured.feature_image_caption || "" }
|
|
settings={settings}
|
|
transitionName={`img-${latestFeatured.title}`}
|
|
/>
|
|
)}
|
|
<div>
|
|
{latestFeatured.primary_tag && (
|
|
<section class="text-ctp-lavender">
|
|
<a href={`/tag/${latestFeatured.primary_tag.slug}`}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tag inline" viewBox="0 0 16 16">
|
|
<path d="M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0"/>
|
|
<path d="M2 1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2a1 1 0 0 1 1-1m0 5.586 7 7L13.586 9l-7-7H2z"/>
|
|
</svg> {latestFeatured.primary_tag.name}</a>
|
|
</section>
|
|
)}
|
|
<h2
|
|
class="text-ctp-red text-4xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter">
|
|
{latestFeatured && latestFeatured.title}
|
|
</h2>
|
|
<div class="flex justify-between ml-5">
|
|
<section class="flex flex-grow align-middle">
|
|
<AuthorList post={latestFeatured} settings={settings} />
|
|
<div class="text-ctp-overlay2">
|
|
{ latestFeatured.primary_author && (
|
|
<h4 class="text-ctp-teal">
|
|
{latestFeatured.primary_author.name}
|
|
</h4>
|
|
)}
|
|
<div class="text-ctp-overlay2">
|
|
<time class="text-ctp-sapphire" datetime={formatDate(latestFeatured.published_at?latestFeatured.published_at:latestFeatured.created_at)}
|
|
>{formatDate(latestFeatured.published_at?latestFeatured.published_at:latestFeatured.created_at)}
|
|
</time>
|
|
<span class="text-ctp-peach"
|
|
><span class="text-ctp-overlay2">•</span>
|
|
{latestFeatured.reading_time} min read
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="divider my-4"/>
|
|
<section id="ghostimport" class="text-ctp-subtext1">
|
|
{latestFeatured && <Fragment set:html={latestFeatured.html} />}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)}
|