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

Add some styles, use some post service methods for easily getting post data.

Browse Source
This commit is contained in:
Dave Smith-Hayes 2024-07-31 22:02:55 -04:00
parent c035bfec8a
commit 5ea1aa9c5b
6 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/static/main.css Normal file
View File

@ -0,0 +1,14 @@
header, footer, main {
max-width: 800px;
margin: 0 auto;
padding: 1em;
box-sizing: border-box;
}
header {
border-bottom: 1px solid #ccc;
}
footer {
border-top: 1px solid #ccc;
}

7
src/handlers/home.tsx
View File

@ -12,11 +12,8 @@ const app = new Hono<{ Variables: Posts }>();
app.get("/", async (c) => { app.get("/", async (c) => {
const postService: PostFileService = c.get('postService'); const postService: PostFileService = c.get('postService');
const posts = postService.getPosts(); const postList: PostMeta[] = Array.from(postService.getPublishedPosts())
const postList: PostMeta[] = Array.from(posts.values()) .map((p: Post) => p.meta);
.map((p: Post) => p.meta)
.sort((p1: Post, p2: Post) => p1.meta.date - p2.meta.date);
return c.render(<Home posts={postList} />, { return c.render(<Home posts={postList} />, {
meta: { meta: {

2
src/index.tsx
View File

@ -7,7 +7,6 @@ import posts from '@blog/handlers/posts';
import type { SiteMeta } from '@blog/models/SiteMeta'; import type { SiteMeta } from '@blog/models/SiteMeta';
import { postFileMiddleware } from '@blog/middleware/post-service'; import { postFileMiddleware } from '@blog/middleware/post-service';
import { logger } from 'hono/logger'; import { logger } from 'hono/logger';
import { STATIC_PATH } from '@blog/config';
declare module 'hono' { declare module 'hono' {
interface ContextRenderer { interface ContextRenderer {
@ -36,7 +35,6 @@ app.use('/static/*', serveStatic({
} }
})); }));
console.log(JSON.stringify({ message: "Bootstrapping the routes..." }));
app.route('/', home); app.route('/', home);
app.route('/posts', posts); app.route('/posts', posts);

18
src/services/post-file.ts
View File

@ -57,13 +57,19 @@ export class PostFileService {
} }
public getPostsSortedByDate(desc: boolean = true): Post[] { public getPostsSortedByDate(desc: boolean = true): Post[] {
return Array.from(this.posts.entries()).sort((p1: Post, p2: Post) => { return Array.from(this.posts.values())
if (desc) { .sort((p1: Post, p2: Post) => {
return p1.meta.date - p2.meta.date; if (desc) {
} return p1.meta.date.getTime() - p2.meta.date.getTime();
}
return p2.meta.date - p1.meta.date; return p2.meta.date.getTime() - p1.meta.date.getTime();
}) });
}
public getPublishedPosts(): Post[] {
return this.getPostsSortedByDate()
.filter((p: Post) => p.meta.draft == false);
} }
public getPost(slug: string): Post { public getPost(slug: string): Post {

4
src/templates/Page.tsx
View File

@ -17,7 +17,9 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
</head> </head>
<body> <body>
<header> <header>
<div class={logoClass}>davesmithhayes.com</div> <div class={logoClass}>
<a href="/">davesmithhayes.com</a>
</div>
</header> </header>
<main> <main>
{children} {children}

2
src/templates/Pages/Home.tsx
View File

@ -4,7 +4,7 @@ import { PostMeta } from '@blog/models/PostMeta';
export function Home({ posts }: { posts: PostMeta[] }) { export function Home({ posts }: { posts: PostMeta[] }) {
return ( return (
<div class="main"> <div class="main">
<h1>davesmithhayes.com</h1> <h1>Posts</h1>
{posts.length ? <PostList posts={posts} /> : <div>No posts.</div>} {posts.length ? <PostList posts={posts} /> : <div>No posts.</div>}
</div> </div>
); );