From b0b745b2eb821c1a3c213ad044ee243c5259115f Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sat, 2 Aug 2025 21:42:47 +0200
Subject: [PATCH] feat: :sparkles: add artist credit for profile picture

---
 src/components/profile.webc     | 29 ++++++++++++++++++++++++++---
 src/jarek/jarek.11tydata.json   |  6 +++++-
 src/layouts/character.webc      |  3 +++
 src/sebin/sebin.11tydata.json   |  4 ++++
 src/viktor/viktor.11tydata.json |  6 +++++-
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/components/profile.webc b/src/components/profile.webc
index 8d1bb0c..85463f0 100644
--- a/src/components/profile.webc
+++ b/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) {
diff --git a/src/jarek/jarek.11tydata.json b/src/jarek/jarek.11tydata.json
index 11f06a4..665addc 100644
--- a/src/jarek/jarek.11tydata.json
+++ b/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"
+  }
 }
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index 1744f36..136c603 100644
--- a/src/layouts/character.webc
+++ b/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>
diff --git a/src/sebin/sebin.11tydata.json b/src/sebin/sebin.11tydata.json
index 7dcfbc4..0cd994b 100644
--- a/src/sebin/sebin.11tydata.json
+++ b/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)",
diff --git a/src/viktor/viktor.11tydata.json b/src/viktor/viktor.11tydata.json
index 11f06a4..38c402c 100644
--- a/src/viktor/viktor.11tydata.json
+++ b/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"
+  }
 }