148 lines
3.1 KiB
Plaintext
148 lines
3.1 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
|
|
import ContactCTA from '../../components/ContactCTA.astro';
|
|
import Hero from '../../components/Hero.astro';
|
|
import Icon from '../../components/Icon.astro';
|
|
import Pill from '../../components/Pill.astro';
|
|
|
|
import directus, { directus_url } from "../../../lib/directus";
|
|
import { readItems } from "@directus/sdk";
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await directus.request(readItems("posts", {
|
|
fields: ['*'],
|
|
}));
|
|
return posts.map((post) => ({ params: { slug: post.slug }, props: post }));
|
|
}
|
|
|
|
const post = Astro.props;
|
|
const published_date: string = new Date(post.published_date).toLocaleDateString();
|
|
---
|
|
|
|
<BaseLayout title={post.title}>
|
|
<div class="stack gap-20">
|
|
<div class="stack gap-15">
|
|
<header>
|
|
<div class="wrapper stack gap-2">
|
|
<a class="back-link" href="/projects/"><Icon icon="arrow-left" /> Projects</a>
|
|
<Hero
|
|
title={post.title}
|
|
tagline=`Published on ${published_date}`
|
|
align="start"
|
|
>
|
|
<div class="details">
|
|
<div class="tags">
|
|
{post.tags.map((t) => <Pill>{t}</Pill>)}
|
|
</div>
|
|
</div>
|
|
</Hero>
|
|
</div>
|
|
</header>
|
|
<main class="wrapper">
|
|
<div class="stack gap-10 content">
|
|
{post.image && <img src={`${directus_url}/assets/${post.image}?width=500`} alt={post.image_alt || ''} />}
|
|
<div class="content">
|
|
<div set:html={post.content} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<ContactCTA />
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
header {
|
|
padding-bottom: 2.5rem;
|
|
border-bottom: 1px solid var(--gray-800);
|
|
}
|
|
|
|
.back-link {
|
|
display: none;
|
|
}
|
|
|
|
.details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5rem;
|
|
gap: 1.5rem;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: var(--text-lg);
|
|
max-width: 54ch;
|
|
}
|
|
|
|
.content {
|
|
max-width: 65ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.content > :global(* + *) {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.content :global(h1),
|
|
.content :global(h2),
|
|
.content :global(h3),
|
|
.content :global(h4),
|
|
.content :global(h5) {
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.content :global(img) {
|
|
border-radius: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
background: var(--gradient-subtle);
|
|
border: 1px solid var(--gray-800);
|
|
}
|
|
|
|
.content :global(blockquote) {
|
|
font-size: var(--text-lg);
|
|
font-family: var(--font-brand);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
padding-inline-start: 1.5rem;
|
|
border-inline-start: 0.25rem solid var(--accent-dark);
|
|
color: var(--gray-0);
|
|
}
|
|
|
|
.back-link,
|
|
.content :global(a) {
|
|
text-decoration: 1px solid underline transparent;
|
|
text-underline-offset: 0.25em;
|
|
transition: text-decoration-color var(--theme-transition);
|
|
}
|
|
|
|
.back-link:hover,
|
|
.back-link:focus,
|
|
.content :global(a:hover),
|
|
.content :global(a:focus) {
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.back-link {
|
|
display: block;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.details {
|
|
flex-direction: row;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.content :global(blockquote) {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
}
|
|
</style>
|