Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 2969bc7

Browse files
davidmurdochjeffsmale90
davidmurdoch
and
jeffsmale90
authored
docs: preloads docs assets (#4384)
Co-authored-by: jeffsmale90 <[email protected]>
1 parent 87cdedc commit 2969bc7

File tree

7 files changed

+271
-237
lines changed

7 files changed

+271
-237
lines changed

‎docs/assets/js/ganache/ganache.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/js/ganache/ganache.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/js/inject-editor.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
require.config({
22
paths: {
33
vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs"
4+
},
5+
onNodeCreated: function (node) {
6+
node.setAttribute("crossorigin", "anonymous");
47
}
58
});
69

@@ -13,7 +16,7 @@ function escapeHtml(unsafe) {
1316
.replace(/'/g, "&#039;");
1417
}
1518

16-
function getTheme() {
19+
function getTheme(userTheme) {
1720
const styles = getComputedStyle(document.querySelector("#page"));
1821

1922
const format = str => str.trim().substring(1, 9);
@@ -55,7 +58,7 @@ function getTheme() {
5558
{ token: "string", foreground: text4 },
5659
{ token: "keyword", foreground: text6 }
5760
];
58-
const base = getUserColorTheme() === "light" ? "vs" : "vs-dark";
61+
const base = userTheme === "light" ? "vs" : "vs-dark";
5962
return {
6063
base,
6164
colors: {
@@ -75,7 +78,7 @@ function getTheme() {
7578
const newTheme = e.target.checked === true ? "light" : "dark";
7679
localStorage.setItem("theme", newTheme);
7780
document.documentElement.setAttribute("data-theme", newTheme);
78-
monaco.editor.defineTheme("ganache", getTheme());
81+
monaco.editor.defineTheme("ganache", getTheme(newTheme));
7982
});
8083
})();
8184

@@ -103,9 +106,9 @@ require(["vs/editor/editor.main"], function () {
103106
const libUri = "ts:filename/provider.d.ts";
104107
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
105108
monaco.editor.createModel(libSource, "typescript", monaco.Uri.parse(libUri));
106-
monaco.editor.defineTheme("ganache", getTheme());
109+
monaco.editor.defineTheme("ganache", getTheme(userColorTheme));
107110

108-
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
111+
const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
109112
let ganachePromise = null;
110113
async function downloadGanacheIfNeeded() {
111114
if (Ganache) return;

‎docs/assets/js/preload.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎docs/index.html‎

Lines changed: 127 additions & 105 deletions
Large diffs are not rendered by default.

‎docs/typedoc/classes/default.html‎

Lines changed: 99 additions & 99 deletions
Large diffs are not rendered by default.

‎scripts/build-docs/index.ts‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,13 @@ const preamble =
447447
448448
**Pro Tip**: You can define your own provider by adding \`const provider = ganache.provider({})\` to the start of any example and passing in your [startup options](https://trufflesuite.com/docs/ganache/reference/cli-options/).`);
449449

450+
// this font is loaded when you navigate to ganache. Others are loaded as well, but they are dependent on the
451+
// User-Agent and thus different browsers get different versions. To verify check what fonts are downloaded, load
452+
// ganache.dev with devtools open, and check the `Font` tab within the Network tab.
453+
const fontPreload = `
454+
<link rel="preload" crossorigin="anonymous" as="font" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs/base/browser/ui/codicons/codicon/codicon.ttf">
455+
`;
456+
450457
const html = `
451458
<!DOCTYPE html>
452459
<html lang="en">
@@ -455,17 +462,44 @@ const html = `
455462
<meta name="description" content="Ganache Ethereum JSON-RPC Documentation" />
456463
<meta name="author" content="David Murdoch" />
457464
<meta name="viewport" content="width=device-width, initial-scale=1">
458-
<script src="./assets/js/preload.js"></script>
465+
459466
<link rel="shortcut icon" href="./assets/img/favicon.png" />
460467
468+
${fontPreload}
469+
461470
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,300,400|Share+Tech+Mono&display=swap" rel="stylesheet" />
462471
<link href="https://fonts.googleapis.com/css?family=Grand+Hotel&text=Ganache" rel="stylesheet" />
463472
<link rel="stylesheet" href="./assets/css/main.css" />
464473
<link rel="stylesheet" href="./assets/css/highlight-truffle.css" />
474+
<link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" />
475+
<link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.0/min/vs/editor/editor.main.js" crossorigin="anonymous" />
476+
<link rel="preload" as="script" href="./assets/js/inject-editor.js" />
477+
478+
<script>
479+
function getUserColorTheme() {
480+
const localTheme = localStorage.getItem("theme");
481+
if (localTheme) {
482+
return localTheme;
483+
} else if (
484+
window.matchMedia &&
485+
window.matchMedia("(prefers-color-scheme: light)").matches
486+
) {
487+
return "light";
488+
} else {
489+
return "dark";
490+
}
491+
}
492+
493+
const userColorTheme = getUserColorTheme();
494+
document.documentElement.setAttribute("data-theme", userColorTheme);
495+
</script>
465496
</head>
466497
<body>
467498
<input type="checkbox" id="sidebar-switch" tabindex="1">
468499
<input type="checkbox" id="theme-switch" tabindex="2">
500+
<script>
501+
document.querySelector("#theme-switch").checked = userColorTheme === "light";
502+
</script>
469503
<div class="container" id="page">
470504
<header>
471505
<svg style="position:absolute;pointer-events:none;opacity:0;" width="10" height="10" viewBox="0 0 10 10">
@@ -516,13 +550,6 @@ const html = `
516550
</article>
517551
</main>
518552
</div>
519-
<script>
520-
(function initColorTheme() {
521-
const theme = getUserColorTheme();
522-
const checked = theme === "light" ? true : false;
523-
document.querySelector("#theme-switch").checked = checked;
524-
})();
525-
</script>
526553
527554
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous"></script>
528555
<script src="./assets/js/inject-editor.js"></script>

0 commit comments

Comments
 (0)