chat component init

src/pages/_data/chat.yml

+
+messages:
+  - type: date
+    date: Nov 9, 2021, 11:32 PM
+  - type: message
+    author-id: 13
+    text: Okay, so my neighbors officially hate me
+  - type: message
+    author-id: 11
+    text: why?
+  - type: message
+    author-id: 13
+    text: Well, me, david and andrew were having a bonfire in the backyard, and we were making s'mores and all... and suddenly we here sirens, and see a firetruck turn into the street in front of us.
+  - type: message
+    author-id: 13
+    text: So we all went running to see what was up, and our neigbor's house was on fire!
+  - type: message
+    author-id: 11
+    text: oh shit!
+  - type: message
+    author-id: 13
+    text: Yeah, and when we got there, the wife was crying into her husbands arms, and we were just kinda standing there, and then she saw us, and then like for 10 seconds, gave us the dirtiest look ever
+  - type: message
+    author-id: 13
+    text: Turns out, we were still holding our sticks with marshmallows on it, watching the fire....
+  - type: message
+    author-id: 13
+    text: talk about bad timing...
\ No newline at end of file

src/pages/chat.html

+---
+title: Chat
+---
+
+<div class="card">
+	<div class="card-body">
+		<div class="chat">
+			{% for message in site.data.chat.messages %}
+			{% if message.type == 'date' %}
+				<div class="chat-date">{{ message.date }}</div>
+			{% else %}
+			{% assign author = site.data.people[message.author-id] %}
+			<div class="chat-message {% if message.author-id == 13 %}chat-message-me{% else %}chat-message-friend{% endif %}">
+				<div class="chat-message-outer">
+					<div class="chat-message-avatar">
+						<div data-bs-toggle="tooltip" data-bs-placement="top" title="{{ author.full_name }}">
+							{% include ui/avatar.html person-id=message.author-id size="sm" rounded=true %}
+						</div>
+					</div>
+					<div class="chat-message-inner">
+						<div class="chat-message-bubble">{{ message.text }}</div>
+						<div class="chat-message-actions"></div>
+						<div class="chat-message-spacer"></div>
+					</div>
+					<div class="chat-message-status"></div>
+				</div>
+			</div>
+			{% endif %}
+			{% endfor %}
+		</div>
+	</div>
+</div>

src/scss/_core.scss

@@ -51,6 +51,7 @@
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";
+@import "ui/chat";
 
 @import "utils/background";
 @import "utils/colors";

src/scss/ui/_chat.scss

+//
+// Chat component
+//
+.chat {
+  padding: 1rem;
+}
+
+.chat-date {
+  @include subheader($text-muted);
+  text-align: center;
+}
+
+.chat-message {
+  margin-top: .25rem;
+}
+
+.chat-message-outer {
+  display: flex;
+}
+
+.chat-message-inner {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  margin: 0 .5rem;
+}
+
+.chat-message-bubble {
+  border-radius: $border-radius-lg $border-radius-lg $border-radius-lg 0 ;
+  background: $white;
+  max-width: calc(100% - 4rem);
+  overflow-wrap: break-word;
+  display: flex;
+  align-items: center;
+  padding: .25rem .5rem;
+  box-shadow: $card-shadow;
+  border: 1px solid $border-color;
+}
+
+.chat-message-actions {
+  width: 4rem;
+  padding-right: .25rem;
+  flex-shrink: 0;
+}
+
+.chat-message-status {
+  width: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.chat-message-spacer {
+  flex: 1;
+}
+
+.chat-message-me {
+  .chat-message-outer {
+    flex-direction: row-reverse;
+  }
+
+  .chat-message-inner {
+    flex-direction: row-reverse;
+  }
+
+  .chat-message-bubble {
+    background: rgba($primary, .04);
+    border-radius: $border-radius-lg $border-radius-lg 0 $border-radius-lg;
+  }
+}
+
+.chat-message-me + .chat-message-friend,
+.chat-message-friend + .chat-message-me {
+  margin-top: .5rem;
+}
\ No newline at end of file