/** * @title Multi-Route Website with Preact * @description Create a personal portfolio website with multiple pages using Preact and server-side rendering. */ /** @jsxImportSource npm:preact */ import { h } from 'npm:preact'; import renderToString from 'npm:preact-render-to-string'; import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles"; import { personalData } from "https://esm.town/v/iamseeley/personalData"; // Navigation component const Navigation = ({ currentPath }) => ( ); // Page components const HomePage = () => (

Welcome to My Portfolio

{personalData.summary}

This website is rendered server-side with Preact.

Check out the source and start building your own site!

); const AboutPage = () => (

About Me

{personalData.about}

); const ProjectsPage = () => (

My Projects

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

{project.name}

{project.description}

))}

); const NotFoundPage = () => (

404 Not Found

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

Return to Home

); // Main handler function export default function (req: Request): Response { const url = new URL(req.url); let component; switch (url.pathname) { case '/': component = ; break; case '/about': component = ; break; case '/projects': component = ; break; default: component = ; } const appContent = renderToString(component); const html = ` ${personalData.name} | Server-side Preact

${personalData.name}

${personalData.label}

${appContent} `; return new Response(html, { headers: { 'Content-Type': 'text/html' }, }); }

multiroutePreact