Create meta tags components
This commit is contained in:
parent
a70e461a94
commit
76066ddae1
@ -1,4 +1,5 @@
|
||||
export type SiteMeta = {
|
||||
description: string,
|
||||
tags: string[]
|
||||
tags: string[],
|
||||
author?: string,
|
||||
};
|
||||
|
@ -1,11 +1,11 @@
|
||||
import { css, Style } from 'hono/css';
|
||||
improt { SiteMeta } from '@blog/model/SiteMeta';
|
||||
import { SiteMeta } from '@blog/model/SiteMeta';
|
||||
|
||||
const logoClass = css`
|
||||
font-size: 16pt;
|
||||
`;
|
||||
|
||||
export function Page({ children, meta }: { children: any, meta: Record<string, any> }) {
|
||||
export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<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();
|
||||
}
|
||||
|
||||
export function parsePostMetadata(post: string): PostMeta {
|
||||
type PostMetaWithRawContent = {
|
||||
meta: PostMeta,
|
||||
content: string
|
||||
};
|
||||
|
||||
export function parsePostMetadata(post: string): PostMetaWithRawContent {
|
||||
const parsedData = yamlFront.loadFront(post);
|
||||
|
||||
return {
|
||||
meta: {
|
||||
title: parsedData.title,
|
||||
description: parsedData.description,
|
||||
date: new Date(parsedData.date),
|
||||
draft: parsedData?.draft || false,
|
||||
tags: parsedData.tags
|
||||
},
|
||||
content: parsedData.__content
|
||||
};
|
||||
}
|
||||
|
||||
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);
|
||||
const contents = await openPostMarkdownFile(filename);
|
||||
const post = parsePostMetadata(contents);
|
||||
const parsedPost = await marked.parse(post.content);
|
||||
|
||||
return {
|
||||
meta: {
|
||||
title: parsedData.title,
|
||||
slug: filename.slice(0, -3),
|
||||
description: parsedData.description,
|
||||
date: new Date(parsedData.date),
|
||||
tags: parsedData.tags,
|
||||
},
|
||||
content: parsedData.__content,
|
||||
meta: post.meta,
|
||||
content: post.content,
|
||||
html: parsedPost
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user