/** * @title Multi-Route Website with Vue in Val Town * @description Create a personal portfolio website with multiple pages using Vue 3 and server-side rendering. */ import { createSSRApp, h } from 'npm:vue@3'; import { renderToString } from 'npm:vue/server-renderer'; import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles"; import { personalData } from "https://esm.town/v/iamseeley/personalData"; // Navigation component const Navigation = { props: ['currentPath'], setup(props) { const links = [ { path: '/', text: 'Home' }, { path: '/about', text: 'About' }, { path: '/projects', text: 'Projects' } ]; return () => h('nav', {}, links.map(link => h('a', { href: link.path, class: props.currentPath === link.path ? 'active' : '' }, link.text) )); } }; // Footer component const Footer = { setup() { return () => h('footer', {}, [ h('ul', {}, personalData.profiles.map((profile, index) => h('li', { key: index }, [ h('a', { href: profile.url, target: '_blank', rel: 'noopener noreferrer' }, profile.network) ]) )) ]); } }; // Page components const HomePage = { setup() { return () => h('div', {}, [ h(Navigation, { currentPath: '/' }), h('main', {}, [ h('h2', {}, 'Welcome to My Portfolio'), h('p', {}, personalData.summary), h('p', {}, [ h('strong', {}, 'This website is rendered server-side with Vue.') ]), h('p', {}, [ 'Check out the ', h('a', { href: 'https://www.val.town/v/iamseeley/multirouteVue', target: '_blank', rel: 'noopener noreferrer' }, 'source'), ' and start building your own site!' ]) ]), h(Footer) ]); } }; const AboutPage = { setup() { return () => h('div', {}, [ h(Navigation, { currentPath: '/about' }), h('main', {}, [ h('h2', {}, 'About Me'), h('p', {}, personalData.about) ]), h(Footer) ]); } }; const ProjectsPage = { setup() { return () => h('div', {}, [ h(Navigation, { currentPath: '/projects' }), h('main', {}, [ h('h2', {}, 'My Projects'), ...personalData.projects.map(project => h('a', { href: project.url, target: '_blank', class: 'projectLink' }, [ h('div', { class: 'project' }, [ h('h3', {}, project.name), h('p', {}, project.description) ]) ]) ) ]), h(Footer) ]); } }; const NotFoundPage = { setup() { return () => h('div', {}, [ h(Navigation, { currentPath: '' }), h('main', {}, [ h('h2', {}, '404 Not Found'), h('p', {}, "Sorry, the page you're looking for doesn't exist."), h('a', { href: '/' }, 'Return to Home') ]), h(Footer) ]); } }; // Create a Vue app based on the current path function createApp(path) { let component; switch (path) { case '/': component = HomePage; break; case '/about': component = AboutPage; break; case '/projects': component = ProjectsPage; break; default: component = NotFoundPage; } return createSSRApp(component); } // Main handler function export default async function (req: Request): Promise { const url = new URL(req.url); const app = createApp(url.pathname); const appContent = await renderToString(app); const html = ` ${personalData.name} | Server-side Vue

${personalData.name}

${personalData.label}

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