Move bergamot widget into blog theme
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
parent
acaa00754b
commit
dee7579b29
98
assets/js/bergamot-helpers.js
Normal file
98
assets/js/bergamot-helpers.js
Normal file
|
@ -0,0 +1,98 @@
|
|||
const loadedWidgets = {};
|
||||
const getButtons = (inputGroup) => {
|
||||
return {
|
||||
play: inputGroup.querySelector(".bergamot-play"),
|
||||
reset: inputGroup.querySelector(".bergamot-reset"),
|
||||
close: inputGroup.querySelector(".bergamot-close"),
|
||||
}
|
||||
}
|
||||
const setRunning = (inputGroup, running) => {
|
||||
if (inputGroup !== null) {
|
||||
const buttons = getButtons(inputGroup);
|
||||
if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
|
||||
if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
|
||||
if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
|
||||
}
|
||||
}
|
||||
|
||||
// The object language parsing is handling by a separate standalone Elm
|
||||
// application in the ObjectLanguage module, which has two ports:
|
||||
//
|
||||
// * `parseString` requests a string to be parsed
|
||||
// * `parsedString` returns the parsed string, or null
|
||||
//
|
||||
// We want there to be a single global ObjectLanguage object, but it works
|
||||
// on a "subscription" model (we have to give a callback to its port).
|
||||
// Configure this callback to invoke `resolve` functions from a list,
|
||||
// so that callers can just get a promise. This way we aren't continuously
|
||||
// registering more and more handlers for each parsed string, and we can
|
||||
// use a convenient promise API.
|
||||
const parsingPromiseResolvers = {};
|
||||
const ensureObjectLanguage = () => {
|
||||
if (!window.Bergamot.ObjectLanguage) {
|
||||
window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
|
||||
window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
|
||||
if (string in parsingPromiseResolvers) {
|
||||
for (const resolver of parsingPromiseResolvers[string]) {
|
||||
resolver(term);
|
||||
}
|
||||
parsingPromiseResolvers[string] = [];
|
||||
}
|
||||
});
|
||||
}
|
||||
return window.Bergamot.ObjectLanguage;
|
||||
}
|
||||
const parseString = (str) => {
|
||||
if (!(str in parsingPromiseResolvers)) {
|
||||
parsingPromiseResolvers[str] = [];
|
||||
}
|
||||
|
||||
return new Promise(resolve => {
|
||||
parsingPromiseResolvers[str].push(resolve);
|
||||
ensureObjectLanguage().ports.parseString.send(str);
|
||||
});
|
||||
}
|
||||
|
||||
window.Bergamot = {};
|
||||
window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, input) => {
|
||||
var app = Elm.Main.init({
|
||||
node: document.getElementById(nodeId),
|
||||
flags: {
|
||||
inputModes: {
|
||||
"Languge Term": { "custom": "Language Term" },
|
||||
"Query": "query"
|
||||
},
|
||||
renderRules: window.Bergamot.renderPresets[renderPreset],
|
||||
rules, input
|
||||
}
|
||||
});
|
||||
app.ports.convertInput.subscribe(async ({ mode, input }) => {
|
||||
let query = await parseString(input);
|
||||
if (query !== null) {
|
||||
query = inputPrompt.replace("TERM", query);
|
||||
app.ports.receiveConverted.send({ input, result: { query } });
|
||||
} else {
|
||||
app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
|
||||
}
|
||||
});
|
||||
loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
|
||||
setRunning(inputGroup, true);
|
||||
};
|
||||
window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
|
||||
const preset = window.Bergamot.presets[presetName];
|
||||
window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
|
||||
};
|
||||
window.Bergamot.close = (inputGroup, nodeId) => {
|
||||
if (!(nodeId in loadedWidgets)) return;
|
||||
|
||||
const placeholderDiv = document.createElement('div');
|
||||
placeholderDiv.id = nodeId;
|
||||
|
||||
const widget = loadedWidgets[nodeId];
|
||||
const elmRoot = widget.parentNode.querySelector(".bergamot-root");
|
||||
elmRoot.replaceWith(placeholderDiv)
|
||||
delete loadedWidgets[nodeId];
|
||||
setRunning(inputGroup, false);
|
||||
}
|
||||
window.Bergamot.presets = {};
|
||||
window.Bergamot.renderPresets = {};
|
31
assets/js/katex-component.js
Normal file
31
assets/js/katex-component.js
Normal file
|
@ -0,0 +1,31 @@
|
|||
class KatexExpressionShim extends HTMLElement {
|
||||
static observedAttributes = ["expression", "katex-options"];
|
||||
targetSpan;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
doRender() {
|
||||
if (!this.targetSpan) return;
|
||||
|
||||
const options = this.hasAttribute("katex-options") ?
|
||||
this.getAttribute("katex-options") : {};
|
||||
katex.render(
|
||||
this.getAttribute("expression"),
|
||||
this.targetSpan,
|
||||
JSON.parse(options)
|
||||
);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.targetSpan = document.createElement('span');
|
||||
this.appendChild(this.targetSpan);
|
||||
this.doRender();
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
this.doRender();
|
||||
}
|
||||
}
|
||||
customElements.define("katex-expression", KatexExpressionShim);
|
|
@ -1,4 +1,7 @@
|
|||
[params]
|
||||
katexCssUrl = "//static.danilafe.com/katex/katex.min.css"
|
||||
katexJsUrl = "//static.danilafe.com/katex/katex.min.js"
|
||||
normalizeCssUrl = "//static.danilafe.com/normalize/normalize.css"
|
||||
visNetworkJsUrl = "//static.danilafe.com/vis-network/vis-network.min.js"
|
||||
bergamotJsUrl = "//static.danilafe.com/bergamot/bergamot.js"
|
||||
bergamotObjectLanguageJsUrl = "//static.danilafe.com/bergamot/objectlang.js"
|
||||
|
|
6
layouts/partials/bergamotrenderpreset.html
Normal file
6
layouts/partials/bergamotrenderpreset.html
Normal file
|
@ -0,0 +1,6 @@
|
|||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
window.Bergamot.renderPresets['{{ .name }}'] =
|
||||
{{ readFile (printf "static/bergamot/rendering/%s" .file) }};
|
||||
});
|
||||
</script>
|
|
@ -43,13 +43,33 @@
|
|||
{{ end }}
|
||||
<link rel="icon" type="image/png" href="{{ $icon.Permalink }}">
|
||||
|
||||
{{ if .Site.IsServer }}
|
||||
{{ if hugo.IsServer }}
|
||||
<!-- KaTeX auto-rendering for when we don't have a post-processing step. -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
|
||||
onload="renderMathInElement(document.body);"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.bergamot }}
|
||||
<!-- Code to support the Bergamot JS widget -->
|
||||
<script defer src="{{ .Site.Params.katexJsUrl }}" crossorigin="anonymous"></script>
|
||||
{{ $katexComponentJs := resources.Get "js/katex-component.js" | resources.Minify }}
|
||||
<script defer src="{{ $katexComponentJs.Permalink }}"></script>
|
||||
<script defer src="{{ .Site.Params.bergamotJsUrl }}"></script>
|
||||
<script defer src="{{ .Site.Params.bergamotObjectLanguageJsUrl }}"></script>
|
||||
{{ $bergamotHelpers := resources.Get "js/bergamot-helpers.js" | resources.Minify }}
|
||||
<script defer src="{{ $bergamotHelpers.Permalink }}"></script>
|
||||
{{ $bergamotStyle := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
|
||||
{{ partial "defercss.html" (dict "url" $bergamotStyle.Permalink "extra" "") }}
|
||||
{{ if .Params.bergamot.render_presets }}
|
||||
{{ range $name, $rulefile := .Params.bergamot.render_presets }}
|
||||
{{ partial "bergamotrenderpreset.html" (dict "name" $name "file" $rulefile) }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ partial "bergamotrenderpreset.html" (dict "name" "default" "file" "minimal.bergamot") }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.plausibleAnalyticsDomain }}
|
||||
<!-- Plausible analytics, because log parsing is not working all that well. -->
|
||||
<script defer data-domain="{{ . }}" src="https://plausible.io/js/script.js"></script>
|
||||
|
|
22
static/bergamot/rendering/minimal.bergamot
Normal file
22
static/bergamot/rendering/minimal.bergamot
Normal file
|
@ -0,0 +1,22 @@
|
|||
LatexListNil @ latexlist(nil, nil) <-;
|
||||
LatexListCons @ latexlist(cons(?x, ?xs), cons(?l_x, ?l_s)) <- latex(?x, ?l_x), latexlist(?xs, ?l_s);
|
||||
|
||||
IntercalateNil @ intercalate(?sep, nil, nil) <-;
|
||||
IntercalateConsCons @ intercalate(?sep, cons(?x_1, cons(?x_2, ?xs)), cons(?x_1, cons(?sep, ?ys))) <- intercalate(?sep, cons(?x_2, ?xs), ?ys);
|
||||
IntercalateConsNil @ intercalate(?sep, cons(?x, nil), cons(?x, nil)) <-;
|
||||
|
||||
NonEmpty @ nonempty(cons(?x, ?xs)) <-;
|
||||
|
||||
LatexInt @ latex(?i, ?l) <- int(?i), tostring(?i, ?l);
|
||||
LatexFloat @ latex(?f, ?l) <- float(?f), tostring(?f, ?l);
|
||||
LatexStr @ latex(?s, ?l) <- str(?s), escapestring(?s, ?l_1), latexifystring(?s, ?l_2), join(["\\texttt{\"", ?l_2, "\"}"], ?l);
|
||||
LatexMeta @ latex(metavariable(?l), ?l) <-;
|
||||
LatexLit @ latex(lit(?i), ?l) <- latex(?i, ?l);
|
||||
LatexVar @ latex(var(?s), ?l) <- latex(?s, ?l);
|
||||
|
||||
LatexIsInt @ latex(int(?e), ?l) <- latex(?e, ?l_e), join([?l_e, " \\in \\texttt{Int}"], ?l);
|
||||
LatexIsFloat @ latex(float(?e), ?l) <- latex(?e, ?l_e), join([?l_e, " \\in \\texttt{Float}"], ?l);
|
||||
LatexIsNum @ latex(num(?e), ?l) <- latex(?e, ?l_e), join([?l_e, " \\in \\texttt{Num}"], ?l);
|
||||
LatexIsStr @ latex(str(?e), ?l) <- latex(?e, ?l_e), join([?l_e, " \\in \\texttt{Str}"], ?l);
|
||||
LatexSym @ latex(?s, ?l) <- sym(?s), tostring(?s, ?l_1), join(["\\text{", ?l_1,"}"], ?l);
|
||||
LatexCall @ latex(?c, ?l) <- call(?c, ?n, ?ts), nonempty(?ts), latexlist(?ts, ?lts_1), intercalate(", ", ?lts_1, ?lts_2), join(?lts_2, ?lts_3), join(["\\text{", ?n, "}", "(", ?lts_3, ")"], ?l);
|
Loading…
Reference in New Issue
Block a user