"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  }

import process from 'node:process'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/cloudphone-vue-sample' : '/',
})

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import es from './locales/es.json'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: en,
    es: es,
  },
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
  <section id="app">
    <h2>{{ t('about') }}</h2>
    <p>{{ t('about.description') }}</p>
  </section>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale, availableLocales } = useI18n()

const defaultLocale = 'en'
const savedLanguage = localStorage.getItem('lang')

// This is a very naive approach. Consider using a library
// that doesn't drop country codes
function getDefaultLanguage(languageSet) {
  const preferredLanguage = (navigator.language || '').split('-')[0].toLowerCase()
  if (languageSet.has(preferredLanguage)) return preferredLanguage
  return defaultLocale
}

// Restore saved locale, or set a reasonable default
if (!locale.value || savedLanguage) {
  locale.value = savedLanguage || getDefaultLanguage(new Set(availableLocales))
}
</script>

<script>
import { ref, watch } from 'vue'
const autofocus = (element) => element?.focus();

const langButton = ref(null)

// Auto-focus the language button
watch(langButton, (buttonRef) => autoFocus(buttonRef?.value))
</script>

<template>
  <button ref="langButton">
    {{ t('language') }}
  </button>
</template>

<script setup>
import { ref, watch } from 'vue'

// i.e. https://github.com/KittyGiraudel/focusable-selectors/blob/main/index.js
const FOCUSABLE_CSS_SELECTOR = `a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex], *[contenteditable]`

function findFirstFocusable(container) {
  return container.querySelector(FOCUSABLE_CSS_SELECTOR)
}

const autoFocusFirstFocusable = (element) => {
  if (element) {
    findFirstFocusable(element)?.focus()
  }
}

const menuRef = ref(null)
const focusedIndex = ref(0)

// Autofocus first element in list
watch(menuRef, (newRef) => autoFocusFirstFocusable(newRef?.value))
</script>

<template>
  <menu ref="menuRef">
    <component
      v-for="(child, index) in slots.default?.() || []"
      :key="index"
      :is="child"
      :class="{ focused: index === focusedIndex }"
    />
  </menu>
</template>

<template>
  <OptionsMenu>
    <RouterLink to="/about">{{ t('about') }}</RouterLink>
    <RouterLink to="/settings">{{ t('settings') }}</RouterLink>
    <a href="https://www.cloudfone.com/dev-privacy">
      {{ t('privacy') }}
    </a>
  </OptionsMenu>
</template>

name: Deploy Pages
on:
  push:
    branches:
      - main

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"
          cache: npm
      - name: "Dependencies 🏗️"
        run: |
          npm ci
      - name: "Build 🔧"
        run: |
          npm run build
        env:
          BASE_PATH: "/${{ github.event.repository.name }}"
      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: "dist/"

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: "Deploy 🚀"
        id: deployment
        uses: actions/deploy-pages@v4

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router