hematite 0.0.11 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_config.yml +3 -3
- data/_includes/extern_library_imports.html +7 -0
- data/_includes/katex_includes.html +1 -1
- data/_includes/mermaid_includes.html +24 -0
- data/_includes/settings.html +101 -0
- data/_layouts/default.html +6 -2
- data/_layouts/remark_slideshow.html +77 -0
- data/_sass/_elements.scss +17 -0
- data/_sass/_hljs.scss +36 -0
- data/_sass/_layout.scss +15 -0
- data/_sass/_nav.scss +14 -1
- data/_sass/hematite.scss +1 -0
- data/assets/html/remark_presentation_frame.html.resource +69 -0
- data/assets/html/settings.html +1 -92
- data/assets/img/favicon-alternate.svg +12 -0
- data/assets/js/Settings.mjs +5 -3
- data/assets/js/UrlHelper.mjs +20 -0
- data/assets/js/dropdownExpander.mjs +2 -1
- data/assets/js/layout/remark_slideshow.mjs +164 -0
- data/assets/js/search.mjs +59 -14
- data/assets/plugin/mermaid/mermaid.core.js +31940 -0
- data/assets/plugin/mermaid/mermaid.core.js.map +1 -0
- data/assets/plugin/mermaid/mermaid.js +129094 -0
- data/assets/plugin/mermaid/mermaid.js.map +1 -0
- data/assets/plugin/remark_presenter/README.txt +2 -0
- data/assets/plugin/remark_presenter/remark.min.js +18 -0
- data/assets/string_data/en.mjs +5 -1
- data/assets/string_data/es.mjs +5 -1
- data/assets/style_only_syntax.scss +11 -0
- metadata +17 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7c31b77be5a329f70985b04f78078a87cf74d79c1f462018d8eed576e18efadc
|
4
|
+
data.tar.gz: 643ca6f28aaf67740b9e71b9de4a0f21bbe08f0f139b95e7b67819b28f9b1648
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3200f91d6ddd479b360c08b74862ff2a1260d45a92d3e84aa5c9686556cea7303835129c10329bd1b84d0cf965225eeb0808771f4d8edb338870feeb2d9c52e2
|
7
|
+
data.tar.gz: 79a331beca39bdfb4c1f8fb9447a3f04f9f36cb7f17856103b24353c875bc2ca36a77f866613d03d11daa3fff95a45de727d4a7a977eb022f5f4df31f09590d7
|
data/_config.yml
CHANGED
@@ -1,9 +1,6 @@
|
|
1
1
|
|
2
2
|
# Settings for the demo site.
|
3
3
|
# `jekyll serve` does not auto-reload this file.
|
4
|
-
#
|
5
|
-
# See https://leo3418.github.io/collections/multilingual-jekyll-site/localize-strings
|
6
|
-
# for how localization works.
|
7
4
|
|
8
5
|
title: Hematite Theme
|
9
6
|
description: A Jekyll theme intended for course websites
|
@@ -12,6 +9,9 @@ permalink: pretty
|
|
12
9
|
hematite:
|
13
10
|
auto_invert_imgs: true
|
14
11
|
|
12
|
+
# Set to true to minimize the header by default
|
13
|
+
minimize_header: false
|
14
|
+
|
15
15
|
# Date options are as specified here:
|
16
16
|
# https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
|
17
17
|
date_format:
|
@@ -0,0 +1,24 @@
|
|
1
|
+
|
2
|
+
<!--
|
3
|
+
Include mermaid-js scripts.
|
4
|
+
-->
|
5
|
+
{% if page.mermaid || site.mermaid %}
|
6
|
+
<script>
|
7
|
+
var MERMAID_CONFIG = window.MERMAID_CONFIG ?? {{ site.mermaid_config | jsonify }} ?? { };
|
8
|
+
|
9
|
+
// Load defaults
|
10
|
+
MERMAID_CONFIG.startOnLoad ??= true;
|
11
|
+
MERMAID_CONFIG.htmlLabels ??= true;
|
12
|
+
</script>
|
13
|
+
<script
|
14
|
+
defer
|
15
|
+
src="{{ "assets/plugin/mermaid/mermaid.js" | relative_url }}"
|
16
|
+
{% comment %}
|
17
|
+
Here, we're also calling "mermaid.init()" because of the defer attribute — it's
|
18
|
+
possible that the window has already loaded (and thus startOnLoad may have no effect).
|
19
|
+
{% endcomment %}
|
20
|
+
onload="mermaid.initialize(MERMAID_CONFIG); mermaid.init();" >
|
21
|
+
</script>
|
22
|
+
|
23
|
+
{% endif %}
|
24
|
+
|
@@ -0,0 +1,101 @@
|
|
1
|
+
<!--
|
2
|
+
See assets/html/settings.html. This file can be included
|
3
|
+
in your own settings page and add your settings to it!
|
4
|
+
-->
|
5
|
+
|
6
|
+
<!-- So they can be localized, much of this page is filled by JavaScript -->
|
7
|
+
<!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
|
8
|
+
<fieldset>
|
9
|
+
<legend id="font_legend">settings_font_legend</legend>
|
10
|
+
<div>
|
11
|
+
<label id="font_family_lbl" for="font_family">settings_font_family_label</label>
|
12
|
+
<select id="font_family"></select>
|
13
|
+
</div>
|
14
|
+
<div>
|
15
|
+
<label id="font_size_lbl" for="font_size">settings_font_size_label</label>
|
16
|
+
<select id="font_size">
|
17
|
+
</select>
|
18
|
+
</div>
|
19
|
+
</fieldset>
|
20
|
+
|
21
|
+
<fieldset>
|
22
|
+
<legend id="theme_legend">page_theme_legend</legend>
|
23
|
+
<div>
|
24
|
+
<label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
|
25
|
+
<select id="page_theme"></select>
|
26
|
+
</div>
|
27
|
+
<div>
|
28
|
+
<label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
|
29
|
+
<input type="checkbox" id="minimize_page_hdr"/>
|
30
|
+
</div>
|
31
|
+
</fieldset>
|
32
|
+
|
33
|
+
<script type="module">
|
34
|
+
import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
|
35
|
+
import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
|
36
|
+
|
37
|
+
let settingsTextElemIDs = [
|
38
|
+
`settings_header`, `settings_description`, `font_legend`,
|
39
|
+
`font_family_lbl`, `font_size_lbl`, `theme_legend`,
|
40
|
+
`page_theme_lbl`, `page_minimize_header_lbl`,
|
41
|
+
];
|
42
|
+
|
43
|
+
// Localize all descriptive settings elements (each should contian the
|
44
|
+
// name of its localization key).
|
45
|
+
for (const id of settingsTextElemIDs) {
|
46
|
+
let elem = document.querySelector(`#${id}`);
|
47
|
+
|
48
|
+
if (elem) {
|
49
|
+
elem.innerText = stringLookup(elem.innerText);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
let fontSizeSelect = document.querySelector("#font_size");
|
54
|
+
let fontFamilySelect = document.querySelector("#font_family");
|
55
|
+
let pageThemeSelect = document.querySelector("#page_theme");
|
56
|
+
let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
|
57
|
+
|
58
|
+
pageThemeSelect.innerHTML =
|
59
|
+
`
|
60
|
+
<option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
|
61
|
+
<option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
|
62
|
+
<option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
|
63
|
+
`;
|
64
|
+
|
65
|
+
fontFamilySelect.innerHTML =
|
66
|
+
`
|
67
|
+
<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
68
|
+
<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
|
69
|
+
<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
|
70
|
+
`;
|
71
|
+
|
72
|
+
fontSizeSelect.innerHTML =
|
73
|
+
`
|
74
|
+
<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
75
|
+
<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
|
76
|
+
<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
|
77
|
+
<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
|
78
|
+
`;
|
79
|
+
|
80
|
+
fontSizeSelect.oninput = () => {
|
81
|
+
Settings.setFontSize(fontSizeSelect.value);
|
82
|
+
};
|
83
|
+
|
84
|
+
fontFamilySelect.oninput = () => {
|
85
|
+
Settings.setFontFamily(fontFamilySelect.value);
|
86
|
+
};
|
87
|
+
|
88
|
+
pageThemeSelect.oninput = () => {
|
89
|
+
Settings.setTheme(pageThemeSelect.value);
|
90
|
+
};
|
91
|
+
|
92
|
+
minimizeHeaderCheckbox.oninput = () => {
|
93
|
+
Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
|
94
|
+
};
|
95
|
+
|
96
|
+
pageThemeSelect.value = Settings.getTheme();
|
97
|
+
fontFamilySelect.value = Settings.getFontFamily();
|
98
|
+
fontSizeSelect.value = Settings.getFontSize();
|
99
|
+
minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
|
100
|
+
|
101
|
+
</script>
|
data/_layouts/default.html
CHANGED
@@ -10,10 +10,14 @@ title: Untitled
|
|
10
10
|
{% assign content_start = page.content | slice: 0, 100 %}
|
11
11
|
<meta name="description" content={{ page.description | default: content_start | strip_html | jsonify }}/>
|
12
12
|
<link rel="stylesheet" href="{{ "assets/style.css" | relative_url }}"/>
|
13
|
-
|
13
|
+
{% if page.favicon_url_absolute or site.favicon_url_absolute %}
|
14
|
+
<link rel="icon" href="{{ page.favicon_url_absolute | default: site.favicon_url_absolute }}"/>
|
15
|
+
{% else %}
|
16
|
+
<link rel="icon" href="{{ page.favicon_url | default: site.favicon_url | default: "assets/img/favicon.svg" | absolute_url }}"/>
|
17
|
+
{% endif %}
|
14
18
|
<script type="module" src="{{ "assets/js/main.mjs" | relative_url }}"></script>
|
15
19
|
|
16
|
-
{% include
|
20
|
+
{% include extern_library_imports.html %}
|
17
21
|
|
18
22
|
<title>{{ page.title }} — {{ site.title }}</title>
|
19
23
|
</head>
|
@@ -0,0 +1,77 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<!-- Defines a https://remarkjs.com/ slideshow -->
|
6
|
+
|
7
|
+
{% assign frame_resource_url = 'assets/html/remark_presentation_frame.html.resource' | relative_url %}
|
8
|
+
|
9
|
+
<main class="slideshow-mode">
|
10
|
+
<iframe
|
11
|
+
id="presentation_frame"
|
12
|
+
onload="window.presentationFrameLoaded = true;"></iframe>
|
13
|
+
</main>
|
14
|
+
|
15
|
+
<script defer type="module">
|
16
|
+
import slideshow from "{{ 'assets/js/layout/remark_slideshow.mjs' | relative_url }}";
|
17
|
+
|
18
|
+
let presentationFrame = document.querySelector("#presentation_frame");
|
19
|
+
presentationFrame.src = {{ frame_resource_url | jsonify }};
|
20
|
+
window.presentationFrameLoaded = false;
|
21
|
+
|
22
|
+
let config = {{ page.remark_presentation_config | default: site.remark_presentation_config | jsonify }};
|
23
|
+
config ??= {};
|
24
|
+
|
25
|
+
config.source = {{ page.content | jsonify }};
|
26
|
+
|
27
|
+
// Library imports intended for this page: Forward to the frame.
|
28
|
+
let libraryImports = unescape(`
|
29
|
+
{% capture library_imports %}
|
30
|
+
{% include extern_library_imports.html %}
|
31
|
+
{% endcapture %}
|
32
|
+
{{ library_imports | url_encode | replace: "+", " " }}
|
33
|
+
`);
|
34
|
+
|
35
|
+
// To be called after the presentation iframe loads.
|
36
|
+
window.initSlides = () => {
|
37
|
+
let presentationDoc = presentationFrame.contentDocument;
|
38
|
+
let presentationWin = presentationFrame.contentWindow;
|
39
|
+
|
40
|
+
// Ensure that onload doesn't get called again if the frame reloads.
|
41
|
+
presentationFrame.onload = null;
|
42
|
+
|
43
|
+
// Re-create the document, add the library imports to it.
|
44
|
+
let slideshowHtml = presentationDoc.documentElement.outerHTML;
|
45
|
+
|
46
|
+
presentationDoc.open();
|
47
|
+
presentationDoc.write("<!DOCTYPE html>");
|
48
|
+
presentationDoc.write(slideshowHtml);
|
49
|
+
presentationDoc.write(libraryImports);
|
50
|
+
presentationDoc.write(`
|
51
|
+
<${"script"}>
|
52
|
+
if (window.MERMAID_CONFIG) {
|
53
|
+
window.MERMAID_CONFIG.useMaxWidth = true;
|
54
|
+
window.MERMAID_CONFIG.cloneCssStyles = false;
|
55
|
+
window.MERMAID_CONFIG.flowchart = { useMaxWidth: true };
|
56
|
+
}
|
57
|
+
</${"script"}>
|
58
|
+
`);
|
59
|
+
presentationDoc.close();
|
60
|
+
(async () => {
|
61
|
+
await slideshow.start(presentationFrame.contentWindow, config);
|
62
|
+
|
63
|
+
// Ensure that mermaid has already been run!
|
64
|
+
if (presentationWin.mermaid) {
|
65
|
+
presentationWin.mermaid.init();
|
66
|
+
console.log("Ran mermaid!");
|
67
|
+
}
|
68
|
+
})();
|
69
|
+
};
|
70
|
+
|
71
|
+
if (window.presentationFrameLoaded) {
|
72
|
+
initSlides();
|
73
|
+
}
|
74
|
+
else {
|
75
|
+
presentationFrame.onload = initSlides;
|
76
|
+
}
|
77
|
+
</script>
|
data/_sass/_elements.scss
CHANGED
@@ -117,14 +117,31 @@ input::placeholder {
|
|
117
117
|
}
|
118
118
|
}
|
119
119
|
|
120
|
+
table {
|
121
|
+
border-collapse: collapse;
|
122
|
+
}
|
123
|
+
|
120
124
|
table td {
|
121
125
|
border: 1px solid var(--line-color-light);
|
126
|
+
padding: 3px;
|
127
|
+
}
|
128
|
+
|
129
|
+
table th {
|
130
|
+
padding: 4px;
|
131
|
+
font-weight: bold;
|
122
132
|
}
|
123
133
|
|
124
134
|
fieldset {
|
125
135
|
border-color: var(--line-color-normal);
|
126
136
|
margin-bottom: 30px;
|
127
137
|
}
|
138
|
+
|
139
|
+
blockquote {
|
140
|
+
border-left: 1px solid var(--line-color-light);
|
141
|
+
margin-left: 10px;
|
142
|
+
padding-left: 20px;
|
143
|
+
color: var(--text-color-faint);
|
144
|
+
}
|
128
145
|
}
|
129
146
|
|
130
147
|
// Markdown parsers may put `code` elements inside of `pre`
|
data/_sass/_hljs.scss
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
|
2
|
+
// Created while referencing rouge-github.scss as published
|
3
|
+
// at https://github.com/pages-themes/cayman/blob/master/_sass/rouge-github.scss
|
4
|
+
|
5
|
+
.hljs {
|
6
|
+
color: var(--syntax-normal-fg);
|
7
|
+
display: block;
|
8
|
+
white-space: pre-wrap;
|
9
|
+
|
10
|
+
// Keywords and literals
|
11
|
+
.hljs-keyword, .hljs-literal {
|
12
|
+
color: var(--syntax-keyword-fg);
|
13
|
+
}
|
14
|
+
|
15
|
+
.hljs-literal {
|
16
|
+
font-weight: bold;
|
17
|
+
color: var(--syntax-name-fg);
|
18
|
+
}
|
19
|
+
|
20
|
+
// Strings
|
21
|
+
.hljs-string {
|
22
|
+
color: var(--syntax-string-fg);
|
23
|
+
}
|
24
|
+
|
25
|
+
// Numbers
|
26
|
+
.hljs-number {
|
27
|
+
color: var(--syntax-number-fg);
|
28
|
+
}
|
29
|
+
|
30
|
+
|
31
|
+
// Comments
|
32
|
+
.hljs-comment {
|
33
|
+
color: var(--syntax-comment-fg);
|
34
|
+
font-style: italic;
|
35
|
+
}
|
36
|
+
}
|
data/_sass/_layout.scss
CHANGED
@@ -154,6 +154,21 @@ nav#post_next_prev {
|
|
154
154
|
flex-grow: 1;
|
155
155
|
}
|
156
156
|
|
157
|
+
main.slideshow-mode {
|
158
|
+
position: absolute;
|
159
|
+
display: flex;
|
160
|
+
|
161
|
+
left: 0;
|
162
|
+
right: 0;
|
163
|
+
top: var(--header-effective-height);
|
164
|
+
bottom: 0;
|
165
|
+
|
166
|
+
iframe {
|
167
|
+
flex-grow: 1;
|
168
|
+
border: none;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
157
172
|
// On mobile devices,
|
158
173
|
@media screen and (max-width: $site-content-preferred-width) {
|
159
174
|
.main-container {
|
data/_sass/_nav.scss
CHANGED
@@ -41,6 +41,14 @@ body > header {
|
|
41
41
|
}
|
42
42
|
}
|
43
43
|
|
44
|
+
:root {
|
45
|
+
--header-effective-height: var(--header-height);
|
46
|
+
}
|
47
|
+
|
48
|
+
:root.minimizedNavHeader {
|
49
|
+
--header-effective-height: 0px;
|
50
|
+
}
|
51
|
+
|
44
52
|
:root.minimizedNavHeader body > header {
|
45
53
|
> *:not(#toggle_sidebar_btn) {
|
46
54
|
opacity: 0;
|
@@ -48,6 +56,11 @@ body > header {
|
|
48
56
|
transition: opacity 0.5s ease;
|
49
57
|
}
|
50
58
|
|
59
|
+
#toggle_sidebar_btn {
|
60
|
+
padding-left: 4px;
|
61
|
+
width: var(--header-height);
|
62
|
+
}
|
63
|
+
|
51
64
|
word-wrap: break-word;
|
52
65
|
width: var(--header-height);
|
53
66
|
padding: 0;
|
@@ -57,7 +70,7 @@ body > header {
|
|
57
70
|
|
58
71
|
// The minimizedNavHeader class is added after page load. Make the
|
59
72
|
// transition less jarring.
|
60
|
-
animation:
|
73
|
+
animation: grow-in 0.5s ease 1;
|
61
74
|
}
|
62
75
|
|
63
76
|
:root.minimizedNavHeader.hasOpenSidebar body > header {
|
data/_sass/hematite.scss
CHANGED
@@ -0,0 +1,69 @@
|
|
1
|
+
---
|
2
|
+
---
|
3
|
+
<!-- Using a .html.resource file to prevent Jekyll from changing the extension -->
|
4
|
+
|
5
|
+
<!DOCTYPE html>
|
6
|
+
<html class="lightTheme" lang="{{ page.lang | default: site.lang | default: "en-US" }}">
|
7
|
+
<head>
|
8
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
9
|
+
<meta charset="utf-8"/>
|
10
|
+
<!-- Content of remark presentation iframe. Based on https://github.com/gnab/remark/wiki#getting-started -->
|
11
|
+
<style>
|
12
|
+
/* Stylesheet mostly taken from https://github.com/gnab/remark/wiki#getting-started */
|
13
|
+
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
|
14
|
+
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
|
15
|
+
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
|
16
|
+
|
17
|
+
body { font-family: 'Droid Serif'; }
|
18
|
+
h1, h2, h3 {
|
19
|
+
font-family: 'Yanone Kaffeesatz';
|
20
|
+
font-weight: normal;
|
21
|
+
}
|
22
|
+
|
23
|
+
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
|
24
|
+
|
25
|
+
/* Show hidden slides to allow preprocessors (e.g. mermaid) to
|
26
|
+
properly account for container size.
|
27
|
+
*/
|
28
|
+
@media screen {
|
29
|
+
.remark-slide-container:not(.remark-visible) {
|
30
|
+
display: block;
|
31
|
+
box-shadow: none;
|
32
|
+
z-index: -999;
|
33
|
+
visibility: hidden;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
nav {
|
38
|
+
display: flex;
|
39
|
+
|
40
|
+
position: absolute;
|
41
|
+
z-index: 10000;
|
42
|
+
bottom: 0;
|
43
|
+
left: 0;
|
44
|
+
right: 0;
|
45
|
+
opacity: 0.8;
|
46
|
+
}
|
47
|
+
|
48
|
+
nav:hover, nav:focus-within {
|
49
|
+
opacity: 1;
|
50
|
+
}
|
51
|
+
|
52
|
+
@media print {
|
53
|
+
nav {
|
54
|
+
display: none;
|
55
|
+
}
|
56
|
+
|
57
|
+
/* Prevent parts of slides from being cut off on Firefox */
|
58
|
+
.remark-slide-scaler {
|
59
|
+
transform: none !important;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
</style>
|
64
|
+
<link rel="stylesheet" href="{{ 'assets/style_only_syntax.css' | relative_url }}" />
|
65
|
+
</head>
|
66
|
+
<body>
|
67
|
+
</body>
|
68
|
+
<script src="{{ 'assets/plugin/remark_presenter/remark.min.js' | relative_url }}"></script>
|
69
|
+
</html>
|
data/assets/html/settings.html
CHANGED
@@ -6,98 +6,7 @@ noindex: true
|
|
6
6
|
|
7
7
|
<noscript>JavaScript is required to view this page's content!</noscript>
|
8
8
|
|
9
|
-
<!-- So they can be localized, much of this page is filled by JavaScript -->
|
10
9
|
<h1 id="settings_header">page_settings_header</h1>
|
11
10
|
<p id="settings_description">page_settings_description</p>
|
12
11
|
|
13
|
-
|
14
|
-
<fieldset>
|
15
|
-
<legend id="font_legend">settings_font_legend</legend>
|
16
|
-
<div>
|
17
|
-
<label id="font_family_lbl" for="font_family">settings_font_family_label</label>
|
18
|
-
<select id="font_family"></select>
|
19
|
-
</div>
|
20
|
-
<div>
|
21
|
-
<label id="font_size_lbl" for="font_size">settings_font_size_label</label>
|
22
|
-
<select id="font_size">
|
23
|
-
</select>
|
24
|
-
</div>
|
25
|
-
</fieldset>
|
26
|
-
|
27
|
-
<fieldset>
|
28
|
-
<legend id="theme_legend">page_theme_legend</legend>
|
29
|
-
<div>
|
30
|
-
<label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
|
31
|
-
<select id="page_theme"></select>
|
32
|
-
</div>
|
33
|
-
<div>
|
34
|
-
<label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
|
35
|
-
<input type="checkbox" id="minimize_page_hdr"/>
|
36
|
-
</fieldset>
|
37
|
-
|
38
|
-
<script type="module">
|
39
|
-
import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
|
40
|
-
import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
|
41
|
-
|
42
|
-
let settingsTextElemIDs = [
|
43
|
-
`settings_header`, `settings_description`, `font_legend`,
|
44
|
-
`font_family_lbl`, `font_size_lbl`, `theme_legend`,
|
45
|
-
`page_theme_lbl`, `page_minimize_header_lbl`,
|
46
|
-
];
|
47
|
-
|
48
|
-
// Localize all descriptive settings elements (each should contian the
|
49
|
-
// name of its localization key).
|
50
|
-
for (const id of settingsTextElemIDs) {
|
51
|
-
let elem = document.querySelector(`#${id}`);
|
52
|
-
elem.innerText = stringLookup(elem.innerText);
|
53
|
-
}
|
54
|
-
|
55
|
-
let fontSizeSelect = document.querySelector("#font_size");
|
56
|
-
let fontFamilySelect = document.querySelector("#font_family");
|
57
|
-
let pageThemeSelect = document.querySelector("#page_theme");
|
58
|
-
let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
|
59
|
-
|
60
|
-
pageThemeSelect.innerHTML =
|
61
|
-
`
|
62
|
-
<option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
|
63
|
-
<option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
|
64
|
-
<option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
|
65
|
-
`;
|
66
|
-
|
67
|
-
fontFamilySelect.innerHTML =
|
68
|
-
`
|
69
|
-
<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
70
|
-
<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
|
71
|
-
<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
|
72
|
-
`;
|
73
|
-
|
74
|
-
fontSizeSelect.innerHTML =
|
75
|
-
`
|
76
|
-
<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
77
|
-
<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
|
78
|
-
<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
|
79
|
-
<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
|
80
|
-
`;
|
81
|
-
|
82
|
-
fontSizeSelect.oninput = () => {
|
83
|
-
Settings.setFontSize(fontSizeSelect.value);
|
84
|
-
};
|
85
|
-
|
86
|
-
fontFamilySelect.oninput = () => {
|
87
|
-
Settings.setFontFamily(fontFamilySelect.value);
|
88
|
-
};
|
89
|
-
|
90
|
-
pageThemeSelect.oninput = () => {
|
91
|
-
Settings.setTheme(pageThemeSelect.value);
|
92
|
-
};
|
93
|
-
|
94
|
-
minimizeHeaderCheckbox.oninput = () => {
|
95
|
-
Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
|
96
|
-
};
|
97
|
-
|
98
|
-
pageThemeSelect.value = Settings.getTheme();
|
99
|
-
fontFamilySelect.value = Settings.getFontFamily();
|
100
|
-
fontSizeSelect.value = Settings.getFontSize();
|
101
|
-
minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
|
102
|
-
|
103
|
-
</script>
|
12
|
+
{% include settings.html %}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
2
|
+
<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
3
|
+
<defs>
|
4
|
+
<filter id="filter7674" x="-.25" y="-.25" width="1.5" height="1.5" color-interpolation-filters="sRGB">
|
5
|
+
<feGaussianBlur stdDeviation="12.0308382"/>
|
6
|
+
</filter>
|
7
|
+
</defs>
|
8
|
+
<g>
|
9
|
+
<path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#9300cf" filter="url(#filter7674)" transform="scale(1.01) rotate(30deg) translate(2, 10)" transform-origin="center"/>
|
10
|
+
<path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#f61616"/>
|
11
|
+
</g>
|
12
|
+
</svg>
|
data/assets/js/Settings.mjs
CHANGED
@@ -49,7 +49,8 @@ class Settings {
|
|
49
49
|
}
|
50
50
|
|
51
51
|
getHeaderMinimized() {
|
52
|
-
let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
|
52
|
+
let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
|
53
|
+
?? {{ site.hematite.user_config.minimize_header | default: site.hematite.minimize_header | default: "false" | jsonify }};
|
53
54
|
return minimizedStr == "true";
|
54
55
|
}
|
55
56
|
|
@@ -163,9 +164,10 @@ class Settings {
|
|
163
164
|
|
164
165
|
document.documentElement.classList.add("minimizedNavHeader");
|
165
166
|
|
166
|
-
// Animate the header.
|
167
167
|
if (header) {
|
168
|
-
|
168
|
+
// Re-show the header
|
169
|
+
// Rely on a CSS animation for animating the header's return.
|
170
|
+
await AnimationUtil.expandInVert(header, 0);
|
169
171
|
}
|
170
172
|
})();
|
171
173
|
}
|
data/assets/js/UrlHelper.mjs
CHANGED
@@ -62,6 +62,22 @@ var UrlHelper = {
|
|
62
62
|
return url.substring(hashLoc, argsStart);
|
63
63
|
},
|
64
64
|
|
65
|
+
// Replace an existing hash with a [newHash]. The new hash
|
66
|
+
//
|
67
|
+
withReplacedHash(url, newHash) {
|
68
|
+
let hashLoc = url.lastIndexOf('#');
|
69
|
+
|
70
|
+
if ((newHash + "").charAt(0) != '#') {
|
71
|
+
newHash = `#${newHash}`;
|
72
|
+
}
|
73
|
+
|
74
|
+
if (hashLoc == -1) {
|
75
|
+
return url + newHash;
|
76
|
+
}
|
77
|
+
|
78
|
+
return url.substring(0, hashLoc) + newHash;
|
79
|
+
},
|
80
|
+
|
65
81
|
/// Remove metadata encoded in the given URL and returns
|
66
82
|
/// it.
|
67
83
|
/// If [url] is undefined, uses the page's URL.
|
@@ -115,4 +131,8 @@ assertEq("Trimming metadata",
|
|
115
131
|
"https://example.com/"
|
116
132
|
);
|
117
133
|
|
134
|
+
assertEq("Replacing a hash",
|
135
|
+
UrlHelper.withReplacedHash("https://example.com/#foo", "bar"),
|
136
|
+
"https://example.com/#bar");
|
137
|
+
|
118
138
|
export default UrlHelper;
|