"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import translationEN from '../assets/locales/en/translation.json'
import translationES from '../assets/locales/es/translation.json'

// Translations
const resources = {
  en: {
    translation: translationEN
  },
  es: {
    translation: translationES,
  }
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
  });

export default i18n;

const autoFocus = (element) => element?.focus();

function AutofocusedLink({ url, text }) {
  return (
    <a
      href={url}
      autoFocus
      ref={autoFocus}>
      {text}
    </a>
  )
}

export default AutofocusedLink

// CSS selector to find focusable elements
const FOCUSABLE_CSS_SELECTOR = `a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex], *[contenteditable]`;

// Find the first focusable element in a container (i.e. list)
function findFirstFocusable(container) {
  return container.querySelector(FOCUSABLE_CSS_SELECTOR);
}

// Auto-focus the first focusable item in element when its mounted
function autoFocusFirstFocusable(element) {
  if (element) {
    findFirstFocusable(element)?.focus();
  }
}

import React, { useEffect, useRef, useState } from 'react'
import { autoFocusFirstFocusable } from '../utils/focus'

function OptionsMenu({
  children = [ ],
}) {
  const menuRef = useRef(null);
  const [focusedIndex, setFocusedIndex] = useState(0);

  // Autofocus on the first element in the list
  useEffect(() => autoFocusFirstFocusable(menuRef?.current), [menuRef]);

  return (
    <>
      <menu
        ref={menuRef}
        role="menu">
        {React.Children.map(children, (child, index) =>
          React.cloneElement(child, {
            role: 'menuitem',
            className: ((index === focusedIndex) ? 'focused' : '')
          })
        )}
      </menu>
    </>
  )
}

export default OptionsMenu

name: Deploy Pages
on:
  push:
    branches:
      - main
permissions:
  contents: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: "Checkout 🛎️"
        uses: actions/checkout@v2
      - name: "Setup Node 🚧"
        uses: actions/setup-node@v4
        with:
          node-version: ">=20.11.0"
      - name: "Dependencies 🏗️"
        run: |
          npm ci
      - name: "Build 🔧"
        run: |
          npm run build
      - name: "Deploy 🚀"
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist