Refactor venue display logic and enhance popup content with venue address link

Author: SableRaf

pcd-website/src/components/NodePanel.vue

@@ -66,12 +66,6 @@ function getOsmUrl(node: Node): string {
   return `https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`;
 }
 
-function getVenueText(node: Node): string {
-  return node.address
-    ? `${node.venue}, ${node.address}`
-    : `${node.venue}, ${node.city}, ${node.country}`;
-}
-
 function getParagraphs(text: string): string[] {
   return text.split(/\n\n+/).filter(Boolean);
 }
@@ -106,10 +100,9 @@ function getParagraphs(text: string): string[] {
 
         <h2 id="panel-title" class="panel-name">{{ node.name }}</h2>
         <p class="panel-meta">{{ formatDateRange(node.start_date, node.end_date) }}</p>
-
         <p class="panel-venue">
           <Icon icon="bi:geo-alt-fill" class="panel-icon" width="14" height="14" aria-hidden="true" />
-          <a :href="getOsmUrl(node)" target="_blank" rel="noopener noreferrer">{{ getVenueText(node) }}</a>
+          <a :href="getOsmUrl(node)" target="_blank" rel="noopener noreferrer">{{ node.venue }}<br>{{ node.address || `${node.city}, ${node.country}` }}</a>
         </p>
 
         <div class="panel-description">
@@ -244,15 +237,14 @@ function getParagraphs(text: string): string[] {
 
 .panel-venue {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.375rem;
   margin: 0 0 1.25rem;
   font-size: 0.9375rem;
 }
 
 .panel-icon {
   flex-shrink: 0;
-  margin-top: 0.15em;
   color: var(--color-text-muted);
 }
 

pcd-website/src/data/nodes.json

@@ -32,6 +32,7 @@
       "plus_code": "8Q7XMP53+22",
       "website": "https://pcd.tokyo",
       "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
+      "long_description": "",
       "tags": [],
       "organizers": [],
       "contact_email": "hello@pcd.tokyo",
@@ -109,6 +110,7 @@
       "plus_code": "8FH49RMJ+4X",
       "website": "https://example.es/pcd",
       "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
+      "long_description": "",
       "tags": [],
       "organizers": [],
       "contact_email": "organizer@example.es",

pcd-website/src/lib/popup.ts

@@ -26,11 +26,18 @@ export function makePopupContent(node: Node): string {
       ? `<div class="popup-unconfirmed">&#8505; This event has not been confirmed yet.${node.forum_url ? ` <a href="${escapeHtml(node.forum_url)}" target="_blank" rel="noopener noreferrer">Follow the forum thread</a> for updates.` : ''}</div>`
       : '';
 
+  const addressQuery = node.address
+    ? `${node.venue}, ${node.address}`
+    : `${node.venue}, ${node.city}, ${node.country}`;
+  const osmUrl = `https://www.openstreetmap.org/search?query=${encodeURIComponent(addressQuery)}`;
+  const venueHtml = `<p class="popup-venue">at <a href="${osmUrl}" target="_blank" rel="noopener noreferrer" title="${escapeHtml(addressQuery)}">${escapeHtml(node.venue)}</a></p>`;
+
   return `
     <div class="popup-content">
       ${placeholderBanner}
       <h3 class="popup-name">${escapeHtml(node.name)}</h3>
       <p class="popup-date"><strong>${date}</strong></p>
+      ${venueHtml}
       <div class="popup-body">
         ${descriptionHtml}
         <button class="read-more" data-node-id="${escapeHtml(node.id)}">Read more &rarr;</button>