Added rudimentary release search.

assets/components/header/header.vue

@@ -1,5 +1,6 @@
 <template>
     <header class="header">
+        <div>
             <router-link
                 to="/home"
                 class="logo-link"
@@ -56,15 +57,52 @@
                     </li>
                 </ul>
             </nav>
+        </div>
+
+        <form
+            class="search"
+            @submit.prevent="search"
+        >
+            <input
+                v-model="query"
+                type="search"
+                class="search-input"
+                placeholder="Search..."
+            >
+            <button
+                type="submit"
+                class="search-button"
+            ><Icon
+                icon="search"
+            /></button>
+        </form>
     </header>
 </template>
 
+<script>
+async function search() {
+    this.$router.push({ name: 'search', query: { q: this.query } });
+}
+
+export default {
+    data() {
+        return {
+            query: this.$route.query ? this.$route.query.q : null,
+        };
+    },
+    methods: {
+        search,
+    },
+};
+</script>
+
 <style lang="scss" scoped>
 @import 'theme';
 
 .header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     background: $background;
     color: $primary;
     border-bottom: solid 1px $shadow-hint;
@@ -128,6 +166,70 @@
     }
 }
 
+.search {
+    height: 100%;
+    max-width: 20rem;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 1rem 0 0;
+    border-left: solid 1px $shadow-hint;
+}
+
+.search-input {
+    height: 100%;
+    width: 100%;
+    padding: 0 .5rem;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    outline: none;
+
+    &::placeholder {
+        color: $shadow;
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        padding: .5rem;
+        position: relative;
+        right: 0;
+        color: $text;
+        background: url('/img/cancel-circle2.svg');
+        opacity: .25;
+
+        &:hover {
+            opacity: .5;
+            cursor: pointer;
+        }
+    }
+
+    &:focus::placeholder {
+        color: $shadow-weak;
+    }
+}
+
+.search-button {
+    height: 100%;
+    padding: 0 1rem;
+    background: none;
+    border: none;
+    margin: .3rem 0 0 0;
+
+    .icon {
+        fill: $shadow-weak;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: $shadow;
+        }
+    }
+}
+
 @media(max-width: $breakpoint0) {
     .nav-label {
         display: none;

assets/components/home/home.vue

@@ -3,10 +3,7 @@
         <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="content-inner">
-            <Releases
+            <Releases :releases="releases" />
-                :releases="releases"
-                referer="home"
-            />
         </div>
     </div>
 </template>
@@ -16,7 +13,7 @@ import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchReleases', { limit: 250 });
+    this.releases = await this.$store.dispatch('fetchReleases', { limit: 20 });
     this.$store.commit('setCache', {
         target: 'home',
         releases: this.releases,

assets/components/search/search.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="content-inner">
+        <span
+            v-if="!loading"
+            class="summary"
+        >Found {{ releases.length }} results for '{{ query }}'</span>
+
+        <span
+            v-else
+            class="summary"
+        >Searching...</span>
+
+        <Releases :releases="releases" />
+    </div>
+</template>
+
+<script>
+import Releases from '../releases/releases.vue';
+
+async function mounted() {
+    const results = await this.$store.dispatch('searchReleases', {
+        query: this.query,
+        limit: 100,
+    });
+
+    this.loading = false;
+
+    if (results) {
+        this.releases = results;
+    }
+}
+
+export default {
+    components: {
+        Releases,
+    },
+    data() {
+        return {
+            loading: true,
+            releases: [],
+            query: this.$route.query.query || this.$route.query.q,
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.summary {
+    display: block;
+    margin: 0 0 1rem 0;
+    color: $shadow;
+    font-weight: bold;
+}
+</style>

assets/components/tile/release.vue

@@ -7,7 +7,7 @@
         <span class="poster">
             <span class="details">
                 <router-link
-                    v-if="release.site.independent"
+                    v-if="release.site && release.site.independent"
                     :to="`/network/${release.network.slug}`"
                     class="site site-link"
                 ><img
@@ -16,7 +16,7 @@
                 >{{ release.network.name }}</router-link>
 
                 <span
-                    v-else
+                    v-else-if="release.network"
                     class="site"
                 >
                     <router-link
@@ -37,6 +37,8 @@
                     >{{ release.site.name }}</router-link>
                 </span>
 
+                <span v-else />
+
                 <a
                     v-if="release.date"
                     v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"

assets/img/cancel-circle.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>cancel-circle</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
+<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
+</svg>

assets/img/cancel-circle2.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>cancel-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
+</svg>

assets/img/cancel-square.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>cancel-square</title>
+<path d="M13.996 2c0.001 0.001 0.003 0.002 0.004 0.004v11.993c-0.001 0.001-0.002 0.003-0.004 0.004h-11.993c-0.001-0.001-0.003-0.002-0.004-0.004v-11.993c0.001-0.001 0.002-0.003 0.004-0.004h11.993zM14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2v0z"></path>
+<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
+</svg>

assets/img/cancel-square2.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>cancel-square2</title>
+<path d="M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM12.457 11.043l-1.414 1.414-3.043-3.043-3.043 3.043-1.414-1.414 3.043-3.043-3.043-3.043 1.414-1.414 3.043 3.043 3.043-3.043 1.414 1.414-3.043 3.043 3.043 3.043z"></path>
+</svg>

assets/img/checkmark.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>checkmark</title>
+<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"></path>
+</svg>

assets/img/checkmark3.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>checkmark3</title>
+<path d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"></path>
+</svg>

assets/img/cross.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>cross</title>
+<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
+</svg>

assets/img/cross2.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>cross2</title>
+<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
+</svg>

assets/img/cross3.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>cross3</title>
+<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
+</svg>

assets/img/minus-circle2.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>minus-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM13 9h-10v-2h10v2z"></path>
+</svg>

assets/img/plus-circle2.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>plus-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM9 9v4h-2v-4h-4v-2h4v-4h2v4h4v2h-4z"></path>
+</svg>

assets/js/curate.js

@@ -23,9 +23,9 @@ function curateRelease(release) {
         actors: [],
         poster: release.poster && release.poster.media,
         tags: release.tags ? release.tags.map(({ tag }) => tag) : [],
-        network: release.site.network,
     };
 
+    if (release.site) curatedRelease.network = release.site.network;
     if (release.photos) curatedRelease.photos = release.photos.map(({ media }) => media);
     if (release.covers) curatedRelease.covers = release.covers.map(({ media }) => media);
     if (release.trailer) curatedRelease.trailer = release.trailer.media;

assets/js/releases/actions.js

@@ -25,6 +25,63 @@ function initReleasesActions(store, _router) {
         return releases.map(release => curateRelease(release));
     }
 
+    async function searchReleases({ _commit }, { query, limit = 20 }) {
+        const res = await graphql(`
+            query SearchReleases(
+                $query: String!
+                $limit: Int = 20
+            ) {
+                releases: searchReleases(
+                    search: $query
+                    first: $limit
+                ) {
+                    id
+                    title
+                    date
+                    url
+                    site {
+                        id
+                        slug
+                        name
+                        url
+                        network {
+                            id
+                            slug
+                            name
+                            url
+                        }
+                    }
+                    actors: releasesActors {
+                        actor {
+                            id
+                            slug
+                            name
+                        }
+                    }
+                    tags: releasesTags {
+                        tag {
+                            id
+                            name
+                            slug
+                        }
+                    }
+                    poster: releasesPosterByReleaseId {
+                        media {
+                            thumbnail
+                        }
+                    }
+                }
+            }
+        `, {
+            query,
+            limit,
+        });
+
+        if (!res) return [];
+
+        return res.releases.map(release => curateRelease(release));
+    }
+
     async function fetchReleaseById({ _commit }, releaseId) {
         // const release = await get(`/releases/${releaseId}`);
 
@@ -42,6 +99,7 @@ function initReleasesActions(store, _router) {
     return {
         fetchReleases,
         fetchReleaseById,
+        searchReleases,
     };
 }
 

assets/js/router.js

@@ -10,6 +10,7 @@ import Actor from '../components/actors/actor.vue';
 import Actors from '../components/actors/actors.vue';
 import Tag from '../components/tags/tag.vue';
 import Tags from '../components/tags/tags.vue';
+import Search from '../components/search/search.vue';
 import NotFound from '../components/errors/404.vue';
 
 Vue.use(VueRouter);
@@ -69,6 +70,11 @@ const routes = [
         component: Tags,
         name: 'tags',
     },
+    {
+        path: '/search',
+        component: Search,
+        name: 'search',
+    },
     {
         path: '*',
         component: NotFound,

migrations/20200225223307_search.js

@@ -0,0 +1,14 @@
+exports.up = knex => Promise.resolve()
+    .then(() => knex.raw(`
+        CREATE FUNCTION search_releases(search text) RETURNS SETOF releases AS $$
+                SELECT * FROM releases
+                WHERE
+                title ILIKE ('%' || search || '%') OR
+                url ILIKE ('%' || search || '%')
+        $$ LANGUAGE SQL STABLE;
+    `));
+
+exports.down = knex => Promise.resolve()
+    .then(() => knex.raw(`
+        DROP FUNCTION IF EXISTS search_releases;
+    `));

public/img/cancel-circle2.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>cancel-circle2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
+</svg>