Merge branch 'main' into patch-1

Author: SableRaf

.github/scripts/assign-event-uids.mjs

@@ -61,7 +61,7 @@ for (const { mpath, meta } of metadatas) {
     // Insert uid line after the id line in the frontmatter
     const updated_content = content.replace(
       /^(---\nid: [^\n]+\n)/m,
-      `$1uid: ${uid}\n`
+      `$1uid: "${uid}"\n`
     );
     await fs.writeFile(contentPath, updated_content);
   } catch {

.github/scripts/process-edit-event-issue.mjs

@@ -255,7 +255,7 @@ async function main() {
     const markdownLines = [
       '---',
       `id: ${eventId}`,
-      ...(uid ? [`uid: ${uid}`] : []),
+      ...(uid ? [`uid: "${uid}"`] : []),
       '---',
       '',
       fullDescription,

.github/scripts/process-edit-event-issue.test.mjs

@@ -45,7 +45,7 @@ const EXISTING_META = {
   intake: { issue_number: 99, submitted_by_github: 'olduser', submitted_date: '2026-01-01', maintainer_notes: '' },
 };
 
-const EXISTING_CONTENT = `---\nid: ${TEST_EVENT_ID}\n---\n\nOld content here.\n`;
+const EXISTING_CONTENT = `---\nid: ${TEST_EVENT_ID}\nuid: "abc1234"\n---\n\nOld content here.\n`;
 
 function makeEventPayload(body, { number = 10, login = 'edituser' } = {}) {
   return JSON.stringify({
@@ -228,6 +228,14 @@ describe('process-edit-event-issue', () => {
     assert.equal(content, EXISTING_CONTENT, 'content.md should be unchanged when full_description is blank');
   });
 
+  test('full_description provided rewrites content.md with quoted uid', async () => {
+    const { outputs } = await runScript(makeValidEditBody(), { tmpDir, number: 16 });
+    assert.equal(outputs.valid, 'true');
+
+    const content = await fs.readFile(path.join(TEST_EVENT_DIR, 'content.md'), 'utf8');
+    assert.match(content, /^uid: "[0-9a-f]{7}"$/m, 'content.md uid must be quoted');
+  });
+
   test('all activities unchecked preserves existing event_activities', async () => {
     const body = makeValidEditBody({ activities: '- [ ] Live coding\n- [ ] Exhibition\n' });
     const { outputs } = await runScript(body, { tmpDir, number: 12 });

.github/scripts/process-new-event-issue.mjs

@@ -243,7 +243,7 @@ async function main() {
   const markdownLines = [
     '---',
     `id: ${eventId}`,
-    `uid: ${uid}`,
+    `uid: "${uid}"`,
     '---',
     '',
     ...(fullDescription ? [fullDescription, ''] : []),

.github/scripts/process-new-event-issue.test.mjs

@@ -193,11 +193,19 @@ describe('process-new-event-issue', () => {
       eventId,
       'metadata.json'
     );
+    const contentPath = path.join(
+      path.resolve(SCRIPTS_DIR, '../..'),
+      'pcd-website/src/content/events',
+      eventId,
+      'content.md'
+    );
     try {
       const meta = JSON.parse(await fs.readFile(metaPath, 'utf8'));
       assert.equal(meta.id, eventId);
       assert.match(meta.uid, /^[0-9a-f]{7}$/);
       assert.equal(meta.event_name, 'PCD @ Test City');
+      const contentMd = await fs.readFile(contentPath, 'utf8');
+      assert.match(contentMd, /^uid: "[0-9a-f]{7}"$/m);
     } finally {
       // Clean up the generated event dir
       await fs.rm(path.join(

AGENTS.md

@@ -60,6 +60,7 @@ No install needed — `open-location-code` is already available at `pcd-website/
 Event data lives in `src/content/events/<event-id>/`:
 - `metadata.json` — event fields (id, uid, name, location, dates, organizers, etc.)
 - `content.md` — markdown body (frontmatter must include `id:` and `uid:`)
+  - `uid:` values in frontmatter **must always be quoted** (`uid: "abc1234"`) because unquoted hex strings like `1e46977` are parsed as scientific notation by YAML, destroying the value.
 
 `src/lib/nodes.ts` loads all events at Astro build time using `import.meta.glob()` + `getCollection('events')`, validates plus codes with `OpenLocationCode`, decodes lat/lng, and returns a sorted `Node[]` array passed as props to `<MapView>`.
 
@@ -84,6 +85,7 @@ Event data lives in `src/content/events/<event-id>/`:
 | `src/components/NodePanel.vue` | Slide-in event detail panel with minimap, calendar links, share button |
 | `src/components/NodeList.vue` | Alphabetical event list overlay with map style switcher + dark mode toggle |
 | `src/components/LanguageSwitcher.vue` | Language selector dropdown in the top bar |
+| `src/lib/analytics.ts` | `trackEvent()` Fathom helper + `AnalyticsEvent` type + event-name constants |
 | `src/lib/nodes.ts` | `Node` interface + `loadNodes()` |
 | `src/lib/format.ts` | `formatDate()`, `formatDateRange()`, `calendarLinks()`, etc. |
 | `src/lib/popup.ts` | Leaflet popup HTML generation (`makePopupContent()`) |

TODO.md

@@ -1,9 +1,61 @@
-- [ ] Add form submission using Decap CMS or similar, to allow organizers to submit their events without needing a Github account or going through the issue/PR process.
-- [ ] Fractional zoom levels cause gaps in the map tiles on Chromium. (this is a known issue with Leaflet, see: https://github.com/Leaflet/Leaflet/issues/3575)
-- [ ] Add an optional total event count to the map view, showing the total number of events currently on the map. This can be added as a large badge in the top left corner of the map, with a tooltip that says "Total number of PCD events worldwide: XXX". Only show this badge if there are more than 10 events on the map.
-- [ ] Label "new" on the map for events that were added in the last 7 days, to help users discover new events that were recently added to the map. This can be a small badge or icon next to the event name in the popup and in the side panel.
-- [ ] Investigate translating the map labels to match the language selector.
+## Ready for work
+
+- [ ] Add a default OG description for events that don't have a short or long description, a generic fallback like "Join the global celebration at Processing Community Day 2026 in [City]. Explore the map, or start a PCD in your community." Also change the default OG description to something more engaging and less generic, to encourage people to click through to the map and explore the events. Maybe something like "Discover the global celebration of creativity and coding at Processing Community Day 2026! Explore events worldwide, connect with local communities, and join the fun. Find an event near you or start your own PCD today!"
+- [ ] Add Fathom analytics
+- [ ] Group the list by country, and then sort alphabetically by city within each country, to make it easier for users to find events in their area.
+- [ ] The "Submit an event" button should open a modal with the 3 steps for submitting an event, instead of linking to the GitHub page. 1. Say hi in the thread. 2. Open a thread in the forum (can be a stub) 3. Create a PR with the event details. This will make it easier for users to understand the process and encourage more submissions, especially from those who may not be familiar with GitHub.
+- [ ] Hover state for "Submit an event" should be the same as the other large buttons.
+- [ ] If an event has a thread AND an event page, have two buttons on top of each other. The event page first, and the thread button below in a secondary color.
+- [ ] When the menu or panel is focused, the + and - buttons should controll the zoom of the page instead of the map, to allow users to zoom in on the text. Currently, the map zooms in and out when trying to zoom the page, which can be frustrating for users who are trying to read the event details.
+- [ ] Use a stylesheet for the markdown in the event details panel to support things like headings, lists, links, and other basic markdown formatting, to make the event descriptions more visually appealing and easier to read. No markdown in the short description, but the long description can support markdown formatting.
+- [ ] Add item to the review checklist to encourage reviewers to check that the forum link is correct.
+- [ ] Make the OSM links more robust (lat/lon maybe?) and add a link to Google Maps as well (dropdown similar to the add to calendar links in the event details panel).
+- [ ] Italicize the name in "This event is organized by [name] and is not affiliated..." in the event details side panel.
+- [ ] BUG: on Safari, tabbing from the burger menu button goes straight to markers on the map instead of the other header items.
+- [ ] In the panel-info-card, a "location TBD" should use a pin icon (not a link icon) unless it is a virtual event
+- [ ] BUG: the checkbox "Don't show again" cannot be toggled by pressing enter on the keyboard. 
+
+## Needs design or clarification:
+- [ ] When landing on an area of the map without any events, show a message encouraging users to submit an event in that area, and provide a link to the submission process. Something like "No events found in this area. Be the first to bring PCD to your community! [Submit an event](#)."
+- [ ] Add links to the modal for social media, discord, github repo, processing foundation website, to encourage people to connect with the community and learn more about Processing.
+- [ ] Add Discourse integration to post a message in the event thread when the PR is merged, with a link to the event on the map and a reminder to share the event.
+- [ ] Replace the close button in the menu with a double chevron that matches the open button, to make it clearer that it's a toggle for the menu.
+- [ ] In review feedback checklist, only refer to data that was changed in the edit form.
+- [ ] Add PCD or Processing Foundation favicon to the map page.
+- [ ] Add a "fullscreen" button to the details panel that opens the event details in a new page with a larger layout, to make it easier to read and navigate the event information.
+- [ ] Add OSM URI to the event details. Helps with venues inside of other buildings, and info (for example accessibility info) that may be on the OSM page for the venue.
 
 ## Later improvements (not for MVP):
+- [ ] Investigate translating the map labels to match the language selector (seems complicated)
+- [ ] Add an optional total event count to the map view, showing the total number of events currently on the map. This can be added as a large badge in the top left corner of the map, with a tooltip that says "Total number of PCD events worldwide: XXX". Only show this badge if there are more than 10 events on the map.
+- [ ] Label "new" on the map for events that were added in the last 7 days, to help users discover new events that were recently added to the map. This can be a small badge or icon next to the event name in the popup and in the side panel.
+- [ ] Add form submission using Decap CMS or similar, to allow organizers to submit their events without needing a Github account or going through the issue/PR process.
+- [ ] Support events with multiple locations (e.g. in-person event with multiple venues,). This may require changes to the data model and the way events are displayed on the map and in the details panel.
 - [ ] Add submission form with confirmation email when the event is approved and published.
-- [ ] Allow organizers to edit their event information after it's published.
+- [ ] Allow organizers to edit their event information after it's published.
+- [ ] Add support for "related" events or locations around the main event, to allow organizers to link to nearby venues, cultural spaces, or related events happening around the same time even if not officially part of PCD.
+
+## Feedback from Sebastian
+
+Here is a good starter you can use as a template: https://web.archive.org/web/20250326143004/https://www.turbulence.berlin/portfolio
+
+Note that events might have heavily varying accessibility despite being in the same venue
+
+But still the venues have basic stuff that stays – at least regarding mobility. If you allow events to add a OSM place URL, you're future-proof :)
+
+Something like this: https://www.openstreetmap.org/node/3215910341
+
+ A OSM URI is better [note: than plus codes] the venue might be inside another venue. OSM normally has infos then – e.g. when the place is indoors, and on which level it is
+
+Maps are heavily difficult to make accessible. Simply add a list view that you can toggle, and have a hidden switch when the map is focused by the screenreader that allows toggling to the list view.
+
+Have the menu inside a <nav> element would be the standard, and open it when you tab into it from the home/logo button
+
+Like
+
+<hidden link reachable via shift+tab on the home link that skips focus to main content>
+ [menu items go here, if you tab into it the menu opens]
+</nav>
+<main>
+…main content, list, map, single open feature…
+</main>

pcd-website/src/components/InfoModal.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
 import { createFocusTrap, type FocusTrap } from 'focus-trap';
 import fallbackBannerImage from '../images/community_background_2x.png?url';
+import { PCD_FORUM_THREAD_URL } from '../config';
 
 const props = defineProps<{ open: boolean; bannerImageUrl?: string; autoOpened?: boolean }>();
 const bannerImage = computed(() => props.bannerImageUrl ?? fallbackBannerImage);
@@ -76,6 +77,19 @@ onUnmounted(() => {
         />
         <div class="info-modal-body">
           <h2 class="info-modal-title">{{ t('nav.info_modal_title') }}</h2>
+          <a
+            class="info-modal-info-box"
+            :href="PCD_FORUM_THREAD_URL"
+            target="_blank"
+            :aria-label="`${t('nav.info_modal_info_box_title')} (${t('nav.opens_in_new_tab')})`"
+            rel="noopener noreferrer"
+          >
+            <div class="info-modal-info-box-titlebar">{{ t('nav.info_modal_info_box_title') }}</div>
+            <div class="info-modal-info-box-body">
+              <span><strong>{{ t('nav.info_modal_info_box_this_october') }}</strong> {{ t('nav.info_modal_info_box') }}</span>
+              <Icon icon="bi:box-arrow-up-right" width="0.875em" height="0.875em" aria-hidden="true" class="info-modal-info-box-icon" />
+            </div>
+          </a>
           <p class="info-modal-description">{{ t('nav.info_modal_description') }}</p>
           <button
             class="info-modal-show-map-btn"
@@ -169,6 +183,7 @@ onUnmounted(() => {
   border: 0;
 }
 
+
 .info-modal-description {
   margin: 0 0 var(--spacing-lg);
   font-size: 0.9375rem;

pcd-website/src/components/MapView.vue

@@ -9,6 +9,7 @@ import LanguageSwitcher from './LanguageSwitcher.vue';
 import InfoModal from './InfoModal.vue';
 import SubmitModal from './SubmitModal.vue';
 import { currentLocale } from '../i18n/localeState';
+import { trackEvent, SUBMIT_EVENT_BUTTON_CLICK } from '../lib/analytics';
 import { i18n } from '../i18n/index';
 
 const props = defineProps<{
@@ -27,6 +28,16 @@ const infoModalOpen = ref(false);
 const infoModalAutoOpened = ref(false);
 const submitModalOpen = ref(false);
 
+function handleSubmitClick() {
+  submitModalOpen.value = true;
+  trackEvent(SUBMIT_EVENT_BUTTON_CLICK);
+}
+
+function handleInfoClick() {
+  infoModalOpen.value = true;
+  infoModalAutoOpened.value = false;
+}
+
 function shouldAutoOpenInfoModal(): boolean {
   return localStorage.getItem(INFO_MODAL_SUPPRESS_KEY) !== 'true';
 }
@@ -698,13 +709,13 @@ onUnmounted(() => {
   <div class="host-btn-group">
     <button
       id="host-btn"
-      @click="submitModalOpen = true"
+      @click="handleSubmitClick()"
     >{{ t('nav.submit_event') }}</button>
     <button
       id="info-btn"
       :aria-label="t('nav.info_button_label')"
       @mouseenter="preloadBannerImage"
-      @click="infoModalOpen = true; infoModalAutoOpened = false"
+      @click="handleInfoClick()"
     >i</button>
   </div>
   <InfoModal :open="infoModalOpen" :bannerImageUrl="props.bannerImageUrl" :autoOpened="infoModalAutoOpened" @close="infoModalOpen = false" @suppress="suppressInfoModal" />

pcd-website/src/components/SubmitModal.vue

@@ -3,6 +3,11 @@ import { ref, watch, nextTick, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { createFocusTrap, type FocusTrap } from 'focus-trap';
 import { SUBMIT_EVENT_URL, PCD_FORUM_THREAD_URL, PCD_FORUM_NEW_TOPIC_URL } from '../config';
+import { trackEvent, SUBMIT_STEP_1, SUBMIT_STEP_2, SUBMIT_STEP_3, type AnalyticsEvent } from '../lib/analytics';
+
+function handleStepClick(event: AnalyticsEvent) {
+  trackEvent(event);
+}
 
 const props = defineProps<{ open: boolean }>();
 const emit = defineEmits<{ close: [] }>();
@@ -70,6 +75,10 @@ onUnmounted(() => {
         >×</button>
         <div class="submit-modal-body">
           <h2 id="submit-modal-title" class="submit-modal-title">{{ t('nav.submit_modal_title') }}</h2>
+          <div class="submit-modal-recommendation">
+            <div class="submit-modal-recommendation-titlebar">{{ t('nav.submit_modal_tip_title') }}</div>
+            <div class="submit-modal-recommendation-body">{{ t('nav.submit_modal_recommendation_pre') }}<strong>{{ t('nav.submit_modal_recommendation_highlight') }}</strong>{{ t('nav.submit_modal_recommendation_post') }}</div>
+          </div>
           <ol class="submit-steps">
             <li class="submit-step">
               <span class="step-num" aria-hidden="true">1</span>
@@ -78,6 +87,7 @@ onUnmounted(() => {
                 :href="PCD_FORUM_THREAD_URL"
                 target="_blank"
                 rel="noopener"
+                @click="handleStepClick(SUBMIT_STEP_1)"
                 :aria-label="`${t('nav.submit_modal_step1_heading')} — ${t('nav.submit_modal_step1_body')} (${t('nav.opens_in_new_tab')})`"
               >
                 <span class="step-btn-text">
@@ -94,6 +104,7 @@ onUnmounted(() => {
                 :href="PCD_FORUM_NEW_TOPIC_URL"
                 target="_blank"
                 rel="noopener"
+                @click="handleStepClick(SUBMIT_STEP_2)"
                 :aria-label="`${t('nav.submit_modal_step2_heading')} — ${t('nav.submit_modal_step2_body')} (${t('nav.opens_in_new_tab')})`"
               >
                 <span class="step-btn-text">
@@ -110,6 +121,7 @@ onUnmounted(() => {
                 :href="SUBMIT_EVENT_URL"
                 target="_blank"
                 rel="noopener"
+                @click="handleStepClick(SUBMIT_STEP_3)"
                 :aria-label="`${t('nav.submit_modal_step3_heading')} — ${t('nav.submit_modal_step3_body')} (${t('nav.opens_in_new_tab')})`"
               >
                 <span class="step-btn-text">