content, css: generateIntrapageDotSwitcher: custom cue

2 files changed, 35 insertions, 5 deletions

diff --git a/src/content/dependencies/generateIntrapageDotSwitcher.js b/src/content/dependencies/generateIntrapageDotSwitcher.js
index 1d58367d..cd92b165 100644
--- a/src/content/dependencies/generateIntrapageDotSwitcher.js
+++ b/src/content/dependencies/generateIntrapageDotSwitcher.js
@@ -39,11 +39,32 @@ export default {
         stitchArrays({
           title: slots.titles,
           targetID: slots.targetIDs,
-        }).map(({title, targetID}) =>
-            html.tag('a', {href: '#'},
-              {'data-target-id': targetID},
-              {[html.onlyIfContent]: true},
+        }).map(({title, targetID}) => {
+            const {content} = html.smush(title);
 
-              language.sanitize(title))),
+            const customCue =
+              content.find(item =>
+                item?.tagName === 'span' &&
+                item.attributes.has('class', 'dot-switcher-interaction-cue'));
+
+            const cue =
+              (customCue && !html.isBlank(customCue)
+                ? customCue.content
+                : language.sanitize(title));
+
+            const a =
+              html.tag('a', {href: '#'},
+                {'data-target-id': targetID},
+                {[html.onlyIfContent]: true},
+
+                cue);
+
+            if (customCue) {
+              content.splice(content.indexOf(customCue), 1, a);
+              return html.tags(content, {[html.joinChildren]: ''});
+            } else {
+              return a;
+            }
+          }),
     }),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index e721a532..d5f4e292 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1116,7 +1116,16 @@ a .normal-content {
   font-weight: 800;
 }
 
+.dot-switcher > span {
+  color: #ffffffcc;
+}
+
 .dot-switcher > span.current {
+  font-weight: normal;
+  color: white;
+}
+
+.dot-switcher > span.current a {
   font-weight: 800;
 }