Add methods for getting the draft posts and keep working on my Hono post.
This commit is contained in:
parent
ba14bd6adc
commit
2749d463b5
@ -97,11 +97,11 @@ Now I haven't done this yet - but if I need to test the `handleSinglePost` funct
|
||||
|
||||
## 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
|
||||
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.
|
||||
|
@ -12,8 +12,13 @@ const app = new Hono<{ Variables: Posts }>();
|
||||
|
||||
app.get("/", async (c) => {
|
||||
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} />, {
|
||||
meta: {
|
||||
|
@ -39,7 +39,7 @@ export async function readPostFile(path: string): Promise<Post> {
|
||||
title: parsedData.title,
|
||||
description: parsedData.description,
|
||||
date: new Date(parsedData.date),
|
||||
draft: parsedData?.draft || false,
|
||||
draft: parsedData?.draft ?? false,
|
||||
tags: parsedData.tags,
|
||||
slug: slug,
|
||||
},
|
||||
@ -72,6 +72,10 @@ export class PostService {
|
||||
return this.posts;
|
||||
}
|
||||
|
||||
public getAllPosts(): Post[] {
|
||||
return Array.from(this.posts.values());
|
||||
}
|
||||
|
||||
public getPostsSortedByDate(desc: boolean = true): Post[] {
|
||||
return Array.from(this.posts.values())
|
||||
.sort((p1: Post, p2: Post) => {
|
||||
@ -88,6 +92,11 @@ export class PostService {
|
||||
.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 {
|
||||
const post = this.posts.get(slug);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user