73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
|
---
|
||
|
|
import { getShortDescription, generateSourceUrl } from "../lib/utils";
|
||
|
|
import type { ProjectFrontmatter } from "../lib/types";
|
||
|
|
import type { MarkdownLayoutProps } from "astro";
|
||
|
|
import Prose from "../components/Prose.astro";
|
||
|
|
import Layout from "./Layout.astro";
|
||
|
|
import Section from "../components/common/Section.astro";
|
||
|
|
import Anchor from "../components/common/Anchor.astro";
|
||
|
|
import { GLOBAL } from "../lib/variables";
|
||
|
|
|
||
|
|
|
||
|
|
type Props = MarkdownLayoutProps<ProjectFrontmatter>;
|
||
|
|
|
||
|
|
const { frontmatter } = Astro.props;
|
||
|
|
const shortDescription = getShortDescription(frontmatter.description);
|
||
|
|
const sourceUrl = generateSourceUrl(frontmatter.filename, "projects");
|
||
|
|
---
|
||
|
|
|
||
|
|
<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="mt-8">
|
||
|
|
<div class="flex flex-col gap-4 mt-8 mb-16">
|
||
|
|
<h1 class="text-3xl sm:text-4xl leading-tight font-display">
|
||
|
|
{frontmatter.title}
|
||
|
|
</h1>
|
||
|
|
<div class="flex text-sm gap-2">
|
||
|
|
{
|
||
|
|
frontmatter.tags
|
||
|
|
? frontmatter.tags.map((tag) => (
|
||
|
|
<span class="-zag-text -zag-bg zag-transition font-semibold py-1 px-2">
|
||
|
|
{tag}
|
||
|
|
</span>
|
||
|
|
))
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-2">
|
||
|
|
{
|
||
|
|
frontmatter.githubUrl ? (
|
||
|
|
<Anchor url={frontmatter.githubUrl} class="text-base" external>
|
||
|
|
GitHub
|
||
|
|
</Anchor>
|
||
|
|
) : null
|
||
|
|
}
|
||
|
|
{
|
||
|
|
frontmatter.liveUrl ? (
|
||
|
|
<Anchor url={frontmatter.liveUrl} class="text-base" external>
|
||
|
|
Live
|
||
|
|
</Anchor>
|
||
|
|
) : null
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Prose>
|
||
|
|
<slot />
|
||
|
|
</Prose>
|
||
|
|
</Section>
|
||
|
|
</Layout>
|