Generating thumbnails. Added site overview page.

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>