Create meta tags components
This commit is contained in:
parent
a70e461a94
commit
76066ddae1
@ -1,4 +1,5 @@
|
|||||||
export type SiteMeta = {
|
export type SiteMeta = {
|
||||||
description: string,
|
description: string,
|
||||||
tags: string[]
|
tags: string[],
|
||||||
|
author?: string,
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
34
src/templates/components/MetaTags.tsx
Normal file
34
src/templates/components/MetaTags.tsx
Normal 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} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -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 {
|
|
||||||
title: parsedData.title,
|
|
||||||
description: parsedData.description,
|
|
||||||
date: new Date(parsedData.date),
|
|
||||||
draft: parsedData?.draft || false,
|
|
||||||
tags: parsedData.tags
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function readPostMarkdown(filename: string): Promise<Post> {
|
|
||||||
const file = Bun.file(filename);
|
|
||||||
const contents = await file.text();
|
|
||||||
|
|
||||||
const parsedData = yamlFront.loadFront(contents);
|
|
||||||
const parsedPost = await marked.parse(parsedData.__content);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
meta: {
|
meta: {
|
||||||
title: parsedData.title,
|
title: parsedData.title,
|
||||||
slug: filename.slice(0, -3),
|
|
||||||
description: parsedData.description,
|
description: parsedData.description,
|
||||||
date: new Date(parsedData.date),
|
date: new Date(parsedData.date),
|
||||||
tags: parsedData.tags,
|
draft: parsedData?.draft || false,
|
||||||
|
tags: parsedData.tags
|
||||||
},
|
},
|
||||||
content: parsedData.__content,
|
content: parsedData.__content
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function readPostMarkdown(filename: string): Promise<Post> {
|
||||||
|
const contents = await openPostMarkdownFile(filename);
|
||||||
|
const post = parsePostMetadata(contents);
|
||||||
|
const parsedPost = await marked.parse(post.content);
|
||||||
|
|
||||||
|
return {
|
||||||
|
meta: post.meta,
|
||||||
|
content: post.content,
|
||||||
html: parsedPost
|
html: parsedPost
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user