"scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
  }
};

export default config;

import i18n from 'sveltekit-i18n';

export const getLanguageName = (contextLanguage, languageCode) => {
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
  return new Intl.DisplayNames([contextLanguage], {
    type: 'language'
  }).of(languageCode);
};

/** @type {import('sveltekit-i18n').Config} */
const config = ({
  translations: {
    en: {
      en: getLanguageName('en-US', 'en'),
      es: getLanguageName('en-US', 'es-MX'),
    },
    es: {
      en: getLanguageName('es-MX', 'en-US'),
      es: getLanguageName('es-MX', 'es-MX'),
    },
  },
  loaders: [
    {
      locale: 'en',
      key: 'common',
      loader: async () => (
        await import('./en/common.json')
      ).default,
    },
    {
      locale: 'es',
      key: 'common',
      loader: async () => (
        await import('./es/common.json')
      ).default,
    },
    {
      locale: 'en',
      key: 'about',
      loader: async () => (
        await import('./en/about.json')
      ).default,
    },
    {
      locale: 'es',
      key: 'about',
      loader: async () => (
        await import('./es/about.json')
      ).default,
    }
  ],
});

export const { t, locale, locales, loading, loadTranslations } = new i18n(config);

import { locale, locales, loadTranslations } from '$lib/translations/index';

const defaultLocale = 'en';

// 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;
}

// Disable server side rendering (SSR)
export const ssr = false;

/** @type {import('@sveltejs/kit').Load} */
export const load = async () => {
  // Default to the user-selected locale, if set
  // Otherwise try to match the browser language, if available
  const userLanguage = locale.get();
  const initialLocale = (userLanguage) ? userLanguage : getDefaultLanguage(new Set(locales.get()));

  await loadTranslations(initialLocale);

  return {};
};

<script>
  const autofocus = (element) => element?.focus();
</script>

<section id="app">
  <h1>Settings</h1>
  <button autofocus>Language</button>
</section>

<script>
	const autofocus = (element) => element?.focus();
</script>

<section id="app">
  <h1>Settings</h1>
  <button use:autofocus>Language</button>
</section>

// 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();
  }
}

<script>
  import { autoFocusFirstFocusable } from "$lib/utils";

  const { items = [] } = $props();
</script>

<menu use:autoFocusFirstFocusable>
  {#each items as item, index}
    <a {...item}>{item.text}</a>
  {/each}
</menu>

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      fallback: 'index.html'
    }),
    paths: {
      base: ((process.env.NODE_ENV === 'production') ?
        '/cloudphone-svelte-sample' : ''),
    }
  }
};

export default config;

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: "build/"

  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