Speak the editor in each person's Home Assistant language: every text in the editor section of en.json, the mockup in the screens' language, and one Language & region card for all screens
- vue-i18n 11 with the Composition API: English comes with the page, any other language loads the first time it is needed from screen_manager/translations, and a text a language lacks shows in English. The build keeps only _meta and editor of each file (vite.config.ts), never the screens' or the add-on's texts. - The editor follows the language of the user's Home Assistant profile (<html lang> of Home Assistant's page), else the browser's; plural forms follow the file's _meta.plural, with the screens' rules. - Every request tells the add-on the editor's language (X-ESP-Screens-Language), so its own words can follow it. - The mockup draws the screens' words (Unavailable, Page 2 ›, the date, "5 min ago") in the screens' language, with their clock and number format. - Settings → Language & region: the screen language, time format and number format for every screen, with the user's own profile offered when it differs. The per-screen clock choice goes; the top bar points there. A screen that still needs the new language says so in its update badge. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+26
-2
@@ -1,5 +1,20 @@
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { defineConfig } from "vite";
|
||||
import { defineConfig, type Plugin } from "vite";
|
||||
|
||||
// Every language is one file in screen_manager/translations (app 0.2.90), shared with the firmware and the add-on. The
|
||||
// page needs only the language itself (_meta) and the editor's texts: the screens' and the add-on's texts stay out of
|
||||
// the build. Before Vite's own JSON step, so the modules it makes hold these two sections only.
|
||||
export function editorTexts(): Plugin {
|
||||
return {
|
||||
name: "esp-screens-editor-texts",
|
||||
enforce: "pre",
|
||||
transform(code, id) {
|
||||
if (!/[\\/]screen_manager[\\/]translations[\\/][^\\/?]+\.json$/.test(id)) return null;
|
||||
const { _meta, editor } = JSON.parse(code);
|
||||
return { code: JSON.stringify({ _meta, editor }), map: null };
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// The add-on serves the built page from screen_manager/app/static behind Home Assistant ingress,
|
||||
// which lives on a sub path with a token. Everything is relative so the page works there and on
|
||||
@@ -7,7 +22,14 @@ import { defineConfig } from "vite";
|
||||
// files change. `npm run dev` proxies /api to a running server (the demo home or SCREEN_DEV).
|
||||
export default defineConfig({
|
||||
base: "./",
|
||||
plugins: [vue()],
|
||||
plugins: [editorTexts(), vue()],
|
||||
// vue-i18n's switches (app 0.2.90): the Composition API only, texts compiled in the page, no devtools in the build.
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: true,
|
||||
__VUE_I18N_LEGACY_API__: false,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
__INTLIFY_DROP_MESSAGE_COMPILER__: false,
|
||||
},
|
||||
build: {
|
||||
outDir: "../screen_manager/app/static",
|
||||
emptyOutDir: false,
|
||||
@@ -16,5 +38,7 @@ export default defineConfig({
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: { "/api": { target: "http://127.0.0.1:8099", changeOrigin: false } },
|
||||
// The translations live beside the add-on, outside web/.
|
||||
fs: { allow: [".", "../screen_manager/translations"] },
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user