Start working on a pages feature.

config/site.toml

@@ -3,6 +3,7 @@ title = "davesmithhayes.com"
 [owner]
 name = "Dave Smith-Hayes"
 email = "me@davesmithhayes.com"
+mastadonUrl = "https://hachyderm.io/@davesh"
 
 [site]
 description = "Personal website of Dave Smith-Hayes - a father, developer, and musician."

src/assets/static/main.css

@@ -1,4 +1,4 @@
-header, footer, main {
+header, footer, nav, main {
     max-width: 800px;
     margin: 0 auto;
     padding: 1em;
@@ -20,6 +20,21 @@ header .home-link a:visited {
     color: #00e;
 }
 
+nav {
+  border-bottom: 1px solid #ccc;
+}
+nav ul {
+  margin: 0;
+  padding: 0;
+}
+nav ul li {
+  display: inline-block;
+  margin-left: 1em;
+}
+nav ul li:first-child {
+  margin-left: 0;
+}
+
 footer {
     border-top: 1px solid #ccc;
 }

src/handlers/home.tsx

@@ -3,6 +3,7 @@ import { Home } from "@blog/templates/Pages/Home";
 import { PostMeta } from "@blog/models/PostMeta";
 import { Post } from '@blog/models/Post';
 import { PostService } from '@blog/services/post-file';
+import { getSiteConfig } from '@blog/services/config';
 
 type Posts = {
   postService: PostService 
@@ -11,6 +12,7 @@ type Posts = {
 const app = new Hono<{ Variables: Posts }>();
 
 app.get("/", async (c) => {
+  const config = await getSiteConfig();
   const postService: PostService = c.get('postService');
 
   const isDev: boolean = process.env.DEPLOY_MODE == 'development';
@@ -22,8 +24,8 @@ app.get("/", async (c) => {
 
   return c.render(<Home posts={postList} />, {
     meta: {
-      description: "The blog for Dave Smith-Hayes, a dad and developer.",
-      mastodonUrl: "https://hachyderm.io/@davesh"
+      description: config.site.description,
+      mastodonUrl: config.owner.mastodonUrl,
     },
   });
 });

src/services/config.ts

@@ -6,6 +6,7 @@ export type SiteConfig = {
   owner: {
     name: string;
     email: string;
+    mastodonUrl?: string;
   };
   site: {
     description: string;
@@ -13,7 +14,7 @@ export type SiteConfig = {
     repo: string;
     language: string;
     copyright: string;
-  }
+  };
 }
 
 export async function getSiteConfig(): Promise<SiteConfig> {

src/services/feed-generator.ts

@@ -22,11 +22,13 @@ export async function getFeed(postService: PostService): Feed {
     }
   });
 
+  const fullSlug = (slug) => config.site.url + "/posts/" + slug;
+
   postService.getPublishedPosts().map((post: Post) => {
     feed.addItem({
       title: post.meta.title,
-      id: post.meta.slug,
-      link: post.meta.slug,
+      id: fullSlug(post.meta.slug),
+      link: fullSlug(post.meta.slug),
       description: post.meta.description,
       content: post.html,
       author: {

src/templates/Page.tsx

@@ -1,6 +1,7 @@
 import { Style } from 'hono/css';
 import { SiteMeta } from '@blog/models/SiteMeta';
 import { MetaTags } from '@blog/templates/components/MetaTags';
+import { Navigation } from '@blog/templates/components/Navigation';
 
 function getPageTitle(title: string|undefined): string {
   if (!title) {
@@ -25,6 +26,9 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
             <a href="/">davesmithhayes.com</a>
           </div>
         </header>
+        <nav>
+          <Navigation />
+        </nav>
         <main>
           {children}
         </main>

src/templates/Pages/Home.tsx

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

src/templates/components/Navigation.tsx

@@ -0,0 +1,27 @@
+type SitemapUrl = {
+  name: string;
+  path: string;
+};
+
+export function Navigation() {
+  const navigation: SitemapUrl[] = [
+    {
+      name: "Home",
+      path: "/",
+    },
+    {
+      name: "About",
+      path: "/about"
+    },
+    {
+      name: "RSS",
+      path: "/feed/rss.xml"
+    }
+  ];
+
+  return (
+    <ul>
+      {navigation.map(n => <li><a href={n.path}>{n.name}</a></li>)}
+    </ul>
+  );
+}