Fixed countries seed file. Updated MOFOS scraper. Improved Reality Kings scraper. Limiting photos for XEmpire scraper.

assets/components/actor/actor.vue

@@ -6,20 +6,16 @@
         <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="header">
-            <h2 class="title">{{ actor.name }}</h2>
-        </div>
+            <img
+                v-if="actor.avatars && actor.avatars.length > 0"
+                :src="`/media/${actor.avatars[0].path}`"
+                class="avatar"
+            >
+
+            <ul class="bio sidebar nolist">
+                <h2 class="title">{{ actor.name }}</h2>
 
-        <div class="content-inner">
-            <div class="avatars">
-                <img
-                    v-for="avatar in actor.avatars"
-                    :key="`avatar-${avatar.id}`"
-                    :src="`/media/${avatar.path}`"
-                    class="avatar"
-                >
-            </div>
 
-            <ul class="bio">
                 <li v-if="actor.aliases.length">
                     <dfn class="bio-heading">Also known as</dfn>
                     <span>{{ actor.aliases.join(', ') }}</span>
@@ -78,12 +74,31 @@
 
                 <li v-if="actor.social && actor.social.length > 0">
                     <dfn class="bio-heading">Social</dfn>
-                    {{ actor.social.join(',') }}
+                    <a
+                        v-for="social in actor.social"
+                        :key="`social-${social.id}`"
+                        :href="social.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="social"
+                    >{{ social.platform || social.url }}</a>
                 </li>
+
+                <li class="description">{{ actor.description }}</li>
+
+                <div class="photos">
+                    <img
+                        v-for="avatar in actor.avatars.slice(1)"
+                        :key="`avatar-${avatar.id}`"
+                        :src="`/media/${avatar.path}`"
+                        class="photo"
+                    >
+                </div>
             </ul>
 
-            <span class="description">{{ actor.description }}</span>
+        </div>
 
+        <div class="content-inner">
             <Releases
                 :releases="releases"
                 :context="actor.name"
@@ -170,13 +185,18 @@ export default {
     padding: 1rem;
 }
 
-.avatars {
-    padding: 1rem;
-}
-
 .avatar {
     height: 20rem;
     margin: 0 1rem 0 0;
+    display: block;
+}
+
+.photo {
+    height: 10rem;
+}
+
+.social {
+    display: block;
 }
 
 .flag {
@@ -184,4 +204,8 @@ export default {
     border: solid 1px $shadow-weak;
     margin: 0 .25rem 0 0;
 }
+
+.releases {
+    flex-grow: 1;
+}
 </style>