content, css: generateDotSwitcherTemplate

2 files changed, 48 insertions, 0 deletions

diff --git a/src/content/dependencies/generateDotSwitcherTemplate.js b/src/content/dependencies/generateDotSwitcherTemplate.js
new file mode 100644
index 00000000..6d350b22
--- /dev/null
+++ b/src/content/dependencies/generateDotSwitcherTemplate.js
@@ -0,0 +1,29 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  slots: {
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
+    options: {
+      validate: v => v.strictArrayOf(v.isHTML),
+    },
+
+    initialOptionIndex: {type: 'number'},
+  },
+
+  generate: (slots, {html, language}) =>
+    html.tag('span', {class: 'dot-switcher'},
+      slots.attributes,
+
+      language.formatListWithoutSeparator(
+        slots.options
+          .map((option, index) =>
+            html.tag('span',
+              index === slots.initialOptionIndex &&
+                {class: 'current'},
+
+              option)))),
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index b49464e0..d4d9deb1 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -822,6 +822,25 @@ a:not([href]):hover {
   content: "\0020/\0020";
 }
 
+.dot-switcher > span:not(:first-child)::before {
+  content: "\0020\00b7\0020";
+  font-weight: 800;
+}
+
+.dot-switcher > span.current {
+  font-weight: 800;
+}
+
+.dot-switcher > span:not(.current) a {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+.dot-switcher > span.current a {
+  /* Keeping cursor: pointer (the default) is intentional here. */
+  text-decoration: none !important;
+}
+
 #secondary-nav {
   text-align: center;
 }