Auto display (with suppress option) to InfoModal and localize new strings for multiple languages

Author: SableRaf

pcd-website/src/components/InfoModal.vue

@@ -6,9 +6,16 @@ import { createFocusTrap, type FocusTrap } from 'focus-trap';
 import { PCD_FORUM_THREAD_URL } from '../config';
 import fallbackBannerImage from '../images/community_background_2x.png?url';
 
-const props = defineProps<{ open: boolean; bannerImageUrl?: string }>();
+const props = defineProps<{ open: boolean; bannerImageUrl?: string; autoOpened?: boolean }>();
 const bannerImage = computed(() => props.bannerImageUrl ?? fallbackBannerImage);
-const emit = defineEmits<{ close: [] }>();
+const emit = defineEmits<{ close: []; suppress: [] }>();
+
+const dontShowAgain = ref(false);
+
+function handleClose() {
+  if (dontShowAgain.value) emit('suppress');
+  emit('close');
+}
 
 const { t } = useI18n();
 const modalRef = ref<HTMLElement | null>(null);
@@ -21,7 +28,7 @@ watch(
       await nextTick();
       if (modalRef.value) {
         trap = createFocusTrap(modalRef.value, {
-          onDeactivate: () => emit('close'),
+          onDeactivate: () => handleClose(),
           escapeDeactivates: true,
           allowOutsideClick: true,
           fallbackFocus: () => modalRef.value!,
@@ -31,6 +38,7 @@ watch(
     } else {
       trap?.deactivate();
       trap = null;
+      dontShowAgain.value = false;
     }
   },
 );
@@ -45,7 +53,7 @@ onUnmounted(() => {
     <div
       v-if="open"
       class="info-modal-backdrop"
-      @click.self="emit('close')"
+      @click.self="handleClose()"
     >
       <div
         ref="modalRef"
@@ -57,7 +65,7 @@ onUnmounted(() => {
         <button
           class="info-modal-close"
           :aria-label="t('nav.info_modal_close')"
-          @click="emit('close')"
+          @click="handleClose()"
         >
           <Icon icon="bi:x-lg" width="1.125em" height="1.125em" aria-hidden="true" />
         </button>
@@ -81,6 +89,10 @@ onUnmounted(() => {
             {{ t('nav.info_modal_forum_btn') }}
             <Icon icon="bi:box-arrow-up-right" width="1em" height="1em" aria-hidden="true" style="margin-left: 0.5rem; vertical-align: -0.1em;" />
           </a>
+          <label v-if="props.autoOpened" class="info-modal-suppress">
+            <input type="checkbox" v-model="dontShowAgain" />
+            {{ t('nav.info_modal_dont_show_again') }}
+          </label>
         </div>
       </div>
     </div>
@@ -174,4 +186,23 @@ onUnmounted(() => {
 .info-modal-forum-btn:hover {
   opacity: 0.85;
 }
+
+.info-modal-suppress {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: var(--spacing-md);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.info-modal-suppress input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  accent-color: var(--color-primary);
+}
 </style>

pcd-website/src/components/MapView.vue

@@ -21,7 +21,19 @@ const { t } = useI18n();
 
 const selectedNode = ref<Node | null>(null);
 const listOpen = ref(false);
+
+const INFO_MODAL_SUPPRESS_KEY = 'pcd-info-modal-suppressed';
 const infoModalOpen = ref(false);
+const infoModalAutoOpened = ref(false);
+
+function shouldAutoOpenInfoModal(): boolean {
+  return localStorage.getItem(INFO_MODAL_SUPPRESS_KEY) !== 'true';
+}
+
+function suppressInfoModal() {
+  localStorage.setItem(INFO_MODAL_SUPPRESS_KEY, 'true');
+  infoModalOpen.value = false;
+}
 
 function preloadBannerImage() {
   const url = props.bannerImageUrl;
@@ -636,6 +648,12 @@ onMounted(async () => {
   document.addEventListener('keydown', handleKeydown);
 
 
+  // Auto-open info modal on first visit
+  if (shouldAutoOpenInfoModal()) {
+    infoModalOpen.value = true;
+    infoModalAutoOpened.value = true;
+  }
+
   // Update document-level text when locale changes
   watch(currentLocale, () => {
     document.title = i18n.global.t('page.title');
@@ -683,10 +701,10 @@ onUnmounted(() => {
       id="info-btn"
       :aria-label="t('nav.info_button_label')"
       @mouseenter="preloadBannerImage"
-      @click="infoModalOpen = true"
+      @click="infoModalOpen = true; infoModalAutoOpened = false"
     >i</button>
   </div>
-  <InfoModal :open="infoModalOpen" :bannerImageUrl="props.bannerImageUrl" @close="infoModalOpen = false" />
+  <InfoModal :open="infoModalOpen" :bannerImageUrl="props.bannerImageUrl" :autoOpened="infoModalAutoOpened" @close="infoModalOpen = false" @suppress="suppressInfoModal" />
   <div class="banner-controls-right">
     <button
       id="theme-toggle"

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Der Processing Community Day (PCD) ist eine weltweite Veranstaltungsreihe, die von lokalen Communities organisiert wird und Kunst, Code und kreative Open-Source-Tools feiert. Finde deine lokale Veranstaltung auf der Karte oder fang an, deine eigene zu organisieren!",
     "info_modal_forum_btn": "Mehr im Forum erfahren",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "Nicht mehr anzeigen"
   },
   "node_list": {
     "dialog_label": "Veranstaltungsliste",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) is a worldwide series of community-led events celebrating art, code, and open-source creative tools. Events are organized by local communities around the globe. Find your local event on the map, or start organizing your own!",
     "info_modal_forum_btn": "Learn more on the forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "Don't show this again"
   },
   "node_list": {
     "dialog_label": "Node list",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) es una serie mundial de eventos organizados por comunidades locales que celebran el arte, el código y las herramientas creativas de código abierto. Encuentra tu evento local en el mapa, ¡o empieza a organizar el tuyo!",
     "info_modal_forum_btn": "Más información en el foro",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "No volver a mostrar"
   },
   "node_list": {
     "dialog_label": "Lista de eventos",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day (PCD) est une série mondiale d'événements organisés par des communautés locales, célébrant l'art, le code et les outils créatifs open source. Trouvez votre événement local sur la carte, ou commencez à organiser le vôtre !",
     "info_modal_forum_btn": "En savoir plus sur le forum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "Ne plus afficher"
   },
   "node_list": {
     "dialog_label": "Liste des événements",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day（PCD）は、アート・コード・オープンソースのクリエイティブツールを祝う、世界各地のコミュニティが主催するイベントシリーズです。地図からお近くのイベントを見つけるか、自分でイベントを主催してみましょう！",
     "info_modal_forum_btn": "フォーラムで詳しく見る",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "今後表示しない"
   },
   "node_list": {
     "dialog_label": "イベントリスト",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day(PCD)는 예술, 코드, 오픈소스 창작 도구를 기념하는 전 세계 커뮤니티 주도 이벤트 시리즈입니다. 지도에서 가까운 이벤트를 찾거나 직접 이벤트를 조직해 보세요!",
     "info_modal_forum_btn": "포럼에서 자세히 알아보기",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "다시 표시하지 않기"
   },
   "node_list": {
     "dialog_label": "이벤트 목록",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "O Processing Community Day (PCD) é uma série mundial de eventos organizados por comunidades locais que celebram a arte, o código e as ferramentas criativas de código aberto. Encontre o seu evento local no mapa ou comece a organizar o seu próprio!",
     "info_modal_forum_btn": "Saiba mais no fórum",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "Não mostrar novamente"
   },
   "node_list": {
     "dialog_label": "Lista de eventos",

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

@@ -14,7 +14,8 @@
     "info_modal_description": "Processing Community Day（PCD）是由全球各地社区主办的系列活动，旨在庆祝艺术、代码与开源创意工具。在地图上找到您附近的活动，或者开始组织您自己的活动！",
     "info_modal_forum_btn": "在论坛了解更多",
     "info_modal_forum_btn_new_tab": "Visit the forum thread (opens in new tab)",
-    "info_modal_close": "Close"
+    "info_modal_close": "Close",
+    "info_modal_dont_show_again": "不再显示"
   },
   "node_list": {
     "dialog_label": "活动列表",