From 468ab1f841af6ab7ad8f197ac99f133f1ec60dc7 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Mon, 17 Apr 2023 16:22:03 +0800
Subject: [PATCH] Add name and update styling to chat block extension

---
 assets/scss/asciidoctor.scss                           | 6 +++++-
 gems/lib/asciidoctor/chat-block-processor/extension.rb | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/scss/asciidoctor.scss b/assets/scss/asciidoctor.scss
index 85ec9a7..2d7e940 100644
--- a/assets/scss/asciidoctor.scss
+++ b/assets/scss/asciidoctor.scss
@@ -241,6 +241,7 @@ p {
     gap: 1em;
     padding: 0.5em;
     max-width: 55ch;
+    width: fit-content;
   }
 
   &__avatar {
@@ -262,7 +263,6 @@ p {
 
   &__text {
     display: block;
-    max-width: 50ch;
     margin: 0;
 
     > :first-child {
@@ -270,6 +270,10 @@ p {
     }
   }
 
+  &__avatar-name {
+    font-weight: bolder;
+  }
+
   // Roles/modifiers.
   &.reversed {
     flex-direction: row-reverse;
diff --git a/gems/lib/asciidoctor/chat-block-processor/extension.rb b/gems/lib/asciidoctor/chat-block-processor/extension.rb
index 52ec823..cfa3f4f 100644
--- a/gems/lib/asciidoctor/chat-block-processor/extension.rb
+++ b/gems/lib/asciidoctor/chat-block-processor/extension.rb
@@ -18,7 +18,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
     attrs['name'] ||= attrs['avatar']
 
     block << (create_html_fragment block, %(
-      <div class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
+      <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
         <div class="dialogblock dialogblock__avatar">
     ))
 
@@ -35,6 +35,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
     block << (create_html_fragment block, %(
         </div>
         <div class="dialogblock dialogblock__text">
+          <small class="dialogblock dialogblock__avatar-name">#{attrs['name']}</small>
     ))
 
     parse_content block, reader