feat: add copyright information

src/App.vue

@@ -39,6 +39,7 @@
       <rich-figure
         imgSrc="/img/fullbody-ref.jpg"
         caption="Sebin Full Body reference"
+        copyright="FA:SirBoburto"
       ></rich-figure>
 
       <p>
@@ -53,6 +54,7 @@
       <rich-figure
         imgSrc="/img/head-ref.jpg"
         caption="Sebin's Expressions"
+        copyright="FA:SirBoburto"
       ></rich-figure>
 
       <p>
@@ -67,6 +69,7 @@
       <rich-figure
         imgSrc="/img/sebin-hairstyle-short.jpg"
         caption="Sebin with short hair"
+        copyright="@LeoboArt"
       ></rich-figure>
 
       <p>
@@ -85,6 +88,7 @@
         v-if="nsfw"
         imgSrc="/img/penis-ref.jpg"
         caption="Sebin's manly parts"
+        copyright="@Zodim87"
       ></rich-figure>
 
       <p v-if="nsfw">
@@ -112,6 +116,7 @@
       <rich-figure
         imgSrc="/img/upper-body-ref.png"
         caption="Sebin's upper body closeup"
+        copyright="@NidtheDragon"
       ></rich-figure>
 
       <p>
@@ -308,6 +313,10 @@
         contact.
       </p>
     </section>
+
+    <footer>
+      © 2020 Sebin Nyshkim
+    </footer>
   </div>
 </template>
 
@@ -546,6 +555,11 @@ section {
   }
 }
 
+footer {
+  margin: 2em 0;
+  text-align: center;
+}
+
 .float {
   max-width: 15em;
 

src/components/RichFigure.vue

@@ -1,7 +1,12 @@
 <template>
   <figure :class="[{ float: imgPos }, imgPos]">
     <img :src="imgSrc" :alt="caption" />
-    <figcaption>{{ caption }}</figcaption>
+    <figcaption>
+      <div class="caption">{{ caption }}</div>
+      <div class="copyright">
+        By <a :href="getLink(copyright)[0]">{{ getLink(copyright)[1] }}</a>
+      </div>
+    </figcaption>
   </figure>
 </template>
 
@@ -17,8 +22,27 @@ export default {
       type: String,
       required: true
     },
+    copyright: {
+      type: String,
+      required: true
+    },
     imgPos: String,
     imgW: String
+  },
+  methods: {
+    getLink(username) {
+      if (username.match(/^(@)?([a-z0-9_]{1,30})$/i))
+        return this.formatTwitter(username);
+      if (username.match(/^(FA:)/)) return this.formatFuraffinity(username);
+    },
+    formatFuraffinity: username => {
+      let user = username.slice(3);
+      return [`https://www.furaffnity.net/user/${user}`, user];
+    },
+    formatTwitter: username => {
+      let user = username.slice(1);
+      return [`https://twitter.com/${user}`, username];
+    }
   }
 };
 </script>
@@ -42,6 +66,10 @@ figure {
     text-align: center;
   }
 
+  a {
+    color: #fff;
+  }
+
   img {
     display: block;
     width: 100%;