feat: ✨ add artist credit for profile picture

src/components/profile.webc

@@ -1,7 +1,10 @@
 <aside webc:root="override">
-  <div class="avatar">
+  <figure class="avatar">
     <slot name="avatar"></slot>
-  </div>
+    <figcaption class="credit">
+      <slot name="credit"></slot>
+    </figcaption>
+  </figure>
   <p class="name">
     <slot name="name"></slot>
   </p>
@@ -76,15 +79,35 @@
     grid-template-columns: subgrid;
     justify-items: center;
     align-items: center;
+    margin: 0;
+    border-radius: 1em;
+    overflow: clip;
+
+    & > * {
+      grid-area: avatar;
+    }
 
     & :where(picture, img) {
       display: block;
       width: var(--sidebar-avatar-size);
       height: var(--sidebar-avatar-size);
       aspect-ratio: 1/1;
-      border-radius: 1em;
+      border-radius: inherit;
       object-fit: cover;
     }
+
+    & .credit {
+      justify-self: stretch;
+      align-self: end;
+
+      background-color: oklch(from var(--clr-box-background) l c h/0.75);
+
+      font-size: 0.5em;
+      text-align: center;
+
+      margin: 0;
+      padding-block: 0.25em;
+    }
   }
 
   :host :where(.name, .species) {

src/jarek/jarek.11tydata.json

@@ -1,4 +1,8 @@
 {
   "layout": "character.webc",
-  "language": "en_US"
+  "language": "en_US",
+  "avatar": {
+    "artist": "Wolfthings",
+    "href": "https://www.furaffinity.net/user/wolfthings"
+  }
 }

src/layouts/character.webc

@@ -21,6 +21,9 @@ layout: base.webc
       :width="[100, 200, 300, 400, 500, 600]"
       sizes="(min-width: 120em) 250px, (min-width: 64em) 200px, 100px"
     ></eleventy-image>
+    <template webc:nokeep slot="credit">
+      &copy; <a :href="$data.avatar.href" target="_blank" @text="$data.avatar.artist"></a>
+    </template>
     <template webc:nokeep slot="name" @text="fullName"></template>
     <template webc:nokeep slot="species" @text="species"></template>
     <traits :@traits="$data.getTraits()"></traits>

src/sebin/sebin.11tydata.json

@@ -1,6 +1,10 @@
 {
   "layout": "character.webc",
   "language": "en_US",
+  "avatar": {
+    "artist": "RainbowT",
+    "href": "https://bsky.app/profile/rainbowt.bsky.social"
+  },
   "galleryMuscle": [
     {
       "alt": "Sebin looking aloof (but chill)",

src/viktor/viktor.11tydata.json

@@ -1,4 +1,8 @@
 {
   "layout": "character.webc",
-  "language": "en_US"
+  "language": "en_US",
+  "avatar": {
+    "artist": "RyaxShark",
+    "href": "https://bsky.app/profile/ryaxshark.bsky.social"
+  }
 }