Start the blog
This commit is contained in:
commit
2e7b5da0f9
3
.editorconfig
Normal file
3
.editorconfig
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[*.{js,ts,jsx,tsx,json}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# deps
|
||||||
|
node_modules/
|
11
README.md
Normal file
11
README.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
To install dependencies:
|
||||||
|
```sh
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
To run:
|
||||||
|
```sh
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
open http://localhost:3000
|
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "blog",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "bun run --hot src/index.tsx"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@types/yaml-front-matter": "^4.1.3",
|
||||||
|
"hono": "^4.4.10",
|
||||||
|
"marked": "^13.0.1",
|
||||||
|
"remark": "^15.0.1",
|
||||||
|
"yaml-front-matter": "^4.1.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bun": "latest"
|
||||||
|
}
|
||||||
|
}
|
10
src/Model/Post.ts
Normal file
10
src/Model/Post.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { Tag } from '@blog/Model/Tag';
|
||||||
|
|
||||||
|
export type Post = {
|
||||||
|
title: string,
|
||||||
|
slug: string,
|
||||||
|
description: string,
|
||||||
|
content: string,
|
||||||
|
date: Date,
|
||||||
|
tags: string[]
|
||||||
|
};
|
38
src/index.tsx
Normal file
38
src/index.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { Hono } from 'hono';
|
||||||
|
import { jsxRenderer, useRequestContext } from 'hono/jsx-renderer';
|
||||||
|
import { Page } from '@blog/templates/Page';
|
||||||
|
import { Home } from '@blog/templates/Pages/Home';
|
||||||
|
import { readdir } from 'node:fs/promises';
|
||||||
|
|
||||||
|
const app = new Hono();
|
||||||
|
|
||||||
|
app.get(
|
||||||
|
'*',
|
||||||
|
jsxRenderer(
|
||||||
|
({ children }) => {
|
||||||
|
return (<Page>{children}</Page>);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
docType: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// read all posts
|
||||||
|
// create listing of posts
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/', async (c) => {
|
||||||
|
const files = await readdir('../posts', { recursive: true });
|
||||||
|
const posts = files.filter(f => f === '.' || f === '..');
|
||||||
|
return c.render(<Home posts={posts}/>);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get('/posts/:slug', (c) => {
|
||||||
|
const postSlug: string = c.req.param("slug");
|
||||||
|
|
||||||
|
// render post
|
||||||
|
// send to Post layout
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
21
src/readPostMarkdown.ts
Normal file
21
src/readPostMarkdown.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { marked } from 'marked';
|
||||||
|
import type { Post } from '@blog/Model/Post';
|
||||||
|
import * as yamlFront from 'yaml-front-matter';
|
||||||
|
|
||||||
|
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 {
|
||||||
|
title: parsedData.title,
|
||||||
|
slug: filename.slice(0, -3),
|
||||||
|
description: parsedData.description,
|
||||||
|
date: new Date(parsedData.date),
|
||||||
|
tags: parsedData.tags,
|
||||||
|
content: parsedPost
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
20
src/templates/Page.tsx
Normal file
20
src/templates/Page.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
export function Page({ children }: { children: any }) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>davesmithhayes.com</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="logo">davesmithhayes.com</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="copyright">© 2024 Dave Smith-Hayes</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
11
src/templates/Pages/Home.tsx
Normal file
11
src/templates/Pages/Home.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { PostList } from '@blog/templates/components/PostList';
|
||||||
|
|
||||||
|
export function Home({ posts }: { posts: string[] }) {
|
||||||
|
return (
|
||||||
|
<div class="main">
|
||||||
|
<h1>davesmithhayes.com</h1>
|
||||||
|
{posts.length ? <PostList posts={posts} /> : <div>No posts.</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
15
src/templates/components/PostList.tsx
Normal file
15
src/templates/components/PostList.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import type { Post } from '@blog/Model/Post';
|
||||||
|
|
||||||
|
export function PostList(postList: Post[]) {
|
||||||
|
return(
|
||||||
|
<ul>
|
||||||
|
{postList.map(p => {
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<a href={p.slug}>{p.name}</a>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "hono/jsx",
|
||||||
|
"paths": {
|
||||||
|
"@blog/*": [ "./src/*" ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user