/** * @title Personal Website with Server-Side Active Navigation * @description Create a personal portfolio website with multiple pages and server-side active navigation using an HTTP Val. */ import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles"; import { personalData } from "https://esm.town/v/iamseeley/personalData"; import { generateTrackingHtml } from 'https://esm.town/v/iamseeley/counterTown'; export default async function (req: Request): Promise { const url = new URL(req.url); const path = url.pathname; // Function to create navigation links with active state function createNavLinks(currentPath: string): string { const links = [ { path: '/', text: 'Home' }, { path: '/about', text: 'About' }, { path: '/projects', text: 'Projects' } ]; return links.map(link => `${link.text}` ).join(''); } const trackingHtmlResponse = generateTrackingHtml(req); const trackingHtml = await trackingHtmlResponse.text(); // Common HTML structure function createHTML(title: string, content: string, req: Request): string { return ` ${personalData.name} | HTML as String

${personalData.name}

${personalData.label}

${content}

${trackingHtml} `; } // Router function to handle different routes function router(path: string, req: Request): Response { switch (path) { case '/': return homePage(req); case '/about': return aboutPage(req); case '/projects': return projectsPage(req); default: return notFoundPage(req); } } // Home page function homePage(req: Request): Response { const content = `

Welcome to My Portfolio

${personalData.summary}

This website is rendered server-side with pure HTML.

Check out the source and start building your own site!

`; return new Response(createHTML("Home", content, req), { headers: { "Content-Type": "text/html" }, }); } // About page function aboutPage(req: Request): Response { const content = `

About Me

${personalData.about}

`; return new Response(createHTML("About", content, req), { headers: { "Content-Type": "text/html" }, }); } // Projects page function projectsPage(req: Request): Response { const content = `

My Projects

${personalData.projects.map(project => `

${project.name}

${project.description}

`).join('')} `; return new Response(createHTML("Projects", content, req), { headers: { "Content-Type": "text/html" }, }); } // 404 Not Found page function notFoundPage(req: Request): Response { const content = `

404 Not Found

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

Return to Home

`; return new Response(createHTML("404 Not Found", content, req), { status: 404, headers: { "Content-Type": "text/html" }, }); } // Use the router to handle the request return router(path, req); }

multirouteHTML