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>

assets/components/errors/404.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="errorpage">
+        <h1 class="error">404 - Not Found</h1>
+
+        <a
+            href="/"
+            class="home"
+        >Take me home</a>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.errorpage {
+    background: $background;
+    color: $primary;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+}
+
+.error {
+    margin: 0;
+}
+
+.home {
+    color: $shadow;
+    margin: 3rem 0;
+}
+</style>

assets/components/network/network.vue

@@ -0,0 +1,127 @@
+<template>
+    <div
+        v-if="network"
+        class="content network"
+    >
+        <div class="header">
+            <span class="intro">
+                <h2 class="title">
+                    {{ network.name }}
+                    <a
+                        :href="network.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Icon
+                            icon="new-tab"
+                            class="icon-href"
+                        />
+                    </a>
+                </h2>
+
+                <span class="description">{{ network.description }}</span>
+            </span>
+
+            <a
+                :href="network.url"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img
+                    :src="`/img/networks/${network.slug}.png`"
+                    class="logo"
+                >
+            </a>
+        </div>
+
+        <div class="content-inner">
+            <h3 class="heading">Sites</h3>
+
+            <ul class="nolist sites">
+                <li
+                    v-for="site in network.sites"
+                    :key="`site-${site.id}`"
+                >
+                    <SiteTile :site="site" />
+                </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';
+import SiteTile from '../tile/site.vue';
+
+async function mounted() {
+    [this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
+    this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
+
+    this.pageTitle = this.network.name;
+}
+
+export default {
+    components: {
+        ReleaseTile,
+        SiteTile,
+    },
+    data() {
+        return {
+            network: 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;
+}
+
+.logo {
+    height: 3rem;
+}
+
+.sites,
+.scenes {
+    display: grid;
+    grid-gap: 1rem;
+    margin: 0 0 1rem 0;
+}
+
+.scenes {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
+.sites {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+</style>

assets/components/site/site.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>Site</h1>
+    </div>
+</template>

assets/components/tile/release.vue

@@ -0,0 +1,257 @@
+<template>
+    <div class="tile">
+        <span class="banner">
+            <span class="details">
+                <a
+                    :href="`/site/${release.site.slug}`"
+                    :title="release.network.name"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="site site-link"
+                >{{ release.site.name }}</a>
+
+                <a
+                    v-if="release.date"
+                    :href="release.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="date"
+                >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
+
+                <a
+                    v-else
+                    :href="release.url"
+                    title="Scene date N/A, showing date added"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="date"
+                >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}`</a>
+            </span>
+
+            <a
+                :href="`/scene/${release.id}`"
+                class="link"
+            >
+                <img
+                    v-if="release.poster"
+                    :src="`/media/${release.poster.path}`"
+                    :alt="release.title"
+                    class="thumbnail"
+                >
+
+                <img
+                    v-else-if="release.photos.length > 0"
+                    :src="`/media/${release.photos[0].path}`"
+                    :alt="release.title"
+                    class="thumbnail"
+                >
+
+                <div
+                    v-else
+                    :title="release.title"
+                    class="thumbnail"
+                >No thumbnail available</div>
+            </a>
+        </span>
+
+        <div class="info">
+            <a
+                :href="`/scene/${release.id}`"
+                class="row link"
+            >
+                <h3
+                    :title="release.title"
+                    class="title"
+                >{{ release.title }}</h3>
+            </a>
+
+            <span class="row">
+                <ul class="actors nolist">
+                    <li
+                        v-for="actor in release.actors"
+                        :key="actor.id"
+                        class="actor"
+                    >
+                        <a
+                            :href="`/actor/${actor.slug}`"
+                            class="actor-link"
+                        >{{ actor.name }}</a>
+                    </li>
+                </ul>
+            </span>
+
+            <span
+                :title="release.tags.map(tag => tag.name).join(', ')"
+                class="row"
+            >
+                <ul class="tags nolist">
+                    <li
+                        v-for="tag in release.tags"
+                        :key="`tag-${tag.slug}`"
+                        class="tag"
+                    >
+                        <a
+                            :href="`/tag/${tag.slug}`"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="tag-link"
+                        >{{ tag.name }}</a>
+                    </li>
+                </ul>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        release: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 0 0 .5rem 0;
+    border-radius: .25rem;
+    overflow: hidden;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    height: 100%;
+}
+
+.banner {
+    position: relative;
+    margin: 0 0 .5rem 0;
+}
+
+.thumbnail {
+    width: 100%;
+    height: 12rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    object-fit: cover;
+    background-position: center;
+    background-size: cover;
+    background-color: $shadow-hint;
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 .5rem;
+    margin: 0 0 .25rem 0;
+}
+
+.details {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+}
+
+.site,
+.date {
+    color: #fff;
+    background: rgba(0, 0, 0, .5);
+    font-size: .8rem;
+    padding: .25rem;
+    text-decoration: none;
+}
+
+.site {
+    border-radius: 0 0 .25rem 0;
+    font-weight: bold;
+}
+
+.date {
+    border-radius: 0 0 0 .25rem;
+}
+
+.info {
+    flex-grow: 1;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.title {
+    color: $text;
+    margin: 0;
+    font-size: 1rem;
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 3rem;
+    line-height: 1.5rem;
+}
+
+.network {
+    color: #555;
+    margin: 0 .25rem 0 0;
+    font-size: .8rem;
+}
+
+.actors {
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 2.5rem;
+    line-height: 1.25rem;
+}
+
+.tags {
+    word-wrap: break-word;
+    overflow: hidden;
+    max-height: 2.5rem;
+    line-height: 1.25rem;
+}
+
+.actor,
+.tag {
+    margin: 0 .25rem 0 0;
+}
+
+.actor {
+    font-size: .9rem;
+}
+
+.tag {
+    font-size: .75rem;
+}
+
+.actor:not(:last-of-type)::after,
+.tag:not(:last-child):after {
+    content: ",";
+}
+
+.actor-link,
+.tag-link {
+    text-decoration: none;
+
+    &:hover {
+        color: $primary;
+    }
+}
+
+.actor-link {
+    color: $link;
+}
+
+.tag-link {
+    color: $shadow-strong;
+}
+</style>

assets/components/tile/site.vue

@@ -0,0 +1,60 @@
+<template>
+    <a
+        :href="`/site/${site.slug}`"
+        class="tile"
+    >
+        <h3 class="title">
+            <object
+                :data="`/img/sites/${site.slug}.png`"
+                type="image/png"
+                class="logo"
+            >{{ site.name }}</object>
+        </h3>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        site: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 1rem;
+    border-radius: .25rem;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    height: 100%;
+    text-align: center;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.logo {
+    width: 100%;
+    height: 4rem;
+    object-fit: contain;
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    font-size: 1rem;
+}
+</style>

assets/img/link.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>link</title>
+<path d="M6.879 9.934c-0.208 0-0.416-0.079-0.575-0.238-1.486-1.486-1.486-3.905 0-5.392l3-3c0.72-0.72 1.678-1.117 2.696-1.117s1.976 0.397 2.696 1.117c1.486 1.487 1.486 3.905 0 5.392l-1.371 1.371c-0.317 0.317-0.832 0.317-1.149 0s-0.317-0.832 0-1.149l1.371-1.371c0.853-0.853 0.853-2.241 0-3.094-0.413-0.413-0.963-0.641-1.547-0.641s-1.134 0.228-1.547 0.641l-3 3c-0.853 0.853-0.853 2.241 0 3.094 0.317 0.317 0.317 0.832 0 1.149-0.159 0.159-0.367 0.238-0.575 0.238z"></path>
+<path d="M4 15.813c-1.018 0-1.976-0.397-2.696-1.117-1.486-1.486-1.486-3.905 0-5.392l1.371-1.371c0.317-0.317 0.832-0.317 1.149 0s0.317 0.832 0 1.149l-1.371 1.371c-0.853 0.853-0.853 2.241 0 3.094 0.413 0.413 0.962 0.641 1.547 0.641s1.134-0.228 1.547-0.641l3-3c0.853-0.853 0.853-2.241 0-3.094-0.317-0.317-0.317-0.832 0-1.149s0.832-0.317 1.149 0c1.486 1.486 1.486 3.905 0 5.392l-3 3c-0.72 0.72-1.678 1.117-2.696 1.117z"></path>
+</svg>

assets/img/new-tab.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>new-tab</title>
+<path d="M11 13h-8v-8h4.5l2-2h-8.5v12h12v-8.5l-2 2v4.5z"></path>
+<path d="M16 0h-6.5l2.5 2.5-7.5 7.5 1.5 1.5 7.5-7.5 2.5 2.5v-6.5z"></path>
+</svg>

assets/img/new-tab2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>new-tab2</title>
+<path d="M3 1v12h12v-12h-12zM14 12h-10v-10h10v10zM2 14v-10.5l-1-1v12.5h12.5l-1-1h-10.5z"></path>
+<path d="M5.5 4l2.5 2.5-3 3 1.5 1.5 3-3 2.5 2.5v-6.5z"></path>
+</svg>

assets/img/share2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>share2</title>
+<path d="M4 10c0 0 0.919-3 6-3v3l6-4-6-4v3c-4 0-6 2.495-6 5zM11 12h-9v-6h1.967c0.158-0.186 0.327-0.365 0.508-0.534 0.687-0.644 1.509-1.135 2.439-1.466h-6.914v10h13v-4.197l-2 1.333v0.864z"></path>
+</svg>

assets/js/actors/actions.js

@@ -0,0 +1,22 @@
+import { get } from '../api';
+
+function initActorActions(_store, _router) {
+    async function fetchActors({ _commit }, actorId) {
+        const networks = await get(`/actors/${actorId || ''}`);
+
+        return networks;
+    }
+
+    async function fetchActorReleases({ _commit }, actorId) {
+        const releases = await get(`/actors/${actorId}/releases`);
+
+        return releases;
+    }
+
+    return {
+        fetchActors,
+        fetchActorReleases,
+    };
+}
+
+export default initActorActions;

assets/js/actors/actors.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initActorsStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initActorsStore;

assets/js/actors/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/actors/state.js

@@ -0,0 +1 @@
+export default {};

assets/js/networks/actions.js

@@ -0,0 +1,22 @@
+import { get } from '../api';
+
+function initNetworksActions(_store, _router) {
+    async function fetchNetworks({ _commit }, networkId) {
+        const networks = await get(`/networks/${networkId || ''}`);
+
+        return networks;
+    }
+
+    async function fetchNetworkReleases({ _commit }, networkId) {
+        const releases = await get(`/networks/${networkId}/releases`);
+
+        return releases;
+    }
+
+    return {
+        fetchNetworks,
+        fetchNetworkReleases,
+    };
+}
+
+export default initNetworksActions;

assets/js/networks/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/networks/networks.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initNetworksStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initNetworksStore;

assets/js/networks/state.js

@@ -0,0 +1 @@
+export default {};

assets/js/store.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import initAuthStore from './auth/auth';
 import initReleasesStore from './releases/releases';
 import initNetworksStore from './networks/networks';
+import initActorsStore from './actors/actors';
 
 function initStore(router) {
     Vue.use(Vuex);
@@ -12,6 +13,7 @@ function initStore(router) {
 
     store.registerModule('auth', initAuthStore(store, router));
     store.registerModule('releases', initReleasesStore(store, router));
+    store.registerModule('actors', initActorsStore(store, router));
     store.registerModule('networks', initNetworksStore(store, router));
 
     return store;