Talk Q&A Block

blocks/talk-qa/talk-qa.css

@@ -0,0 +1,27 @@
+.talk-qa {
+  font-size: smaller;
+}
+
+.talk-qa > div {
+  border-top: 2px solid var(--color-highlight-1);
+  margin-top: 10px;
+  padding-top: 5px;
+}
+
+.talk-qa > div > div:nth-child(2) {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  border-left: 2px solid var(--color-medium-gray);
+}
+
+.talk-qa p {
+  margin-top: 3px;
+  margin-bottom: 3px;
+  line-height: 1.1rem;
+}
+
+.talk-qa p em {
+  font-weight: bold;
+  color: var(--color-medium-gray);
+}

blocks/talk-qa/talk-qa.js

@@ -0,0 +1,9 @@
+import { append, prepend } from '../../scripts/utils/dom.js';
+
+/**
+ * Talk Q&A
+ * @param {Element} block
+ */
+export default async function decorate(block) {
+  prepend(block, 'h4').textContent = 'Q&A';
+}

scripts/scripts.js

@@ -83,6 +83,11 @@ function decorateTalkDetailPage(main) {
     const talkDetailFooter = document.createElement('div');
     talkDetailFooter.classList.add('talk-detail-footer');
     footerSection.append(talkDetailFooter);
+    // move Q&A to bottom of page
+    const qa = main.querySelector(':scope div.talk-qa');
+    if (qa) {
+      footerSection.append(qa);
+    }
   }
 }
 

test/blocks/talk-detail/body.html

@@ -3,6 +3,18 @@
   <div>
     <h1>Talk Title</h1>
     <p>Talk Outline</p>
+    <div class="talk-qa">
+      <div>
+        <div>
+          <p><em>Person 1</em></p>
+          <p>Question?</p>
+        </div>
+        <div>
+          <p><em>Person 2</em></p>
+          <p>Answer.</p>
+        </div>
+      </div>
+    </div>
   </div>
   <div>
     <p>Additional Text</p>