Added avatars. Added PornHub and LegalPorno actor profile scrapers.

assets/components/tile/actor.vue

@@ -5,8 +5,21 @@
     >
         <a
             :href="`/actor/${actor.slug}`"
-            class="name"
-        >{{ actor.name }}</a>
+            class="link"
+        >
+            <span class="name">{{ actor.name }}</span>
+
+            <img
+                v-if="actor.avatar"
+                :src="`/media/${actor.avatar}`"
+                class="avatar"
+            >
+
+            <span
+                v-else
+                class="avatar"
+            >No photo</span>
+        </a>
     </div>
 </template>
 
@@ -27,14 +40,34 @@ export default {
 .actor {
     background: $background;
     display: inline-block;
-    margin: 0 .25rem .25rem 0;
+    margin: 0 .5rem .5rem 0;
     box-shadow: 0 0 3px $shadow-weak;
 }
 
-.name {
+.link {
     color: $link;
-    display: inline-block;
-    padding: .5rem;
     text-decoration: none;
+    text-align: center;
+
+    &:hover {
+        color: $primary;
+    }
+}
+
+.name {
+    display: block;
+    padding: .5rem;
+    font-weight: bold;
+}
+
+.avatar {
+    color: $shadow-weak;
+    background: $shadow-hint;
+    height: 12rem;
+    width: 10rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: cover;
 }
 </style>