dsh/blog
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Start fleshing out how the site will actually function.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-07-03 20:18:40 -04:00
parent aafdaddc95
commit 79a0bf0f18
10 changed files with 75 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/index.tsx
View File

@ -1,11 +1,8 @@
import { Hono } from 'hono'; import { Hono } from 'hono';
import { jsxRenderer, useRequestContext } from 'hono/jsx-renderer'; import { jsxRenderer, useRequestContext } from 'hono/jsx-renderer';
import { Page } from '@blog/templates/Page'; import { Page } from '@blog/templates/Page';
import { Home } from '@blog/templates/Pages/Home'; import { renderHomePage } from '@blog/routes/home';
import { FourOhFour } from '@blog/templates/Pages/FourOhFour'; import { renderPostPage } from '@blog/routes/post';
import { Post } from '@blog/templates/Pages/Post';
import { readdir } from 'node:fs/promises';
import { readPostMarkdown } from '@blog/util/readPostMarkdown';
const app = new Hono(); const app = new Hono();
@ -25,24 +22,11 @@ app.get(
// create listing of posts // create listing of posts
app.get('/', async (c) => { app.get('/', async (c) => {
const files = await readdir('../posts', { recursive: true }); return renderHomePage(c);
const posts = files.filter(f => f === '.' || f === '..');
return c.render(<Home posts={posts}/>);
}); });
app.get('/posts/:slug', async (c) => { app.get('/posts/:slug', async (c) => {
const postSlug: string = c.req.param("slug"); return renderPostPage(c);
const fileName: string = postSlug + '.md';
const files = await readdir(__dirname + "/../posts");
const postFile = files.find(f => f === fileName);
if (!postFile) {
c.status(404);
return c.render(<FourOhFour />);
}
const post = await readPostMarkdown(__dirname + "/../posts/" + postFile);
return c.render(<Post post={post} />);
}); });
export default app; export default app;

7
src/Model/Post.ts → src/model/Post.ts
View File

@ -1,10 +1,9 @@
import { Tag } from '@blog/Model/Tag';
export type Post = { export type Post = {
title: string, title: string,
slug: string, slug: string,
description: string, description?: string,
content: string, content: string,
html?: string,
date: Date, date: Date,
tags: string[] tags?: string[]
}; };

4
src/model/SiteMeta.ts Normal file
View File

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

13
src/routes/home.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Hono } from 'hono';
import { readdir } from 'node:fs/promises';
import { Home } from '@blog/templates/Pages/Home';
const app = new Hono();
app.get('/', async (c) => {
const files: string[] = await readdir(__dirname + '/../posts', { recursive: true });
const posts: string[] = files.map(f => f.slice(0, -3));
return c.render(<Home posts={posts}/>);
});
export default app;

26
src/routes/post.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Hono } from 'hono';
import { PostPage } from '@blog/templates/Pages/PostPage';
import { FourOhFour } from '@blog/templates/Pages/FourOhFour';
import { readdir } from 'node:fs/promises';
import { readPostMarkdown } from '@blog/util/readPostMarkdown';
const app = new Hono();
app.get('/posts/:slug', async (c) => {
const postSlug: string = c.req.param("slug");
const fileName: string = postSlug + '.md';
const files = await readdir(__dirname + "/../posts");
const postFile = files.find(f => f === fileName);
if (!postFile) {
c.status(404);
return c.render(<FourOhFour />);
}
const post = await readPostMarkdown(__dirname + "/../posts/" + postFile);
return c.render(<PostPage post={post} />);
});
export default app;

12
src/templates/Page.tsx
View File

@ -1,12 +1,20 @@
export function Page({ children }: { children: any }) { import { css, Style } from 'hono/css';
improt { SiteMeta } from '@blog/model/SiteMeta';
const logoClass = css`
font-size: 16pt;
`;
export function Page({ children, meta }: { children: any, meta: Record<string, any> }) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<title>davesmithhayes.com</title> <title>davesmithhayes.com</title>
<Style />
</head> </head>
<body> <body>
<header> <header>
<div class="logo">davesmithhayes.com</div> <div class={logoClass}>davesmithhayes.com</div>
</header> </header>
<main> <main>
{children} {children}

10
src/templates/Pages/Post.tsx
View File

@ -1,10 +0,0 @@
import { Post } from "@blog/templates/Pages";
export function Post({ post }: { post: Post }) {
return (
<>
<h1>{post.title}</h1>
{post.content}
</>
);
}

11
src/templates/Pages/PostPage.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Post } from "@blog/templates/Pages";
export function PostPage({ post }: { post: Post }) {
const html = { __html: post.content };
return (
<>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={html} />
</>
);
}

4
src/templates/components/PostList.tsx
View File

@ -1,4 +1,4 @@
import type { Post } from '@blog/Model/Post'; import type { Post } from '@blog/model/Post';
export function PostList(postList: Post[]) { export function PostList(postList: Post[]) {
return( return(
@ -6,7 +6,7 @@ export function PostList(postList: Post[]) {
{postList.map(p => { {postList.map(p => {
return ( return (
<li> <li>
<a href={p.slug}>{p.name}</a> <a href={p.slug}>{p.title}</a>
</li> </li>
); );
})} })}

3
src/util/readPostMarkdown.ts
View File

@ -15,7 +15,8 @@ export async function readPostMarkdown(filename: string): Promise<Post> {
description: parsedData.description, description: parsedData.description,
date: new Date(parsedData.date), date: new Date(parsedData.date),
tags: parsedData.tags, tags: parsedData.tags,
content: parsedPost content: parsedData.__content,
html: parsedPost
}; };
} }