create-portfoliable 1.0.3

package/templates/configs/i18n/i18n.labels.js

@@ -0,0 +1,188 @@
+export default {
+  "en": {
+    // SEO Meta
+    "meta_home_title": "Portfoliable",
+    "meta_home_description": "Your cases, your stories.",
+
+    // Home View
+    "h1_title": "Welcome to Portfoliable",
+    "footer_text": "Made with Portfoliable",
+    "nav_home": "Home",
+    "about_title": "About",
+    "view_about_aria_label": "About view",
+
+    // Case View and Actions
+    "view_case_aria_label": "Case view",
+    "protected_case": "Protected Case",
+    "enter_passcode": "Enter the passcode to unlock project details.",
+    "unlock": "Unlock",
+    "case_unlocked": "Case unlocked.",
+    "incorrect_passcode": "Incorrect passcode.",
+
+    // Player View
+    "player_video_title": "Case video",
+    "player_label_play": "Play",
+    "player_label_pause": "Pause",
+    "player_label_cc_on": "Captions on",
+    "player_label_cc_off": "Captions off",
+    "player_label_mute": "Mute",
+    "player_label_unmute": "Unmute",
+    "player_label_speed": "Playback speed",
+
+    // Audio Player
+    "player_audio_reader": "Audio reader",
+    "player_audio_play": "Play audio",
+    "player_audio_pause": "Pause audio",
+    "player_audio_mute": "Mute audio",
+    "player_audio_unmute": "Unmute audio",
+    "player_audio_speed": "Audio speed",
+    "player_audio_hide": "Hide player",
+    "player_audio_show": "Show player",
+    "player_audio_autoscroll_on": "Autoscroll on",
+    "player_audio_autoscroll_off": "Autoscroll off",
+    "player_audio_volume": "Volume",
+    "player_audio_volume_level": "Volume level",
+    "player_audio_position": "Playback position",
+
+    // Search and Navigator
+    "btn_return": "Return",
+    "search_cases_placeholder": "Search cases...",
+    "search_cases_tooltip_open": "Open search",
+    "search_cases_tooltip_close": "Close search",
+    "search_main_view_title": "Home",
+    "search_main_view_snippet": "Explore featured case studies.",
+    "search_case_studies_label": "Case Studies",
+    "case_nav_prev": "Previous case",
+    "case_nav_next": "Next case",
+    "case_nav_prev_locked": "Previous case is locked",
+    "case_nav_next_locked": "Next case is locked",
+
+    // Breadcrumb Menus
+    "breadcrumb_menu_case_header": "Case menu",
+    "breadcrumb_menu_video_header": "Video menu",
+
+    // Accessibility Modal
+    "popup_a11y_title": "Accessibility",
+    "a11y_cat_typography": "Typography",
+    "a11y_size": "Text size",
+    "a11y_dyslexia": "Dyslexia font",
+    "a11y_cat_visuals": "Visuals",
+    "a11y_dark": "Dark mode",
+    "a11y_contrast": "High contrast",
+    "a11y_motion": "No motion",
+    "a11y_tab": "TAB",
+
+    // Language Modal
+    "popup_lang_title": "Language",
+    "lang_cat": "",
+
+    // Sharing
+    "share_text": "Check out this case study.",
+
+    // Toast
+    "resume_reading": "Resume:",
+    "toast_label_close": "Close",
+    "toast_label_never_show": "Never show",
+
+    // Diagnostics and Errors
+    "mermaid_error": "Error rendering diagram.",
+
+    // Other
+    "gallery_pill_pitch": "Pitch",
+    "gallery_pill_repo": "Repository",
+    "gallery_pill_demo": "Demo",
+  },
+  "he": {
+    // SEO Meta
+    "meta_home_title": "פורטפוליאבל",
+    "meta_home_description": "הקייסים שלך, הסיפורים שלך.",
+
+    // Home View
+    "h1_title": "ברוכים הבאים ל-Portfoliable",
+    "footer_text": "נבנה עם Portfoliable",
+    "nav_home": "בית",
+    "about_title": "אודות",
+    "view_about_aria_label": "תצוגת אודות",
+
+    // Case View and Actions
+    "view_case_aria_label": "תצוגת קייס",
+    "protected_case": "קייס מוגן",
+    "enter_passcode": "הזינו קוד גישה כדי לפתוח את פרטי הפרויקט.",
+    "unlock": "פתיחה",
+    "case_unlocked": "הקייס נפתח.",
+    "incorrect_passcode": "קוד הגישה שגוי.",
+
+    // Player View
+    "player_video_title": "וידאו קייס",
+    "player_label_play": "ניגון",
+    "player_label_pause": "השהיה",
+    "player_label_cc_on": "כתוביות פועלות",
+    "player_label_cc_off": "כתוביות כבויות",
+    "player_label_mute": "השתקה",
+    "player_label_unmute": "ביטול השתקה",
+    "player_label_speed": "מהירות ניגון",
+
+    // Audio Player
+    "player_audio_reader": "קורא שמע",
+    "player_audio_play": "נגן שמע",
+    "player_audio_pause": "השהה שמע",
+    "player_audio_mute": "השתק שמע",
+    "player_audio_unmute": "בטל השתקת שמע",
+    "player_audio_speed": "מהירות שמע",
+    "player_audio_hide": "הסתר נגן",
+    "player_audio_show": "הצג נגן",
+    "player_audio_autoscroll_on": "גלילה אוטומטית פעילה",
+    "player_audio_autoscroll_off": "גלילה אוטומטית כבויה",
+    "player_audio_volume": "עוצמה",
+    "player_audio_volume_level": "רמת עוצמה",
+    "player_audio_position": "מיקום ניגון",
+
+    // Search and Navigator
+    "btn_return": "חזרה",
+    "search_cases_placeholder": "חיפוש קייסים...",
+    "search_cases_tooltip_open": "פתח חיפוש",
+    "search_cases_tooltip_close": "סגור חיפוש",
+    "search_main_view_title": "בית",
+    "search_main_view_snippet": "גלו קייסים נבחרים.",
+    "search_case_studies_label": "קייסים",
+    "case_nav_prev": "הקייס הקודם",
+    "case_nav_next": "הקייס הבא",
+    "case_nav_prev_locked": "הקייס הקודם נעול",
+    "case_nav_next_locked": "הקייס הבא נעול",
+
+    // Breadcrumb Menus
+    "breadcrumb_menu_case_header": "תפריט קייס",
+    "breadcrumb_menu_video_header": "תפריט וידאו",
+
+    // Accessibility Modal
+    "popup_a11y_title": "נגישות",
+    "a11y_cat_typography": "טיפוגרפיה",
+    "a11y_size": "גודל טקסט",
+    "a11y_dyslexia": "גופן דיסלקציה",
+    "a11y_cat_visuals": "ויזואליות",
+    "a11y_dark": "מצב כהה",
+    "a11y_contrast": "ניגודיות גבוהה",
+    "a11y_motion": "ללא תנועה",
+    "a11y_tab": "TAB",
+
+    // Language Modal
+    "popup_lang_title": "שפה",
+    "lang_cat": "",
+
+    // Sharing
+    "share_text": "בדקו את הקייס הזה.",
+
+    // Toast
+    "resume_reading": "המשך:",
+    "toast_label_close": "סגור",
+    "toast_label_never_show": "אל תציג שוב",
+
+    // Diagnostics and Errors
+    "mermaid_error": "שגיאה ברינדור דיאגרמה.",
+
+    // Other
+    "gallery_pill_pitch": "פיץ'",
+    "gallery_pill_repo": "מאגר",
+    "gallery_pill_demo": "דמו",
+  }
+};

