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

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>