/** * @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 { Hono } from "npm:hono"; import { jsxRenderer } from 'npm:hono/jsx-renderer'; import type { FC } from 'hono/jsx'; import { html } from 'npm:hono/html'; import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles"; import { personalData } from "https://esm.town/v/iamseeley/personalData"; const app = new Hono(); // JSX renderer middleware app.use('*', jsxRenderer(({ 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) => c.render()); app.get('/about', (c) => c.render()); app.get('/projects', (c) => c.render()); app.notFound((c) => c.render()); export default app.fetch;

multirouteHono