Show "activities" as tags in popup and panel; update metadata and localization for activities label

Author: SableRaf

pcd-website/src/components/NodePanel.vue

@@ -347,44 +347,58 @@ function getReportIssueHref(node: Node): string {
               {{ t('panel.online_event') }}
             </p>
           </div>
-          <hr class="info-card-divider" aria-hidden="true" />
-
           <!-- Row 3: Add to calendar (hidden when date is TBD) -->
-          <div v-if="!node.date_tbd" class="info-card-row info-card-calendar-row">
-            <Icon icon="bi:calendar-plus" width="1em" height="1em" aria-hidden="true" class="info-card-icon" />
-            <div class="info-card-cal-trigger-wrap">
-              <button
-                class="info-card-cal-trigger"
-                :aria-label="t('panel.add_to_calendar')"
-                aria-haspopup="menu"
-                :aria-expanded="calDropdownOpen"
-                @click.stop="calDropdownOpen = !calDropdownOpen"
-              >
-                {{ t('panel.add_to_calendar') }}
-              </button>
-              <div v-show="calDropdownOpen" class="quick-action-menu" role="menu">
-                <a
-                  :href="calendarLinks(node).googleCalUrl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  role="menuitem"
-                  :aria-label="t('panel.google_calendar_new_tab')"
-                  @click="calDropdownOpen = false"
-                >{{ t('panel.google_calendar') }}</a>
-                <a
-                  :href="calendarLinks(node).outlookCalUrl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  role="menuitem"
-                  :aria-label="t('panel.outlook_new_tab')"
-                  @click="calDropdownOpen = false"
-                >{{ t('panel.outlook') }}</a>
-                <button role="menuitem" @click="downloadIcs(node); calDropdownOpen = false">
-                  {{ t('panel.download_ics') }}
+          <template v-if="!node.date_tbd">
+            <hr class="info-card-divider" aria-hidden="true" />
+            <div class="info-card-row info-card-calendar-row">
+              <Icon icon="bi:calendar-plus" width="1em" height="1em" aria-hidden="true" class="info-card-icon" />
+              <div class="info-card-cal-trigger-wrap">
+                <button
+                  class="info-card-cal-trigger"
+                  :aria-label="t('panel.add_to_calendar')"
+                  aria-haspopup="menu"
+                  :aria-expanded="calDropdownOpen"
+                  @click.stop="calDropdownOpen = !calDropdownOpen"
+                >
+                  {{ t('panel.add_to_calendar') }}
                 </button>
+                <div v-show="calDropdownOpen" class="quick-action-menu" role="menu">
+                  <a
+                    :href="calendarLinks(node).googleCalUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    role="menuitem"
+                    :aria-label="t('panel.google_calendar_new_tab')"
+                    @click="calDropdownOpen = false"
+                  >{{ t('panel.google_calendar') }}</a>
+                  <a
+                    :href="calendarLinks(node).outlookCalUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    role="menuitem"
+                    :aria-label="t('panel.outlook_new_tab')"
+                    @click="calDropdownOpen = false"
+                  >{{ t('panel.outlook') }}</a>
+                  <button role="menuitem" @click="downloadIcs(node); calDropdownOpen = false">
+                    {{ t('panel.download_ics') }}
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
+          </template>
+          <template v-if="node.event_activities?.length">
+            <hr class="info-card-divider" aria-hidden="true" />
+            <div class="info-card-row panel-activities">
+              <Icon icon="bi:tag" width="1em" height="1em" aria-hidden="true" class="info-card-icon" />
+              <div class="panel-activity-tags">
+                <span
+                  v-for="activity in node.event_activities"
+                  :key="activity"
+                  class="panel-activity-tag"
+                >{{ activity }}</span>
+              </div>
+            </div>
+          </template>
         </div>
 
         <!-- Minimap (hidden for online events and TBD locations) -->
@@ -682,6 +696,29 @@ function getReportIssueHref(node: Node): string {
   color: var(--color-text-muted);
 }
 
+.panel-activity-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4em;
+}
+
+.panel-activity-tag {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.2em 0.55em;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-panel);
+  color: var(--color-text);
+  text-transform: capitalize;
+}
+
+[data-theme="dark"] .panel-activity-tag {
+  border-color: var(--color-border-light);
+}
+
 .panel-organizing-entity {
   margin: 0 0 0.125rem;
   font-size: 0.875rem;
@@ -954,6 +991,10 @@ function getReportIssueHref(node: Node): string {
   transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
 }
 
+[data-theme="dark"] .quick-action-btn {
+  border-color: var(--color-border-light);
+}
+
 .quick-action-btn:hover {
   background: var(--color-primary);
   color: #fff;

pcd-website/src/content/events/pcd-london-2026/metadata.json

@@ -24,7 +24,7 @@
   "event_start_time": "19:00",
   "event_end_time": "21:30",
   "event_short_description": "",
-  "event_activities": [],
+  "event_activities": ["talk", "workshop", "showcase"],
   "event_page_url": "https://example.co.uk/pcd",
   "forum_thread_url": "",
   "city": "London",

pcd-website/src/i18n/locales/de.json

@@ -61,6 +61,7 @@
     "show_less": "Weniger anzeigen",
     "disclaimer_with_org": "Diese Veranstaltung wird von {org} organisiert und ist nicht mit der Processing Foundation verbunden. Bei Fragen zu dieser Veranstaltung wenden Sie sich bitte direkt an die Organisator:innen.",
     "disclaimer_without_org": "Diese Veranstaltung wird unabhängig organisiert und ist nicht mit der Processing Foundation verbunden. Bei Fragen zu dieser Veranstaltung wenden Sie sich bitte direkt an die Organisator:innen.",
+    "activities_label": "Aktivitäten",
     "report_issue": "Ein Problem mit dieser Seite melden",
     "email_subject": "[Meldung] Problem mit der Seite \"{name}\"",
     "email_body": "Hallo PCD-Team,\n\nich möchte ein Problem mit der folgenden Seite melden:\n\n- Name: \"{name}\"\n- Link: {link}\n\n[Bitte beschreiben Sie das Problem hier].\n\nVielen Dank!"

pcd-website/src/i18n/locales/en.json

@@ -61,6 +61,7 @@
     "show_less": "Show less",
     "disclaimer_with_org": "This event is organized by {org} and is not affiliated with the Processing Foundation. For any questions or concerns about this event, please contact the organizers directly.",
     "disclaimer_without_org": "This event is independently organized and is not affiliated with the Processing Foundation. For any questions or concerns about this event, please contact the organizers directly.",
+    "activities_label": "Activities",
     "report_issue": "Report an issue with this page",
     "email_subject": "[Report] Issue with \"{name}\" page",
     "email_body": "Hi PCD team,\n\nI would like to report an issue with the following page:\n\n- Name: \"{name}\"\n- Link: {link}\n\n[Please describe the issue here].\n\nThank you!"

pcd-website/src/i18n/locales/es.json

@@ -61,6 +61,7 @@
     "show_less": "Mostrar menos",
     "disclaimer_with_org": "Este evento está organizado de forma independiente y no está afiliado con la Processing Foundation.Para cualquier pregunta o inquietud sobre este evento, comuníquese directamente con {org}.",
     "disclaimer_without_org": "Este evento está organizado de forma independiente y no está afiliado con la Processing Foundation. Para cualquier pregunta o inquietud sobre este evento, comuníquese directamente con los/as organizadores/as.",
+    "activities_label": "Actividades",
     "report_issue": "Reportar un problema con esta página",
     "email_subject": "[Reporte] Problema con la página \"{name}\"",
     "email_body": "Hola equipo PCD,\n\nMe gustaría reportar un problema con la siguiente página:\n\n- Nombre: \"{name}\"\n- Enlace: {link}\n\n[Por favor describa el problema aquí].\n\n¡Gracias!"

pcd-website/src/i18n/locales/fr.json

@@ -61,6 +61,7 @@
     "show_less": "Afficher moins",
     "disclaimer_with_org": "Cet événement est organisé de manière indépendante et n'est pas affilié à la Processing Foundation. Pour toute question concernant cet événement, veuillez contacter directement {org}.",
     "disclaimer_without_org": "Cet événement est organisé de manière indépendante et n'est pas affilié à la Processing Foundation. Pour toute question concernant cet événement, veuillez contacter directement les organisateur·rice·s.",
+    "activities_label": "Activités",
     "report_issue": "Signaler un problème sur cette page",
     "email_subject": "[Signalement] Problème avec la page \"{name}\"",
     "email_body": "Bonjour l’équipe PCD,\n\nJe souhaite signaler un problème avec la page suivante :\n\n- Nom : \"{name}\"\n- Lien : {link}\n\n[Veuillez décrire le problème ici].\n\nMerci !"

pcd-website/src/i18n/locales/ja.json

@@ -61,6 +61,7 @@
     "show_less": "折りたたむ",
     "disclaimer_with_org": "このイベントは {org} が主催しており、Processing Foundation とは関係ありません。このイベントに関するご質問・ご不明点は、主催者に直接お問い合わせください。",
     "disclaimer_without_org": "このイベントは独自に主催されており、Processing Foundation とは関係ありません。このイベントに関するご質問・ご不明点は、主催者に直接お問い合わせください。",
+    "activities_label": "アクティビティ",
     "report_issue": "このページの問題を報告する",
     "email_subject": "【報告】「{name}」ページの問題",
     "email_body": "PCD チームの皆様、\n\n以下のページに関する問題を報告します：\n\n- 名前：「{name}」\n- リンク：{link}\n\n[問題の詳細をここに記入してください]。\n\nよろしくお願いします。"

pcd-website/src/i18n/locales/ko.json

@@ -61,6 +61,7 @@
     "show_less": "접기",
     "disclaimer_with_org": "이 이벤트는 {org}이(가) 주최하며 Processing Foundation과 관련이 없습니다. 이 이벤트에 관한 질문이나 우려 사항은 주최자에게 직접 문의하세요.",
     "disclaimer_without_org": "이 이벤트는 독립적으로 주최되며 Processing Foundation과 관련이 없습니다. 이 이벤트에 관한 질문이나 우려 사항은 주최자에게 직접 문의하세요.",
+    "activities_label": "활동",
     "report_issue": "이 페이지의 문제 신고",
     "email_subject": "[신고] \"{name}\" 페이지 문제",
     "email_body": "PCD 팀 안녕하세요,\n\n다음 페이지의 문제를 신고하고 싶습니다:\n\n- 이름: \"{name}\"\n- 링크: {link}\n\n[여기에 문제를 설명해 주세요].\n\n감사합니다!"

pcd-website/src/i18n/locales/pt.json

@@ -61,6 +61,7 @@
     "show_less": "Mostrar menos",
     "disclaimer_with_org": "Este evento é organizado por {org} e não é afiliado à Processing Foundation. Para quaisquer dúvidas ou preocupações sobre este evento, entre em contato diretamente com os organizadores.",
     "disclaimer_without_org": "Este evento é organizado de forma independente e não é afiliado à Processing Foundation. Para quaisquer dúvidas ou preocupações sobre este evento, entre em contato diretamente com os organizadores.",
+    "activities_label": "Atividades",
     "report_issue": "Reportar um problema com esta página",
     "email_subject": "[Reporte] Problema com a página \"{name}\"",
     "email_body": "Olá equipe PCD,\n\nGostaria de reportar um problema com a seguinte página:\n\n- Nome: \"{name}\"\n- Link: {link}\n\n[Por favor descreva o problema aqui].\n\nObrigado!"

pcd-website/src/i18n/locales/zh-CN.json

@@ -61,6 +61,7 @@
     "show_less": "收起",
     "disclaimer_with_org": "本活动由 {org} 主办，与 Processing Foundation 无关。如对本活动有任何疑问，请直接联系主办方。",
     "disclaimer_without_org": "本活动为独立主办，与 Processing Foundation 无关。如对本活动有任何疑问，请直接联系主办方。",
+    "activities_label": "活动类型",
     "report_issue": "举报此页面的问题",
     "email_subject": "[举报] \"{name}\"页面问题",
     "email_body": "您好，PCD 团队，\n\n我想举报以下页面的问题：\n\n- 名称：\"{name}\"\n- 链接：{link}\n\n[请在此描述问题]。\n\n谢谢！"