Include rendering rules in Bergamot widget.

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

assets/scss/bergamot.scss

@@ -40,5 +40,38 @@
         flex-grow: 1;
         flex-basis: 0;
     }
+
+    .bergamot-selector {
+        button {
+            @include var(background-color, background-color);
+            @include var(color, text-color);
+            @include bordered-block;
+            padding: 0.5rem;
+            font-family: $font-body;
+
+            &.active {
+                border-color: $primary-color;
+                font-weight: bold;
+                text-decoration: underline;
+                text-underline-offset: 0.15rem;
             }
 
+            &:not(:first-child) {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+            }
+
+            &:not(:last-child) {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+                border-right-width: 0;
+            }
+        }
+
+        button.active + button {
+            border-left-color: $primary-color;
+        }
+
+        margin-bottom: 1rem;
+    }
+}

layouts/shortcodes/bergamot_widget.html

@@ -1,7 +1,40 @@
 <div id="{{ .Get "id" }}"></div>
 <script>
+    const renderRules =
+        `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);
+         LatexStr @ latex(?s, ?l) <- str(?s), escapestring(?s, ?l_1), latexifystring(?s, ?l_2), join(["\\\\texttt{\\"", ?l_2, "\\"}"], ?l);
+         LatexMeta @ latex(metavariable(?l), ?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);
+         LatexIntLit @ latex(intlit(?i), ?l) <- latex(?i, ?l);
+         LatexStrLit @ latex(strlit(?s), ?l) <- latex(?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);
+         LatexApp @ latex(app(?e_1, ?e_2), ?l) <- latex(?e_1, ?l_1), latex(?e_2, ?l_2), join([?l_1, " \\\\enspace ", ?l_2], ?l);
+
+         LatexTInt @ latex(tint, "\\\\text{tint}") <-;
+         LatexTStr @ latex(tstr, "\\\\text{tstr}") <-;
+         LatexTArr @ latex(tarr(?t_1, ?t_2), ?l) <- latex(?t_1, ?l_1), latex(?t_2, ?l_2), join([?l_1, " \\\\to ", ?l_2], ?l);
+         LatexTPair @ latex(tpair(?t_1, ?t_2), ?l) <- latex(?t_1, ?l_1), latex(?t_2, ?l_2), join([?l_1, " \\\\times ", ?l_2], ?l);
+
+         LatexTypeEmpty @ latex(empty, "\\\\varnothing") <-;
+         LatexTypeExtend @ latex(extend(?a, ?b, ?c), ?l) <- latex(?a, ?l_a), latex(?b, ?l_b), latex(?c, ?l_c), join([?l_a, " , ", ?l_b, " : ", ?l_c], ?l);
+         LatexTypeInenv @ latex(inenv(?x, ?t, ?G), ?l) <-latex(?x, ?l_x), latex(?t, ?l_t), latex(?G, ?l_G), join([?l_x, " : ", ?l_t, " \\\\in ", ?l_G], ?l);
+
+         LatexTypeBin @ latex(type(?e, ?t), ?l) <- latex(?e, ?l_e), latex(?t, ?l_t), join([?l_e, " : ", ?l_t], ?l);
+         LatexTypeTer @ latex(type(?G, ?e, ?t), ?l) <- latex(?G, ?l_G), latex(?e, ?l_e), latex(?t, ?l_t), join([?l_G, " \\\\vdash ", ?l_e, " : ", ?l_t], ?l);`;
     var app = Elm.Main.init({
         node: document.getElementById('{{ .Get "id" }}'),
-        flags: { rules: '{{- strings.Trim .Inner " \n" -}}', query: '{{ .Get "query" }}' }
+        flags: { renderRules, rules: '{{- strings.Trim .Inner " \\n" -}}', query: '{{ .Get "query" }}' }
     });
 </script>