Added basic actor and network overview. Added DDF Network actor scraper. Various bug fixes and layout improvements.

assets/components/networks/network.vue

@@ -0,0 +1,138 @@
+<template>
+    <div
+        v-if="network"
+        class="content network"
+    >
+        <FilterBar :fetch-releases="fetchReleases" />
+
+        <div class="content-inner">
+            <div class="header">
+                <a
+                    :href="network.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <img
+                        :src="`/img/logos/${network.slug}/network.png`"
+                        class="logo"
+                    >
+
+                    <Icon
+                        v-if="network.url"
+                        icon="new-tab"
+                        class="icon-href"
+                    />
+                </a>
+
+                <p class="description">{{ network.description }}</p>
+            </div>
+
+            <template v-if="sites.length">
+                <h3 class="heading">Sites</h3>
+
+                <ul class="nolist sites">
+                    <li
+                        v-for="site in sites"
+                        :key="`site-${site.id}`"
+                    >
+                        <SiteTile :site="site" />
+                    </li>
+                </ul>
+            </template>
+
+            <Releases
+                :releases="releases"
+                :context="network.name"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import FilterBar from '../header/filter-bar.vue';
+import Releases from '../releases/releases.vue';
+import SiteTile from '../tile/site.vue';
+
+async function fetchReleases() {
+    this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
+}
+
+async function mounted() {
+    [[this.network]] = await Promise.all([
+        this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug),
+        this.fetchReleases(),
+    ]);
+
+    this.sites = this.network.sites
+        .filter(site => !site.independent)
+        .sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
+
+    this.pageTitle = this.network.name;
+}
+
+export default {
+    components: {
+        FilterBar,
+        Releases,
+        SiteTile,
+    },
+    data() {
+        return {
+            network: null,
+            sites: null,
+            releases: null,
+            pageTitle: null,
+        };
+    },
+    mounted,
+    methods: {
+        fetchReleases,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: top;
+    margin: 0 0 2rem 0;
+}
+
+.title {
+    display: inline-flex;
+    align-items: top;
+    margin: 0 1rem 0 0;
+
+    &:hover .icon {
+        fill: $primary;
+    }
+}
+
+.logo {
+    width: 20rem;
+    max-height: 8rem;
+    object-fit: contain;
+    margin: 0 .5rem 0 0;
+}
+
+.sites {
+    display: grid;
+    grid-gap: 1rem;
+    margin: 0 0 2rem 0;
+}
+
+.sites {
+    grid-template-columns: repeat(auto-fit, 15rem);
+}
+
+@media(max-width: $breakpoint) {
+    .sites {
+        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    }
+}
+</style>

assets/components/networks/networks.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="networks">
+        <Network
+            v-for="network in networks"
+            :key="`network-${network.id}`"
+            :network="network"
+        />
+    </div>
+</template>
+
+<script>
+import Network from '../tile/network.vue';
+
+async function mounted() {
+    this.networks = await this.$store.dispatch('fetchNetworks');
+
+    console.log(this.networks);
+}
+
+export default {
+    components: {
+        Network,
+    },
+    data() {
+        return {
+            networks: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.networks {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 15rem);
+    grid-gap: 1rem;
+    padding: 1rem;
+}
+</style>