${personalData.name}

${personalData.label}

\n \n

\n ${content}\n

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

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!

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

About Me

${personalData.about}

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

My Projects

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

${project.name}

${project.description}

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

404 Not Found

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

Return to Home

\n `;\n return new Response(createHTML(\"404 Not Found\", content, req), {\n status: 404,\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n // Use the router to handle the request\n return router(path, req);\n}","createdAt",["D",1725907902958],"version",45,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount",3,"commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","iamseeley","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsaWQ1T0xmZ2dwbk5kMWNOWW1yR2dIZDdHeCJ9","forkedVal","interval","slug","iamseeley/multirouteHTML","description","versions",[143,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,313,316,319],{"_119":120,"_144":-5,"_117":145,"_114":112},"prId",["D",1725907902958],{"_119":147,"_144":-5,"_117":148,"_114":149},44,["D",1725907799462],"5086c0ae-6edc-11ef-8e6c-de64eea55b61",{"_119":151,"_144":-5,"_117":152,"_114":153},43,["D",1725907204957],"ee2cb4f0-6eda-11ef-9c64-de64eea55b61",{"_119":155,"_144":-5,"_117":156,"_114":157},42,["D",1725907074840],"a09e2688-6eda-11ef-9ed7-de64eea55b61",{"_119":159,"_144":-5,"_117":160,"_114":161},41,["D",1725907044522],"8e8c0b72-6eda-11ef-af60-de64eea55b61",{"_119":163,"_144":-5,"_117":164,"_114":165},40,["D",1725907024264],"82793738-6eda-11ef-ad78-de64eea55b61",{"_119":167,"_144":-5,"_117":168,"_114":169},39,["D",1725906959857],"5c152e08-6eda-11ef-94c9-de64eea55b61",{"_119":171,"_144":-5,"_117":172,"_114":173},38,["D",1725906855621],"1df42962-6eda-11ef-a068-de64eea55b61",{"_119":175,"_144":-5,"_117":176,"_114":177},37,["D",1725905967585],"0ca4d58c-6ed8-11ef-a5c6-de64eea55b61",{"_119":179,"_144":-5,"_117":180,"_114":181},36,["D",1725905893144],"e045c9e2-6ed7-11ef-bedc-de64eea55b61",{"_119":183,"_144":-5,"_117":184,"_114":185},35,["D",1719335092369],"09cf8720-3315-11ef-a420-cab58f78796a",{"_119":187,"_144":-5,"_117":188,"_114":189},34,["D",1719334143563],"d447563e-3312-11ef-b9fb-cab58f78796a",{"_119":191,"_144":-5,"_117":192,"_114":193},33,["D",1719334090063],"b463d31a-3312-11ef-b9c9-cab58f78796a",{"_119":195,"_144":-5,"_117":196,"_114":197},32,["D",1719330041043],"46fc7510-3309-11ef-b61c-cab58f78796a",{"_119":199,"_144":-5,"_117":200,"_114":201},31,["D",1719329244235],"6c0d4e08-3307-11ef-a6a3-cab58f78796a",{"_119":203,"_144":-5,"_117":204,"_114":205},30,["D",1719329168004],"3e9d4ac2-3307-11ef-8c3b-cab58f78796a",{"_119":207,"_144":-5,"_117":208,"_114":209},29,["D",1719315565974],"932c298e-32e7-11ef-af7c-cab58f78796a",{"_119":211,"_144":-5,"_117":212,"_114":213},28,["D",1719279580741],"ca4dbfb2-3293-11ef-9f9d-cab58f78796a",{"_119":215,"_144":-5,"_117":216,"_114":217},27,["D",1719279356987],"44ef3936-3293-11ef-8d28-cab58f78796a",{"_119":219,"_144":-5,"_117":220,"_114":221},26,["D",1719279049111],"8d6cf942-3292-11ef-85ed-cab58f78796a",{"_119":223,"_144":-5,"_117":224,"_114":225},25,["D",1719276826526],"60a99c9e-328d-11ef-a552-cab58f78796a",{"_119":227,"_144":-5,"_117":228,"_114":229},24,["D",1719271424028],"cc85aafa-3280-11ef-94dd-cab58f78796a",{"_119":231,"_144":-5,"_117":232,"_114":233},23,["D",1719271404167],"c0af20b2-3280-11ef-bea5-cab58f78796a",{"_119":235,"_144":-5,"_117":236,"_114":237},22,["D",1719271391991],"b96d6e80-3280-11ef-b50d-cab58f78796a",{"_119":239,"_144":-5,"_117":240,"_114":241},21,["D",1719271351193],"a11c018e-3280-11ef-b816-cab58f78796a",{"_119":243,"_144":-5,"_117":244,"_114":245},20,["D",1719271328234],"936cc15e-3280-11ef-af89-cab58f78796a",{"_119":247,"_144":-5,"_117":248,"_114":249},19,["D",1719271314844],"8b71b5a4-3280-11ef-ade8-cab58f78796a",{"_119":251,"_144":-5,"_117":252,"_114":253},18,["D",1719271140899],"23c3bfce-3280-11ef-93c4-cab58f78796a",{"_119":255,"_144":-5,"_117":256,"_114":257},17,["D",1719271134004],"1fa78934-3280-11ef-8409-cab58f78796a",{"_119":259,"_144":-5,"_117":260,"_114":261},16,["D",1719271109223],"10e231e2-3280-11ef-b82f-cab58f78796a",{"_119":263,"_144":-5,"_117":264,"_114":265},15,["D",1719271092213],"06bec78e-3280-11ef-a8df-cab58f78796a",{"_119":267,"_144":-5,"_117":268,"_114":269},14,["D",1719271080555],"ffcc1ae4-327f-11ef-bacd-cab58f78796a",{"_119":271,"_144":-5,"_117":272,"_114":273},13,["D",1719271060300],"f3b95ece-327f-11ef-b83f-cab58f78796a",{"_119":275,"_144":-5,"_117":276,"_114":277},12,["D",1719271042358],"e907928e-327f-11ef-9f74-cab58f78796a",{"_119":279,"_144":-5,"_117":280,"_114":281},11,["D",1719271017328],"da1c4dfa-327f-11ef-b8bb-cab58f78796a",{"_119":283,"_144":-5,"_117":284,"_114":285},10,["D",1719270999719],"cf9d3a4c-327f-11ef-90fa-cab58f78796a",{"_119":287,"_144":-5,"_117":288,"_114":289},9,["D",1719270971441],"bec27a48-327f-11ef-acd6-cab58f78796a",{"_119":291,"_144":-5,"_117":292,"_114":293},8,["D",1719270951203],"b2b279e2-327f-11ef-8fae-cab58f78796a",{"_119":295,"_144":-5,"_117":296,"_114":297},7,["D",1719270879740],"8819faf2-327f-11ef-b881-cab58f78796a",{"_119":299,"_144":-5,"_117":300,"_114":301},6,["D",1719270801322],"595c4f3a-327f-11ef-bea7-cab58f78796a",{"_119":303,"_144":-5,"_117":304,"_114":305},5,["D",1719270778631],"4bd61abc-327f-11ef-978b-cab58f78796a",{"_119":307,"_144":-5,"_117":308,"_114":309},4,["D",1719270744155],"37496392-327f-11ef-9c86-cab58f78796a",{"_119":127,"_144":-5,"_117":311,"_114":312},["D",1719270679987],"110a11f4-327f-11ef-962d-cab58f78796a",{"_119":90,"_144":-5,"_117":314,"_114":315},["D",1719270620085],"ed56fbbe-327e-11ef-a2be-cab58f78796a",{"_119":123,"_144":-5,"_117":317,"_114":318},["D",1719270517650],"b048a8da-327e-11ef-a50f-cab58f78796a",{"_119":31,"_144":-5,"_117":320,"_114":321},["D",1719270513425],"adc2d090-327e-11ef-a73a-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":329,"_330":331,"_94":332},"single","redirect","/v/iamseeley/multirouteHTML/versions",{"_114":173,"_115":333,"_119":171,"_117":334,"_335":99,"_100":101,"_109":110,"_132":133,"_11":96,"_336":-5,"_337":-5,"_338":-5,"_326":26,"_138":139},"/**\n * @title Personal Website with Server-Side Active Navigation\n * @description Create a personal portfolio website with multiple pages and server-side active navigation using an HTTP Val.\n */\n\nimport { websiteStyles } from \"https://esm.town/v/iamseeley/websiteStyles\";\nimport { personalData } from \"https://esm.town/v/iamseeley/personalData\";\nimport { generateTrackingHtml } from 'https://esm.town/v/iamseeley/counterTown';\n\nexport default function (req: Request): Response {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Function to create navigation links with active state\n function createNavLinks(currentPath: string): string {\n const links = [\n { path: '/', text: 'Home' },\n { path: '/about', text: 'About' },\n { path: '/projects', text: 'Projects' }\n ];\n\n return links.map(link =>\n `${link.text}`\n ).join('');\n }\n\n const trackingHtmlResponse = generateTrackingHtml(req);\n const trackingHtml = trackingHtmlResponse.text();\n\n // Common HTML structure\n function createHTML(title: string, content: string): string {\n return `\n \n \n \n \n \n ${personalData.name} | HTML as String\n \n \n \n

${personalData.name}

${personalData.label}

\n \n

\n ${content}\n

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

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!

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

About Me

${personalData.about}

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

My Projects

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

${project.name}

${project.description}

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

404 Not Found

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

Return to Home

\n `;\n return new Response(createHTML(\"404 Not Found\", content), {\n status: 404,\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n // Use the router to handle the request\n return router(path);\n}",["D",1725906855621],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

multirouteHTML

Version 38