feat: allow manually aligning character chats

Author: stelcodes

src/content/posts/showing-off-blog-features/index.md

@@ -162,6 +162,18 @@ This is a cool feature!
 I agree!
 :::
 
+You can also manually specify the alignment (`left` or `right`) for any character chat manually:
+
+```md wrap title="Character chats with specific alignment"
+:::unicorn{align="right"}
+Over here, to the right!
+:::
+```
+
+:::unicorn{align="right"}
+Over here, to the right!
+:::
+
 ## GitHub Cards
 
 GitHub overview cards heavily inspired by [Astro Cactus](https://github.com/chrismwilliams/astro-theme-cactus).

src/plugins/remark-character-dialogue.ts

@@ -33,36 +33,21 @@ const remarkCharacterDialogue: Plugin<[{ characters: Record<string, string> }],
       const characterName = node.name
       if (!isCharacterDialogue(characterName)) return
 
-      let title: string = characterName
-      let titleNode: PhrasingContent[] = [{ type: 'text', value: title }]
-
-      // Check if there's a custom title
-      const firstChild = node.children[0]
-      if (
-        firstChild?.type === 'paragraph' &&
-        firstChild.data &&
-        'directiveLabel' in firstChild.data &&
-        firstChild.children.length > 0
-      ) {
-        titleNode = firstChild.children
-        title = mdastToString(firstChild.children)
-        // The first paragraph contains a custom title, we can safely remove it.
-        node.children.splice(0, 1)
-      }
+      const align = node.attributes?.align ?? null
+      const alignClass = align === 'left' || align === 'right' ? ` align-${align}` : ''
 
       // Do not change prefix to AD, ADM, or similar, adblocks will block the content inside.
       const admonition = h(
         'aside',
         {
-          'aria-label': `Character dialogue: ${title}`,
-          class: 'character-dialogue',
+          'aria-label': `Character dialogue: ${characterName}`,
+          class: 'character-dialogue' + alignClass,
           'data-character': characterName,
         },
         [
-          // h('p', { class: 'admonition-title', 'aria-hidden': 'true' }, [...titleNode]),
           h('img', {
             class: 'character-dialogue-image',
-            alt: title,
+            alt: characterName,
             loading: 'lazy',
             src: opts.characters[characterName],
             width: 100,

src/styles/global.css

@@ -391,25 +391,26 @@ article img {
         @apply mb-4 sm:mb-0 sm:pb-0;
       }
 
-      & + aside.character-dialogue {
-        @apply mt-4 sm:mt-3 sm:pt-0;
+      & + aside.character-dialogue:nth-of-type(even):not(.align-left),
+      &.align-right {
+        @apply flex-row-reverse;
 
-        &:nth-of-type(even) {
-          @apply flex-row-reverse;
-
-          .character-dialogue-content:after {
-            @apply -right-3 -rotate-90;
-            left: initial;
-          }
+        .character-dialogue-content:after {
+          @apply -right-3 -rotate-90;
+          left: initial;
         }
       }
 
+      & + aside.character-dialogue {
+        @apply mt-4 sm:mt-3 sm:pt-0;
+      }
+
       img.character-dialogue-image {
         @apply m-0 border-none shrink-1 w-20 sm:w-25;
       }
 
       .character-dialogue-content {
-        @apply relative shrink-5 sm:bg-foreground/6 px-1 mx-1.5 sm:px-6 sm:mt-1 rounded-xl sm:py-6 max-w-full sm:min-w-1/8;
+        @apply relative shrink-5 sm:bg-foreground/6 px-1 mx-1.5 sm:px-6 sm:mt-0.5 rounded-xl sm:py-6 max-w-full sm:min-w-1/8;
 
         /* Add pointy part of speech bubble to the bottom left corner */
         &:after {