Added actors page. Added site logos with overview on network page.

assets/components/actor/actor.vue

@@ -1,5 +1,126 @@
 <template>
-    <div>
-        <h2>Actor</h2>
+    <div
+        v-if="actor"
+        class="content actor"
+    >
+        <div class="header">
+            <h2 class="title">{{ actor.name }}</h2>
+        </div>
+
+        <span class="description">{{ actor.description }}</span>
+
+        <div class="content-inner">
+            <h3 class="heading">Biography</h3>
+
+            <ul class="bio">
+                <li v-if="actor.aliases.length">
+                    <dfn class="bio-heading">Also known as</dfn>
+                    <span>{{ actor.aliases.join(', ') }}</span>
+                </li>
+
+                <li>
+                    <dfn class="bio-heading">Born in</dfn>
+                    <span v-if="actor.city">{{ actor.city }}</span>
+                    <span>{{ actor.country || 'Unknown' }}</span>
+                </li>
+
+                <li>
+                    <dfn class="bio-heading">Date of birth</dfn>
+                    <span>{{ actor.birthdate || 'Unknown' }}</span>
+                </li>
+
+                <li>
+                    <dfn class="bio-heading">Ethnicity</dfn>
+                    <span>{{ actor.ethnicity || 'Unknown' }}</span>
+                </li>
+
+                <li>
+                    <dfn class="bio-heading">Height</dfn>
+                    <span>{{ actor.height || 'Unknown' }}</span>
+                </li>
+
+                <li>
+                    <dfn class="bio-heading">Boobs</dfn>
+                    <span>Size: {{ actor.boobSize || 'Unknown' }}</span>
+                    <span v-if="actor.boobsNatural !== null">{{ actor.boobsNatural ? 'Natural' : 'Enhanced' }}</span>
+                </li>
+            </ul>
+
+            <h3 class="heading">Latest releases</h3>
+
+            <ul class="nolist scenes">
+                <li
+                    v-for="release in releases"
+                    :key="`release-${release.id}`"
+                >
+                    <ReleaseTile :release="release" />
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
+
+<script>
+import ReleaseTile from '../tile/release.vue';
+
+async function mounted() {
+    [this.actor] = await this.$store.dispatch('fetchActors', this.$route.params.actorSlug);
+    this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
+
+    this.pageTitle = this.actor.name;
+}
+
+export default {
+    components: {
+        ReleaseTile,
+    },
+    data() {
+        return {
+            actor: null,
+            releases: null,
+            pageTitle: null,
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+.title {
+    display: inline-block;
+    margin: 0 .5rem 0 0;
+}
+
+.heading {
+    padding: 0;
+    margin: 0 0 1rem 0;
+}
+
+.bio-heading {
+    display: inline-block;
+    font-weight: bold;
+    margin: .5rem 0 0 0;
+
+    &::after {
+        content: ':';
+    }
+}
+
+.scenes {
+    display: grid;
+    grid-gap: 1rem;
+    margin: 0 0 1rem 0;
+}
+
+.scenes {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+</style>