marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

♻️ Refactor vendor inline JS to bundles

pull/100/head
James Panther 2022-01-12 11:20:59 +11:00
parent 4754607fb5
commit 5a775a49bd
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
4 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/js/chart.js 100644
View File

@ -0,0 +1,13 @@
function css(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
Chart.defaults.font.size = 14;
Chart.defaults.backgroundColor = css("--color-primary-300");
Chart.defaults.elements.point.borderColor = css("--color-primary-400");
Chart.defaults.elements.bar.borderColor = css("--color-primary-500");
Chart.defaults.elements.bar.borderWidth = 1;
Chart.defaults.elements.line.borderColor = css("--color-primary-400");
Chart.defaults.elements.arc.backgroundColor = css("--color-primary-200");
Chart.defaults.elements.arc.borderColor = css("--color-primary-500");
Chart.defaults.elements.arc.borderWidth = 1;

20
assets/js/mermaid.js 100644
View File

@ -0,0 +1,20 @@
function css(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
mermaid.initialize({
theme: "base",
themeVariables: {
background: css("--color-neutral"),
primaryColor: css("--color-primary-200"),
secondaryColor: css("--color-secondary-200"),
tertiaryColor: css("--color-neutral-100"),
primaryBorderColor: css("--color-primary-400"),
secondaryBorderColor: css("--color-secondary-400"),
tertiaryBorderColor: css("--color-neutral-400"),
lineColor: css("--color-neutral-600"),
fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px",
},
});

40
layouts/partials/vendor.html
View File

@ -1,38 +1,18 @@
{{/* Mermaid */}} {{/* Mermaid */}}
{{ if .Page.HasShortcode "mermaid" }} {{ if .Page.HasShortcode "mermaid" }}
{{ $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" }} {{ $mermaidLib := resources.Get "lib/mermaid/mermaid.min.js" }}
{{ $mermaidJS := $mermaidJS | resources.Fingerprint "sha512" }} {{ $mermaidConfig := resources.Get "js/mermaid.js" }}
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script> {{ $mermaidConfig := $mermaidConfig | resources.Minify }}
<script> {{ $mermaidJS := slice $mermaidLib $mermaidConfig | resources.Concat "js/mermaid.bundle.js" | resources.Fingerprint "sha512" }}
document.addEventListener('DOMContentLoaded', (event) => { <script defer type="text/javascript" src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
function css(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
mermaid.initialize({ theme: "base", themeVariables: { background: css("--color-neutral"), primaryColor: css("--color-primary-200"), secondaryColor: css("--color-secondary-200"), tertiaryColor: css("--color-neutral-100"), primaryBorderColor: css("--color-primary-400"), secondaryBorderColor: css("--color-secondary-400"), tertiaryBorderColor: css("--color-neutral-400"), lineColor: css("--color-neutral-600"), fontFamily: "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", fontSize: "16px" }});
});
</script>
{{ end }} {{ end }}
{{/* Chart */}} {{/* Chart */}}
{{ if .Page.HasShortcode "chart" }} {{ if .Page.HasShortcode "chart" }}
{{ $chartJS := resources.Get "lib/chart/chart.min.js" }} {{ $chartLib := resources.Get "lib/chart/chart.min.js" }}
{{ $chartJS := $chartJS | resources.Fingerprint "sha512" }} {{ $chartConfig := resources.Get "js/chart.js" }}
<script defer src="{{ $chartJS.RelPermalink }}" integrity="{{ $chartJS.Data.Integrity }}"></script> {{ $chartConfig := $chartConfig | resources.Minify }}
<script> {{ $chartJS := slice $chartLib $chartConfig | resources.Concat "js/chart.bundle.js" | resources.Fingerprint "sha512" }}
document.addEventListener('DOMContentLoaded', (event) => { <script defer type="text/javascript" src="{{ $chartJS.RelPermalink }}" integrity="{{ $chartJS.Data.Integrity }}"></script>
function css(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
Chart.defaults.font.size = 14;
Chart.defaults.backgroundColor = css("--color-primary-300");
Chart.defaults.elements.point.borderColor = css("--color-primary-400");
Chart.defaults.elements.bar.borderColor = css("--color-primary-500");
Chart.defaults.elements.bar.borderWidth = 1;
Chart.defaults.elements.line.borderColor = css("--color-primary-400");
Chart.defaults.elements.arc.backgroundColor = css("--color-primary-200");
Chart.defaults.elements.arc.borderColor = css("--color-primary-500");
Chart.defaults.elements.arc.borderWidth = 1;
});
</script>
{{ end }} {{ end }}
{{/* Katex */}} {{/* Katex */}}
{{ if .Page.HasShortcode "katex" }} {{ if .Page.HasShortcode "katex" }}

4
layouts/shortcodes/chart.html
View File

@ -1,8 +1,8 @@
<div class="chart"> <div class="chart">
{{ $id := delimit (shuffle (seq 1 9)) "" }} {{ $id := delimit (shuffle (seq 1 9)) "" }}
<canvas id="{{ $id }}"></canvas> <canvas id="{{ $id }}"></canvas>
<script> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
const ctx = document.getElementById("{{ $id }}"); const ctx = document.getElementById("{{ $id }}");
const chart = new Chart(ctx, { const chart = new Chart(ctx, {
{{ .Inner | safeJS }} {{ .Inner | safeJS }}