Move bergamot widget into blog theme

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
Danila Fedorin 2024-09-15 15:28:31 -07:00
parent acaa00754b
commit dee7579b29
6 changed files with 181 additions and 1 deletions

View 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 = {};

View 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);

View File

@ -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"

View File

@ -0,0 +1,6 @@
<script>
window.addEventListener('load', function() {
window.Bergamot.renderPresets['{{ .name }}'] =
{{ readFile (printf "static/bergamot/rendering/%s" .file) }};
});
</script>

View File

@ -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>

View 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);