Generating thumbnails. Added site overview page.

assets/components/home/home.vue

@@ -77,6 +77,8 @@ import ReleaseTile from '../tile/release.vue';
 
 async function mounted() {
     this.releases = await this.$store.dispatch('fetchReleases');
+    this.networks = await this.$store.dispatch('fetchNetworks');
+
     this.pageTitle = '';
 }
 
@@ -91,6 +93,7 @@ export default {
             showGay: false,
             showTrans: false,
             releases: [],
+            networks: [],
             pageTitle: null,
         };
     },

assets/components/network/network.vue

@@ -125,6 +125,6 @@ export default {
 }
 
 .sites {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
 }
 </style>

assets/components/release/release.vue

@@ -8,7 +8,7 @@
                 <video
                     v-if="release.trailer"
                     :src="`/media/${release.trailer.path}`"
-                    :poster="`/media/${(release.poster && release.poster.path) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
+                    :poster="`/media/${(release.poster && release.poster.thumbnail) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
                     :alt="release.title"
                     class="banner-item"
                     controls
@@ -23,7 +23,7 @@
                 rel="noopener noreferrer"
             >
                 <img
-                    :src="`/media/${photo.path}`"
+                    :src="`/media/${photo.thumbnail}`"
                     :alt="`Photo ${photo.index + 1}`"
                     class="banner-item"
                 >
@@ -77,15 +77,11 @@
 
             <a
                 :href="`/network/${release.network.slug}`"
-                target="_blank"
-                rel="noopener noreferrer"
                 class="network-link"
             >{{ release.network.name }}:</a>
 
             <a
                 :href="`/site/${release.site.slug}`"
-                target="_blank"
-                rel="noopener noreferrer"
                 class="site-link"
             >{{ release.site.name }}</a>
         </span>

assets/components/site/site.vue

@@ -1,5 +1,157 @@
 <template>
-    <div>
-        <h1>Site</h1>
+    <div
+        v-if="site"
+        class="content site"
+    >
+        <div class="header">
+            <span class="intro">
+                <h2 class="title">
+                    {{ site.name }}
+                    <a
+                        v-if="site.url"
+                        :href="site.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Icon
+                            icon="new-tab"
+                            class="icon-href"
+                        />
+                    </a>
+                </h2>
+
+                <span class="description">{{ site.description }}</span>
+            </span>
+
+            <span class="link">
+                <a
+                    v-if="site.url"
+                    :href="site.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="logo-link"
+                >
+                    <object
+                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
+                        :title="site.name"
+                        type="image/png"
+                        class="logo"
+                    >{{ site.name }}</object>
+                </a>
+
+                <span class="networklogo-container">
+                    Part of
+                    <a
+                        :href="site.network.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="networklogo-link"
+                    >
+                        <object
+                            :data="`/img/logos/${site.network.slug}/network.png`"
+                            :title="site.network.name"
+                            type="image/png"
+                            class="networklogo"
+                        >{{ site.network.name }}</object>
+                    </a>
+                </span>
+            </span>
+        </div>
+
+        <div class="content-inner">
+            <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.site] = await this.$store.dispatch('fetchSites', this.$route.params.siteSlug);
+    this.releases = await this.$store.dispatch('fetchSiteReleases', this.$route.params.siteSlug);
+
+    this.pageTitle = this.site.name;
+}
+
+export default {
+    components: {
+        ReleaseTile,
+    },
+    data() {
+        return {
+            site: 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;
+}
+
+.link {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.logo {
+    height: 3rem;
+}
+
+.networklogo-container {
+    color: $shadow;
+    display: block;
+    margin: .5rem 0 0 0;
+}
+
+.networklogo {
+    color: $text;
+    height: 1rem;
+    font-weight: bold;
+}
+
+.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(15rem, 1fr));
+}
+</style>

assets/components/tile/release.vue

@@ -5,8 +5,6 @@
                 <a
                     :href="`/site/${release.site.slug}`"
                     :title="release.network.name"
-                    target="_blank"
-                    rel="noopener noreferrer"
                     class="site site-link"
                 >{{ release.site.name }}</a>
 
@@ -34,14 +32,14 @@
             >
                 <img
                     v-if="release.poster"
-                    :src="`/media/${release.poster.path}`"
+                    :src="`/media/${release.poster.thumbnail}`"
                     :alt="release.title"
                     class="thumbnail"
                 >
 
                 <img
                     v-else-if="release.photos.length > 0"
-                    :src="`/media/${release.photos[0].path}`"
+                    :src="`/media/${release.photos[0].thumbnail}`"
                     :alt="release.title"
                     class="thumbnail"
                 >
@@ -92,8 +90,6 @@
                     >
                         <a
                             :href="`/tag/${tag.slug}`"
-                            target="_blank"
-                            rel="noopener noreferrer"
                             class="tag-link"
                         >{{ tag.name }}</a>
                     </li>
@@ -135,11 +131,8 @@ export default {
 
 .thumbnail {
     width: 100%;
-    height: 12rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     object-fit: cover;
+    object-position: 50% 0;
     background-position: center;
     background-size: cover;
     background-color: $shadow-hint;

assets/components/tile/site.vue

@@ -47,7 +47,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 4rem;
+    height: 3rem;
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;

assets/js/sites/actions.js

@@ -0,0 +1,22 @@
+import { get } from '../api';
+
+function initSitesActions(_store, _router) {
+    async function fetchSites({ _commit }, siteId) {
+        const sites = await get(`/sites/${siteId || ''}`);
+
+        return sites;
+    }
+
+    async function fetchSiteReleases({ _commit }, siteId) {
+        const releases = await get(`/sites/${siteId}/releases`);
+
+        return releases;
+    }
+
+    return {
+        fetchSites,
+        fetchSiteReleases,
+    };
+}
+
+export default initSitesActions;

assets/js/sites/mutations.js

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

assets/js/sites/sites.js

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

assets/js/sites/state.js

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

assets/js/store.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 
 import initAuthStore from './auth/auth';
 import initReleasesStore from './releases/releases';
+import initSitesStore from './sites/sites';
 import initNetworksStore from './networks/networks';
 import initActorsStore from './actors/actors';
 
@@ -14,6 +15,7 @@ function initStore(router) {
     store.registerModule('auth', initAuthStore(store, router));
     store.registerModule('releases', initReleasesStore(store, router));
     store.registerModule('actors', initActorsStore(store, router));
+    store.registerModule('sites', initSitesStore(store, router));
     store.registerModule('networks', initNetworksStore(store, router));
 
     return store;