mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Use __STATIC_PATH__
in more places so the supervisor panel can reach paths (#16665)
Use __STATIC_PATH__ in more places so the supervisor panel can reach paths
This commit is contained in:
parent
d9d38efd93
commit
5006dfc138
@ -259,6 +259,7 @@ module.exports.config = {
|
|||||||
isHassioBuild: true,
|
isHassioBuild: true,
|
||||||
defineOverlay: {
|
defineOverlay: {
|
||||||
__SUPERVISOR__: true,
|
__SUPERVISOR__: true,
|
||||||
|
__STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -111,9 +111,10 @@ gulp.task("copy-translations-supervisor", async () => {
|
|||||||
copyTranslations(staticDir);
|
copyTranslations(staticDir);
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("copy-locale-data-supervisor", async () => {
|
gulp.task("copy-static-supervisor", async () => {
|
||||||
const staticDir = paths.hassio_output_static;
|
const staticDir = paths.hassio_output_static;
|
||||||
copyLocaleData(staticDir);
|
copyLocaleData(staticDir);
|
||||||
|
copyFonts(staticDir);
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("copy-static-app", async () => {
|
gulp.task("copy-static-app", async () => {
|
||||||
|
@ -21,7 +21,7 @@ gulp.task(
|
|||||||
"build-supervisor-translations",
|
"build-supervisor-translations",
|
||||||
"copy-translations-supervisor",
|
"copy-translations-supervisor",
|
||||||
"build-locale-data",
|
"build-locale-data",
|
||||||
"copy-locale-data-supervisor",
|
"copy-static-supervisor",
|
||||||
env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
|
env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@ -37,7 +37,7 @@ gulp.task(
|
|||||||
"build-supervisor-translations",
|
"build-supervisor-translations",
|
||||||
"copy-translations-supervisor",
|
"copy-translations-supervisor",
|
||||||
"build-locale-data",
|
"build-locale-data",
|
||||||
"copy-locale-data-supervisor",
|
"copy-static-supervisor",
|
||||||
env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
|
env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
|
||||||
"gen-pages-hassio-prod",
|
"gen-pages-hassio-prod",
|
||||||
...// Don't compress running tests
|
...// Don't compress running tests
|
||||||
|
@ -98,11 +98,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async _initializeLocalize() {
|
private async _initializeLocalize() {
|
||||||
const { language, data } = await getTranslation(
|
const { language, data } = await getTranslation(null, this._language);
|
||||||
null,
|
|
||||||
this._language,
|
|
||||||
"/api/hassio/app/static/translations"
|
|
||||||
);
|
|
||||||
|
|
||||||
this._updateSupervisor({
|
this._updateSupervisor({
|
||||||
localize: await computeLocalize<SupervisorKeys>(
|
localize: await computeLocalize<SupervisorKeys>(
|
||||||
|
@ -15,7 +15,7 @@ export const polyfillLocaleData = async (language: string) => {
|
|||||||
typeof Intl.NumberFormat.__addLocaleData === "function"
|
typeof Intl.NumberFormat.__addLocaleData === "function"
|
||||||
) {
|
) {
|
||||||
const result = await fetch(
|
const result = await fetch(
|
||||||
`/static/locale-data/intl-numberformat/${language}.json`
|
`${__STATIC_PATH__}locale-data/intl-numberformat/${language}.json`
|
||||||
);
|
);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Intl.NumberFormat.__addLocaleData(await result.json());
|
Intl.NumberFormat.__addLocaleData(await result.json());
|
||||||
@ -26,7 +26,7 @@ export const polyfillLocaleData = async (language: string) => {
|
|||||||
typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
|
typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
|
||||||
) {
|
) {
|
||||||
const result = await fetch(
|
const result = await fetch(
|
||||||
`/static/locale-data/intl-relativetimeformat/${language}.json`
|
`${__STATIC_PATH__}locale-data/intl-relativetimeformat/${language}.json`
|
||||||
);
|
);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Intl.RelativeTimeFormat.__addLocaleData(await result.json());
|
Intl.RelativeTimeFormat.__addLocaleData(await result.json());
|
||||||
@ -37,7 +37,7 @@ export const polyfillLocaleData = async (language: string) => {
|
|||||||
typeof Intl.DateTimeFormat.__addLocaleData === "function"
|
typeof Intl.DateTimeFormat.__addLocaleData === "function"
|
||||||
) {
|
) {
|
||||||
const result = await fetch(
|
const result = await fetch(
|
||||||
`/static/locale-data/intl-datetimeformat/${language}.json`
|
`${__STATIC_PATH__}locale-data/intl-datetimeformat/${language}.json`
|
||||||
);
|
);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Intl.DateTimeFormat.__addLocaleData(await result.json());
|
Intl.DateTimeFormat.__addLocaleData(await result.json());
|
||||||
@ -48,7 +48,7 @@ export const polyfillLocaleData = async (language: string) => {
|
|||||||
typeof Intl.DisplayNames.__addLocaleData === "function"
|
typeof Intl.DisplayNames.__addLocaleData === "function"
|
||||||
) {
|
) {
|
||||||
const result = await fetch(
|
const result = await fetch(
|
||||||
`/static/locale-data/intl-displaynames/${language}.json`
|
`${__STATIC_PATH__}locale-data/intl-displaynames/${language}.json`
|
||||||
);
|
);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Intl.DisplayNames.__addLocaleData(await result.json());
|
Intl.DisplayNames.__addLocaleData(await result.json());
|
||||||
|
@ -9,7 +9,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Thin"),
|
local("Roboto Thin"),
|
||||||
local("Roboto-Thin"),
|
local("Roboto-Thin"),
|
||||||
url(/static/fonts/roboto/Roboto-Thin.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Thin.woff2) format("woff2");
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -18,7 +18,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Thin Italic"),
|
local("Roboto Thin Italic"),
|
||||||
local("Roboto-ThinItalic"),
|
local("Roboto-ThinItalic"),
|
||||||
url(/static/fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@ -27,7 +27,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Light"),
|
local("Roboto Light"),
|
||||||
local("Roboto-Light"),
|
local("Roboto-Light"),
|
||||||
url(/static/fonts/roboto/Roboto-Light.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Light.woff2) format("woff2");
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -36,7 +36,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Light Italic"),
|
local("Roboto Light Italic"),
|
||||||
local("Roboto-LightItalic"),
|
local("Roboto-LightItalic"),
|
||||||
url(/static/fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@ -45,7 +45,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Regular"),
|
local("Roboto Regular"),
|
||||||
local("Roboto-Regular"),
|
local("Roboto-Regular"),
|
||||||
url(/static/fonts/roboto/Roboto-Regular.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Regular.woff2) format("woff2");
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -54,7 +54,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Italic"),
|
local("Roboto Italic"),
|
||||||
local("Roboto-Italic"),
|
local("Roboto-Italic"),
|
||||||
url(/static/fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@ -63,7 +63,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Medium"),
|
local("Roboto Medium"),
|
||||||
local("Roboto-Medium"),
|
local("Roboto-Medium"),
|
||||||
url(/static/fonts/roboto/Roboto-Medium.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Medium.woff2) format("woff2");
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -72,7 +72,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Medium Italic"),
|
local("Roboto Medium Italic"),
|
||||||
local("Roboto-MediumItalic"),
|
local("Roboto-MediumItalic"),
|
||||||
url(/static/fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@ -81,7 +81,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Bold"),
|
local("Roboto Bold"),
|
||||||
local("Roboto-Bold"),
|
local("Roboto-Bold"),
|
||||||
url(/static/fonts/roboto/Roboto-Bold.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Bold.woff2) format("woff2");
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -90,7 +90,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Bold Italic"),
|
local("Roboto Bold Italic"),
|
||||||
local("Roboto-BoldItalic"),
|
local("Roboto-BoldItalic"),
|
||||||
url(/static/fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@ -99,7 +99,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Black"),
|
local("Roboto Black"),
|
||||||
local("Roboto-Black"),
|
local("Roboto-Black"),
|
||||||
url(/static/fonts/roboto/Roboto-Black.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-Black.woff2) format("woff2");
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -108,7 +108,7 @@ font-family: "Roboto";
|
|||||||
src:
|
src:
|
||||||
local("Roboto Black Italic"),
|
local("Roboto Black Italic"),
|
||||||
local("Roboto-BlackItalic"),
|
local("Roboto-BlackItalic"),
|
||||||
url(/static/fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
|
url(${__STATIC_PATH__}fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
@ -5,15 +5,15 @@ import {
|
|||||||
import { translationMetadata } from "../resources/translations-metadata";
|
import { translationMetadata } from "../resources/translations-metadata";
|
||||||
import { HomeAssistant } from "../types";
|
import { HomeAssistant } from "../types";
|
||||||
|
|
||||||
const DEFAULT_BASE_URL = "/static/translations";
|
const BASE_URL = `${__STATIC_PATH__}translations`;
|
||||||
const STORAGE = window.localStorage || {};
|
const STORAGE = window.localStorage || {};
|
||||||
|
|
||||||
// Store loaded translations in memory so translations are available immediately
|
// Store loaded translations in memory so translations are available immediately
|
||||||
// when DOM is created in Polymer. Even a cache lookup creates noticeable latency.
|
// when DOM is created in Polymer. Even a cache lookup creates noticeable latency.
|
||||||
const translations = {};
|
const translations = {};
|
||||||
|
|
||||||
async function fetchTranslation(fingerprint: string, base_url: string) {
|
async function fetchTranslation(fingerprint: string) {
|
||||||
const response = await fetch(`${base_url}/${fingerprint}`, {
|
const response = await fetch(`${BASE_URL}/${fingerprint}`, {
|
||||||
credentials: "same-origin",
|
credentials: "same-origin",
|
||||||
});
|
});
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@ -131,13 +131,12 @@ export function getLocalLanguage() {
|
|||||||
|
|
||||||
export async function getTranslation(
|
export async function getTranslation(
|
||||||
fragment: string | null,
|
fragment: string | null,
|
||||||
language: string,
|
language: string
|
||||||
base_url?: string
|
|
||||||
) {
|
) {
|
||||||
const metadata = translationMetadata.translations[language];
|
const metadata = translationMetadata.translations[language];
|
||||||
if (!metadata?.hash) {
|
if (!metadata?.hash) {
|
||||||
if (language !== "en") {
|
if (language !== "en") {
|
||||||
return getTranslation(fragment, "en", base_url);
|
return getTranslation(fragment, "en");
|
||||||
}
|
}
|
||||||
throw new Error("Language en is not found in metadata");
|
throw new Error("Language en is not found in metadata");
|
||||||
}
|
}
|
||||||
@ -149,16 +148,13 @@ export async function getTranslation(
|
|||||||
|
|
||||||
// Fetch translation from the server
|
// Fetch translation from the server
|
||||||
if (!translations[fingerprint]) {
|
if (!translations[fingerprint]) {
|
||||||
translations[fingerprint] = fetchTranslation(
|
translations[fingerprint] = fetchTranslation(fingerprint)
|
||||||
fingerprint,
|
|
||||||
base_url || DEFAULT_BASE_URL
|
|
||||||
)
|
|
||||||
.then((data) => ({ language, data }))
|
.then((data) => ({ language, data }))
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
delete translations[fingerprint];
|
delete translations[fingerprint];
|
||||||
if (language !== "en") {
|
if (language !== "en") {
|
||||||
// Couldn't load selected translation. Try a fall back to en before failing.
|
// Couldn't load selected translation. Try a fall back to en before failing.
|
||||||
return getTranslation(fragment, "en", base_url);
|
return getTranslation(fragment, "en");
|
||||||
}
|
}
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user