"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.cloudphone.tech/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;