diff --git a/config.toml b/config.toml
index 0e2c26f..c03ebdc 100644
--- a/config.toml
+++ b/config.toml
@@ -31,3 +31,7 @@ defaultContentLanguage = 'en'
   [languages.en]
     title = "Daniel's Blog"
     languageCode = "en-us"
+
+[params]
+bergamotJsUrl = "https://static.danilafe.com/bergamot/bergamot.js"
+katexExpressionJsUrl = "https://static.danilafe.com/katex-expression/katex-expression.esm.js"
diff --git a/layouts/shortcodes/bergamot_js_css.html b/layouts/shortcodes/bergamot_js_css.html
new file mode 100644
index 0000000..c36f7a4
--- /dev/null
+++ b/layouts/shortcodes/bergamot_js_css.html
@@ -0,0 +1,3 @@
+<script src="{{ .Site.Params.bergamotJsUrl }}"></script>
+{{ $style := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">
diff --git a/layouts/shortcodes/bergamot_widget.html b/layouts/shortcodes/bergamot_widget.html
new file mode 100644
index 0000000..5b701c7
--- /dev/null
+++ b/layouts/shortcodes/bergamot_widget.html
@@ -0,0 +1,7 @@
+<div id="{{ .Get "id" }}"></div>
+<script>
+    var app = Elm.Main.init({
+        node: document.getElementById('{{ .Get "id" }}'),
+        flags: { rules: '{{- strings.Trim .Inner " \n" -}}', query: '{{ .Get "query" }}' }
+    });
+</script>
diff --git a/layouts/shortcodes/katex_component_js.html b/layouts/shortcodes/katex_component_js.html
new file mode 100644
index 0000000..3b7a84c
--- /dev/null
+++ b/layouts/shortcodes/katex_component_js.html
@@ -0,0 +1 @@
+<script type="module" src="{{ .Site.Params.katexExpressionJsUrl }}"></script>