-
Notifications
You must be signed in to change notification settings - Fork 12
/
main.tsx
87 lines (75 loc) · 2.16 KB
/
main.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import AnchorJS from 'anchor-js';
import { h, render } from 'preact';
import PrimerSpec from './components/PrimerSpec';
import Config from './Config';
import { updateTheme } from './subthemes';
/**
* The entry point to the Primer Spec JS.
*/
function main() {
const anchors = new AnchorJS();
anchors.add('h1');
anchors.add();
const main_content_node = document.getElementById(
Config.PRIMER_SPEC_CONTENT_PLUGIN_NODE_ID,
);
const app_container_node = document.getElementById(
Config.PRIMER_SPEC_APP_NODE_ID,
);
if (
!main_content_node ||
main_content_node.tagName !== 'DIV' ||
!app_container_node ||
app_container_node.tagName !== 'DIV'
) {
throw new Error(
'Primer Spec: This page included the Primer Spec plugin script, but was not compatible with the plugin!',
);
}
const main_content_html = main_content_node.innerHTML;
main_content_node.remove();
injectPrimerSpecStyleSheets();
// Initialize the theme variables
updateTheme(
{
name: Config.INIT_SUBTHEME_NAME,
mode: Config.INIT_SUBTHEME_MODE,
},
false,
);
// Listen for changes to the OS system theme.
window
.matchMedia('(prefers-color-scheme: dark)')
.addListener(() => updateTheme());
render(<PrimerSpec contentHTML={main_content_html} />, app_container_node);
// To make the theme more discoverable for potential contributors:
console.info(
'\nThis page is formatted using %cPrimer Spec.%c\n\nWould you like to contribute to the theme? Check out:\nhttps://github.com/eecs485staff/primer-spec\n',
'font-weight: bolder;',
'',
);
}
function injectPrimerSpecStyleSheets() {
injectStyleSheet(
'https://use.fontawesome.com/releases/v5.7.2/css/all.css',
'sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr',
'anonymous',
);
}
function injectStyleSheet(
href: string,
integrity?: string | null,
crossOrigin?: string | null,
) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
if (integrity) {
link.integrity = integrity;
}
if (crossOrigin) {
link.crossOrigin = crossOrigin;
}
document.head.appendChild(link);
}
main();