Create meta tags components

This commit is contained in:
Dave Smith-Hayes 2024-07-03 21:30:11 -04:00
parent a70e461a94
commit 76066ddae1
4 changed files with 58 additions and 23 deletions

View File

@ -1,4 +1,5 @@
export type SiteMeta = { export type SiteMeta = {
description: string, description: string,
tags: string[] tags: string[],
author?: string,
}; };

View File

@ -1,11 +1,11 @@
import { css, Style } from 'hono/css'; import { css, Style } from 'hono/css';
improt { SiteMeta } from '@blog/model/SiteMeta'; import { SiteMeta } from '@blog/model/SiteMeta';
const logoClass = css` const logoClass = css`
font-size: 16pt; font-size: 16pt;
`; `;
export function Page({ children, meta }: { children: any, meta: Record<string, any> }) { export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>

View File

@ -0,0 +1,34 @@
import { SiteMeta } from '@blog/model/SiteMeta';
export function Description({ meta }: { meta: SiteMeta }) {
if (!meta.description) {
return null;
}
return (<meta name="description" content={meta.description} />);
}
export function Tags({ meta }: { meta: SiteMeta }) {
if (!meta.tags) {
return null;
}
return (<meta name="keywords" content={meta.tags.join(', ')} />);
}
export function Author({ meta }: { meta: SiteMeta }) {
if (!meta.author) {
return null;
}
return (<meta name="author" content={meta.author} />);
}
export function MetaTags(meta: SiteMeta) {
return (
<>
<Description meta={meta} />
<Tags meta={meta} />
</>
)
}

View File

@ -8,34 +8,34 @@ export async function openPostMarkdownFile(filename: string): Promise<string> {
return file.text(); return file.text();
} }
export function parsePostMetadata(post: string): PostMeta { type PostMetaWithRawContent = {
meta: PostMeta,
content: string
};
export function parsePostMetadata(post: string): PostMetaWithRawContent {
const parsedData = yamlFront.loadFront(post); const parsedData = yamlFront.loadFront(post);
return { return {
meta: {
title: parsedData.title, title: parsedData.title,
description: parsedData.description, description: parsedData.description,
date: new Date(parsedData.date), date: new Date(parsedData.date),
draft: parsedData?.draft || false, draft: parsedData?.draft || false,
tags: parsedData.tags tags: parsedData.tags
},
content: parsedData.__content
}; };
} }
export async function readPostMarkdown(filename: string): Promise<Post> { export async function readPostMarkdown(filename: string): Promise<Post> {
const file = Bun.file(filename); const contents = await openPostMarkdownFile(filename);
const contents = await file.text(); const post = parsePostMetadata(contents);
const parsedPost = await marked.parse(post.content);
const parsedData = yamlFront.loadFront(contents);
const parsedPost = await marked.parse(parsedData.__content);
return { return {
meta: { meta: post.meta,
title: parsedData.title, content: post.content,
slug: filename.slice(0, -3),
description: parsedData.description,
date: new Date(parsedData.date),
tags: parsedData.tags,
},
content: parsedData.__content,
html: parsedPost html: parsedPost
}; };
} }