Add methods for getting the draft posts and keep working on my Hono post.

This commit is contained in:
Dave Smith-Hayes 2024-08-06 23:26:37 -04:00
parent ba14bd6adc
commit 2749d463b5
3 changed files with 30 additions and 6 deletions

View File

@ -97,11 +97,11 @@ Now I haven't done this yet - but if I need to test the `handleSinglePost` funct
## How Presentation Works ## How Presentation Works
Like I mentioned earlier, one of the selling points of using Hono for the framework was its suppose of rendering JSX/TSX with `jsxRenderer` middleware. Its trivial to set up, but you have to remember to re-save your files as `tsx` and `jsx` if you want to use it. I have not spent a lot of time writing JSX/TSX in my life but once I got some of the basics it became super easy to understand. Like I mentioned earlier, one of the selling points of using Hono for the framework was its suppose of rendering JSX with `jsxRenderer` middleware. Its trivial to set up, but you have to remember to re-save your files as `tsx` and `jsx` if you want to use it. I have not spent a lot of time writing JSX in my life but once I got some of the basics it became super easy to understand. I can understand why people like React, honestly.
One of the first things to realize about JSX/TSX is that its solely a syntax. While React utilizes this it is _not_ React. You could easily compre JSX/TSX to something like Twig, Pug, or another Templating language. The big difference is that its JavaScript centric, and you can really compose the components you build with functions. One of the first things to understand about JSX is that its solely a markup syntax. While React utilizes it, this it is _not_ React. You could easily compre JSX to something like Twig, Pug, or another Templating language. The big difference is that its JavaScript centric, and you can really compose the components you build with functions.
You can set up a super basic Page tempalte that ever page will render within. You can set up a super basic Page tempalte that every page will render within.
```tsx ```tsx
import { Style } from 'hono/css'; import { Style } from 'hono/css';
@ -150,3 +150,13 @@ app.get(
) )
); );
``` ```
# Development
If the environment variable `ENVIRONMENT` is set and the value is `DEVELOPMENT`
then we can easily grab all the Posts, including Drafts, from the
`PostService`.
# Deployment
We can simply depoy the application within a Docker container into Dokku.

View File

@ -12,8 +12,13 @@ const app = new Hono<{ Variables: Posts }>();
app.get("/", async (c) => { app.get("/", async (c) => {
const postService: PostService = c.get('postService'); const postService: PostService = c.get('postService');
const postList: PostMeta[] = Array.from(postService.getPublishedPosts())
.map((p: Post) => p.meta); const isDev: boolean = process.env.DEPLOY_MODE == 'development';
const posts = isDev
? postService.getAllPosts()
: postService.getPublishedPosts();
const postList: PostMeta[] = Array.from(posts).map((p: Post) => p.meta);
return c.render(<Home posts={postList} />, { return c.render(<Home posts={postList} />, {
meta: { meta: {

View File

@ -39,7 +39,7 @@ export async function readPostFile(path: string): Promise<Post> {
title: parsedData.title, title: parsedData.title,
description: parsedData.description, description: parsedData.description,
date: new Date(parsedData.date), date: new Date(parsedData.date),
draft: parsedData?.draft || false, draft: parsedData?.draft ?? false,
tags: parsedData.tags, tags: parsedData.tags,
slug: slug, slug: slug,
}, },
@ -72,6 +72,10 @@ export class PostService {
return this.posts; return this.posts;
} }
public getAllPosts(): Post[] {
return Array.from(this.posts.values());
}
public getPostsSortedByDate(desc: boolean = true): Post[] { public getPostsSortedByDate(desc: boolean = true): Post[] {
return Array.from(this.posts.values()) return Array.from(this.posts.values())
.sort((p1: Post, p2: Post) => { .sort((p1: Post, p2: Post) => {
@ -88,6 +92,11 @@ export class PostService {
.filter((p: Post) => p.meta.draft == false); .filter((p: Post) => p.meta.draft == false);
} }
public getDraftPosts(desc: boolean = true): Post[] {
return this.getPostsSortedByDate(desc)
.filter((p: Post) => p.meta.draft == true);
}
public getPost(slug: string): Post { public getPost(slug: string): Post {
const post = this.posts.get(slug); const post = this.posts.get(slug);