Render variables better

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

assets/scss/bergamot.scss

@@ -62,12 +62,12 @@
             @include bordered-block;
             padding: 0.5rem;
             font-family: $font-body;
+            border-style: dotted;
 
             &.active {
                 border-color: $primary-color;
+                border-style: solid;
                 font-weight: bold;
-                text-decoration: underline;
-                text-underline-offset: 0.15rem;
             }
 
             &:not(:first-child) {
@@ -84,6 +84,7 @@
 
         button.active + button {
             border-left-color: $primary-color;
+            border-left-style: solid;
         }
 
         margin-bottom: 1rem;

content/blog/01_types_basics.md

@@ -441,7 +441,7 @@ and already be up-to-speed on a big chunk of the content.
 | {{< latex >}}\frac{e_1 : \text{number}\quad e_2 : \text{number}}{e_1+e_2 : \text{number}} {{< /latex >}}| Adding numbers gives a number |
 
 #### Playground
-{{< bergamot_widget id="widget-one" query="" >}}
+{{< bergamot_widget id="widget-one" query="" prompt="PromptConverter @ prompt(type(empty, ?term, ?t)) <- input(?term);" >}}
 section "" {
     TNumber @ type(?Gamma, intlit(?n), number) <-;
     TString @ type(?Gamma, strlit(?s), string) <-;

layouts/shortcodes/bergamot_widget.html

@@ -15,6 +15,7 @@
          LatexMeta @ latex(metavariable(?l), ?l) <-;
          LatexIntLit @ latex(intlit(?i), ?l) <- latex(?i, ?l);
          LatexStrLit @ latex(strlit(?s), ?l) <- latex(?s, ?l);
+         LatexVar @ latex(var(?s), ?l) <- sym(?s), tostring(?s, ?l);
          LatexPlus @ latex(plus(?e_1, ?e_2), ?l) <- latex(?e_1, ?l_1), latex(?e_2, ?l_2), join([?l_1, " + ", ?l_2], ?l);
          LatexPair @ latex(pair(?e_1, ?e_2), ?l) <- latex(?e_1, ?l_1), latex(?e_2, ?l_2), join(["(", ?l_1, ",  ", ?l_2, ")"], ?l);
          LatexAbs @ latex(abs(?x, ?t, ?e), ?l) <- latex(?e, ?l_e), latex(?t, ?l_t), latex(?x, ?l_x), join(["\\\\lambda ", ?l_x, " : ", ?l_t, " . ", ?l_e], ?l);
@@ -35,8 +36,9 @@
          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);
     `;
+    const inputRules = `{{ .Get "prompt" }}`;
     var app = Elm.Main.init({
         node: document.getElementById('{{ .Get "id" }}'),
-        flags: { renderRules, rules: '{{- strings.Trim .Inner " \\n" -}}', query: '{{ .Get "query" }}' }
+        flags: { renderRules, inputRules, rules: '{{- strings.Trim .Inner " \\n" -}}', query: '{{ .Get "query" }}' }
     });
 </script>