Created a Dave component with green title and red subtitle.

hlxsites · Dec 2, 2024 · 1ff16ad · 1ff16ad
1 parent b59e8bc
commit 1ff16ad
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/blocks/dave/dave.css b/blocks/dave/dave.css
@@ -0,0 +1,12 @@
+.dave strong {
+  color: green;
+  font-size: 2rem;
+  font-weight: bold;
+  border-bottom: 2px solid green;
+}
+
+.dave i {
+  color: red;
+  font-size: 1.5rem;
+  font-style: italic;
+}
diff --git a/blocks/dave/dave.js b/blocks/dave/dave.js
@@ -0,0 +1,13 @@
+export default function decorate(block) {
+const quoteDiv = block.querySelector('div:last-of-type');
+const dave = document.createElement('dave');
+dave.innerHTML = `<strong>${quoteDiv.innerHTML}</strong>`;
+quoteDiv.replaceWith(dave);
+
+const authorDiv = block.querySelector('div:nth-child(2)');
+if (authorDiv) {
+    const author = document.createElement('p');
+    author.innerHTML = `<i>${authorDiv.innerHTML}</i>`;
+    authorDiv.replaceWith(author);
+}
+}