yarnom
f0b50d13ea
Add Go/Postgres admin APIs, Angular admin UI, manual build flow, asset uploads, markdown import/export, configurable slug generation, and the Yar reading theme. Exclude local docs and generated development artifacts from version control.
130 lines
2.5 KiB
Text
130 lines
2.5 KiB
Text
---
|
|
import SiteNav from './SiteNav.astro';
|
|
import { site } from '../lib/siteConfig';
|
|
import { tagSlug } from '../lib/posts';
|
|
|
|
type Props = {
|
|
post: any;
|
|
};
|
|
|
|
const { post } = Astro.props;
|
|
const { Content } = post;
|
|
const title = post.frontmatter.title;
|
|
const date = post.frontmatter.created_at ?? post.frontmatter.published_at ?? post.frontmatter.updated_at;
|
|
---
|
|
|
|
<main class="page article-page">
|
|
<SiteNav />
|
|
|
|
<article class="article">
|
|
<header>
|
|
<h1>{title}</h1>
|
|
{date && (
|
|
<time datetime={date}>
|
|
{new Date(date).toLocaleDateString(site.language)}
|
|
</time>
|
|
)}
|
|
{post.frontmatter.summary && <p class="summary">{post.frontmatter.summary}</p>}
|
|
{post.frontmatter.tags?.length > 0 && (
|
|
<ul class="tags article-tags" aria-label="Tags">
|
|
{post.frontmatter.tags.map((tag) => (
|
|
<li>
|
|
<a href={`/tags/${tagSlug(tag)}/`}>{tag}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</header>
|
|
|
|
<Content />
|
|
</article>
|
|
</main>
|
|
|
|
<style>
|
|
.page {
|
|
width: min(860px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 56px 0 80px;
|
|
color: #20201d;
|
|
font-family:
|
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
sans-serif;
|
|
}
|
|
|
|
.page :global(.site-nav) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 18px;
|
|
margin-bottom: 36px;
|
|
color: #625a50;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.page :global(.site-nav a),
|
|
.tags a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page :global(.site-nav a:hover) {
|
|
text-decoration: underline;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
.article {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.article header {
|
|
border-bottom: 1px solid #d8d1c3;
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.article h1 {
|
|
margin: 0 0 16px;
|
|
font-size: clamp(2.1rem, 7vw, 4rem);
|
|
}
|
|
|
|
.summary {
|
|
color: #5b554d;
|
|
}
|
|
|
|
time {
|
|
color: #7a7268;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 0;
|
|
margin: 16px 0 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tags li {
|
|
border: 1px solid #d0c8bb;
|
|
border-radius: 999px;
|
|
color: #5f584d;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.tags a {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.article :global(pre) {
|
|
overflow-x: auto;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
background: #272822;
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.article :global(code) {
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
}
|
|
</style>
|