Add a Bergamot exercise shortcode to give exercises.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
Danila Fedorin 2023-12-27 23:31:00 -08:00
parent d7d7254a7b
commit 8742c6e7b9
3 changed files with 96 additions and 0 deletions

View File

@ -1,6 +1,78 @@
@import "variables.scss"; @import "variables.scss";
@import "mixins.scss"; @import "mixins.scss";
.bergamot-exercise {
@include bordered-block;
padding: 1em;
counter-increment: bergamot-exercise;
.bergamot-root {
border: none;
padding: 0;
margin-top: 1em;
}
.bergamot-exercise-label {
.bergamot-exercise-number::after {
content: "Exercise " counter(bergamot-exercise);
font-weight: bold;
text-decoration: underline;
}
}
.bergamot-button {
@include bordered-block;
padding: 0.25em;
padding-left: 1em;
padding-right: 1em;
background-color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.25s;
font-family: $font-body;
@include var(color, text-color);
&.bergamot-hidden {
display: none;
}
.feather {
margin-right: 0.5em;
}
}
.bergamot-play {
.feather { color: $primary-color; }
&:hover, &:focus {
.feather { color: lighten($primary-color, 20%); }
}
}
.bergamot-reset {
.feather { color: #0099CC; }
&:hover, &:focus {
.feather { color: lighten(#0099CC, 20%); }
}
svg {
fill: none;
}
}
.bergamot-close {
.feather { color: tomato; }
&:hover, &:focus {
.feather { color: lighten(tomato, 20%); }
}
}
.bergamot-button-group {
margin-top: 0.5em;
}
}
.bergamot-root { .bergamot-root {
@include bordered-block; @include bordered-block;
padding: 1em; padding: 1em;

View File

@ -0,0 +1,18 @@
<div class="bergamot-exercise">
<span class="bergamot-exercise-label">
{{ partial "icon.html" "edit-2" }}
<span class="bergamot-exercise-number"></span>
{{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
</span>
{{ .Inner }}
<div class="bergamot-button-group">
{{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
{{ else }}
<button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
<button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
{{ end }}
</div>
<div id="bergamot-widget-container-{{ .Get "id" }}"></div>
</div>

View File

@ -0,0 +1,6 @@
<script>
window.Bergamot.presets['{{ .Get "name" }}'] = {
rules: '{{ .Inner }}',
inputPrompt: '{{ .Get "prompt" }}',
};
</script>