feat: add character shortcode

Author: not-matthias

content/posts/character-shortcodes.md

@@ -0,0 +1,30 @@
++++
+title = "Character Shortcodes Example"
+date = "2025-08-11"
++++
+
+Did you know that The oldest programming language still in use is FORTRAN which was created in 1957 by John Backus? 
+
+{{ character(name="hooded", body="Whaaaaaaaaaaaaaaaaaaat, that's almost 70 years ago???") }}
+
+I know, it's crazy. Here's an example program:
+
+```FORTRAN
+PROGRAM MAIN
+PRINT *, 'HELLO WORLD'
+STOP
+END
+```
+
+{% character(name="hooded") %}
+There's also a more modern version which is a bit easier to read:
+```FORTRAN
+program helloWorld
+   print *, "Hello World!"
+end program helloWorld
+```
+{% end %}
+
+Good to know, thanks buddy!
+
+{{ character(body=":)", position="left") }}

sass/main.scss

@@ -1,4 +1,5 @@
 @import "parts/_cards.scss";
+@import "parts/_character.scss";
 @import "parts/_code.scss";
 @import "parts/_header.scss";
 @import "parts/_image.scss";

sass/parts/_character.scss

@@ -0,0 +1,47 @@
+.character-note {
+    display: flex;
+    flex-direction: row;
+    margin-block: 1.5rem;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+
+    &.character-right {
+        flex-direction: row-reverse;
+
+        .character-avatar img {
+            transform: scaleX(-1);
+        }
+    }
+
+    .character-avatar {
+        font-size: 2rem;
+        align-self: flex-start;
+        flex-shrink: 0;
+
+        img {
+            --head-size: 3.2em;
+            width: var(--head-size);
+            height: var(--head-size);
+        }
+    }
+
+
+    .character-content {
+        font-size: var(--font-size);
+        align-self: flex-start;
+        max-width: min(93%, 45em);
+        overflow: hidden;
+    }
+
+    .character-bubble {
+        --character-bubble-bg: var(--bg-1);
+        --character-bubble-border: var(--border-color);
+        --character-code-bg: var(--bg-0);
+
+        background: var(--character-bubble-bg);
+        border: 1px solid var(--character-bubble-border);
+        border-radius: 0.5rem;
+        padding-inline: 0.9em;
+        padding-block: 0.2em;
+    }
+}

static/images/characters/hooded.png

@@ -0,0 +1,26 @@
+{% set character_name = name | default(value="hooded") %}
+{% set character_text = body | default(value="") %}
+{% set character_type = type | default(value="comment") %}
+{% set character_position = position | default(value="right") %}
+{% set character_image = image | default(value="") %}
+
+<div class="character-note character-{{ character_name }} character-{{ character_type }} character-{{ character_position }}">
+    <div class="character-avatar">
+        {% if character_image %}
+            <img src="/images/character/{{ character_image }}" alt="{{ character_name }}">
+        {% elif character_name == "hooded" %}
+            <img src="/images/characters/hooded.png" alt="hooded">
+        {% else %}
+            {{ character_name }}
+        {% endif %}
+    </div>
+    <div class="character-content">
+        <div class="character-bubble">
+            {% if character_text %}
+                {{ character_text | markdown | safe }}
+            {% else %}
+                {{ body | markdown | safe }}
+            {% endif %}
+        </div>
+    </div>
+</div>