« get me outta code hell

content, client, css: accents in content headings - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-11-07 20:31:57 -0400
committer(quasar) nebula <qznebula@protonmail.com>2023-11-09 16:07:36 -0400
commitb8e612f9723ef1b890a1af8745e3f165220ce9d1 (patch)
treed92c6f29dc93f80ad921bdf5a8b9745ce09ad3e6 /src/content
parent7166db580d57504b5ec42d9d07078ea24f0b1149 (diff)
content, client, css: accents in content headings
Diffstat (limited to 'src/content')
-rw-r--r--src/content/dependencies/generateContentHeading.js26
1 files changed, 23 insertions, 3 deletions
diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js
index ccaf1076..56f68cb3 100644
--- a/src/content/dependencies/generateContentHeading.js
+++ b/src/content/dependencies/generateContentHeading.js
@@ -1,19 +1,39 @@
 export default {
   extraDependencies: ['html'],
+  contentDependencies: ['generateColorStyleVariables'],
+
+  relations: (relation) => ({
+    colorVariables: relation('generateColorStyleVariables'),
+  }),
 
   slots: {
     title: {type: 'html'},
+    accent: {type: 'html'},
+
+    color: {validate: v => v.isColor},
+
     id: {type: 'string'},
     tag: {type: 'string', default: 'p'},
   },
 
-  generate(slots, {html}) {
+  generate(relations, slots, {html}) {
     return html.tag(slots.tag,
       {
         class: 'content-heading',
         id: slots.id,
         tabindex: '0',
-      },
-      slots.title);
+
+        style:
+          slots.color &&
+            relations.colorVariables
+              .slot('color', slots.color)
+              .content,
+      }, [
+        slots.title,
+
+        html.tag('span',
+          {[html.onlyIfContent]: true, class: 'content-heading-accent'},
+          slots.accent),
+      ]);
   }
 }