Most the post namespacing around for post functions, add the post list to the homepage.

src/model/SiteMeta.ts

@@ -2,4 +2,5 @@ export type SiteMeta = {
   description?: string,
   tags?: string[],
   author?: string,
+  viewport?: string,
 };

src/post/post-reader.ts

@@ -2,6 +2,7 @@ import { marked } from 'marked';
 import type { Post } from '@blog/model/Post';
 import type { PostMeta } from '@blog/model/PostMeta';
 import * as yamlFront from 'yaml-front-matter';
+import { readdir } from 'node:fs/promises';
 
 export async function openPostMarkdownFile(filename: string): Promise<string> {
   const file = Bun.file(filename);
@@ -22,15 +23,35 @@ export function parsePostMetadata(post: string): PostMetaWithRawContent {
       description: parsedData.description,
       date: new Date(parsedData.date),
       draft: parsedData?.draft || false,
-      tags: parsedData.tags
+      tags: parsedData.tags,
     },
     content: parsedData.__content
   };
 }
 
+export async function getPostList(path: string): Promise<PostMeta[]> {
+  const postList: PostMeta[] = new Array<PostMeta>();
+  console.log(path);
+  const dir = await readdir(path);
+
+  if (!dir.length) {
+    return postList;
+  }
+
+  for (const file of dir) {
+    const fileContent = await openPostMarkdownFile(path + '/' + file);
+    const postMeta = parsePostMetadata(fileContent);
+    postMeta.meta.slug = "/posts/" + file.slice(0, -3);
+    postList.push(postMeta.meta);
+  }
+
+  return postList;
+}
+
 export async function readPostMarkdown(filename: string): Promise<Post> {
   const contents = await openPostMarkdownFile(filename);
   const post = parsePostMetadata(contents);
+  post.meta.slug = "/posts/" + filename.slice(0, -3);
   const parsedPost = await marked.parse(post.content);
 
   return {

src/routes/home.tsx

@@ -1,13 +1,17 @@
 import { Hono } from 'hono';
-import { readdir } from 'node:fs/promises';
 import { Home } from '@blog/templates/Pages/Home';
+import { getPostList } from '@blog/post/post-reader';
+import { PostMeta } from '@blog/model/PostMeta';
 
 const app = new Hono();
 
 app.get('/', async (c) => {
-  const files: string[] = await readdir(__dirname + '/../../posts', { recursive: true });
-  const posts: string[] = files.map(f => f.slice(0, -3));
-  return c.render(<Home posts={posts}/>);
+  const postDir = __dirname + '/../../posts';
+  const postList: PostMeta[] = await getPostList(postDir);
+
+  return c.render(<Home posts={postList}/>, { meta: { 
+    description: "The blog for Dave Smith-Hayes, a dad and developer."  
+  }});
 });
 
 export default app;

src/routes/posts.tsx

@@ -3,7 +3,7 @@ import { PostPage } from '@blog/templates/Pages/PostPage';
 import { FourOhFour } from '@blog/templates/Pages/FourOhFour';
 import { readdir } from 'node:fs/promises';
 import { SiteMeta } from '@blog/model/SiteMeta';
-import { readPostMarkdown } from '@blog/util/post-reader';
+import { readPostMarkdown } from '@blog/post/post-reader';
 
 const app = new Hono();
 

src/templates/Pages/Home.tsx

@@ -1,6 +1,7 @@
 import { PostList } from '@blog/templates/components/PostList';
+import { PostMeta } from '@blog/model/PostMeta';
 
-export function Home({ posts }: { posts: string[] }) {
+export function Home({ posts }: { posts: PostMeta[] }) {
   return (
     <div class="main">
       <h1>davesmithhayes.com</h1>

src/templates/components/MetaTags.tsx

@@ -24,12 +24,25 @@ export function Author({ meta }: { meta: SiteMeta }) {
   return (<meta name="author" content={meta.author} />);
 }
 
+export function ViewPort({ meta }: { meta: SiteMeta }) {
+  if (!meta?.viewport) {
+    return (
+      <meta 
+        name="viewport" 
+        content="width=device-width, initial-scale=1.0" />
+    );
+  }
+
+  return (<meta name="viewport" content={meta.viewport} />); 
+}
+
 export function MetaTags({ meta }: { meta: SiteMeta }) {
   return (
     <>
       <Description meta={meta} />
       <Tags meta={meta} />
       <Author meta={meta} />
+      <ViewPort meta={meta} />
     </>
   )
 }

src/templates/components/PostList.tsx

@@ -1,9 +1,9 @@
-import type { Post } from '@blog/model/Post';
+import type { PostMeta } from '@blog/model/PostMeta';
 
-export function PostList(postList: Post[]) {
+export function PostList({ posts }: { posts: PostMeta[] }) {
   return(
     <ul>
-      {postList.map(p => {
+      {posts.map(p => {
         return (
           <li>
             <a href={p.slug}>{p.title}</a>