mirror of
https://github.com/zadam/trilium.git
synced 2026-01-16 03:24:24 +01:00
115 lines
4.9 KiB
HTML
115 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
|
|
<!-- <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest"> -->
|
|
<title>Trilium Notes</title>
|
|
</head>
|
|
|
|
<body id="trilium-app">
|
|
<noscript><%= t("javascript-required") %></noscript>
|
|
|
|
<script>
|
|
// hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
|
|
document.getElementsByTagName("body")[0].style.display = "none";
|
|
</script>
|
|
|
|
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
|
|
|
|
<!-- Required for match the PWA's top bar color with the theme -->
|
|
<!-- This works even when the user directly changes --root-background in CSS -->
|
|
<div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
|
|
|
|
<!-- Bootstrap (request server for required information) -->
|
|
<script>
|
|
async function bootstrap() {
|
|
await setupGlob();
|
|
loadStylesheets();
|
|
loadIcons();
|
|
setBodyAttributes();
|
|
await loadScripts();
|
|
}
|
|
|
|
async function setupGlob() {
|
|
const response = await fetch("/bootstrap");
|
|
console.log("Service worker state", navigator.serviceWorker.controller);
|
|
console.log("Resp", response);
|
|
const json = await response.json();
|
|
console.log("Bootstrap", json);
|
|
|
|
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
|
|
window.glob = {
|
|
...json,
|
|
activeDialog: null
|
|
};
|
|
}
|
|
|
|
function loadStylesheets() {
|
|
const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
|
|
const cssToLoad = [];
|
|
cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
|
|
if (themeCssUrl) {
|
|
cssToLoad.push(themeCssUrl);
|
|
}
|
|
if (themeUseNextAsBase === "next") {
|
|
cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
|
|
} else if (themeUseNextAsBase === "next-dark") {
|
|
cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
|
|
} else if (themeUseNextAsBase === "next-light") {
|
|
cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
|
|
}
|
|
cssToLoad.push(`${assetPath}/stylesheets/style.css`);
|
|
|
|
for (const href of cssToLoad) {
|
|
const linkEl = document.createElement("link");
|
|
linkEl.href = href;
|
|
linkEl.rel = "stylesheet";
|
|
document.body.appendChild(linkEl);
|
|
}
|
|
}
|
|
|
|
function loadIcons() {
|
|
const styleEl = document.createElement("style");
|
|
styleEl.innerText = window.glob.iconPackCss;
|
|
document.head.appendChild(styleEl);
|
|
}
|
|
|
|
function setBodyAttributes() {
|
|
const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
|
|
const classesToSet = [
|
|
device,
|
|
`heading-style-${headingStyle}`,
|
|
`layout-${layoutOrientation}`,
|
|
`platform-${platform}`,
|
|
isElectron && "isElectron",
|
|
hasNativeTitleBar && "native-titlebar",
|
|
hasBackgroundEffects && "background-effects"
|
|
].filter(Boolean);
|
|
|
|
for (const classToSet of classesToSet) {
|
|
document.body.classList.add(classToSet);
|
|
}
|
|
|
|
document.body.lang = currentLocale.id;
|
|
document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
|
|
}
|
|
|
|
async function loadScripts() {
|
|
const assetPath = glob.assetPath;
|
|
await import(`./${assetPath}/runtime.js`);
|
|
await import(`./${assetPath}/desktop.js`);
|
|
}
|
|
|
|
bootstrap();
|
|
</script>
|
|
|
|
<!-- Required for correct loading of scripts in Electron -->
|
|
<script>
|
|
if (typeof module === 'object') {window.module = module; module = undefined;}
|
|
</script>
|
|
</body>
|
|
</html> |