Web-Projects/blog-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow render rules to be customized using render presets

Browse Source 
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
Danila Fedorin 2024-09-15 13:49:57 -07:00
parent dde7df4604
commit 18eb1da5ba
4 changed files with 104 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
layouts/shortcodes/bergamot_js_css.html
View File

@ -3,7 +3,105 @@
{{ $style := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
<script defer>
const renderRules =
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 = {};
window.Bergamot.renderPresets["default"] =
`
PrecApp @ prec(app(?l, ?r), 100, left) <-;
PrecPlus @ prec(plus(?l, ?r), 80, either) <-;
@ -79,101 +177,4 @@ const renderRules =
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);
`;
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, renderRules, input) => {
var app = Elm.Main.init({
node: document.getElementById(nodeId),
flags: {
inputModes: {
"Languge Term": { "custom": "Language Term" },
"Query": "query"
},
renderRules, 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, renderRules, 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 = {};
</script>

1
layouts/shortcodes/bergamot_preset.html
View File

@ -3,5 +3,6 @@
rules: '{{ .Inner }}',
inputPrompt: '{{ .Get "prompt" }}',
query: '{{ .Get "query" }}',
renderPreset: '{{ default "default" (.Get "rendering") }}'
};
</script>

3
layouts/shortcodes/bergamot_render_preset.html Normal file
View File

@ -0,0 +1,3 @@
<script>
window.Bergamot.renderPresets['{{ .Get "name" }}'] = '{{ .Inner }}';
</script>

2
layouts/shortcodes/bergamot_widget.html
View File

@ -1,6 +1,6 @@
<div id="{{ .Get "id" }}"></div>
<script>
window.addEventListener('load', function() {
window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', renderRules, '{{ .Get "query" }}');
window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', '{{ default "default" (.Get "rendering") }}', '{{ .Get "query" }}');
});
</script>