From 2749d463b5e184c60ededbff372c3c887fe82dac Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Tue, 6 Aug 2024 23:26:37 -0400
Subject: [PATCH] Add methods for getting the draft posts and keep working on
 my Hono post.

---
 posts/fullstack-hono.md   | 16 +++++++++++++---
 src/handlers/home.tsx     |  9 +++++++--
 src/services/post-file.ts | 11 ++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/posts/fullstack-hono.md b/posts/fullstack-hono.md
index a9da197..2e27c81 100644
--- a/posts/fullstack-hono.md
+++ b/posts/fullstack-hono.md
@@ -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.
diff --git a/src/handlers/home.tsx b/src/handlers/home.tsx
index b01cd92..f57a772 100644
--- a/src/handlers/home.tsx
+++ b/src/handlers/home.tsx
@@ -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: {
diff --git a/src/services/post-file.ts b/src/services/post-file.ts
index ad6742c..71d0136 100644
--- a/src/services/post-file.ts
+++ b/src/services/post-file.ts
@@ -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);