Added rudimentary tags page. Improved social match behavior.

assets/components/actors/actor.vue

@@ -274,7 +274,7 @@ function scrollDescription(event) {
 
 async function mounted() {
     [this.actor] = await Promise.all([
-        this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
+        this.$store.dispatch('fetchActors', { actorId: this.$route.params.actorSlug }),
         this.fetchReleases(),
     ]);
 

assets/components/actors/actors.vue

@@ -12,7 +12,7 @@
 import Actor from '../tile/actor.vue';
 
 async function mounted() {
-    this.actors = await this.$store.dispatch('fetchActors');
+    this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
 }
 
 export default {

assets/components/header/header.vue

@@ -1,43 +1,58 @@
 <template>
     <header class="header">
-        <a
+        <router-link
-            href="/"
+            to="/"
             class="logo-link"
-        ><h1 class="logo">traxxx</h1></a>
+        ><h1 class="logo">traxxx</h1></router-link>
 
         <nav class="nav">
             <ul class="nolist">
                 <li class="nav-item">
-                    <Icon icon="stars" />
+                    <router-link
-
+                        to="/actors"
-                    <a
-                        href="/actors"
                         class="nav-link"
-                    >Actors</a>
+                        :class="{ active: active === 'actors' }"
+                    >
+                        <Icon icon="stars" />Actors
+                    </router-link>
                 </li>
 
                 <li class="nav-item">
-                    <Icon icon="earth2" />
+                    <router-link
-
+                        to="/networks"
-                    <a
-                        href="/networks"
                         class="nav-link"
-                    >Networks</a>
+                        :class="{ active: active === 'networks' }"
+                    >
+                        <Icon icon="earth2" />Networks
+                    </router-link>
                 </li>
 
                 <li class="nav-item">
-                    <Icon icon="price-tags" />
+                    <router-link
-
+                        to="/tags"
-                    <a
-                        href="/tags"
                         class="nav-link"
-                    >Categories</a>
+                        :class="{ active: active === 'tags' }"
+                    >
+                        <Icon icon="price-tags" />Tags
+                    </router-link>
                 </li>
             </ul>
         </nav>
     </header>
 </template>
 
+<script>
+function active() {
+    return this.$route.name;
+}
+
+export default {
+    computed: {
+        active,
+    },
+};
+</script>
+
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -68,15 +83,35 @@
 }
 
 .nav-link {
-    display: inline-block;
+    display: inline-flex;
-    color: $shadow;
+    align-items: center;
     padding: 1rem;
+    border-bottom: solid 5px transparent;
+    color: $shadow;
     text-decoration: none;
-    font-size: 1rem;
+    font-size: .9rem;
     font-weight: bold;
 
-    &:hover {
+    .icon {
+        fill: $shadow;
+        margin: 0 .5rem 0 0;
+    }
+
+    &.active {
         color: $primary;
+        border-bottom: solid 5px $primary;
+
+        .icon {
+            fill: $primary;
+        }
+    }
+
+    &:hover:not(.active) {
+        color: $primary;
+
+        .icon {
+            fill: $primary;
+        }
     }
 }
 </style>

assets/components/networks/networks.vue

@@ -13,8 +13,6 @@ import Network from '../tile/network.vue';
 
 async function mounted() {
     this.networks = await this.$store.dispatch('fetchNetworks');
-
-    console.log(this.networks);
 }
 
 export default {

assets/components/tags/tag.vue

@@ -6,6 +6,11 @@
         <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="header">
+            <img
+                :src="`/img/tags/${tag.slug}.jpg`"
+                class="poster"
+            >
+
             <span>
                 <h2 class="title">
                     <Icon icon="price-tag4" />
@@ -34,8 +39,8 @@ async function fetchReleases() {
 }
 
 async function mounted() {
-    [[this.tag]] = await Promise.all([
+    [this.tag] = await Promise.all([
-        this.$store.dispatch('fetchTags', this.$route.params.tagSlug),
+        this.$store.dispatch('fetchTags', { tagId: this.$route.params.tagSlug }),
         this.fetchReleases(),
     ]);
 
@@ -65,13 +70,17 @@ export default {
 @import 'theme';
 
 .header {
-    display: flex;
+}
-    justify-content: space-between;
+
-    padding: 1rem;
+.poster {
+    width: 30rem;
+    height: 18rem;
+    object-fit: cover;
 }
 
 .title {
     display: inline-block;
+    padding: 1rem;
     margin: 0 .5rem 0 0;
     text-transform: capitalize;
 

assets/components/tags/tags.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="tags">
+        <Tag
+            v-for="tag in tags"
+            :key="`tag-${tag.id}`"
+            :tag="tag"
+        />
+    </div>
+</template>
+
+<script>
+import Tag from '../tile/tag.vue';
+
+async function mounted() {
+    this.tags = await this.$store.dispatch('fetchTags', { priority: [9] });
+}
+
+export default {
+    components: {
+        Tag,
+    },
+    data() {
+        return {
+            tags: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.tags {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-gap: .5rem;
+    padding: 1rem;
+}
+</style>

assets/components/tile/release.vue

@@ -2,19 +2,19 @@
     <div class="tile">
         <span class="banner">
             <span class="details">
-                <a
+                <router-link
                     v-if="release.site.independent"
-                    :href="`/network/${release.network.slug}`"
+                    :to="`/network/${release.network.slug}`"
                     class="site site-link"
-                >{{ release.network.name }}</a>
+                >{{ release.network.name }}</router-link>
 
-                <a
+                <router-link
                     v-else
                     v-tooltip.bottom="`Part of ${release.network.name}`"
                     :title="`Part of ${release.network.name}`"
-                    :href="`/site/${release.site.slug}`"
+                    :to="`/site/${release.site.slug}`"
                     class="site site-link"
-                >{{ release.site.name }}</a>
+                >{{ release.site.name }}</router-link>
 
                 <a
                     v-if="release.date"
@@ -38,8 +38,8 @@
                 >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}`</a>
             </span>
 
-            <a
+            <router-link
-                :href="`/scene/${release.id}`"
+                :to="`/scene/${release.id}`"
                 class="link"
             >
                 <img
@@ -61,12 +61,12 @@
                     :title="release.title"
                     class="thumbnail"
                 >No thumbnail available</div>
-            </a>
+            </router-link>
         </span>
 
         <div class="info">
-            <a
+            <router-link
-                :href="`/scene/${release.id}`"
+                :to="`/scene/${release.id}`"
                 class="row link"
             >
                 <h3
@@ -74,7 +74,7 @@
                     :title="release.title"
                     class="title"
                 >{{ release.title }}</h3>
-            </a>
+            </router-link>
 
             <span class="row">
                 <ul class="actors nolist">
@@ -100,10 +100,10 @@
                     :key="`tag-${tag.slug}`"
                     class="tag"
                 >
-                    <a
+                    <router-link
-                        :href="`/tag/${tag.slug}`"
+                        :to="`/tag/${tag.slug}`"
                         class="tag-link"
-                    >{{ tag.name }}</a>
+                    >{{ tag.name }}</router-link>
                 </li>
             </ul>
         </div>

assets/components/tile/tag.vue

@@ -0,0 +1,72 @@
+<template>
+    <a
+        :href="`/tag/${tag.slug}`"
+        :title="tag.name"
+        class="tile"
+    >
+        <img
+            v-if="imageAvailable"
+            :src="`/img/tags/${tag.slug}_thumb.jpg`"
+            :alt="tag.name"
+            class="poster"
+            @error="imageAvailable = false"
+        >
+
+        <span class="title">{{ tag.name }}</span>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        tag: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            imageAvailable: true,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    background: $background;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    text-align: center;
+    text-decoration: none;
+}
+
+.poster {
+    width: 100%;
+    height: 14rem;
+    object-fit: cover;
+}
+
+.title {
+    color: $text;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: .5rem 1rem;
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>

assets/img/modelhub.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="56.835938"
+   height="27.519531"
+   viewBox="0 0 487.24401 208.36217"
+   version="1.1"
+   id="svg34"
+   sodipodi:docname="modelhub.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata38">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>cliphub</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview36"
+     showgrid="false"
+     inkscape:zoom="10.796116"
+     inkscape:cx="36.555237"
+     inkscape:cy="24.650121"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Page-1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">cliphub</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs8">
+    <polygon
+       id="path-1"
+       points="343.86282,220 0.26087996,220 0.26087996,0.11564746 343.86282,0.11564746 " />
+    <polygon
+       id="path-3"
+       points="883.15816,0 0,0 0,220 883.15816,220 " />
+  </defs>
+  <g
+     id="Symbols"
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     transform="translate(-18.966281,-22.803411)">
+    <g
+       id="cliphub">
+      <g
+         id="Page-1"
+         transform="translate(0.79406475,26.176259)"
+         style="fill:#000000;fill-opacity:1">
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-weight:normal;font-size:342.91262817px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:8.5728159;"
+           x="-4.7667637"
+           y="218.76817"
+           id="text868"><tspan
+             sodipodi:role="line"
+             id="tspan866"
+             x="-4.7667637"
+             y="218.76817"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';baseline-shift:baseline;stroke-width:8.5728159;fill-opacity:1;">MH</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>

assets/img/onlyfans.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="icon-logo"
+   viewBox="0 0 92.400002 92.399879"
+   version="1.1"
+   sodipodi:docname="onlyfans.svg"
+   width="92.400002"
+   height="92.399879"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata21">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs19" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview17"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="6.1429902"
+     inkscape:cx="26.40336"
+     inkscape:cy="24.398909"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="icon-logo" />
+  <path
+     class="svg-logo-color-1"
+     d="M 46.07999,3.9024059e-5 A 46.2,46.2 0 1 0 92.39999,46.170039 46.26,46.26 0 0 0 46.07999,3.9024059e-5 Z m 0,87.569999975941 a 41.38,41.38 0 1 1 41.48,-41.4 41.44,41.44 0 0 1 -41.48,41.38 z"
+     id="path2"
+     inkscape:connector-curvature="0"
+     style="fill-rule:evenodd" />
+  <path
+     d="m 65.28999,43.190039 v -3.77 a 16.75,16.75 0 0 0 -5.08,-12 17.31,17.31 0 0 0 -12.19,-5 h -3.1 a 17.31,17.31 0 0 0 -12.18,5 16.7,16.7 0 0 0 -5.07,12 v 3.77 l -2.14,3.86 v 5.56 a 18.64,18.64 0 0 0 5.64,13.33 19.37,19.37 0 0 0 13.59,5.54 h 3.45 a 19.33,19.33 0 0 0 13.55,-5.54 18.61,18.61 0 0 0 5.65,-13.33 v -5.56 z m -16.8,17.06 v 4.45 a 1.93,1.93 0 0 1 -0.89,1.64 h -0.84 a 1,1 0 0 1 -0.3,0 h -0.2 a 1.18,1.18 0 0 1 -0.25,0 h -0.38 a 2,2 0 0 1 -0.92,-1.67 v -4.42 a 5.3,5.3 0 0 1 2,-10.24 h 0.11 a 5.3,5.3 0 0 1 2,10.24 z m 9.09,-16.94 h -22.21 v -3.89 a 9.27,9.27 0 0 1 2.81,-6.63 9.62,9.62 0 0 1 6.74,-2.79 h 3.1 a 9.61,9.61 0 0 1 6.74,2.79 9.31,9.31 0 0 1 2.81,6.63 z"
+     class="svg-logo-color-2"
+     id="path14"
+     inkscape:connector-curvature="0" />
+</svg>

assets/img/tumblr2.svg

@@ -1,5 +0,0 @@
-<!-- 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>tumblr2</title>
-<path d="M14.5 0h-13c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM11.434 12.884c-0.472 0.222-0.9 0.378-1.281 0.469-0.381 0.088-0.797 0.134-1.241 0.134-0.506 0-0.803-0.063-1.191-0.191s-0.719-0.309-0.994-0.544c-0.275-0.238-0.463-0.488-0.569-0.753s-0.159-0.65-0.159-1.156v-3.872h-1.5v-1.563c0.434-0.141 0.938-0.344 1.244-0.606 0.309-0.263 0.559-0.578 0.744-0.947 0.188-0.369 0.316-0.837 0.388-1.406h1.569v2.55h2.556v1.972h-2.553v2.831c0 0.641-0.009 1.009 0.059 1.191s0.238 0.369 0.422 0.475c0.244 0.147 0.525 0.219 0.838 0.219 0.559 0 1.116-0.181 1.669-0.544v1.741z"></path>
-</svg>

assets/js/actors/actions.js

@@ -1,10 +1,12 @@
 import { get } from '../api';
 
 function initActorActions(store, _router) {
-    async function fetchActors({ _commit }, actorId) {
+    async function fetchActors({ _commit }, { actorId, limit = 100 }) {
-        const networks = await get(`/actors/${actorId || ''}`);
+        if (actorId) {
+            return get(`/actors/${actorId}`, { limit });
+        }
 
-        return networks;
+        return get('/actors', { limit });
     }
 
     async function fetchActorReleases({ _commit }, actorId) {

assets/js/api.js

@@ -1,9 +1,7 @@
 import config from 'config';
 
-import queryString from 'query-string';
-
 async function get(endpoint, query = {}) {
-    const q = queryString.stringify(query);
+    const q = new URLSearchParams(query).toString();
 
     const res = await fetch(`${config.api.url}${endpoint}?${q}`, {
         method: 'GET',

assets/js/router.js

@@ -8,7 +8,8 @@ import Network from '../components/networks/network.vue';
 import Networks from '../components/networks/networks.vue';
 import Actor from '../components/actors/actor.vue';
 import Actors from '../components/actors/actors.vue';
-import Tag from '../components/tag/tag.vue';
+import Tag from '../components/tags/tag.vue';
+import Tags from '../components/tags/tags.vue';
 import NotFound from '../components/errors/404.vue';
 
 Vue.use(VueRouter);
@@ -59,6 +60,11 @@ const routes = [
         component: Networks,
         name: 'networks',
     },
+    {
+        path: '/tags',
+        component: Tags,
+        name: 'tags',
+    },
     {
         path: '*',
         component: NotFound,

assets/js/tags/actions.js

@@ -1,10 +1,12 @@
 import { get } from '../api';
 
 function initTagsActions(store, _router) {
-    async function fetchTags({ _commit }, tagId) {
+    async function fetchTags({ _commit }, { tagId, limit = 100, priority }) {
-        const tags = await get(`/tags/${tagId || ''}`);
+        if (tagId) {
+            return get(`/tags/${tagId}`);
+        }
 
-        return tags;
+        return get('/tags', { limit, priority });
     }
 
     async function fetchTagReleases({ _commit }, tagId) {

package-lock.json

@@ -8681,16 +8681,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
-    "query-string": {
-      "version": "6.8.3",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.8.3.tgz",
-      "integrity": "sha512-llcxWccnyaWlODe7A9hRjkvdCKamEKTh+wH8ITdTc3OhchaqUZteiSCX/2ablWHVrkVIe04dntnaZJ7BdyW0lQ==",
-      "requires": {
-        "decode-uri-component": "^0.2.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      }
-    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -10038,11 +10028,6 @@
         "through": "2"
       }
     },
-    "split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
-    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -10187,11 +10172,6 @@
       "resolved": "https://registry.npmjs.org/stream-transform/-/stream-transform-1.0.8.tgz",
       "integrity": "sha512-1q+dL790Ps0NV33rISMq9OLtfDA9KMJZdo1PHZXE85orrWsM4FAh8CVyAOTHO0rhyeM138KNPngBPrx33bFsxw=="
     },
-    "strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
-    },
     "string": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/string/-/string-3.3.3.tgz",

package.json

@@ -83,7 +83,6 @@
         "opn": "^5.4.0",
         "pg": "^7.9.0",
         "prop-types": "^15.7.2",
-        "query-string": "^6.8.3",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "sharp": "^0.23.2",

public/css/style.css

@@ -923,21 +923,64 @@
 }
 
 /* $primary: #ff886c; */
-.header[data-v-80991bcc] {
+.poster[data-v-7f130e7f] {
-  display: flex;
+  width: 30rem;
-  justify-content: space-between;
+  height: 18rem;
-  padding: 1rem;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
-.title[data-v-80991bcc] {
+.title[data-v-7f130e7f] {
   display: inline-block;
+  padding: 1rem;
   margin: 0 .5rem 0 0;
   text-transform: capitalize;
 }
-.title .icon[data-v-80991bcc] {
+.title .icon[data-v-7f130e7f] {
     width: 1.25rem;
     height: 1.25rem;
 }
 
+/* $primary: #ff886c; */
+.tile[data-v-602c6fd8] {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+  text-align: center;
+  text-decoration: none;
+}
+.poster[data-v-602c6fd8] {
+  width: 100%;
+  height: 14rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.title[data-v-602c6fd8] {
+  color: #222;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: bold;
+  padding: .5rem 1rem;
+}
+.title[data-v-602c6fd8] {
+  color: #222;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.tags[data-v-66fa6284] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-gap: .5rem;
+  padding: 1rem;
+}
+
 /* $primary: #ff886c; */
 .errorpage[data-v-29109daf] {
   background: #fff;
@@ -1103,15 +1146,31 @@ body {
   display: inline-block;
 }
 .nav-link[data-v-10b7ec04] {
-  display: inline-block;
+  display: inline-flex;
-  color: rgba(0, 0, 0, 0.5);
+  align-items: center;
   padding: 1rem;
+  border-bottom: solid 5px transparent;
+  color: rgba(0, 0, 0, 0.5);
   text-decoration: none;
-  font-size: 1rem;
+  font-size: .9rem;
   font-weight: bold;
 }
-.nav-link[data-v-10b7ec04]:hover {
+.nav-link .icon[data-v-10b7ec04] {
+    fill: rgba(0, 0, 0, 0.5);
+    margin: 0 .5rem 0 0;
+}
+.nav-link.active[data-v-10b7ec04] {
     color: #ff6c88;
+    border-bottom: solid 5px #ff6c88;
+}
+.nav-link.active .icon[data-v-10b7ec04] {
+      fill: #ff6c88;
+}
+.nav-link[data-v-10b7ec04]:hover:not(.active) {
+    color: #ff6c88;
+}
+.nav-link:hover:not(.active) .icon[data-v-10b7ec04] {
+      fill: #ff6c88;
 }
 
 /* $primary: #ff886c; */

src/actors.js

@@ -17,7 +17,8 @@ async function curateActor(actor) {
             .where({ domain: 'actors', target_id: actor.id })
             .orderBy('index'),
         knex('social')
-            .where({ domain: 'actors', target_id: actor.id }),
+            .where({ domain: 'actors', target_id: actor.id })
+            .orderBy('platform', 'desc'),
     ]);
 
     const curatedActor = {
@@ -128,11 +129,17 @@ function curateActorEntry(actor, scraped, scrapeSuccess) {
 
 function curateSocialEntry(url, actorId) {
     const platforms = [
+        // links supplied by PH often look like domain.com/domain.com/username
         {
             label: 'twitter',
             pattern: 'http(s)\\://(*)twitter.com/:username(/)(?*)',
             format: username => `https://www.twitter.com/${username}`,
         },
+        {
+            label: 'youtube',
+            pattern: 'http(s)\\://(*)youtube.com/channel/:username(?*)',
+            format: username => `https://www.youtube.com/channel/${username}`,
+        },
         {
             label: 'instagram',
             pattern: 'http(s)\\://(*)instagram.com/:username(/)(?*)',
@@ -148,11 +155,21 @@ function curateSocialEntry(url, actorId) {
             pattern: 'http(s)\\://:username.tumblr.com(*)',
             format: username => `https://${username}.tumblr.com`,
         },
+        {
+            label: 'onlyfans',
+            pattern: 'http(s)\\://(*)onlyfans.com/:username(/)(?*)',
+            format: username => `https://www.onlyfans.com/${username}`,
+        },
         {
             label: 'fancentro',
-            pattern: 'http(s)\\://(www.)fancentro.com/:username(/)(?*)',
+            pattern: 'http(s)\\://(*)fancentro.com/:username(/)(?*)',
             format: username => `https://www.fancentro.com/${username}`,
         },
+        {
+            label: 'modelhub',
+            pattern: 'http(s)\\://(*)modelhub.com/:username(/)(?*)',
+            format: username => `https://www.modelhub.com/${username}`,
+        },
     ];
 
     const match = platforms.reduce((acc, platform) => {
@@ -202,7 +219,7 @@ async function curateSocialEntries(urls, actorId) {
     }, []);
 }
 
-async function fetchActors(queryObject) {
+async function fetchActors(queryObject, limit = 100) {
     const releases = await knex('actors')
         .select(
             'actors.*',
@@ -213,7 +230,7 @@ async function fetchActors(queryObject) {
         .leftJoin('countries as residence_countries', 'actors.residence_country_alpha2', 'residence_countries.alpha2')
         .orderBy(['actors.name', 'actors.gender'])
         .where(builder => whereOr(queryObject, 'actors', builder))
-        .limit(100);
+        .limit(limit);
 
     return curateActors(releases);
 }

src/tags.js

@@ -9,6 +9,7 @@ async function curateTag(tag) {
     return {
         id: tag.id,
         name: tag.name,
+        slug: tag.slug,
         description: tag.description,
         group: {
             id: tag.group_id,
@@ -36,7 +37,7 @@ async function associateTags(release, releaseId) {
     })));
 }
 
-async function fetchTags(queryObject) {
+async function fetchTags(queryObject, limit = 100) {
     const tags = await knex('tags')
         .where(builder => whereOr(queryObject, 'tags', builder))
         .andWhere({ 'tags.alias_for': null })
@@ -45,7 +46,8 @@ async function fetchTags(queryObject) {
             'tags_groups.id as group_id', 'tags_groups.name as group_name', 'tags_groups.slug as group_slug', 'tags_groups.description as groups_description',
         )
         .leftJoin('tags_groups', 'tags.group_id', 'tags_groups.id')
-        .limit(100);
+        .orderBy('name')
+        .limit(limit);
 
     return curateTags(tags);
 }

src/utils/where-or.js

@@ -6,9 +6,17 @@ function whereOr(query, table, builder) {
     }
 
     Object.entries(query).forEach(([key, value]) => {
-        if (value !== undefined) {
+        if (value === undefined) {
-            builder.orWhere(`${table}.${key}`, value);
+            return builder;
         }
+
+        if (Array.isArray(value)) {
+            builder.orWhereIn(`${table}.${key}`, value);
+            return builder;
+        }
+
+        builder.orWhere(`${table}.${key}`, value);
+        return builder;
     });
 
     return builder;

src/web/actors.js

@@ -21,7 +21,7 @@ async function fetchActorsApi(req, res) {
         return;
     }
 
-    const actors = await fetchActors();
+    const actors = await fetchActors(null, req.query.limit);
 
     res.send(actors);
 }

src/web/tags.js

@@ -6,10 +6,24 @@ async function fetchTagsApi(req, res) {
     const tagId = typeof req.params.tagId === 'number' ? req.params.tagId : undefined; // null will literally include NULL results
     const tagSlug = typeof req.params.tagId === 'string' ? req.params.tagId : undefined;
 
+    if (tagId || tagSlug) {
         const tags = await fetchTags({
             id: tagId,
             slug: tagSlug,
-    });
+        }, req.query.limit);
+
+        if (tags.length > 0) {
+            res.send(tags[0]);
+            return;
+        }
+
+        res.status(404).send();
+        return;
+    }
+
+    const tags = await fetchTags({
+        priority: req.query.priority.split(','),
+    }, req.query.limit);
 
     res.send(tags);
 }