/** * @title Multi-Route Website with Hono in Val Town * @description Create a personal portfolio website with multiple pages using Hono framework and JSX. */ /** @jsxImportSource npm:hono@3/jsx */ import type { FC } from "hono/jsx"; import { personalData } from "https://esm.town/v/iamseeley/personalData"; import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles"; import { Hono } from "npm:hono"; import { html } from "npm:hono/html"; import { jsxRenderer } from "npm:hono/jsx-renderer"; const app = new Hono(); // JSX renderer middleware app.use( "*", jsxRenderer(({ children }) => { console.log(children); return html` ${personalData.name} | Server-side Hono

${personalData.name}

${personalData.label}

${children} `; }), ); // Navigation component const Navigation: FC<{ currentPath: string }> = ({ currentPath }) => ( ); // Page components const HomePage: FC = () => ( <>

Welcome to My Portfolio

{personalData.summary}

This website is rendered server-side with Hono.

Check out the source{" "} and start building your own site!

); const AboutPage: FC = () => ( <>

About Me

{personalData.about}

); const ProjectsPage: FC = () => ( <>

My Projects

{personalData.projects.map((project, index) => (

{project.name}

{project.description}

))}

); const NotFoundPage: FC = () => ( <>

404 Not Found

Sorry, the page you're looking for doesn't exist.

Return to Home

); // Route handlers app.get("/", (c) => { console.log(c.render()); return c.render(); }); app.get("/about", (c) => c.render()); app.get("/projects", (c) => c.render()); app.notFound((c) => c.render()); export default app.fetch;

multirouteHono