cloudron-box/frontend/src/filemanager.js

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

import './style.css';

import '@fontsource/noto-sans';

import { createRouter, createWebHashHistory } from 'vue-router';

import { fetcher } from 'pankow';

import FileManager from './FileManager.vue';
import Home from './views/Home.vue';
import Viewer from './views/Viewer.vue';

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home/:type?/:resourceId?/:cwd*', component: Home },
  { path: '/viewer/:type/:resourceId/:filePath*', component: Viewer }
];

const router = createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHashHistory(),
  routes,
});

const translations = {};
const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages: translations,
  // will replace our double {{}} to vue-i18n single brackets
  messageResolver: (keys, key) => {
    let message = key.split('.').reduce((o, k) => o && o[k] || null, keys);

    // fallback tr key
    if (message === null) message = key;

    return message.replaceAll('{{', '{').replaceAll('}}', '}');
  }
});

// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
(async function loadLanguages() {
  const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';

  async function loadLanguage(lang) {
    try {
      const result = await fetcher.get(`${API_ORIGIN}/translation/${lang}.json`);
      translations[lang] = result.body;
    } catch (e) {
      console.error(`Failed to load language file for ${lang}`, e);
    }
  }

  await loadLanguage('en');

  const locale = window.localStorage.NG_TRANSLATE_LANG_KEY;
  if (locale && locale !== 'en') {
    await loadLanguage(locale);

    if (i18n.mode === 'legacy') {
      i18n.global.locale = locale;
    } else {
      i18n.global.locale.value = locale;
    }
  }

  const app = createApp(FileManager);

  app.use(i18n);
  app.use(router);

  app.mount('#app');
})();