1 files changed, 45 insertions, 0 deletions
diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js
new file mode 100644
index 0000000..469db87
--- /dev/null
+++ b/src/content/dependencies/generateContentHeading.js
@@ -0,0 +1,45 @@
+export default {
+  extraDependencies: ['html'],
+  contentDependencies: ['generateColorStyleAttribute'],
+
+  relations: (relation) => ({
+    colorStyle: relation('generateColorStyleAttribute'),
+  }),
+
+  slots: {
+    title: {
+      type: 'html',
+      mutable: false,
+    },
+
+    accent: {
+      type: 'html',
+      mutable: false,
+    },
+
+    color: {validate: v => v.isColor},
+
+    id: {type: 'string'},
+    tag: {type: 'string', default: 'p'},
+  },
+
+  generate: (relations, slots, {html}) =>
+    html.tag(slots.tag, {class: 'content-heading'},
+      {tabindex: '0'},
+
+      slots.id &&
+        {id: slots.id},
+
+      slots.color &&
+        relations.colorStyle.slot('color', slots.color),
+
+      [
+        html.tag('span', {class: 'content-heading-main-title'},
+          {[html.onlyIfContent]: true},
+          slots.title),
+
+        html.tag('span', {class: 'content-heading-accent'},
+          {[html.onlyIfContent]: true},
+          slots.accent),
+      ]),
+}