/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import React from "https://esm.sh/react@18.2.0"; // Function to generate CSS with variables and styles function generateCSS() { return ` :root { --primary-color: #ff748d; --secondary-color: #ffffff; --text-color: #333333; --background-color: #f4f4f4; --border-radius: 20px; --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --spacing-small: 10px; --spacing-medium: 15px; --spacing-large: 30px; } body { padding: var(--spacing-large); width: 300px; margin: 0 auto; font-family: sans-serif; text-align: center; background-color: var(--background-color); color: var(--text-color); } .section-group { margin-bottom: var(--spacing-large); } .section-title { text-transform: uppercase; font-weight: bold; margin-bottom: var(--spacing-medium); color: #666; } .saved-links { display: flex; flex-direction: column; gap: var(--spacing-medium); } .saved-link { padding: var(--spacing-small); color: var(--secondary-color); background-color: var(--primary-color); border-radius: var(--border-radius); text-decoration: none; box-shadow: var(--box-shadow); transition: transform 0.2s ease, opacity 0.2s ease; display: block; text-align: center; } .saved-link:hover { transform: scale(1.05); opacity: 0.9; } `; } // Define a type for saved links to ensure type safety type SavedLink = { title: string; visit_url: string; edit_url?: string; section: string; }; // JSON object containing saved links const savedLinks: SavedLink[] = [ { title: "Personal Notes", visit_url: "https://notes.google.com/personal", edit_url: "https://notes.google.com/personal/edit", section: "one", }, { title: "Work Project Tracker", visit_url: "https://trello.com/workproject", edit_url: "https://trello.com/workproject/settings", section: "one", }, { title: "Shared Cookbook", visit_url: "https://notion.so/cookbook", edit_url: "https://notion.so/cookbook/edit", section: "one", }, { title: "Travel Bucket List", visit_url: "https://notion.so/travelbucketlist", edit_url: "https://notion.so/travelbucketlist/edit", section: "two", }, { title: "Reading List", visit_url: "https://goodreads.com/readinglist", edit_url: "https://goodreads.com/readinglist/manage", section: "two", }, ]; // Group links by section function groupLinksBySection(links: SavedLink[]) { return links.reduce((acc, link) => { if (!acc[link.section]) { acc[link.section] = []; } acc[link.section].push(link); return acc; }, {} as Record); } // Link component with data attribute for edit URL function SavedLink({ link }: { link: SavedLink }) { return ( {link.title} ); } function client() { // Prevent the default context menu globally document.addEventListener('contextmenu', (e) => { const target = e.target as HTMLAnchorElement; // Check if the right-clicked element is a saved link const savedLink = target.closest('.saved-link') as HTMLAnchorElement; if (savedLink) { // Prevent default context menu e.preventDefault(); // Get the edit URL from the data attribute const editUrl = savedLink.getAttribute('data-edit-url'); // Open edit URL if it exists if (editUrl) { window.open(editUrl, '_blank'); } return false; } }, true); } if (typeof document !== 'undefined') { client(); } export default async function(req: Request) { const groupedLinks = groupLinksBySection(savedLinks); return new Response( renderToString( Saved Links

Saved Links

Curated collection of important links

{Object.entries(groupedLinks).map(([section, links]) => (

{section}

{links.map((link, index) => )}

))} , ), { headers: { "Content-Type": "text/html", }, }, ); }