56 lines
2.0 KiB
Plaintext
56 lines
2.0 KiB
Plaintext
|
---
|
||
|
|
import Section from "../components/common/Section.astro";
|
||
|
|
import type { ArticleFrontmatter } from "../lib/types";
|
||
|
|
import {
|
||
|
|
getShortDescription,
|
||
|
|
processArticleDate,
|
||
|
|
generateSourceUrl,
|
||
|
|
} from "../lib/utils";
|
||
|
|
import { GLOBAL } from "../lib/variables";
|
||
|
|
import type { MarkdownLayoutProps } from "astro";
|
||
|
|
import Prose from "../components/Prose.astro";
|
||
|
|
import Layout from "./Layout.astro";
|
||
|
|
|
||
|
|
type Props = MarkdownLayoutProps<ArticleFrontmatter>;
|
||
|
|
|
||
|
|
const { frontmatter } = Astro.props;
|
||
|
|
const shortDescription = getShortDescription(frontmatter.description);
|
||
|
|
const articleDate = processArticleDate(frontmatter.timestamp);
|
||
|
|
const sourceUrl = generateSourceUrl(frontmatter.filename, "blog");
|
||
|
|
---
|
||
|
|
|
||
|
|
<Layout>
|
||
|
|
<Fragment slot="head">
|
||
|
|
<title>{frontmatter.title} • {GLOBAL.username}</title>
|
||
|
|
<meta name="description" content={frontmatter.description} />
|
||
|
|
<meta property="og:title" content={`${frontmatter.title} • ${GLOBAL.username}`} />
|
||
|
|
<meta property="og:description" content={shortDescription} />
|
||
|
|
<meta property="og:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} />
|
||
|
|
<meta property="og:url" content={frontmatter.url} />
|
||
|
|
<meta name="twitter:card" content="summary_large_image" />
|
||
|
|
<meta name="twitter:title" content={`${frontmatter.title} • ${GLOBAL.username}`} />
|
||
|
|
<meta name="twitter:description" content={shortDescription} />
|
||
|
|
<meta name="twitter:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} />
|
||
|
|
<meta http-equiv="content-language" content="en" />
|
||
|
|
<meta name="language" content="English" />
|
||
|
|
<link rel="canonical" href={sourceUrl} />
|
||
|
|
</Fragment>
|
||
|
|
<Section class="pt-8">
|
||
|
|
<div class="flex flex-col gap-4 mt-8 mb-16">
|
||
|
|
<h1
|
||
|
|
class="text-3xl sm:text-4xl leading-normal sm:leading-normal font-display"
|
||
|
|
>
|
||
|
|
{frontmatter.title}
|
||
|
|
</h1>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<span>{articleDate}</span>
|
||
|
|
<span>{frontmatter.time} min</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Prose>
|
||
|
|
<slot />
|
||
|
|
</Prose>
|
||
|
|
<p class="pt-8">~{GLOBAL.username}</p>
|
||
|
|
</Section>
|
||
|
|
</Layout>
|