package/templates/configs/portfoliable.a11y.config.js

@@ -0,0 +1,262 @@
+// File: configs/portfoliable.a11y.config.js
+// Purpose: Define keyboard shortcuts and a11y-related shortcut actions.
+// Author: Lio Schimanko
+
+// MARK: MATCH ORDER
+// Ensures keyboard event matching checks modifiers in a stable order.
+const MODIFIER_ORDER = ['metaKey', 'ctrlKey', 'altKey', 'shiftKey'];
+
+// MARK: SHORTCUT CATALOG
+// Declares all keyboard shortcuts consumed by the runtime shell.
+export const keyboardShortcuts = [
+  {
+    id: 'about',
+    action: 'toggleAboutView',
+    code: 'KeyI',
+    altKey: true,
+    labels: {
+      mac: '⌥ I',
+      windows: 'Alt I',
+      linux: 'Alt I'
+    }
+  },
+  {
+    id: 'language',
+    action: 'toggleLanguageModal',
+    code: 'KeyL',
+    altKey: true,
+    labels: {
+      mac: '⌥ L',
+      windows: 'Alt L',
+      linux: 'Alt L'
+    }
+  },
+  {
+    id: 'accessibility',
+    action: 'toggleA11yModal',
+    code: 'KeyA',
+    altKey: true,
+    labels: {
+      mac: '⌥ A',
+      windows: 'Alt A',
+      linux: 'Alt A'
+    }
+  },
+  {
+    id: 'text-size',
+    action: 'toggleA11yState',
+    stateKey: 'largeText',
+    code: 'KeyT',
+    altKey: true,
+    labels: {
+      mac: '⌥ T',
+      windows: 'Alt T',
+      linux: 'Alt T'
+    }
+  },
+  {
+    id: 'dark-mode',
+    action: 'toggleA11yState',
+    stateKey: 'darkMode',
+    code: 'KeyD',
+    altKey: true,
+    labels: {
+      mac: '⌥ D',
+      windows: 'Alt D',
+      linux: 'Alt D'
+    }
+  },
+  {
+    id: 'high-contrast',
+    action: 'toggleA11yState',
+    stateKey: 'highContrast',
+    code: 'KeyC',
+    altKey: true,
+    labels: {
+      mac: '⌥ C',
+      windows: 'Alt C',
+      linux: 'Alt C'
+    }
+  },
+  {
+    id: 'reduce-motion',
+    action: 'toggleA11yState',
+    stateKey: 'reduceMotion',
+    code: 'KeyM',
+    altKey: true,
+    labels: {
+      mac: '⌥ M',
+      windows: 'Alt M',
+      linux: 'Alt M'
+    }
+  },
+  {
+    id: 'tab-navigation',
+    action: 'toggleA11yState',
+    stateKey: 'tabNav',
+    code: 'KeyF',
+    altKey: true,
+    labels: {
+      mac: '⌥ F',
+      windows: 'Alt F',
+      linux: 'Alt F'
+    }
+  },
+  {
+    id: 'dyslexia-font',
+    action: 'toggleA11yState',
+    stateKey: 'dyslexiaFont',
+    code: 'KeyY',
+    altKey: true,
+    labels: {
+      mac: '⌥ Y',
+      windows: 'Alt Y',
+      linux: 'Alt Y'
+    }
+  },
+  {
+    id: 'case-search-open',
+    action: 'openCaseSearch',
+    code: 'KeyS',
+    ctrlKey: true,
+    labels: {
+      mac: '⌃ S',
+      windows: 'Ctrl S',
+      linux: 'Ctrl S'
+    }
+  },
+  {
+    id: 'case-search-close',
+    action: 'closeCaseSearch',
+    code: 'KeyX',
+    ctrlKey: true,
+    labels: {
+      mac: '⌃ X',
+      windows: 'Ctrl X',
+      linux: 'Ctrl X'
+    }
+  },
+  {
+    id: 'open-player',
+    action: 'openPlayer',
+    code: 'Enter',
+    labels: {
+      mac: 'Return',
+      windows: 'Enter',
+      linux: 'Enter'
+    }
+  },
+  {
+    id: 'navigate-back',
+    action: 'navigateBack',
+    code: 'Backspace',
+    labels: {
+      mac: 'Delete',
+      windows: 'Backspace',
+      linux: 'Backspace'
+    }
+  }
+];
+
+// MARK: I18N SHORTCUT LABEL BINDINGS
+// Maps translation keys to shortcut IDs used for runtime kbd markup.
+export const shortcutLabelBindings = {
+  btn_return: { shortcutId: 'navigate-back' },
+  btn_about: { shortcutId: 'about' },
+  btn_lang: { shortcutId: 'language' },
+  btn_a11y: { shortcutId: 'accessibility' },
+  a11y_size: { shortcutId: 'text-size', kbdClass: 'a11y-kbd' },
+  a11y_dark: { shortcutId: 'dark-mode', kbdClass: 'a11y-kbd' },
+  a11y_contrast: { shortcutId: 'high-contrast', kbdClass: 'a11y-kbd' },
+  a11y_motion: { shortcutId: 'reduce-motion', kbdClass: 'a11y-kbd' },
+  a11y_tab: { shortcutId: 'tab-navigation', kbdClass: 'a11y-kbd' },
+  a11y_dyslexia: { shortcutId: 'dyslexia-font', kbdClass: 'a11y-kbd' }
+};
+
+// MARK: PLATFORM DETECTION
+// Normalizes the host platform so shortcut labels can use mac/windows/linux variants.
+function detectPlatform(platformHint) {
+  const raw = String(platformHint || globalThis?.navigator?.platform || '').toLowerCase();
+  if (raw.includes('mac')) return 'mac';
+  if (raw.includes('win')) return 'windows';
+  return 'linux';
+}
+
+// MARK: PUBLIC SHORTCUT LOOKUPS
+// Resolves a shortcut object by its ID.
+export function getShortcutById(shortcutId) {
+  return keyboardShortcuts.find((shortcut) => shortcut.id === shortcutId) || null;
+}
+
+// Returns a display-friendly shortcut string for the current platform.
+export function getShortcutDisplay(shortcutId, platformHint) {
+  const shortcut = getShortcutById(shortcutId);
+  if (!shortcut) return '';
+
+  const platform = detectPlatform(platformHint);
+  return shortcut.labels?.[platform] || shortcut.labels?.linux || '';
+}
+
+// Returns contextual tooltip parts split into modifier label and key label.
+export function getShortcutTooltipParts(shortcutId) {
+  const shortcut = getShortcutById(shortcutId);
+  if (!shortcut) {
+    return {
+      kbdLabel: '',
+      kbdKey: '',
+      showPlus: false
+    };
+  }
+
+  const platform = detectPlatform();
+
+  const KEY_LABEL_BY_CODE = {
+    Enter: {
+      mac: 'Return',
+      windows: 'Enter',
+      linux: 'Enter'
+    },
+    Backspace: {
+      mac: 'Delete',
+      windows: 'Backspace',
+      linux: 'Backspace'
+    }
+  };
+
+  const explicitKeyLabel = KEY_LABEL_BY_CODE[shortcut.code]?.[platform];
+
+  const keyLabel = String(explicitKeyLabel || shortcut.code || '')
+    .replace(/^Key/, '')
+    .replace(/^Digit/, '');
+
+  const modifierLabels = [];
+  if (shortcut.ctrlKey) modifierLabels.push(platform === 'mac' ? '⌃' : 'Ctrl');
+  if (shortcut.altKey) modifierLabels.push('Alt');
+  if (shortcut.shiftKey) modifierLabels.push('Shift');
+  if (shortcut.metaKey) modifierLabels.push('Cmd');
+
+  return {
+    kbdLabel: modifierLabels.join(' + '),
+    kbdKey: keyLabel,
+    showPlus: modifierLabels.length > 0
+  };
+}
+
+// MARK: EVENT MATCHING
+// Returns true only when code and all modifier expectations match.
+function doesShortcutMatchEvent(shortcut, event) {
+  if (!shortcut || !event) return false;
+  if (event.code !== shortcut.code) return false;
+
+  return MODIFIER_ORDER.every((modifierName) => {
+    const expected = Boolean(shortcut[modifierName]);
+    const actual = Boolean(event[modifierName]);
+    return expected === actual;
+  });
+}
+
+// Finds the first configured shortcut matching a KeyboardEvent.
+export function matchShortcutEvent(event) {
+  if (!event) return null;
+  return keyboardShortcuts.find((shortcut) => doesShortcutMatchEvent(shortcut, event)) || null;
+}