1.250.38

Reviewed-on: http://gitea.unknown.name/DebaucheryLibrarian/traxxx/pulls/44

.eslintrc

@@ -1,26 +1,34 @@
 {
     "root": true,
-    "extends": ["airbnb-base", "plugin:vue/recommended"],
+    "extends": ["airbnb-base"],
+	"env": {
+		"node": true
+	},
     "parserOptions": {
-        "parser": "babel-eslint",
-        "ecmaVersion": 2019,
-        "sourceType": "module"
+        "parser": "@babel/eslint-parser",
+        "ecmaVersion": 2024,
+        "sourceType": "script"
     },
     "rules": {
         "indent": ["error", "tab"],
         "no-tabs": "off",
-        "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
+		"no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
         "no-console": 0,
+		"arrow-body-style": 0,
+		"default-param-last": 0,
         "template-curly-spacing": "off",
         "max-len": 0,
-        "vue/no-v-html": 0,
-        "vue/html-indent": ["error", "tab"],
-        "vue/multiline-html-element-content-newline": 0,
-        "vue/singleline-html-element-content-newline": 0,
+		"func-names": 0,
+		"space-before-function-paren": 0,
+        "strict": 0,
+        "no-underscore-dangle": 0,
+        "prefer-destructuring": "off",
+        "object-curly-newline": "off",
+		"require-await": "off",
         "no-param-reassign": ["error", {
             "props": true,
-            "ignorePropertyModificationsFor": ["state", "acc"]
-        }],
+            "ignorePropertyModificationsFor": ["state", "acc", "req", "error"]
+        }]
     },
     "globals": {
         "CONFIG": true

.gitignore

@@ -2,9 +2,22 @@ node_modules/
 dist/
 log/
 media/
+html/
+data/
+tmp/*
 public/js/*
 public/css/*
+public/img/tags
+public/img/logos/
+public/banners
 config/*
 !config/default.js
+!config/analvids.json
 assets/js/config/
 !assets/js/config/default.js
+/export*
+/stashes*
+/alerts*
+*.heapprofile
+*.heapsnapshot
+.vscode

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "common"]
+	path = common
+	url = git@unknown.name:DebaucheryLibrarian/traxxx-common.git

.nvmrc

@@ -1 +1 @@
-12.13.0
+21.2.0

README.md

@@ -2,12 +2,12 @@
 **NSFW** - The latest releases from your favorite porn studios in one place.
 
 ## Install & run
-Use [nvm](https://github.com/creationix/nvm) to install a recent version of NodeJS. Download and unpack or clone this repository, and run the following in the root directory:
+Use [nvm](https://github.com/creationix/nvm) to install NodeJS v16.8.0 or newer. Download and unpack or clone this repository, and run the following in the root directory:
 
 `npm install`
 
 ### Set up database
-Install PostgreSQL, make sure password authentication is enabled (scram-sha-256) and create a database with a privileged user. For optimal search engine performance, copy `traxxx.stop` to your PostgresQL text search directory, usually `/usr/share/postgresql/tsearch_data/ or `/usr/local/share/postgresql/tsearch_data/`.
+Install PostgreSQL, make sure password authentication is enabled (scram-sha-256). Create a database with a fully privileged user.
 
 ### Configuration
 Do not modify `config/default.js`, but instead create a copy at `config/local.js` containing the properties you wish to change. If you have set `NODE_ENV`, copy `assets/js/config/default.js` to `assets/js/config/[environment].js`. After setting up PostgreSQL and configuring the details, run the following commands to create and populate the tables, and build the project:
@@ -110,15 +110,17 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * `/api/tags/{ID|slug|name}`: Fetch detailed tag by ID, slug or name.
 
 ## Supported networks & sites
-896 channels on 64 networks, continuously expanding!
+1121 channels on 83 networks, continuously expanding!
 
 * 21Naturals
 * 21Sextreme
 * 21Sextury
 * Adult Time
 * Amateur Allure
+* Amateur Euro
+* American Pornstar
 * Assylum
-* Aziani
+* Aziani (Gangbang Creampies)
 * Babes
 * Bang!
 * Bang Bros
@@ -126,24 +128,40 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Brazzers
 * Burning Angel
 * Cherry Pimps
-* DDF Network
+* CzechAV
+* DDF Network / Porn World
 * Digital Playground
 * Dogfart Network
+* Dorcel
+* Elegant Angel
 * Evil Angel
 * Fake Hub
 * Fame Digital
 * Fantasy Massage
-* Full Porn Network
+* FCUK (Exploited College Girls)
+* First Anal Quest
+* ForBondage
+* Full Porn Network (Analized, James Deen)
+* Gaywire
 * Girlsway
+* Hitzefrei
+* Hookup Hotshot
 * Hush Pass
 * Hussie Pass
+* In The Crack
 * Insex
 * Interracial Pass
 * JayRock Productions
+* Jesse Loads Monster Facials
 * Jules Jordan
+* Karups
 * Kelly Madison Media (Teen Fidelity)
+* Killergram
 * Kink
 * LegalPorno
+* LetsDoeIt
+* Little Caprice Dreams
+* Mamacitaz
 * Men
 * Metro HD
 * Mike Adriano
@@ -152,10 +170,13 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Naughty America
 * New Sensations
 * Nubiles
+* Pascal's Sub Sluts
 * Perfect Gonzo
 * Perv City
 * Pimp.XXX
+* Pinky XXX
 * Porn Pros
+* PornCZ
 * Private
 * Pure Taboo
 * Reality Kings
@@ -163,10 +184,13 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Sexy Hub
 * Team Skeet
 * Teen Core Club
+* TransBella
 * Twistys
+* VIP Sex Vault
 * Vivid
 * Vixen
 * VogoV
 * Whale Member (Holed, POVD)
 * Wicked
 * XEmpire
+* ZTOD

assets/20240125011700_manticore.js

@@ -0,0 +1,138 @@
+const config = require('config');
+const manticore = require('manticoresearch');
+
+const mantiClient = new manticore.ApiClient();
+
+mantiClient.basePath = `http://${config.database.manticore.host}:${config.database.manticore.httpPort}`;
+
+const utilsApi = new manticore.UtilsApi(mantiClient);
+
+const scenesFields = `
+	 id int,
+	 title text,
+	 title_filtered text,
+	 shoot_id text,
+	 channel_id int,
+	 channel_name text,
+	 channel_slug text,
+	 network_id int,
+	 network_name text,
+	 network_slug text,
+	 studio_id int,
+	 studio_name text,
+	 studio_slug text,
+	 entity_ids multi,
+	 actor_ids multi,
+	 actors text,
+	 tag_ids multi,
+	 tags text,
+	 movie_ids multi,
+	 movies text,
+	 serie_ids multi,
+	 series text,
+	 meta text,
+	 date timestamp,
+	 is_showcased bool,
+	 created_at timestamp,
+	 effective_date timestamp,
+	 stashed int,
+	 dupe_index int
+`;
+
+const moviesFields = `
+	 id int,
+	 title text,
+	 title_filtered text,
+	 channel_id int,
+	 channel_name text,
+	 channel_slug text,
+	 network_id int,
+	 network_name text,
+	 network_slug text,
+	 entity_ids multi,
+	 actor_ids multi,
+	 actors text,
+	 tag_ids multi,
+	 tags text,
+	 meta text,
+	 date timestamp,
+	 has_cover bool,
+	 created_at timestamp,
+	 effective_date timestamp,
+	 stashed int,
+	 stashed_scenes int,
+	 stashed_total int,
+	 dupe_index int
+`;
+
+const actorsFields = `
+	 id int,
+	 name text,
+	 slug string,
+	 gender string,
+	 date_of_birth timestamp,
+	 country string,
+	 has_avatar bool,
+	 mass int,
+	 height int,
+	 cup string,
+	 natural_boobs int,
+	 penis_length int,
+	 penis_girth int,
+	 stashed int,
+	 scenes int
+`;
+
+exports.up = async () => {
+	try {
+		await utilsApi.sql(`create table if not exists scenes (${scenesFields})`);
+
+		await utilsApi.sql(`create table if not exists scenes_stashed (
+			scene_id int,
+			stash_id int,
+			user_id int,
+			created_at timestamp
+		)`);
+
+		await utilsApi.sql(`create table if not exists movies (${moviesFields})`);
+
+		await utilsApi.sql(`create table if not exists movies_stashed (
+			movie_id int,
+			stash_id int,
+			user_id int,
+			created_at timestamp
+		)`);
+
+		await utilsApi.sql(`create table if not exists actors (${actorsFields}) min_prefix_len='3'`);
+
+		await utilsApi.sql(`create table if not exists actors_stashed (
+			actor_id int,
+			stash_id int,
+			user_id int,
+			created_at timestamp
+		)`);
+
+		/*
+		await knex.schema.alterTable('stashes_scenes', (table) => table.increments('id'));
+		await knex.schema.alterTable('stashes_movies', (table) => table.increments('id'));
+		await knex.schema.alterTable('stashes_actors', (table) => table.increments('id'));
+		await knex.schema.alterTable('stashes_series', (table) => table.increments('id'));
+		*/
+	} catch (error) {
+		console.log(error);
+	}
+};
+
+exports.down = async (knex) => {
+	await utilsApi.sql('drop table if exists scenes');
+	await utilsApi.sql('drop table if exists scenes_stashed');
+	await utilsApi.sql('drop table if exists movies');
+	await utilsApi.sql('drop table if exists movies_stashed');
+	await utilsApi.sql('drop table if exists actors');
+	await utilsApi.sql('drop table if exists actors_stashed');
+
+	await knex.schema.alterTable('stashes_scenes', (table) => table.dropColumn('id'));
+	await knex.schema.alterTable('stashes_movies', (table) => table.dropColumn('id'));
+	await knex.schema.alterTable('stashes_actors', (table) => table.dropColumn('id'));
+	await knex.schema.alterTable('stashes_series', (table) => table.dropColumn('id'));
+};

assets/components/actors/actor.vue

@@ -1,758 +0,0 @@
-<template>
-	<div
-		v-if="actor"
-		class="content actor"
-	>
-		<div class="actor-header">
-			<h2 class="header-name">
-				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
-				<span v-else="">{{ actor.name }}</span>
-
-				<Gender
-					:gender="actor.gender"
-					class="header-gender"
-				/>
-			</h2>
-
-			<li
-				v-if="actor.aliases.length"
-				class="bio-item"
-			>
-				<dfn class="bio-label">Also known as</dfn>
-				<span>{{ actor.aliases.join(', ') }}</span>
-			</li>
-
-			<Social
-				v-if="actor.social && actor.social.length > 0"
-				:actor="actor"
-				class="header-social"
-			/>
-		</div>
-
-		<div class="content-inner actor-inner">
-			<div
-				class="profile"
-				:class="{ expanded: bioExpanded, 'with-avatar': !!actor.avatar }"
-			>
-				<a
-					v-if="actor.avatar"
-					:href="`/media/${actor.avatar.path}`"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="avatar-link"
-				>
-					<img
-						:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-						:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
-						class="avatar"
-					>
-				</a>
-
-				<Expand
-					v-if="bioExpanded"
-					:expanded="bioExpanded"
-					class="expand expand-dark"
-					@expand="(state) => bioExpanded = state"
-				/>
-
-				<ul class="bio nolist">
-					<li
-						v-if="actor.realName"
-						class="bio-item"
-					>
-						<dfn class="bio-label"><Icon icon="vcard" />Real name</dfn>
-						<span class="bio-value">{{ actor.realName }}</span>
-					</li>
-
-					<li
-						v-if="actor.dateOfBirth"
-						class="bio-item"
-					>
-						<dfn class="bio-label"><Icon icon="cake" />Date of birth</dfn>
-
-						<span class="birthdate">{{ formatDate(actor.dateOfBirth, 'MMMM D, YYYY') }}<span
-							v-if="!actor.dateOfDeath"
-							class="age"
-						>{{ actor.age }}</span></span>
-					</li>
-
-					<li
-						v-if="actor.dateOfDeath"
-						class="bio-item"
-					>
-						<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
-
-						<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM D, YYYY') }}<span
-							v-if="actor.ageAtDeath"
-							class="age"
-						>{{ actor.ageAtDeath }}</span></span>
-					</li>
-
-					<li
-						v-if="actor.origin"
-						class="bio-item birth"
-					>
-						<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
-
-						<span>
-							<span
-								v-if="actor.origin.city"
-								class="city"
-							>{{ actor.origin.city }}</span><span
-								v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
-								class="state"
-							>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
-
-							<span
-								v-if="actor.origin.country"
-								class="country birthcountry"
-							>
-								<img
-									class="flag"
-									:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
-								>{{ actor.origin.country.alias || actor.origin.country.name }}
-							</span>
-						</span>
-					</li>
-
-					<li
-						v-if="actor.residence"
-						class="bio-item residence hideable"
-					>
-						<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
-
-						<span>
-							<span
-								v-if="actor.residence.city"
-								class="city"
-							>{{ actor.residence.city }}</span><span
-								v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
-								class="state"
-							>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
-
-							<span
-								v-if="actor.residence.country"
-								class="country"
-							>
-								<img
-									class="flag"
-									:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.svg`"
-								>{{ actor.residence.country.alias || actor.residence.country.name }}
-							</span>
-						</span>
-					</li>
-
-					<li
-						v-if="actor.ethnicity"
-						class="bio-item ethnicity hideable"
-					>
-						<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
-						<span>{{ actor.ethnicity }}</span>
-					</li>
-
-					<li
-						v-if="actor.bust || actor.waist || actor.hip"
-						title="bust-waist-hip"
-						class="bio-item figure"
-					>
-						<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
-						<span class="bio-value">
-							<Icon
-								v-if="actor.naturalBoobs === false"
-								v-tooltip="'Enhanced boobs'"
-								icon="magic-wand2"
-								class="enhanced"
-							/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
-						</span>
-					</li>
-
-					<li
-						v-if="actor.penisLength || actor.penisGirth || actor.circumcised"
-						class="bio-item penis"
-					>
-						<dfn class="bio-label"><Icon icon="pencil-ruler" />Dick</dfn>
-
-						<span>
-							<Icon
-								v-if="actor.circumcised"
-								v-tooltip="'Circumcised'"
-								icon="page-break"
-								class="circumcised"
-							/>
-
-							<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
-								<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
-								<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
-							</template>
-
-							<template v-else-if="actor.penisLengthMetric">
-								<span>{{ actor.penisLengthMetric }} cm</span>
-								<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
-							</template>
-						</span>
-					</li>
-
-					<li
-						v-if="actor.height"
-						class="bio-item height"
-					>
-						<dfn class="bio-label"><Icon icon="height" />Height</dfn>
-						<span>
-							<span class="height-metric">{{ actor.height.metric }} cm</span>
-							<span class="height-imperial">{{ actor.height.imperial }}</span>
-						</span>
-					</li>
-
-					<li
-						v-if="actor.weight"
-						class="bio-item weight hideable"
-					>
-						<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
-
-						<span>
-							<span class="weight-metric">{{ actor.weight.metric }} kg</span>
-							<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
-						</span>
-					</li>
-
-					<li
-						v-if="actor.eyes"
-						class="bio-item eyes hideable"
-					>
-						<dfn class="bio-label"><Icon icon="eye" />Eyes</dfn>
-						<span>{{ actor.eyes }}</span>
-					</li>
-
-					<li
-						v-if="actor.hairColor"
-						class="bio-item hair hideable"
-					>
-						<dfn class="bio-label"><Icon icon="haircut" />Hair</dfn>
-						<span><span v-if="actor.hairLength">{{ actor.hairLength }}, </span>{{ actor.hairColor }}</span>
-					</li>
-
-					<li
-						v-if="actor.hasTattoos"
-						class="bio-item tattoos hideable"
-					>
-						<dfn class="bio-label"><Icon icon="lotus" />Tattoos</dfn>
-
-						<span
-							v-if="actor.tattoos"
-							v-tooltip="actor.tattoos"
-							class="bio-value"
-						>{{ actor.tattoos }}</span>
-						<span v-else>Yes</span>
-					</li>
-
-					<li
-						v-if="actor.hasPiercings"
-						class="bio-item piercings hideable"
-					>
-						<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
-
-						<span
-							v-if="actor.piercings"
-							v-tooltip="actor.piercings"
-							class="bio-value"
-						>{{ actor.piercings }}</span>
-						<span v-else>Yes</span>
-					</li>
-
-					<li class="bio-item scraped hideable">Updated {{ formatDate(actor.updatedAt, 'YYYY-MM-DD HH:mm') }}, ID: {{ actor.id }}</li>
-				</ul>
-
-				<div class="descriptions-container">
-					<div
-						v-if="actor.descriptions && actor.descriptions.length > 0"
-						class="descriptions"
-					>
-						<p
-							v-for="description in actor.descriptions"
-							:key="`description-${description.entity.id}`"
-							class="description"
-						>
-							{{ description.text }}
-							<router-link :to="`/${description.entity.type}/${description.entity.slug}`">
-								<img
-									v-if="description.entity.type === 'network' || !description.entity.parent || description.entity.independent"
-									:src="`/img/logos/${description.entity.slug}/thumbs/network.png`"
-									class="description-logo"
-								>
-
-								<img
-									v-else
-									:src="`/img/logos/${description.entity.parent.slug}/thumbs/${description.entity.slug}.png`"
-									class="description-logo"
-								>
-							</router-link>
-						</p>
-					</div>
-				</div>
-
-				<Social
-					v-if="actor.social && actor.social.length > 0"
-					:actor="actor"
-					class="profile-social"
-				/>
-
-				<Expand
-					:expanded="bioExpanded"
-					class="expand expand-dark"
-					@expand="(state) => bioExpanded = state"
-				/>
-			</div>
-
-			<div class="actor-content">
-				<Scroll
-					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:expanded="photosExpanded"
-					class="scroll-light"
-					@expand="(state) => photosExpanded = state"
-				>
-					<Photos
-						:actor="actor"
-						:class="{ expanded: photosExpanded }"
-					/>
-				</Scroll>
-
-				<FilterBar
-					ref="filter"
-					:fetch-releases="fetchActor"
-					:items-total="totalCount"
-					:items-per-page="limit"
-					:available-tags="actor.tags"
-					:available-channels="actor.channels"
-					:available-actors="actor.actors"
-				/>
-
-				<Releases :releases="releases" />
-
-				<Pagination
-					:items-total="totalCount"
-					:items-per-page="limit"
-					class="pagination-top"
-				/>
-			</div>
-
-			<Footer />
-		</div>
-	</div>
-</template>
-
-<script>
-import Pagination from '../pagination/pagination.vue';
-import FilterBar from '../filters/filter-bar.vue';
-import Releases from '../releases/releases.vue';
-import Photos from './photos.vue';
-import Expand from '../expand/expand.vue';
-import Scroll from '../scroll/scroll.vue';
-import Gender from './gender.vue';
-import Social from './social.vue';
-
-async function fetchActor() {
-	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
-		actorId: Number(this.$route.params.actorId),
-		limit: this.limit,
-		pageNumber: Number(this.$route.params.pageNumber),
-		range: this.$route.params.range,
-	});
-
-	this.actor = actor;
-	this.releases = releases;
-	this.totalCount = totalCount;
-
-	if (this.$refs.filter) {
-		this.$refs.filter.$el.scrollIntoView();
-	}
-}
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-async function route() {
-	await this.fetchActor();
-}
-
-async function mounted() {
-	await this.fetchActor();
-
-	if (this.actor) {
-		this.pageTitle = this.actor.name;
-	}
-}
-
-export default {
-	components: {
-		FilterBar,
-		Pagination,
-		Photos,
-		Scroll,
-		Expand,
-		Releases,
-		Gender,
-		Social,
-	},
-	data() {
-		return {
-			actor: null,
-			releases: null,
-			totalCount: 0,
-			limit: 15,
-			pageTitle: null,
-			bioExpanded: false,
-			photosExpanded: false,
-		};
-	},
-	computed: {
-		sfw,
-	},
-	watch: {
-		$route: route,
-	},
-	mounted,
-	methods: {
-		fetchActor,
-	},
-};
-</script>
-
-<style lang="scss">
-.header-gender .icon {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-</style>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.actor-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: var(--lighten-extreme);
-    background: var(--profile);
-    padding: .5rem 1rem;
-}
-
-.header-name {
-    padding: 0;
-    margin: 0;
-    display: inline-flex;
-    justify-content: space-between;
-    flex-shrink: 0;
-}
-
-.header-gender {
-    display: inline-block;
-    margin: 0 0 0 .5rem;
-    transform: translate(0, .1rem);
-}
-
-.header-social {
-    overflow: hidden;
-    white-space: nowrap;
-    margin: 0 1rem 0 0;
-}
-
-.profile {
-    background: var(--profile);
-    color: var(--lighten-extreme);
-    width: 100%;
-    max-height: 18rem;
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-
-    &.with-avatar {
-        height: 18rem; /* profile overlaps avatar in chrome */
-    }
-
-    .avatar-link {
-        padding: 0 0 1rem 1rem;
-        flex-shrink: 0;
-    }
-
-    .avatar {
-        height: 100%;
-        flex-shrink: 0;
-		border: solid 3px var(--lighten-hint);
-        margin: 0 .5rem 0 0;
-    }
-}
-
-.bio {
-    flex-grow: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
-.bio-header {
-    width: calc(50% - 2rem);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 .5rem .5rem 0;
-    margin: 0 0 0 1rem;
-}
-
-.bio-item {
-    width: calc(50% - 4rem);
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: .25rem 0 ;
-    margin: 0 0 .25rem 1rem;
-    line-height: 1.75;
-    text-align: right;
-    font-size: .9rem;
-    font-weight: 600;
-    overflow: hidden;
-
-    &:not(:last-of-type) {
-        border-bottom: solid 1px var(--lighten-hint);
-    }
-}
-
-.bio-label,
-.bio-value {
-	display: flex;
-	align-items: center;
-}
-
-.bio-label {
-    color: var(--lighten);
-    margin: 0 1rem 0 0;
-    flex-shrink: 0;
-    font-style: normal;
-    font-weight: 400;
-
-    .icon {
-        fill: var(--lighten);
-        margin: -.25rem .5rem 0 0;
-    }
-}
-
-.bio-value {
-	margin: 0 0 0 2rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    .icon {
-        margin: -.25rem 0 0 0;
-    }
-}
-
-.flag {
-    height: 1rem;
-    margin: .25rem .25rem 0 0;
-}
-
-.bio-name {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-}
-
-.birthdate {
-    display: block;
-}
-
-.age {
-    font-weight: bold;
-    padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--lighten-weak);
-    margin: 0 0 0 .5rem;
-}
-
-.country {
-    display: flex;
-	justify-content: flex-end;
-}
-
-.figure .bio-label .icon {
-	margin: -.5rem .5rem 0 0;
-}
-
-.height-imperial,
-.weight-imperial,
-.penis-girth-imperial,
-.penis-length-imperial,
-.bio-segment {
-    padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--lighten-weak);
-    margin: 0 0 0 .5rem;
-}
-
-.enhanced.icon,
-.circumcised.icon {
-    fill: var(--primary);
-    padding: 0 .5rem;
-}
-
-.enhanced.icon {
-	transform: scaleX(-1);
-}
-
-.ethnicity,
-.hair,
-.eyes {
-    text-transform: capitalize;
-}
-
-.scraped {
-    color: var(--lighten-weak);
-    font-size: .8rem;
-}
-
-.descriptions-container {
-    max-width: 30rem;
-    max-height: 100%;
-    position: relative;
-    display: block;
-    flex-grow: 1;
-    box-sizing: border-box;
-	overflow: hidden;
-
-	&::after {
-		content: '';
-		width: 100%;
-		height: 1.5rem;
-		position: absolute;
-		bottom: 0;
-		background: linear-gradient(transparent, 25%, var(--profile) 75%);
-		pointer-events: none;
-	}
-}
-
-.descriptions {
-	height: 100%;
-    overflow: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.description {
-	margin: 0;
-	padding: 0 1rem;
-	border-left: solid 3px var(--lighten-hint);
-    line-height: 1.5;
-    font-size: .9rem;
-}
-
-.description-logo {
-	display: block;
-	width: 12rem;
-	max-height: 1.5rem;
-	margin: .5rem 0 1.5rem 0;
-	object-fit: contain;
-	object-position: 0 50%;
-}
-
-.actor-content {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-	background: var(--background-soft);
-}
-
-.heading {
-    padding: 0;
-    margin: 0 0 1rem 0;
-}
-
-.photos {
-	background: var(--background-dim);
-}
-
-.profile-social {
-    display: none;
-}
-
-.expand {
-	display: none;
-}
-
-.scroll {
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-@media(max-width: $breakpoint4) {
-    .descriptions-container {
-        display: none;
-    }
-}
-
-@media(max-width: $breakpoint3) {
-    .profile .avatar-link {
-        display: none;
-    }
-
-    .actor-content {
-        flex-direction: column;
-    }
-}
-
-@media(max-width: $breakpoint) {
-    .profile {
-        height: auto;
-        max-height: none;
-        flex-direction: column;
-
-        &.with-avatar {
-            height: auto;
-            max-height: none;
-        }
-
-        &:not(.expanded) .hideable {
-            display: none;
-        }
-    }
-
-    .bio {
-        width: 100%;
-        height: auto;
-        padding: 0 1rem;
-        margin: 0;
-    }
-
-    .bio-item {
-        width: 100%;
-        margin: 0;
-    }
-
-    .expanded .bio-value {
-		white-space: normal;
-    }
-
-	.expand {
-		display: block;
-	}
-}
-
-@media(max-width: $breakpoint0) {
-    .header-social {
-        display: none;
-    }
-
-    .expanded .profile-social {
-        display: block;
-        margin: 1rem 0 0 0;
-    }
-
-    .header-name {
-        flex-grow: 1;
-		font-size: 1.3rem;
-    }
-}
-</style>

assets/components/actors/actors.vue

@@ -1,274 +0,0 @@
-<template>
-	<div class="actors">
-		<nav class="filter">
-			<ul class="genders nolist">
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'all' }"
-						class="gender-link all"
-					>all</router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'female' }"
-						class="gender-link female"
-					><Gender gender="female" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'male' }"
-						class="gender-link male"
-						replace
-					><Gender gender="male" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'trans' }"
-						class="gender-link transsexual"
-						replace
-					><Gender gender="transsexual" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'other' }"
-						class="gender-link other"
-						replace
-					><Icon icon="question5" /></router-link>
-				</li>
-			</ul>
-
-			<ul class="letters nolist">
-				<li
-					v-for="letterX in letters"
-					:key="letterX"
-					class="letter"
-				>
-					<router-link
-						:to="{ name: 'actors', params: { gender, letter: letterX, pageNumber: 1 } }"
-						:class="{ selected: letterX === letter }"
-						class="letter-link"
-						replace
-					>{{ letterX || 'All' }}</router-link>
-				</li>
-			</ul>
-		</nav>
-
-		<Pagination
-			:items-total="totalCount"
-			:items-per-page="limit"
-		/>
-
-		<div
-			v-lazy-container="{ selector: '.lazy' }"
-			class="tiles"
-		>
-			<Actor
-				v-for="actor in actors"
-				:key="`actor-${actor.id}`"
-				:actor="actor"
-			/>
-		</div>
-
-		<Pagination
-			v-if="totalCount > 0"
-			:items-total="totalCount"
-			:items-per-page="limit"
-			class="pagination-top"
-		/>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-import Actor from './tile.vue';
-import Gender from './gender.vue';
-import Pagination from '../pagination/pagination.vue';
-
-async function fetchActors() {
-	const curatedGender = this.gender.replace('trans', 'transsexual');
-
-	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
-		limit: this.limit,
-		pageNumber: Number(this.$route.params.pageNumber) || 1,
-		letter: this.letter.replace('all', ''),
-		gender: curatedGender === 'other' ? null : curatedGender,
-	});
-
-	this.actors = actors;
-	this.totalCount = totalCount;
-}
-
-function letter() {
-	return this.$route.params.letter || 'all';
-}
-
-function gender() {
-	return this.$route.params.gender || 'all';
-}
-
-async function route() {
-	await this.fetchActors();
-}
-
-async function mounted() {
-	this.pageTitle = 'Actors';
-
-	await this.fetchActors();
-}
-
-export default {
-	components: {
-		Actor,
-		Gender,
-		Pagination,
-	},
-	data() {
-		return {
-			actors: [],
-			pageTitle: null,
-			totalCount: 0,
-			limit: 30,
-			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
-		};
-	},
-	computed: {
-		letter,
-		gender,
-	},
-	watch: {
-		$route: route,
-	},
-	mounted,
-	methods: {
-		fetchActors,
-	},
-};
-</script>
-
-<style lang="scss">
-.gender-link {
-    &.selected .gender .icon  {
-        fill: var(--text-light);
-        filter: none;
-    }
-
-    &:hover:not(.selected) {
-        .gender .icon {
-            fill: var(--text-light);
-        }
-
-        .male .icon  {
-            filter: drop-shadow(0 0 1px var(--male));
-        }
-
-        .female .icon  {
-            filter: drop-shadow(0 0 1px var(--female));
-        }
-    }
-
-    &:hover:not(.selected) .transsexual .icon  {
-        fill: var(--female);
-        filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
-    }
-}
-</style>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.actors {
-    display: flex;
-    flex-direction: column;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-    grid-gap: .5rem;
-    padding: 1rem;
-    flex-grow: 1;
-}
-
-.filter {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 1rem;
-    margin: 1rem 0;
-}
-
-.genders {
-    display: flex;
-    flex-shrink: 0;
-    padding: 0 .5rem 0 0;
-    border-right: solid 1px var(--shadow-hint);
-    margin: 0 1rem 0 0;
-}
-
-.letter,
-.gender {
-    display: inline-block;
-}
-
-.letter-link,
-.gender-link {
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    margin: .25rem .5rem .25rem 0;
-    color: var(--shadow);
-    background: var(--background);
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0 0 3px var(--darken-weak);
-
-    .male,
-    .female,
-    .transsexual {
-        padding: .2rem 0 0 0;
-    }
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        color: var(--text);
-        cursor: pointer;
-
-        .icon {
-            fill: var(--text);
-        }
-    }
-
-    &.selected {
-        background: var(--primary);
-        color: var(--text-light);
-
-        &.other .icon {
-            fill: var(--text-light);
-        }
-    }
-}
-
-@media(max-width: $breakpoint) {
-    .genders {
-        flex-direction: column;
-    }
-}
-
-@media(max-width: $breakpoint-micro) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-}
-</style>

assets/components/actors/gender.vue

@@ -1,41 +0,0 @@
-<template>
-	<span
-		v-if="gender"
-		class="gender"
-		:class="{ [gender]: true }"
-	><Icon :icon="gender" /></span>
-</template>
-
-<script>
-export default {
-	props: {
-		gender: {
-			type: String,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.gender {
-    &.female .icon {
-        fill: var(--female);
-        filter: drop-shadow(0 0 1px var(--shadow));
-    }
-
-    &.male .icon {
-        fill: var(--male);
-        filter: drop-shadow(0 0 1px var(--shadow));
-    }
-
-    &.transsexual .icon {
-        fill: var(--text-contrast);
-        filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
-            drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
-            drop-shadow(0 0 1px var(--shadow))
-    }
-}
-</style>

assets/components/actors/photos.vue

@@ -1,136 +0,0 @@
-<template>
-	<div
-		v-lazy-container
-		class="photos"
-		:class="{
-			avatar: !!actor.avatar,
-			empty: actor.photos.length === 0,
-		}"
-	>
-		<a
-			v-show="actor.avatar"
-			:href="`/media/${actor.avatar.path}`"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="avatar-link photo-link"
-		>
-			<img
-				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
-				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
-				class="avatar photo"
-				@load="$parent.$emit('load')"
-			>
-		</a>
-
-		<a
-			v-for="photo in actor.photos"
-			:key="`photo-${photo.id}`"
-			:href="`/media/${photo.path}`"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="photo-link"
-		>
-			<img
-				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
-				:title="`© ${photo.credit || photo.entity.name}`"
-				class="photo"
-				@load="$parent.$emit('load')"
-			>
-		</a>
-	</div>
-</template>
-
-<script>
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	props: {
-		actor: {
-			type: Object,
-			default: null,
-		},
-	},
-	computed: {
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.photos {
-    display: flex;
-	box-sizing: border-box;
-	padding: .5rem 1rem;
-	margin: 0 1rem 0 0;
-    font-size: 0;
-	overflow-x: scroll;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-	&.expanded {
-		flex-wrap: wrap;
-		justify-content: center;
-		margin: 0;
-
-		.photo-link {
-			margin: 0 .5rem .5rem 0;
-		}
-
-		.photo {
-			height: 18rem;
-		}
-	}
-
-	&.empty {
-		display: none;
-	}
-
-    .avatar-link {
-        display: none;
-    }
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-.photo-link {
-	margin: 0 .5rem 0 0;
-}
-
-.photo {
-    height: 15rem;
-    box-shadow: 0 0 3px var(--darken-weak);
-	object-fit: cover;
-}
-
-@media(max-width: $breakpoint3) {
-	.photos {
-		&.empty.avatar {
-			display: flex;
-		}
-
-		.avatar-link {
-			display: inline-block;
-		}
-
-		&.expanded {
-			grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-		}
-    }
-}
-
-@media(max-width: $breakpoint0) {
-	.photos.expanded {
-		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-}
-</style>

assets/components/actors/social.vue

@@ -1,61 +0,0 @@
-<template>
-	<div
-		v-if="actor"
-		class="social"
-	>
-		<a
-			v-for="social in actor.social"
-			:key="`social-${social.id}`"
-			v-tooltip.bottom="social.url"
-			:href="social.url"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="social-link"
-		>
-			<Icon
-				v-if="social.platform"
-				:icon="social.platform"
-			/>
-
-			<Icon
-				v-else
-				icon="link"
-			/>
-		</a>
-	</div>
-</template>
-
-<script>
-export default {
-	props: {
-		actor: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.social {
-    display: block;
-}
-
-.social-link {
-    display: inline-block;
-    padding: 0 0 0 1rem;
-
-    .icon {
-        color: var(--highlight);
-        fill: var(--highlight);
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    &:hover .icon {
-        fill: var(--primary);
-    }
-}
-</style>

assets/components/actors/tile.vue

@@ -1,281 +0,0 @@
-<template>
-	<div
-		v-if="actor"
-		class="actor"
-	>
-		<router-link
-			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
-			class="link"
-		>
-			<span
-				class="handle"
-			>
-				<span
-					v-tooltip.top="actor.name"
-					class="name"
-				>{{ actor.name }}</span>
-
-				<router-link
-					v-if="actor.network"
-					v-tooltip="actor.network.name"
-					:to="{ name: 'network', params: { networkSlug: actor.network.slug } }"
-					class="favicon"
-				>
-					<img
-						:src="`/img/logos/${actor.network.slug}/favicon.png`"
-						class="favicon-icon"
-					>
-				</router-link>
-
-				<Icon
-					v-if="alias"
-					v-tooltip="`Alias of ${alias.name}`"
-					icon="users3"
-					class="favicon alias"
-				/>
-
-				<Icon
-					v-if="actor.dateOfDeath"
-					v-tooltip="`Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
-					icon="tombstone"
-					class="favicon died"
-				/>
-			</span>
-
-			<div class="avatar-container">
-				<img
-					v-if="actor.avatar"
-					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
-					class="avatar lazy"
-				>
-
-				<span
-					v-else
-					class="avatar"
-				><img
-					:src="`/img/avatar_${actor.gender || 'female'}.svg`"
-					class="avatar-fallback"
-				></span>
-
-				<span
-					class="details"
-				>
-					<span class="gender-age">
-						<Gender :gender="actor.gender" />
-
-						<span
-							v-if="actor.ageAtDeath"
-							v-tooltip="`Born ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}<br>Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
-							class="age-death"
-						>{{ actor.ageAtDeath }}</span>
-
-						<span
-							v-else-if="actor.age"
-							v-tooltip="`Born on ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}`"
-							class="age-now"
-						>{{ actor.age }}</span>
-
-						<span
-							v-if="actor.ageThen && actor.ageThen < actor.age"
-							v-tooltip="`${actor.ageThen} years old on release date`"
-							class="age-then"
-						>{{ actor.ageThen }}</span>
-					</span>
-
-					<span
-						v-if="actor.origin"
-						v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
-						class="country"
-					>
-						{{ actor.origin.country.alpha2 }}
-						<img
-							class="flag"
-							:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
-						>
-					</span>
-
-					<span
-						v-else
-						class="country"
-					/>
-				</span>
-			</div>
-		</router-link>
-	</div>
-</template>
-
-<script>
-import Gender from './gender.vue';
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	components: {
-		Gender,
-	},
-	props: {
-		actor: {
-			type: Object,
-			default: null,
-		},
-		alias: {
-			type: Object,
-			default: null,
-		},
-	},
-	computed: {
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.actor {
-    width: 100%;
-    display: inline-block;
-    position: relative;
-    box-shadow: 0 0 3px var(--darken-weak);
-    background: var(--background);
-	overflow: hidden;
-
-    &::before {
-        content: '';
-        display: inline-block;
-        padding-bottom: 150%;
-    }
-}
-
-.link {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: var(--text);
-    text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-
-.handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-	box-shadow: 0 0 3px var(--shadow);
-
-	.name {
-		padding: .5rem;
-	}
-
-	.alias {
-		fill: var(--shadow);
-	}
-}
-
-.favicon {
-	font-size: 0;
-	padding: .5rem .25rem;
-
-	&:last-child {
-		padding: .5rem;
-	}
-
-	&.died {
-		fill: var(--shadow);
-	}
-}
-
-.favicon-icon {
-    width: 1rem;
-    height: 1rem;
-}
-
-.name {
-    flex-grow: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.avatar-container {
-    display: flex;
-    flex-grow: 1;
-    position: relative;
-	overflow: hidden;
-	background: var(--profile);
-}
-
-.avatar {
-    color: var(--darken-weak);
-    background: var(--darken-hint);
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    object-fit: cover;
-    object-position: 50% 0;
-}
-
-.avatar-fallback {
-    max-height: 100%;
-    max-width: 100%;
-    opacity: .1;
-}
-
-.details {
-    background: var(--darken);
-    color: var(--text-light);
-    width: 100%;
-    height: 1.75rem;
-    display: flex;
-    align-items: center;
-	justify-content: space-between;
-    box-sizing: border-box;
-    padding: .5rem;
-    position: absolute;
-    bottom: 0;
-    font-size: .9rem;
-    font-weight: bold;
-}
-
-.gender-age {
-	display: flex;
-	align-items: center;
-}
-
-.gender {
-	margin: .25rem .25rem 0 0;
-}
-
-.country {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.flag {
-    height: .75rem;
-    margin: 0 0 0 .5rem;
-}
-
-.age-now,
-.age-death {
-	margin: 0 .25rem 0 0;
-}
-
-.age-then {
-    color: var(--lighten);
-}
-</style>

assets/components/container/container.vue

@@ -1,125 +0,0 @@
-<template>
-	<div
-		class="container"
-		:class="theme"
-	>
-		<transition name="slide">
-			<Sidebar
-				v-if="showSidebar"
-				@toggle="(state) => showSidebar = state"
-			/>
-		</transition>
-
-		<Header :toggle-sidebar="toggleSidebar" />
-
-		<div class="content">
-			<router-view />
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-import EventBus from '../../js/event-bus';
-
-import Header from '../header/header.vue';
-import Sidebar from '../sidebar/sidebar.vue';
-
-function theme(state) {
-	return state.ui.theme;
-}
-
-function toggleSidebar(state) {
-	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
-}
-
-function mounted() {
-	document.addEventListener('click', () => {
-		EventBus.$emit('blur');
-	});
-}
-
-export default {
-	components: {
-		Header,
-		Sidebar,
-	},
-	data() {
-		return {
-			showSidebar: false,
-		};
-	},
-	computed: {
-		...mapState({
-			theme,
-		}),
-	},
-	mounted,
-	methods: {
-		toggleSidebar,
-	},
-};
-</script>
-
-<style lang="scss">
-@import 'theme';
-
-.container {
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: var(--background-soft);
-    color: var(--text);
-}
-
-.content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-y: auto;
-	overflow-x: hidden;
-}
-
-.content-inner {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-	box-shadow: 0 0 3px var(--shadow-weak);
-	z-index: 1;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-	&.sidebar-container {
-		transition: background .15s ease-in-out;
-	}
-
-	.sidebar {
-		transition: transform .15s ease-in-out;
-	}
-}
-
-.slide-enter,
-.slide-leave-to {
-	&.sidebar-container {
-		background: transparent;
-	}
-
-	.sidebar {
-		transform: translate(100%, 0);
-	}
-}
-
-.column {
-    width: 1200px;
-    max-width: 100%;
-    padding: 0 1rem;
-    margin: 0 auto;
-    box-sizing: border-box;
-}
-</style>

assets/components/entities/children.vue

@@ -1,66 +0,0 @@
-<template>
-	<div class="children">
-		<EntityTile
-			v-for="child in entity.children"
-			:key="`child-${child.id}`"
-			:entity="child"
-		/>
-	</div>
-</template>
-
-<script>
-import EntityTile from './tile.vue';
-
-export default {
-	components: {
-		EntityTile,
-	},
-	props: {
-		entity: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.children {
-	display: flex;
-	box-sizing: border-box;
-	padding: 1rem;
-	margin: 0 1rem 0 0;
-	border-bottom: solid 1px var(--darken-hint);
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-	.tile {
-		width: 15rem;
-		margin: 0 1rem 0 0;
-	}
-
-	&.expanded {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-		grid-gap: 1rem;
-		margin: 0;
-
-		.tile {
-			width: 100%;
-		}
-	}
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint0) {
-	.children.expanded {
-		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-	}
-}
-</style>

assets/components/entities/entity.vue

@@ -1,276 +0,0 @@
-<template>
-	<div
-		v-if="entity"
-		class="entity content"
-	>
-		<div class="info">
-			<a
-				:href="entity.url"
-				target="_blank"
-				rel="noopener"
-				class="link link-child"
-			>
-				<template v-if="entity.hasLogo">
-					<img
-						v-if="$route.name === 'network'"
-						class="logo logo-child"
-						:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-					>
-
-					<img
-						v-else-if="entity.parent && !entity.independent"
-						class="logo logo-child"
-						:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-					>
-
-					<img
-						v-else
-						class="logo logo-child"
-						:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-					>
-				</template>
-
-				<h2
-					v-else
-					class="name"
-				>{{ entity.name }}</h2>
-
-				<Icon
-					v-if="entity.url"
-					icon="share2"
-				/>
-			</a>
-
-			<ul
-				v-if="entity.tags.length > 0"
-				class="tags"
-			>
-				<li
-					v-for="tag in entity.tags"
-					:key="`tag-${tag.slug}`"
-				>{{ tag.name }}</li>
-			</ul>
-
-			<router-link
-				v-if="entity.parent"
-				:to="`/${entity.parent.type}/${entity.parent.slug}`"
-				class="link link-parent"
-			>
-				<img
-					v-if="entity.parent.hasLogo"
-					class="logo logo-parent"
-					:src="`/img/logos/${entity.parent.slug}/thumbs/network.png`"
-				>
-
-				<img
-					v-if="entity.parent.hasLogo"
-					class="favicon"
-					:src="`/img/logos/${entity.parent.slug}/favicon.png`"
-				>
-
-				<h3
-					v-else
-					class="name parent-name"
-				>{{ entity.parent.name }}</h3>
-			</router-link>
-		</div>
-
-		<div
-			ref="content"
-			class="content-inner"
-		>
-			<Scroll
-				v-if="entity.children.length > 0"
-				:expanded="expanded"
-				class="scroll-dark"
-				@expand="(state) => expanded = state"
-			>
-				<Children
-					:entity="entity"
-					:class="{ expanded }"
-				/>
-			</Scroll>
-
-			<FilterBar
-				:fetch-releases="fetchEntity"
-				:items-total="totalCount"
-				:items-per-page="limit"
-			/>
-
-			<div class="releases">
-				<Releases :releases="entity.releases" />
-
-				<Pagination
-					:items-total="totalCount"
-					:items-per-page="limit"
-					class="pagination-top"
-				/>
-			</div>
-
-			<Footer />
-		</div>
-	</div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-import FilterBar from '../filters/filter-bar.vue';
-import Pagination from '../pagination/pagination.vue';
-import Releases from '../releases/releases.vue';
-import Children from './children.vue';
-import Scroll from '../scroll/scroll.vue';
-
-async function fetchEntity() {
-	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
-		entitySlug: this.$route.params.entitySlug,
-		entityType: this.$route.name,
-		limit: this.limit,
-		range: this.$route.params.range,
-		pageNumber: Number(this.$route.params.pageNumber),
-	});
-
-	this.entity = entity;
-	this.totalCount = totalCount;
-
-	this.pageTitle = entity.name;
-
-	Vue.nextTick(() => {
-		this.$refs.content.scrollTop = 0;
-	});
-}
-
-async function mounted() {
-	await this.fetchEntity();
-}
-
-async function route() {
-	await this.fetchEntity();
-	this.expanded = false;
-}
-
-export default {
-	components: {
-		FilterBar,
-		Pagination,
-		Children,
-		Releases,
-		Scroll,
-	},
-	data() {
-		return {
-			entity: null,
-			pageTitle: null,
-			totalCount: null,
-			limit: Number(this.$route.query.limit) || 20,
-			expanded: false,
-		};
-	},
-	watch: {
-		$route: route,
-	},
-	mounted,
-	methods: {
-		fetchEntity,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.info {
-	display: flex;
-	justify-content: space-between;
-	background: var(--profile);
-	border-bottom: solid 1px var(--lighten-hint);
-}
-
-.link {
-	max-width: 20rem;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 1rem;
-	text-decoration: none;
-}
-
-.link-child {
-	.icon {
-		fill: var(--lighten);
-		margin: 0 0 0 1rem;
-	}
-
-	&:hover .icon {
-		fill: var(--text-light);
-	}
-}
-
-.link-parent {
-	flex-direction: row-reverse;
-	margin: 0 0 0 3rem;
-}
-
-.logo {
-	height: 100%;
-	max-width: 100%;
-	object-fit: contain;
-}
-
-.logo-child {
-	height: 2rem;
-}
-
-.logo-parent {
-	height: 1.5rem;
-}
-
-.favicon {
-	height: 1rem;
-}
-
-.content-inner {
-	display: flex;
-	flex-direction: column;
-}
-
-.releases {
-	flex-grow: 1;
-}
-
-.name {
-	color: var(--text-light);
-	display: flex;
-	align-items: center;
-	padding: 0;
-	margin: 0;
-	white-space: nowrap;
-	font-size: 1.5rem;
-}
-
-.favicon {
-	display: none;
-}
-
-@media(max-width: $breakpoint) {
-	.tags {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-	.logo-parent {
-		display: none;
-	}
-
-	.favicon {
-		display: inline-block;
-	}
-}
-
-@media(max-width: $breakpoint-nano) {
-	.link-child .icon {
-		display: none;
-	}
-}
-</style>

assets/components/entities/tile.vue

@@ -1,78 +0,0 @@
-<template>
-	<router-link
-		:to="`/${entity.type}/${entity.slug}`"
-		:title="entity.name"
-		class="tile"
-	>
-		<template v-if="entity.hasLogo">
-			<img
-				v-if="entity.type === 'network' || entity.independent"
-				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				:alt="entity.name"
-				class="logo"
-			>
-
-			<img
-				v-else-if="entity.parent"
-				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				class="logo"
-			>
-
-			<img
-				v-else
-				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				class="logo"
-			>
-		</template>
-
-		<span
-			v-else
-			class="name"
-		>{{ entity.name }}</span>
-	</router-link>
-</template>
-
-<script>
-export default {
-	props: {
-		entity: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.tile {
-    height: 6rem;
-    background: var(--tile);
-    display: flex;
-    flex-shrink: 0;
-	justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    padding: .5rem 1rem;
-    border-radius: .25rem;
-    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
-    text-align: center;
-    text-decoration: none;
-}
-
-.logo {
-	max-width: 100%;
-	max-height: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.name {
-	color: var(--text-light);
-    font-size: 1.25rem;
-    font-weight: bold;
-}
-</style>

assets/components/errors/404.vue

@@ -1,34 +0,0 @@
-<template>
-	<div class="errorpage">
-		<h1 class="error">404 - Not Found</h1>
-
-		<a
-			href="/"
-			class="home"
-		>Take me home</a>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.errorpage {
-    background: var(--background);
-    color: var(--primary);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-}
-
-.error {
-    margin: 0;
-}
-
-.home {
-    color: var(--shadow);
-    margin: 3rem 0;
-}
-</style>

assets/components/expand/expand.vue

@@ -1,63 +0,0 @@
-<template>
-	<div>
-		<div
-			v-show="expanded"
-			class="expand-button expanded noselect"
-			@click="$emit('expand', false)"
-		><Icon icon="arrow-up3" /></div>
-
-		<div
-			v-show="!expanded"
-			class="expand-button noselect"
-			@click="$emit('expand', true)"
-		><Icon icon="arrow-down3" /></div>
-	</div>
-</template>
-
-<script>
-export default {
-	props: {
-		expanded: {
-			type: Boolean,
-			default: false,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.expand-button {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: .5rem;
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-		background: var(--shadow-hint);
-
-		.icon {
-			fill: var(--text);
-		}
-	}
-}
-
-.expand-dark {
-	.icon {
-		fill: var(--lighten);
-	}
-
-	&:hover {
-		background: var(--lighten-hint);
-
-		.icon {
-			fill: var(--text-light);
-		}
-	}
-}
-</style>

assets/components/filters/actor-filter.vue

@@ -1,86 +0,0 @@
-<template>
-	<v-popover class="filter-container">
-		<div class="filter">
-			<Icon icon="users" />
-
-			<div
-				v-if="selectedActors.length > 0"
-				class="filter-applied"
-			>{{ selectedActors.length }} {{ selectedActors.length > 1 ? 'actors' : 'actor' }}</div>
-
-			<div
-				v-else
-				class="filter-applied empty"
-			>Actors</div>
-		</div>
-
-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, actors: undefined } }"
-				:class="{ active: selectedActors.length > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
-
-			<ul class="filter-items nolist">
-				<li
-					v-for="actor in availableActors"
-					:key="actor.id"
-					class="filter-item"
-					:class="{ selected: selectedActors.includes(actor.slug) }"
-				>
-					<router-link
-						:to="{ query: {
-							...$route.query,
-							actors: actor.slug,
-						}, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>{{ actor.name }}</router-link>
-
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
-
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
-</template>
-
-<script>
-function getNewRange(actor) {
-	if (this.selectedActors.includes(actor.slug)) {
-		return { actors: this.selectedActors.filter(selectedActor => selectedActor !== actor.slug).join(',') || undefined };
-	}
-
-	return { actors: this.selectedActors.concat(actor.slug).join(',') };
-}
-
-function selectedActors() {
-	return this.$route.query.actors ? this.$route.query.actors.split(',') : [];
-}
-
-export default {
-	props: {
-		availableActors: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	computed: {
-		selectedActors,
-	},
-	methods: {
-		getNewRange,
-	},
-};
-</script>

assets/components/filters/channel-filter.vue

@@ -1,177 +0,0 @@
-<template>
-	<v-popover class="filter-container">
-		<div class="filter">
-			<Icon icon="antenna" />
-
-			<div
-				v-if="selectedLength > 0"
-				class="filter-applied"
-			>{{ selectedLength }} {{ selectedLength > 1 ? 'channels' : 'channel' }}</div>
-
-			<div
-				v-else
-				class="filter-applied empty"
-			>Channels</div>
-		</div>
-
-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-				:class="{ active: selectedLength > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
-
-			<ul class="filter-items nolist">
-				<li
-					v-for="channel in channelsPerNetwork"
-					:key="`channel-${channel.id}`"
-					class="filter-item"
-					:class="{
-						[channel.type]: true,
-						independent: channel.independent,
-						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
-						disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
-					}"
-				>
-					<router-link
-						:to="{ query: {
-							...$route.query,
-							[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
-							[channel.type === 'network' ? 'channels' : 'networks']: undefined,
-						}, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>
-						<img
-							v-if="channel.type === 'network' || channel.independent || !channel.parent "
-							:src="`/img/logos/${channel.slug}/favicon.png`"
-							class="favicon"
-						>
-
-						{{ channel.name }}
-					</router-link>
-
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
-
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
-</template>
-
-<script>
-function getNewRange(entity) {
-	if (entity.type === 'network' && this.selectedNetworks.includes(entity.slug)) {
-		return {
-			channels: this.selectedChannels.join(',') || undefined,
-			networks: this.selectedNetworks.filter(selectedTag => selectedTag !== entity.slug).join(',') || undefined,
-		};
-	}
-
-	if (entity.type === 'network') {
-		return {
-			channels: this.selectedChannels.join(',') || undefined,
-			networks: this.selectedNetworks.concat(entity.slug).join(','),
-		};
-	}
-
-	if (this.selectedChannels.includes(entity.slug)) {
-		return {
-			channels: this.selectedChannels.filter(selectedTag => selectedTag !== entity.slug).join(',') || undefined,
-			networks: this.selectedNetworks.join(',') || undefined,
-		};
-	}
-
-	return {
-		channels: this.selectedChannels.concat(entity.slug).join(','),
-		networks: this.selectedNetworks.join(',') || undefined,
-	};
-}
-
-function selectedChannels() {
-	return this.$route.query.channels ? this.$route.query.channels.split(',') : [];
-}
-
-function selectedNetworks() {
-	return this.$route.query.networks ? this.$route.query.networks.split(',') : [];
-}
-
-function channelsPerNetwork() {
-	const networks = this.availableChannels.reduce((acc, channel) => {
-		if (channel.type === 'network' || channel.independent || !channel.parent) {
-			acc[channel.slug] = { ...channel, children: [] };
-			return acc;
-		}
-
-		if (!acc[channel.parent.slug]) {
-			acc[channel.parent.slug] = { ...channel.parent, children: [] };
-		}
-
-		acc[channel.parent.slug].children.push(channel);
-
-		return acc;
-	}, {});
-
-	return Object.values(networks).reduce((acc, network) => [...acc, network, ...(network.children || [])], []);
-}
-
-function selectedLength() {
-	return this.selectedChannels.length + this.selectedNetworks.length;
-}
-
-export default {
-	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
-		compact: {
-			type: Boolean,
-			default: false,
-		},
-		availableChannels: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	computed: {
-		channelsPerNetwork,
-		selectedChannels,
-		selectedNetworks,
-		selectedLength,
-	},
-	methods: {
-		getNewRange,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.favicon {
-	width: 1rem;
-	height: 1rem;
-	padding: 0 .75rem 0 0;
-	filter: drop-shadow(0 0 1px var(--darken));
-}
-
-.network .filter-name,
-.independent .filter-name {
-	font-weight: bold;
-	padding: .5rem;
-}
-
-.channel:not(.independent) .filter-name {
-	padding: .5rem .5rem .5rem 2.25rem;
-}
-</style>

assets/components/filters/filter-bar.vue

@@ -1,354 +0,0 @@
-<template>
-	<div class="filter-bar noselect">
-		<div class="sort">
-			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
-				class="range range-button"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
-		</div>
-
-		<div class="filters">
-			<ActorFilter
-				class="filters-filter"
-				:filter="filter"
-				:available-actors="availableActors"
-			/>
-
-			<ChannelFilter
-				class="filters-filter"
-				:filter="filter"
-				:available-channels="availableChannels"
-			/>
-
-			<TagFilter
-				class="filters-filter"
-				:filter="filter"
-				:available-tags="availableTags"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-import ActorFilter from './actor-filter.vue';
-import ChannelFilter from './channel-filter.vue';
-import TagFilter from './tag-filter.vue';
-
-function filter(state) {
-	return state.ui.filter;
-}
-
-function range() {
-	return this.$route.params.range;
-}
-
-function batch(state) {
-	return state.ui.batch;
-}
-
-async function setRange(newRange) {
-	this.$store.dispatch('setRange', newRange);
-
-	await this.fetchReleases();
-}
-
-async function setBatch(newBatch) {
-	this.$store.dispatch('setBatch', newBatch);
-
-	await this.fetchReleases();
-}
-
-export default {
-	components: {
-		ActorFilter,
-		ChannelFilter,
-		TagFilter,
-	},
-	props: {
-		fetchReleases: {
-			type: Function,
-			default: null,
-		},
-		isHome: {
-			type: Boolean,
-			default: false,
-		},
-		itemsTotal: {
-			type: Number,
-			default: 0,
-		},
-		itemsPerPage: {
-			type: Number,
-			default: 10,
-		},
-		availableTags: {
-			type: Array,
-			default: () => [],
-		},
-		availableChannels: {
-			type: Array,
-			default: () => [],
-		},
-		availableActors: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	computed: {
-		...mapState({
-			filter,
-			range,
-			batch,
-		}),
-	},
-	methods: {
-		setRange,
-		setBatch,
-	},
-};
-</script>
-
-<style lang="scss">
-@import 'breakpoints';
-
-.filter {
-	color: var(--shadow);
-	display: inline-flex;
-	align-items: center;
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem 0 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
-.filter-applied {
-	flex-grow: 1;
-	padding: .75rem .5rem;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: right;
-
-	&.empty {
-		color: var(--shadow);
-	}
-}
-
-.filter-mode {
-	width: 100%;
-	background: none;
-	padding: .75rem;
-	margin: 0 0 .5rem 0;
-	font-size: 1rem;
-	border: none;
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-.filter-clear {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: .5rem 1rem;
-	color: var(--darken-weak);
-	text-decoration: none;
-	cursor: default;
-
-	.icon {
-		fill: var(--darken-hint);
-		margin: 0 0 0 1rem;
-	}
-
-	&.active {
-		color: var(--darken);
-
-		.icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover {
-			color: var(--text);
-			background: var(--darken-hint);
-			cursor: pointer;
-
-			.icon {
-				fill: var(--alert);
-			}
-		}
-	}
-}
-
-.filter-items .filter-item {
-	display: flex;
-	align-items: center;
-
-	&:hover {
-		background: var(--darken-hint);
-		cursor: pointer;
-	}
-
-	&.selected {
-		.filter-include  {
-			.filter-add {
-				fill: var(--success);
-			}
-
-			&:hover {
-				.filter-add {
-					display: none;
-				}
-
-				.filter-remove {
-					display: inline-block;
-				}
-			}
-		}
-	}
-}
-
-.filter-include {
-	.icon {
-		width: 1rem;
-		height: 1rem;
-		padding: .5rem 1rem;
-		fill: var(--darken-hint);
-	}
-
-	.filter-remove {
-		display: none;
-		fill: var(--alert);
-	}
-
-	&:hover {
-		cursor: pointer;
-	}
-}
-
-.filter-name {
-	min-width: 8rem;
-	display: flex;
-	flex-grow: 1;
-	padding: .5rem .75rem .5rem 1rem;
-	color: var(--text);
-	text-decoration: none;
-}
-
-.filter-include:hover,
-.filter-name:hover {
-	background: var(--darken-hint);
-}
-
-@media(max-width: $breakpoint-small) {
-	.filter-applied {
-		display: none;
-	}
-
-	.filters-filter:not(:last-child) .filter {
-		padding: .5rem;
-	}
-
-	.filters-filter:last-child .filter {
-		padding: .5rem 0 .5rem .5rem;
-	}
-}
-</style>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.filter-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: .5rem 1rem 0 1rem;
-    z-index: 1;
-	background: var(--background-dim);
-    font-size: 0;
-
-    .icon {
-        margin: 0 .5rem 0 0;
-        fill: var(--shadow);
-    }
-}
-
-.filters {
-	flex-shrink: 0;
-}
-
-.sort {
-    display: flex;
-    align-items: center;
-}
-
-.range-button {
-    color: var(--shadow);
-    display: inline-block;
-    padding: .8rem 1rem;
-    border: none;
-	position: relative;
-    font-size: .8rem;
-    font-weight: bold;
-    text-decoration: none;
-	border: solid 1px transparent;
-	border-bottom: none;
-
-    &:hover:not(.active) {
-        color: var(--shadow-strong);
-        cursor: pointer;
-    }
-
-    &.active {
-        color: var(--primary);
-		background: var(--background-soft);
-		border-color: var(--crease);
-
-		&::after {
-			/* hide grey border for tab effect, negative margin shows grey crease on mobile */
-			content: '';
-			width: 100%;
-			height: 2px;
-			background: var(--background-soft);
-			position: absolute;
-			left: 0;
-			bottom: -2px;
-		}
-    }
-}
-
-.filters-filter {
-    display: inline-block;
-	flex-shrink: 0;
-
-	&:not(:last-child) {
-		margin: 0 1rem 0 0;
-	}
-}
-</style>

assets/components/filters/tag-filter.vue

@@ -1,105 +0,0 @@
-<template>
-	<v-popover class="filter-container">
-		<div class="filter">
-			<Icon icon="price-tag4" />
-
-			<div
-				v-if="selectedTags.length > 0"
-				class="filter-applied"
-			>{{ selectedTags.length }} {{ selectedTags.length > 1 ? 'tags' : 'tag' }}</div>
-
-			<div
-				v-else
-				class="filter-applied empty"
-			>Tags</div>
-		</div>
-
-		<div slot="popover">
-			<select
-				v-model="mode"
-				class="filter-mode"
-				@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
-			>
-				<option value="all">match all selected</option>
-				<option value="any">match any selected</option>
-			</select>
-
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
-				:class="{ active: selectedTags.length > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
-
-			<ul class="filter-items nolist">
-				<li
-					v-for="tag in availableTags"
-					:key="`tag-${tag.id}`"
-					class="filter-item"
-					:class="{ selected: selectedTags.includes(tag.slug) }"
-				>
-					<router-link
-						:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>{{ tag.name }}</router-link>
-
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
-
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
-</template>
-
-<script>
-function getNewRange(tag) {
-	if (this.selectedTags.includes(tag)) {
-		return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
-	}
-
-	return { tags: this.selectedTags.concat(tag).join(',') };
-}
-
-function selectedTags() {
-	return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
-}
-
-export default {
-	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
-		compact: {
-			type: Boolean,
-			default: false,
-		},
-		availableTags: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			mode: this.$route.query.mode || 'all',
-		};
-	},
-	computed: {
-		selectedTags,
-	},
-	methods: {
-		getNewRange,
-	},
-};
-</script>

assets/components/footer/footer.vue

@@ -1,36 +0,0 @@
-<template>
-	<footer class="footer">
-		<span class="segment">© traxxx</span>
-
-		<router-link
-			:to="{ name: 'stats' }"
-			class="segment footer-link nolink"
-		>stats</router-link>
-	</footer>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-	background: var(--background-dim);
-	color: var(--shadow);
-	font-size: .8rem;
-	font-weight: bold;
-	text-align: center;
-}
-
-.segment {
-	padding: .5rem;
-
-	&:not(:last-child) {
-		border-right: solid 1px var(--shadow-hint);
-	}
-}
-
-.footer-link {
-	text-decoration: underline;
-
-	&:hover {
-		color: var(--primary);
-	}
-}
-</style>

assets/components/header/header.vue

@@ -1,390 +0,0 @@
-<template>
-	<header class="header">
-		<div class="header-nav">
-			<router-link
-				to="/"
-				class="logo-link"
-			><h1 class="header-logo">
-				<div
-					class="logo"
-					v-html="logo"
-				/>
-			</h1></router-link>
-
-			<nav class="nav">
-				<ul class="nav-list nolist">
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/actors"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Actors</a>
-						</router-link>
-					</li>
-
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/networks"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Channels</a>
-						</router-link>
-					</li>
-
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/tags"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Tags</a>
-						</router-link>
-					</li>
-
-					<li class="nav-item">
-						<router-link
-							v-slot="{ href, isActive, navigate }"
-							to="/movies"
-						>
-							<a
-								class="nav-link"
-								:href="href"
-								:class="{ active: isActive }"
-								@click="navigate"
-							>Movies</a>
-						</router-link>
-					</li>
-				</ul>
-			</nav>
-		</div>
-
-		<div class="header-section">
-			<div
-				class="sidebar-toggle noselect"
-				@click.stop="toggleSidebar"
-			><Icon icon="menu" /></div>
-
-			<div class="header-toggles">
-				<Icon
-					v-show="!sfw"
-					v-tooltip="'Hit S to enable safe mode'"
-					icon="flower"
-					class="toggle noselect"
-					@click.native="setSfw(true)"
-				/>
-
-				<Icon
-					v-show="sfw"
-					v-tooltip="'Hit N to disable safe mode'"
-					icon="fire"
-					class="toggle noselect"
-					@click.native="setSfw(false)"
-				/>
-
-				<Icon
-					v-show="theme === 'light'"
-					v-tooltip="'Hit D to use dark theme'"
-					icon="moon"
-					class="toggle noselect"
-					@click.native="setTheme('dark')"
-				/>
-
-				<Icon
-					v-show="theme === 'dark'"
-					v-tooltip="'Hit L to use light theme'"
-					icon="sun"
-					class="toggle noselect"
-					@click.native="setTheme('light')"
-				/>
-			</div>
-
-			<Search class="search-full" />
-
-			<v-popover
-				class="search-compact"
-				:open="searching"
-				@show="searching = true"
-				@hide="searching = false"
-			>
-				<button
-					type="button"
-					class="search-button"
-				><Icon
-					icon="search"
-				/></button>
-
-				<Search
-					slot="popover"
-					:searching="searching"
-					class="compact"
-					@search="searching = false"
-				/>
-			</v-popover>
-		</div>
-	</header>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-import Search from './search.vue';
-
-import logo from '../../img/logo.svg';
-
-function sfw(state) {
-	return state.ui.sfw;
-}
-
-function theme(state) {
-	return state.ui.theme;
-}
-
-function setTheme(newTheme) {
-	this.$store.dispatch('setTheme', newTheme);
-}
-
-function setSfw(enabled) {
-	this.$store.dispatch('setSfw', enabled);
-}
-
-export default {
-	components: {
-		Search,
-	},
-	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			logo,
-			searching: false,
-		};
-	},
-	computed: {
-		...mapState({
-			sfw,
-			theme,
-		}),
-	},
-	methods: {
-		setSfw,
-		setTheme,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.header {
-    height: 3rem;
-    display: flex;
-    align-items: center;
-	z-index: 2;
-    justify-content: space-between;
-    background: var(--background);
-    color: var(--primary);
-    box-shadow: 0 0 3px var(--darken-weak);
-    font-size: 0;
-}
-
-.header-nav {
-    display: flex;
-    align-items: center;
-    height: 100%;
-	overflow: hidden;
-}
-
-.header-section {
-    height: 100%;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-}
-
-.sidebar-toggle {
-    display: none;
-	align-items: center;
-	height: 100%;
-
-	.icon {
-		display: inline-block;
-		fill: var(--shadow-modest);
-		padding: 0 1rem;
-		width: 1.5rem;
-		height: 100%;
-	}
-
-    &:hover {
-		cursor: pointer;
-
-		.icon {
-			fill: var(--primary);
-		}
-    }
-}
-
-.logo-link {
-    height: 100%;
-    display: inline-block;
-    text-decoration: none;
-    margin: -.25rem 1rem 0 0;
-}
-
-.header-logo {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 0 0 1rem;
-	fill: var(--primary);
-}
-
-.logo {
-    width: 6rem;
-    display: flex;
-}
-
-.nav,
-.nav-list {
-    display: inline-block;
-    height: 100%;
-}
-
-.nav-item {
-    height: 100%;
-}
-
-.nav-link {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1rem;
-    color: var(--shadow);
-    text-decoration: none;
-    font-size: .9rem;
-    font-weight: bold;
-    cursor: pointer;
-
-    &.active {
-        color: var(--primary);
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
-
-    &:hover:not(.active) {
-        color: var(--primary);
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
-}
-
-.header-toggles {
-    margin: 0 .5rem 0 0;
-
-    .icon {
-        padding: 1rem .75rem;
-        fill: var(--shadow);
-
-        &:hover {
-            fill: var(--shadow-strong);
-            cursor: pointer;
-        }
-
-        &.active {
-            fill: var(--primary);
-        }
-    }
-}
-
-.search-compact {
-    display: none;
-    height: 100%;
-}
-
-.search-button {
-    height: 100%;
-    padding: .25rem 1rem 0 1rem;
-    background: none;
-    border: none;
-    outline: none;
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--shadow-strong);
-        }
-    }
-}
-
-@media(max-width: $breakpoint-kilo) {
-    .search-full {
-        display: none;
-    }
-
-    .search-compact {
-        display: flex;
-    }
-
-    .header-toggles {
-        margin: 0;
-    }
-}
-
-@media(max-width: $breakpoint-small) {
-    .sidebar-toggle {
-        display: flex;
-    }
-
-	.logo-link {
-		margin: -.25rem .75rem 0 0;
-	}
-
-	.nav-link {
-		padding: 0 .75rem;
-	}
-
-    .search-compact {
-        display: none;
-    }
-
-	.header-toggles {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-}
-
-@media(max-width: $breakpoint-nano) {
-	.header-toggles {
-		display: none;
-	}
-}
-</style>

assets/components/header/search.vue

@@ -1,148 +0,0 @@
-<template>
-	<form
-		class="search"
-		@submit.prevent="search"
-	>
-		<input
-			ref="search"
-			v-model="query"
-			type="search"
-			class="search-input"
-			placeholder="Search..."
-		>
-		<button
-			type="submit"
-			class="search-button"
-		><Icon
-			icon="search"
-		/></button>
-	</form>
-</template>
-
-<script>
-async function search() {
-	this.$router.push({ name: 'search', query: { q: this.query } });
-	this.$emit('search');
-}
-
-function searching(to) {
-	if (to) {
-		setTimeout(() => {
-			// nextTick does not seem to work
-			this.$refs.search.focus();
-		}, 20);
-	}
-}
-
-function route(to) {
-	if (to.name !== 'search') {
-		this.query = null;
-	}
-}
-
-export default {
-	props: {
-		searching: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			query: this.$route.query ? this.$route.query.q : null,
-		};
-	},
-	watch: {
-		$route: route,
-		searching,
-	},
-	methods: {
-		search,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.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 var(--shadow-hint);
-
-    &.compact {
-        padding: 0;
-        border: none;
-
-        .search-input {
-            border: solid 1px var(--shadow-hint);
-        }
-
-        .search-button {
-            padding: 0 .5rem 0 1rem;
-            margin: 0;
-        }
-    }
-}
-
-.search-input {
-    height: 100%;
-    width: 100%;
-    padding: .5rem 0 .5rem .5rem;
-    border: none;
-    color: var(--text);
-    background: var(--background);
-    outline: none;
-    font-size: 1rem;
-    outline: none;
-
-    &::placeholder {
-        color: var(--shadow);
-    }
-
-    &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-        padding: .5rem;
-        position: relative;
-        right: 0;
-        color: var(--text);
-        background: url('/img/cancel-circle2.svg');
-        opacity: .25;
-
-        &:hover {
-            opacity: .5;
-            cursor: pointer;
-        }
-    }
-
-    &:focus::placeholder {
-        color: var(--shadow-weak);
-    }
-}
-
-.search-button {
-    height: 100%;
-    padding: 0 1rem;
-    background: none;
-    border: none;
-    margin: .3rem 0 0 0;
-    outline: none;
-
-    .icon {
-        fill: var(--shadow-weak);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--shadow);
-        }
-    }
-}
-</style>

assets/components/home/home.vue

@@ -1,89 +0,0 @@
-<template>
-	<div class="home">
-		<div
-			ref="content"
-			class="content-inner"
-		>
-			<FilterBar
-				:fetch-releases="fetchReleases"
-				:is-home="true"
-				:items-total="totalCount"
-				:items-per-page="limit"
-				:content="$refs.content"
-			/>
-
-			<Releases :releases="releases" />
-
-			<Pagination
-				v-if="totalCount > 0"
-				:items-total="totalCount"
-				:items-per-page="limit"
-				class="pagination-bottom"
-			/>
-		</div>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-import FilterBar from '../filters/filter-bar.vue';
-import Releases from '../releases/releases.vue';
-import Pagination from '../pagination/pagination.vue';
-
-async function fetchReleases() {
-	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
-		limit: this.limit,
-		range: this.$route.params.range,
-		pageNumber: Number(this.$route.params.pageNumber) || 1,
-	});
-
-	this.totalCount = totalCount;
-	this.releases = releases;
-
-	this.$refs.content.scrollTop = 0;
-}
-
-async function route() {
-	await this.fetchReleases();
-}
-
-async function mounted() {
-	this.pageTitle = '';
-
-	await this.fetchReleases();
-}
-
-export default {
-	components: {
-		FilterBar,
-		Releases,
-		Pagination,
-	},
-	data() {
-		return {
-			releases: [],
-			networks: [],
-			pageTitle: null,
-			limit: 20,
-			totalCount: 0,
-			from: null,
-		};
-	},
-	watch: {
-		$route: route,
-	},
-	mounted,
-	methods: {
-		fetchReleases,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.home {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-</style>

assets/components/icon/icon.vue

@@ -1,60 +0,0 @@
-<template>
-	<div
-		:class="{ active }"
-		class="icon"
-		v-html="svg"
-	/>
-</template>
-
-<script>
-export default {
-	props: {
-		icon: {
-			type: String,
-			default: null,
-		},
-		title: {
-			type: String,
-			default: null,
-		},
-		active: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			svg: null,
-		};
-	},
-	beforeMount() {
-		this.svg = require(`../../img/icons/${this.icon}.svg`).default;
-	},
-};
-</script>
-
-<style lang="scss">
-@import '../../css/theme';
-
-.icon {
-    fill: var(--text);
-    display: inline-block;
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-
-    svg {
-        width: 100%;
-        height: 100%;
-    }
-
-    &.active {
-        fill: var(--shadow);
-
-        &:hover {
-            fill: var(--text);
-            cursor: pointer;
-        }
-    }
-}
-</style>

assets/components/networks/networks.vue

@@ -1,160 +0,0 @@
-<template>
-	<div class="networks">
-		<form
-			class="search"
-			@submit.prevent="searchEntities"
-		>
-			<input
-				v-model="query"
-				:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
-				class="query"
-				@input="searchEntities"
-			>
-
-			<button
-				type="submit"
-				class="search-button"
-			><Icon icon="search" /></button>
-		</form>
-
-		<div
-			v-if="query.length > 0"
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in searchResults"
-				:key="`${entity.type}-tile-${entity.slug}`"
-				:entity="entity"
-			/>
-
-			<span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
-		</div>
-
-		<div
-			v-else
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in entities"
-				:key="`entity-tile-${entity.slug}`"
-				:entity="entity"
-			/>
-		</div>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-import Entity from '../entities/tile.vue';
-
-async function searchEntities() {
-	this.searchResults = await this.$store.dispatch('searchEntities', {
-		query: this.query,
-		limit: 50,
-	});
-}
-
-async function mounted() {
-	this.entities = await this.$store.dispatch('fetchEntities', {
-		type: 'network',
-		entitySlugs: [],
-	});
-
-	this.pageTitle = 'Networks';
-}
-
-function channelCount() {
-	return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
-}
-
-export default {
-	components: {
-		Entity,
-	},
-	data() {
-		return {
-			query: '',
-			pageTitle: null,
-			entities: [],
-			searchResults: [],
-		};
-	},
-	computed: {
-		channelCount,
-	},
-	mounted,
-	methods: {
-		searchEntities,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.networks {
-    padding: 0 1rem;
-}
-
-.search {
-    display: flex;
-    width: 100%;
-    max-width: 40rem;
-}
-
-.query {
-    color: var(--text);
-    background: var(--background);
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding: 1rem;
-    border: none;
-    box-sizing: border-box;
-    box-shadow: 0 0 3px var(--darken-weak);
-    margin: 1rem 0;
-    font-size: 1rem;
-    outline: none;
-
-    &:focus {
-        box-shadow: 0 0 3px var(--primary);
-    }
-}
-
-.search-button {
-    padding: 1rem;
-    background: none;
-    border: none;
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
-}
-
-.entity-tiles {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-    grid-gap: 1rem;
-    padding: 1rem 0;
-}
-
-@media(max-width: $breakpoint2) {
-    .entity-tiles {
-        grid-gap: .5rem;
-    }
-}
-
-@media(max-width: $breakpoint0) {
-    .entity-tiles {
-        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    }
-}
-</style>

assets/components/pagination/pagination.vue

@@ -1,189 +0,0 @@
-<template>
-	<div
-		v-if="itemsTotal > 0 || !hideEmpty"
-		class="pagination"
-	>
-		<span
-			v-show="pageNumber > 1"
-			class="cursors"
-		>
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: 1 }, query: $route.query }"
-			><Icon icon="first2" /></router-link>
-
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageNumber - 1 }, query: $route.query }"
-			><Icon icon="arrow-left" /></router-link>
-		</span>
-
-		<span
-			v-show="pageNumber === 1"
-			class="cursors"
-		>
-			<span class="pagination-button cursor disabled"><Icon icon="first2" /></span>
-			<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
-		</span>
-
-		<span class="pages pages-before">
-			<router-link
-				v-for="pageX in pageNumber - 1"
-				:key="`page-${pageX}`"
-				:to="{ params: { pageNumber: pageNumber - pageX }, query: $route.query }"
-				class="pagination-button page"
-			> {{ pageNumber - pageX }} </router-link>
-		</span>
-
-		<router-link
-			:key="`page-${pageNumber}`"
-			:to="{ params: { pageNumber }, query: $route.query }"
-			class="pagination-button page active"
-		> {{ pageNumber }} </router-link>
-
-		<span class="pages pages-after">
-			<router-link
-				v-for="pageX in (pageCount - pageNumber)"
-				:key="`page-${pageX + pageNumber}`"
-				:to="{ params: { pageNumber: pageX + pageNumber }, query: $route.query }"
-				class="pagination-button page"
-			> {{ pageX + pageNumber }} </router-link>
-		</span>
-
-		<span
-			v-show="pageNumber < pageCount"
-			class="cursors"
-		>
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageNumber + 1 }, query: $route.query }"
-			><Icon icon="arrow-right" /></router-link>
-
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageCount }, query: $route.query }"
-			><Icon icon="last2" /></router-link>
-		</span>
-
-		<span
-			v-show="pageNumber === pageCount"
-			class="cursors"
-		>
-			<span class="pagination-button cursor disabled"><Icon icon="arrow-right" /></span>
-			<span class="pagination-button cursor disabled"><Icon icon="last2" /></span>
-		</span>
-	</div>
-</template>
-
-<script>
-function pageNumber() {
-	return Number(this.$route.params.pageNumber) || 1;
-}
-
-function pageCount() {
-	const count = Math.max(Math.ceil(this.itemsTotal / this.itemsPerPage), 1);
-
-	return count;
-}
-
-export default {
-	props: {
-		itemsTotal: {
-			type: Number,
-			default: 0,
-		},
-		itemsPerPage: {
-			type: Number,
-			default: 10,
-		},
-		hideEmpty: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	computed: {
-		pageNumber,
-		pageCount,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.pagination {
-	display: flex;
-	justify-content: center;
-	flex-shrink: 0;
-	overflow: hidden;
-	height: 3rem;
-}
-
-.pagination-top {
-	margin: 0 0 1rem 0;
-}
-
-.pagination-bottom {
-	margin: .5rem 0 1rem 0;
-}
-
-.pagination-button {
-	width: 2.5rem;
-	height: 2.5rem;
-	display: inline-flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	margin: .1rem 0 2rem 0;
-	background: var(--background);
-	color: var(--shadow);
-	font-size: 1rem;
-	font-weight: bold;
-	text-decoration: none;
-	box-shadow: 0 0 3px var(--shadow-hint);
-
-	.icon {
-		width: .8rem;
-		height: .8rem;
-		margin: 0 0 .125rem 0;
-		fill: var(--shadow);
-	}
-
-	&:hover:not(.active):not(.disabled) {
-		color: var(--shadow-strong);
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-
-	&.active {
-		color: var(--primary);
-	}
-
-	&.disabled {
-		color: var(--shadow-weak);
-
-		.icon {
-			fill: var(--shadow-weak);
-		}
-	}
-}
-
-.pages {
-	max-width: 10rem;
-	display: inline-flex;
-	flex-wrap: wrap;
-}
-
-.pages-before {
-	flex-direction: row-reverse;
-}
-
-.cursors {
-	flex-shrink: 0;
-}
-
-.cursors {
-	margin: 0 .75rem;
-	font-size: 0;
-}
-</style>

assets/components/releases/clips.vue

@@ -1,126 +0,0 @@
-<template>
-	<ul class="clips nolist">
-		<li
-			v-for="clip in clips"
-			:key="`clip-${clip.id}`"
-			class="clip"
-		>
-			<div class="clip-poster-container">
-				<a
-					v-if="clip.poster"
-					:href="`/media/${clip.poster.path}`"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<img
-						:src="`/media/${clip.poster.thumbnail}`"
-						class="clip-poster"
-					>
-				</a>
-
-				<span
-					v-if="clip.duration"
-					class="clip-duration"
-				>{{ formatDuration(clip.duration) }}</span>
-			</div>
-
-			<div class="clip-info">
-				<h3
-					v-if="clip.title"
-					class="clip-row clip-title"
-					:title="clip.title"
-				>{{ clip.title }}</h3>
-
-				<p class="clip-row clip-description">{{ clip.description }}</p>
-
-				<Tags
-					:tags="clip.tags"
-					class="clip-row clip-tags"
-				/>
-			</div>
-		</li>
-	</ul>
-</template>
-
-<script>
-import Tags from './tags.vue';
-
-export default {
-	components: {
-		Tags,
-	},
-	props: {
-		clips: {
-			type: Array,
-			default: () => [],
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.clips {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-	grid-gap: 1rem;
-}
-
-.clip {
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak);
-	margin: 0 0 .5rem 0;
-}
-
-.clip-poster-container {
-	position: relative;
-	margin: 0 0 1rem 0;
-}
-
-.clip-poster {
-	width: 100%;
-	height: 10rem;
-	object-fit: cover;
-	object-position: center;
-}
-
-.clip-duration {
-	background: var(--darken);
-	color: var(--text-light);
-	display: block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .25rem .5rem;
-	font-size: .9rem;
-	font-weight: bold;
-	text-shadow: 0 0 2px var(--darken-strong);
-}
-
-.clip-info {
-	padding: 0 1rem;
-}
-
-.clip-row {
-	margin: 0 0 .75rem 0;
-}
-
-.clip-title {
-	padding: 0;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.clip-description {
-	line-height: 1.5;
-}
-
-@media(max-width: $breakpoint-micro) {
-	.clips {
-		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-	}
-}
-</style>

assets/components/releases/details.vue

@@ -1,222 +0,0 @@
-<template>
-	<div class="details">
-		<div class="column">
-			<div class="tidbits">
-				<a
-					:title="release.url && `View scene on ${release.entity.name}`"
-					:href="release.url"
-					:class="{ link: release.url }"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="tidbit date nolink"
-				>
-					<span class="date-compact">{{ release.date ? formatDate(release.date, 'MMM D, YYYY', release.datePrecision) : 'Date N/A' }}</span>
-					<span class="date-full">{{ release.date ? formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) : 'Date unknown' }}</span>
-
-					<Icon
-						v-if="release.url"
-						icon="share2"
-					/>
-				</a>
-			</div>
-
-			<div class="site">
-				<template v-if="release.entity.type === 'channel' && release.entity.parent && !release.entity.independent">
-					<a
-						v-if="release.entity.parent.hasLogo"
-						:href="`/network/${release.entity.parent.slug}`"
-						class="logo-link"
-					>
-						<img
-							:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
-							:title="release.entity.parent.name"
-							:alt="release.entity.parent.name"
-							class="logo logo-parent"
-						>
-					</a>
-
-					<a
-						v-else
-						:href="`/network/${release.entity.parent.slug}`"
-						class="logo-link logo-name"
-					>{{ release.entity.parent.name }}</a>
-
-					<span class="chain">presents</span>
-
-					<a
-						v-if="release.entity.hasLogo"
-						:href="`/${release.entity.type}/${release.entity.slug}`"
-						class="logo-link"
-					>
-						<img
-							v-if="release.entity.type === 'network'"
-							:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
-							:title="release.entity.name"
-							class="logo logo-site"
-						>
-
-						<img
-							v-else
-							:src="`/img/logos/${release.entity.parent.slug}/thumbs/${release.entity.slug}.png`"
-							:title="release.entity.name"
-							class="logo logo-site"
-						>
-					</a>
-
-					<a
-						v-else
-						:href="`/${release.entity.type}/${release.entity.slug}`"
-						class="logo-link logo-name"
-					>{{ release.entity.name }}</a>
-				</template>
-
-				<a
-					v-else
-					:href="`/${release.entity.type}/${release.entity.slug}`"
-				>
-					<img
-						:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
-						:title="release.entity.name"
-						class="logo logo-site"
-					>
-				</a>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	props: {
-		release: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.details {
-    background: var(--profile);
-    color: var(--text-light);
-    box-shadow: 0 0 3px var(--shadow-weak);
-    cursor: default;
-
-    .column {
-		height: 100%;
-        display: flex;
-		justify-content: space-between;
-        align-items: center;
-        padding: 0 1rem;
-    }
-
-    .link {
-        color: var(--text-light);
-
-		.icon {
-			fill: var(--lighten);
-		}
-
-		&:hover {
-			color: var(--text-light);
-
-			.icon {
-				fill: var(--text-light);
-			}
-		}
-    }
-}
-
-.tidbits {
-	flex-shrink: 0;
-	height: 100%;
-}
-
-.tidbit {
-    display: inline-flex;
-	align-items: center;
-    height: 100%;
-
-	&.date {
-        flex-shrink: 0;
-		font-weight: bold;
-
-		.icon {
-			fill: var(--lighten);
-			margin: -.2rem 0 0 .75rem;
-		}
-    }
-}
-
-.site {
-    display: inline-flex;
-    align-items: center;
-    padding: .25rem 0;
-    font-size: 0;
-}
-
-.logo {
-    display: inline-block;
-}
-
-.logo-link {
-	text-decoration: none;
-}
-
-.logo-site {
-    height: 2.5rem;
-    max-width: 15rem;
-	margin: .25rem 0;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.logo-parent {
-    height: 1.5rem;
-    max-width: 10rem;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.logo-name {
-	padding: .5rem 0;
-	color: var(--text-light);
-	font-size: 1.25rem;
-	font-weight: bold;
-}
-
-.chain {
-    color: var(--lighten);
-    padding: 0 .5rem;
-    font-weight: bold;
-    font-size: .8rem;
-}
-
-.date-compact {
-	display: none;
-}
-
-@media(max-width: $breakpoint-mega) {
-    .logo-parent,
-    .chain {
-        display: none;
-    }
-
-	.logo-site {
-		width: 100%;
-	}
-}
-
-@media(max-width: $breakpoint) {
-	.date-full {
-		display: none;
-	}
-
-	.date-compact {
-		display: inline-block;
-	}
-}
-</style>

assets/components/releases/media.vue

@@ -1,287 +0,0 @@
-<template>
-	<div
-		v-lazy-container
-		class="media"
-	>
-		<div
-			v-if="release.trailer || release.teaser"
-			class="trailer-container"
-		>
-			<video
-				v-if="release.trailer"
-				:src="`/media/${release.trailer.path}`"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<video
-				v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-				:src="`/media/${release.teaser.path}`"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<img
-				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
-				:alt="release.title"
-				class="item trailer"
-			>
-
-			<a
-				v-if="release.poster"
-				v-tooltip="'View poster'"
-				:href="`/media/${release.poster.path}`"
-				:class="{ playing }"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="poster-link"
-			><Icon icon="image" /></a>
-
-			<span
-				v-if="sfw && !playing"
-				class="warning"
-			>
-				<Icon icon="warning2" />NSFW
-			</span>
-		</div>
-
-		<template v-if="release.covers && release.covers.length > 0">
-			<a
-				v-for="cover in release.covers"
-				:key="`cover-${cover.id}`"
-				:href="`/media/${cover.path}`"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:data-src="`/media/${cover.thumbnail}`"
-					:data-loading="`/media/${cover.lazy}`"
-					class="item cover"
-					@load="$parent.$emit('load')"
-				>
-			</a>
-		</template>
-
-		<div
-			v-for="photo in photos"
-			:key="`media-${photo.id}`"
-			class="item-container"
-		>
-			<a
-				:href="`/media/${photo.path}`"
-				:class="{ sfw }"
-				class="item-link"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
-					:alt="`Photo ${photo.index + 1}`"
-					class="item"
-					@load="$parent.$emit('load')"
-				>
-
-				<span
-					v-if="sfw"
-					class="warning"
-				>
-					<Icon icon="warning2" />NSFW
-				</span>
-			</a>
-		</div>
-	</div>
-</template>
-
-<script>
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-function photos() {
-	const clips = this.release.clips || [];
-	const clipPostersById = clips.reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
-	const uniqueClipPosters = Array.from(new Set(clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
-	const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
-
-	if (this.release.trailer || this.release.teaser) {
-		// poster will be on trailer video
-		return photosWithClipPosters;
-	}
-
-	if (this.release.poster) {
-		// no trailer, add poster to photos
-		return [this.release.poster].concat(photosWithClipPosters);
-	}
-
-	// no poster available
-	return photosWithClipPosters;
-}
-
-export default {
-	props: {
-		release: {
-			type: Object,
-			default: null,
-		},
-		expanded: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			playing: false,
-			paused: false,
-		};
-	},
-	computed: {
-		photos,
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.media {
-    flex-shrink: 0;
-    white-space: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-	scroll-behavior: smooth;
-    font-size: 0;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-	&.expanded {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
-		grid-gap: 1rem;
-		justify-content: center;
-		margin: 0 0 1rem 0;
-	}
-}
-
-.poster-link {
-    position: absolute;
-    top: .5rem;
-    right: .5rem;
-    transition: opacity .1s ease;
-
-    .icon {
-        width: 1.5rem;
-        height: 1.5rem;
-        fill: var(--lighten-strong);
-        filter: drop-shadow(0 0 1px var(--darken-weak));
-    }
-
-    &.playing {
-        opacity: 0;
-    }
-
-    &:hover {
-        cursor: pointer;
-        opacity: 1;
-
-        .icon {
-            fill: var(--text-light);
-        }
-    }
-}
-
-.item-container,
-.trailer-container {
-	max-width: 100%;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-	flex-shrink: 0;
-
-    .warning {
-        display: none;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        background: var(--darken-weak);
-        color: var(--text-light);
-        font-size: 1.2rem;
-        font-weight: bold;
-        text-shadow: 0 0 3px var(--darken-strong);
-        pointer-events: none;
-        animation: alert .5s ease infinite .1s;
-
-        .icon {
-            display: block;
-            fill: var(--text-light);
-            width: 3rem;
-            height: 3rem;
-            margin: 0 0 .25rem 0;
-            filter: drop-shadow(0 0 3px var(--darken));
-            animation: alert .5s ease infinite .1s;
-        }
-    }
-
-    &:hover .warning {
-        display: inline-flex;
-    }
-}
-
-.item {
-	height: 18rem;
-	max-width: 100%;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-
-.trailer-container {
-	height: 18rem;
-	width: 32rem;
-    max-width: 100%;
-}
-
-.trailer {
-	width: 100%;
-	max-height: 100%;
-	object-fit: cover;
-
-    &.sfw {
-        filter: blur(2rem);
-    }
-}
-
-@keyframes alert {
-    0% {
-        color: var(--text-light);
-        fill: var(--text-light);
-    }
-    50% {
-        color: var(--alert);
-        fill: var(--alert);
-    }
-}
-
-@media(max-width: $breakpoint0) {
-	.media:not(.expanded) .item,
-    .trailer-container {
-		height: 56vw; /* 16:9 ratio for full-width video */
-    }
-}
-</style>

assets/components/releases/movie-tile.vue

@@ -1,171 +0,0 @@
-<template>
-	<div class="tile">
-		<div class="movie">
-			<router-link
-				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
-				class="cover"
-			>
-				<img
-					v-if="movie.covers[0]"
-					:src="`/media/${movie.covers[0].thumbnail}`"
-				>
-			</router-link>
-
-			<div class="info">
-				<router-link
-					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
-					class="title-link"
-				>
-					<h3 class="title">{{ movie.title }}</h3>
-				</router-link>
-
-				<ul
-					class="actors nolist"
-					:title="movie.actors.map(actor => actor.name).join(', ')"
-				>
-					<li
-						v-for="actor in movie.actors"
-						:key="`tag-${movie.id}-${actor.id}`"
-						class="actor"
-					><router-link
-						:to="`/actor/${actor.id}/${actor.slug}`"
-						class="actor-link"
-					>{{ actor.name }}</router-link></li>
-				</ul>
-
-				<ul
-					class="tags nolist"
-					:title="movie.tags.map(tag => tag.name).join(', ')"
-				>
-					<li
-						v-for="tag in movie.tags"
-						:key="`tag-${movie.id}-${tag.id}`"
-						class="tag"
-					><router-link
-						:to="`/tag/${tag.slug}`"
-						class="tag-link"
-					>{{ tag.name }}</router-link></li>
-				</ul>
-			</div>
-		</div>
-
-		<Details :release="movie" />
-	</div>
-</template>
-
-<script>
-import Details from './tile-details.vue';
-
-export default {
-	components: {
-		Details,
-	},
-	props: {
-		movie: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.tile {
-	display: flex;
-	flex-direction: column;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--darken-weak);
-	font-size: 0;
-}
-
-.movie {
-	display: flex;
-}
-
-.title-link {
-	color: var(--text);
-	text-decoration: none;
-}
-
-.cover {
-	height: 16rem;
-	box-shadow: 0 0 3px var(--darken-weak);
-
-	img {
-		height: 100%;
-		max-width: 12rem;
-		object-fit: cover;
-		object-position: center ;
-	}
-}
-
-.info {
-	flex-grow: 1;
-	overflow: hidden;
-}
-
-.title {
-	box-sizing: border-box;
-	padding: 1rem;
-	margin: 0;
-	font-size: 1rem;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.actors {
-	padding: 0 1rem;
-	margin: 0 0 1rem 0;
-	line-height: 1.5;
-}
-
-.actor:not(:last-child)::after {
-	content: ',';
-	margin: 0 .25rem 0 0;
-	font-size: 1rem;
-}
-
-.actor-link {
-	font-size: 1rem;
-	color: var(--link);
-	text-decoration: none;
-
-	&:hover {
-		color: var(--primary);
-	}
-}
-
-.tags {
-	padding: .2rem 1rem 0 1rem;
-	height: 1.75rem;
-	line-height: 2;
-	overflow: hidden;
-}
-
-.tag {
-	margin: 0 0 .5rem 0;
-}
-
-.tag-link {
-	background: var(--background);
-	font-size: .75rem;
-	padding: .25rem .5rem;
-	color: var(--shadow);
-	font-weight: bold;
-	text-decoration: none;
-	box-shadow: 0 0 3px var(--shadow-weak);
-
-	&:hover {
-		color: var(--primary);
-	}
-}
-
-@media(max-width: $breakpoint) {
-	.cover {
-		height: 12rem;
-	}
-}
-</style>

assets/components/releases/movies.vue

@@ -1,64 +0,0 @@
-<template>
-	<div class="movies">
-		<div class="content-inner">
-			<div class="tiles">
-				<MovieTile
-					v-for="movie in movies"
-					:key="`movie-${movie.id}`"
-					:movie="movie"
-				/>
-			</div>
-		</div>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-import MovieTile from './movie-tile.vue';
-
-async function mounted() {
-	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
-		limit: 30,
-	});
-
-	this.movies = movies;
-	this.totalCount = totalCount;
-}
-
-export default {
-	components: {
-		MovieTile,
-	},
-	data() {
-		return {
-			movies: [],
-			totalCount: 0,
-		};
-	},
-	mounted,
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.movies {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.tiles {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-	grid-gap: 1rem;
-	padding: 1rem;
-}
-
-@media(max-width: $breakpoint) {
-	.tiles {
-		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-	}
-}
-</style>

assets/components/releases/release.vue

@@ -1,408 +0,0 @@
-<template>
-	<div
-		v-if="release"
-		class="content"
-	>
-		<Expand
-			v-if="expanded"
-			class="expand"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
-		/>
-
-		<Scroll
-			class="scroll-light"
-			:expandable="false"
-		>
-			<Media
-				:release="release"
-				:class="{ expanded }"
-			/>
-		</Scroll>
-
-		<Details :release="release" />
-
-		<Expand
-			v-if="release.photos && release.photos.length > 0"
-			class="expand-bottom"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
-		/>
-
-		<div class="info column">
-			<div class="row">
-				<h2
-					v-if="release.title"
-					class="title"
-				>{{ release.title }}</h2>
-
-				<h2
-					v-else-if="release.actors.length > 0"
-					class="title title-composed"
-				>
-					{{ release.actors.map(actor => actor.name).join(', ') }} for {{ release.entity.name }}
-					<Icon
-						v-tooltip="`This scene has no known official title`"
-						icon="question2"
-					/>
-				</h2>
-			</div>
-
-			<div
-				v-if="release.tags.length > 0"
-				class="row"
-			>
-				<Tags :tags="release.tags" />
-			</div>
-
-			<div class="row associations">
-				<ul
-					v-lazy-container="{ selector: '.lazy' }"
-					class="actors nolist"
-				>
-					<li
-						v-for="actor in release.actors"
-						:key="actor.id"
-					>
-						<Actor :actor="actor" />
-					</li>
-				</ul>
-			</div>
-
-			<div
-				v-if="release.movies && release.movies.length > 0"
-				class="row"
-			>
-				<span class="row-label">Part of</span>
-
-				<div class="movies">
-					<router-link
-						v-for="movie in release.movies"
-						:key="`movie-${movie.id}`"
-						:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
-						class="movie"
-					>
-						<span class="movie-title">{{ movie.title }}</span>
-						<img
-							:src="`/media/${movie.covers[0].thumbnail}`"
-							class="movie-cover"
-						>
-					</router-link>
-				</div>
-			</div>
-
-			<Releases
-				v-if="release.scenes && release.scenes.length > 0"
-				:releases="release.scenes"
-			/>
-
-			<div
-				v-if="release.description"
-				class="row"
-			>
-				<span class="row-label">Description</span>
-				<p class="description">{{ release.description }}</p>
-			</div>
-
-			<div class="row row-tidbits">
-				<div
-					v-if="release.duration"
-					class="row-tidbit"
-				>
-					<span class="row-label">Duration</span>
-
-					<div class="duration">{{ formatDuration(release.duration) }}</div>
-				</div>
-
-				<div
-					v-if="release.shootId"
-					class="row-tidbit"
-				>
-					<span class="row-label">Shoot #</span>
-					{{ release.shootId }}
-				</div>
-
-				<div
-					v-if="release.studio"
-					class="row-tidbit"
-				>
-					<span class="row-label">Studio</span>
-
-					<router-link
-						:to="`/studio/${release.studio.slug}`"
-						class="link studio"
-					>{{ release.studio.name }}</router-link>
-				</div>
-
-				<div
-					v-if="release.productionDate"
-					class="row-tidbit"
-				>
-					<span class="row-label">Shoot date</span>
-					{{ formatDate(release.productionDate, 'MMMM D, YYYY') }}
-				</div>
-
-				<div
-					v-if="release.productionLocation"
-					class="row-tidbit"
-				>
-					<span class="row-label">Location</span>
-					<span class="location">
-						<span
-							v-if="release.productionLocation.city"
-							class="location-segment"
-						>{{ release.productionLocation.city }}, </span>
-						<span
-							v-if="release.productionLocation.state"
-							class="location-segment"
-						>{{ release.productionLocation.state }}, </span>
-						<span
-							v-if="release.productionLocation.country"
-							class="location-segment"
-						>{{ release.productionLocation.country.alias || release.productionLocation.country.name }}
-							<img
-								class="flag"
-								:src="`/img/flags/${release.productionLocation.country.alpha2.toLowerCase()}.svg`"
-							>
-						</span>
-					</span>
-				</div>
-			</div>
-
-			<div
-				v-if="release.clips && release.clips.length > 0"
-				class="row nolist"
-			>
-				<span class="row-label">Clips</span>
-
-				<Clips :clips="release.clips" />
-			</div>
-
-			<div
-				v-if="release.comment"
-				class="row"
-			>
-				<span class="row-label">Comment</span>
-				<span>{{ release.comment }}</span>
-			</div>
-
-			<div class="row">
-				<span class="row-label">Added</span>
-
-				<router-link
-					:to="`/added/${formatDate(release.createdAt, 'YYYY/MM/DD')}`"
-					:title="`Added on ${formatDate(release.createdAt, 'MMMM D, YYYY HH:mm')}`"
-					class="link added"
-				>{{ release.createdBatchId }}: {{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</router-link>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import Media from './media.vue';
-import Details from './details.vue';
-import Tags from './tags.vue';
-import Clips from './clips.vue';
-import Actor from '../actors/tile.vue';
-import Releases from './releases.vue';
-import Scroll from '../scroll/scroll.vue';
-import Expand from '../expand/expand.vue';
-
-async function fetchRelease() {
-	if (this.$route.name === 'scene') {
-		this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
-	}
-
-	if (this.$route.name === 'movie') {
-		this.release = await this.$store.dispatch('fetchMovieById', this.$route.params.releaseId);
-	}
-}
-
-function pageTitle() {
-	return this.release
-		&& (this.release.title
-		|| (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null));
-}
-
-export default {
-	components: {
-		Actor,
-		Details,
-		Media,
-		Scroll,
-		Expand,
-		Releases,
-		Clips,
-		Tags,
-	},
-	data() {
-		return {
-			release: null,
-			expanded: false,
-		};
-	},
-	computed: {
-		pageTitle,
-	},
-	watch: {
-		$route: fetchRelease,
-	},
-	mounted: fetchRelease,
-	methods: {
-		fetchRelease,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-.expand-bottom {
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-.info {
-    padding: 1rem;
-    border-left: solid 1px var(--shadow-hint);
-    border-right: solid 1px var(--shadow-hint);
-    flex-grow: 1;
-}
-
-.row {
-    margin: 0 0 1.5rem 0;
-
-    &.associations {
-        align-items: start;
-    }
-}
-
-.row-label {
-	display: block;
-	margin: 0 0 .5rem 0;
-	color: var(--shadow);
-	font-weight: bold;
-
-	.icon {
-		margin: 0 .5rem 0 0;
-		fill: var(--shadow);
-	}
-}
-
-.row-tidbit {
-	display: inline-block;
-	margin: 0 2rem 0 0;
-}
-
-.title {
-	display: inline-block;
-	margin: 0;
-
-	.icon {
-		fill: var(--shadow);
-		padding: .25rem;
-
-		&:hover {
-			fill: var(--primary);
-			cursor: pointer;
-		}
-	}
-}
-
-.title-composed {
-	color: var(--shadow);
-}
-
-.title-shoot {
-	margin: 0 0 0 .5rem;
-	color: var(--shadow);
-	font-size: .9rem;
-	font-weight: bold;
-}
-
-.description {
-    line-height: 1.5;
-	margin: -.25rem 0 0 0;
-}
-
-.actors {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
-    flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.movies {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
-    flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.movie {
-	display: flex;
-	flex-direction: column;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak);
-	color: var(--text);
-	text-decoration: none;
-
-	&:hover .movie-title {
-		color: var(--primary);
-	}
-}
-
-.movie-cover {
-	width: 100%;
-}
-
-.movie-title {
-	padding: .5rem;
-	font-weight: bold;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.flag {
-	height: 1rem;
-	margin: 0 0 -.15rem .1rem;
-}
-
-.link {
-    display: inline-flex;
-    color: var(--link);
-    text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
-}
-
-.showable {
-    display: none;
-}
-
-@media(max-width: $breakpoint) {
-    .hideable {
-        display: none;
-    }
-
-    .row .showable {
-        display: block;
-    }
-
-    .tidbit .showable {
-        display: inline-block;
-    }
-
-    .actors {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-}
-</style>

assets/components/releases/releases.vue

@@ -1,126 +0,0 @@
-<template>
-	<div class="releases">
-		<h3
-			v-if="context"
-			class="heading"
-		><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
-
-		<ul
-			v-if="releases.length > 0"
-			:key="sfw"
-			v-lazy-container="{ selector: '.thumbnail' }"
-			class="nolist tiles"
-		>
-			<li
-				v-for="(release, index) in releases"
-				:key="`release-${release.id}`"
-			>
-				<SceneTile
-					:release="release"
-					:referer="referer"
-					:index="index"
-				/>
-			</li>
-		</ul>
-
-		<span
-			v-if="releases.length === 0 && range !== 'all'"
-			class="empty"
-		>No {{ range }} releases</span>
-
-		<span
-			v-else-if="releases.length === 0"
-			class="empty"
-		>No recent or upcoming releases</span>
-	</div>
-</template>
-
-<script>
-import SceneTile from './scene-tile.vue';
-
-function range() {
-	return this.$route.params.range;
-}
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	components: {
-		SceneTile,
-	},
-	props: {
-		releases: {
-			type: Array,
-			default: () => [],
-		},
-		context: {
-			type: String,
-			default: null,
-		},
-		referer: {
-			type: String,
-			default: null,
-		},
-	},
-	computed: {
-		range,
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.heading {
-    padding: 0;
-    margin: 0 0 1rem 0;
-
-    .range {
-        text-transform: capitalize;
-    }
-}
-
-.releases {
-	flex-grow: 1;
-	border-top: solid 1px var(--crease);
-
-	&.embedded {
-		border: none;
-
-		.tiles {
-			padding: 0;
-		}
-	}
-}
-
-.tiles {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
-    grid-gap: 1rem;
-	box-sizing: border-box;
-	padding: 1rem;
-}
-
-.empty {
-	display: inline-block;
-	padding: 1rem;
-    color: var(--shadow-strong);
-    font-weight: bold;
-}
-
-@media(max-width: $breakpoint3) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    }
-}
-
-@media(max-width: $breakpoint2) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-    }
-}
-</style>

assets/components/releases/scene-tile.vue

@@ -1,299 +0,0 @@
-<template>
-	<div
-		:id="`${release.type}-${release.id}`"
-		:class="{ new: release.isNew }"
-		class="tile"
-	>
-		<span class="poster">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="link"
-			>
-				<img
-					v-if="release.poster"
-					:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
-					:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
-					:alt="release.title"
-					class="thumbnail"
-				>
-
-				<span
-					v-else-if="release.covers && release.covers.length > 0"
-					class="covers"
-				>
-					<img
-						v-for="cover in release.covers"
-						:key="cover.id"
-						:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
-						:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
-						:alt="release.title"
-						class="thumbnail cover"
-					>
-				</span>
-
-				<div
-					v-else
-					:title="release.title"
-					class="thumbnail"
-				>No thumbnail available</div>
-			</a>
-
-			<Details :release="release" />
-		</span>
-
-		<div class="info">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="row link"
-			>
-				<h3
-					v-if="release.title"
-					v-tooltip.bottom="release.title"
-					:title="release.title"
-					class="title"
-				>{{ release.title }}</h3>
-
-				<h3
-					v-else-if="release.actors.length > 0"
-					class="title title-composed"
-				>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
-
-				<h3
-					v-else
-					class="title title-empty"
-				>{{ release.entity.name }}</h3>
-			</a>
-
-			<span class="row">
-				<ul
-					class="actors nolist"
-					:title="release.actors.map(actor => actor.name).join(', ')"
-				>
-					<li
-						v-for="actor in release.actors"
-						:key="actor.id"
-						class="actor"
-					>
-						<router-link
-							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
-							class="actor-link"
-						>{{ actor.name }}</router-link>
-					</li>
-				</ul>
-			</span>
-
-			<div class="labels">
-				<router-link
-					v-if="release.shootId && release.studio"
-					:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</router-link>
-
-				<span
-					v-else-if="release.shootId"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</span>
-
-				<ul
-					v-if="release.tags.length > 0"
-					:title="release.tags.map(tag => tag.name).join(', ')"
-					class="tags nolist"
-				>
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
-					>
-						<router-link
-							:to="`/tag/${tag.slug}`"
-							class="tag-link"
-						>{{ tag.name }}</router-link>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import Details from './tile-details.vue';
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	components: {
-		Details,
-	},
-	props: {
-		release: {
-			type: Object,
-			default: null,
-		},
-	},
-	computed: {
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.tile {
-    background: var(--background);
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    overflow: hidden;
-    box-shadow: 0 0 3px var(--darken-weak);
-    height: 100%;
-
-	&.new .poster::after {
-		content: 'new';
-		position: absolute;
-		top: 0;
-		right: 0;
-		padding: .15rem .25rem .15rem .35rem;
-		border-radius: 0 0 0 .5rem;
-		color: var(--text-light);
-		background: var(--primary);
-		font-size: .8rem;
-		font-weight: bold;
-	}
-}
-
-.poster {
-    position: relative;
-    margin: 0 0 .6rem 0;
-}
-
-.covers {
-    background: var(--profile);
-    display: flex;
-
-    .cover {
-        width: 50%;
-    }
-}
-
-.thumbnail {
-    width: 100%;
-    height: 14rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    object-fit: cover;
-    background-position: center;
-    background-size: cover;
-    background-color: var(--shadow-hint);
-    color: var(--shadow);
-    text-shadow: 1px 1px 0 var(--highlight);
-}
-
-.row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 .5rem;
-    margin: 0 0 .25rem 0;
-}
-
-.info {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
-
-.link {
-    text-decoration: none;
-}
-
-.title {
-    margin: 0;
-    color: var(--text);
-    font-size: 1rem;
-    line-height: 1.5;
-	white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.title-composed,
-.title-empty {
-	color: var(--shadow);
-}
-
-.actors {
-    word-wrap: break-word;
-    overflow: hidden;
-    max-height: 1.5rem;
-    line-height: 1.5rem;
-	margin: 0 0 .25rem 0;
-}
-
-.actor:not(:last-of-type)::after {
-    content: ",";
-	margin: 0 .25rem 0 0;
-}
-
-.actor-link {
-    color: var(--link);
-    text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-
-.labels {
-    padding: .1rem .5rem 1.5rem .5rem;
-    max-height: .5rem;
-    overflow-y: hidden;
-	font-size: 0;
-    line-height: 2;
-}
-
-.shoot {
-	display: inline;
-	padding: .25rem .5rem;
-	background: var(--primary);
-	color: var(--text-light);
-	font-size: 0.75rem;
-	font-weight: bold;
-	box-shadow: inset 0 0 3px var(--shadow-weak);
-}
-
-.tags {
-	display: inline;
-    word-wrap: break-word;
-}
-
-.tag {
-    margin: 0 0 1rem 0;
-}
-
-.tag-link {
-	background: var(--background);
-    color: var(--shadow);
-    display: inline-block;
-    padding: .25rem .5rem;
-    font-size: .75rem;
-    font-weight: bold;
-    text-decoration: none;
-    line-height: 1;
-	box-shadow: 0 0 3px var(--shadow-weak);
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-</style>

assets/components/releases/tags.vue

@@ -1,42 +0,0 @@
-<template>
-	<ul class="tags nolist">
-		<li
-			v-for="tag in tags"
-			:key="`tag-${tag.slug}`"
-			class="tag"
-		>
-			<a
-				:href="`/tag/${tag.slug}`"
-				class="link"
-			>{{ tag.name }}</a>
-		</li>
-	</ul>
-</template>
-
-<script>
-export default {
-	props: {
-		tags: {
-			type: Array,
-			default: () => [],
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.tag .link {
-	color: var(--link);
-    background: var(--background);
-    display: inline-block;
-    padding: .5rem;
-    margin: 0 .25rem .25rem 0;
-    box-shadow: 0 0 2px var(--shadow-weak);
-    text-decoration: none;
-    text-transform: capitalize;
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-</style>

assets/components/releases/tile-details.vue

@@ -1,124 +0,0 @@
-<template>
-	<span
-		class="details"
-		:class="{ new: release.isNew }"
-	>
-		<span
-			v-if="release.entity.type !== 'network' && !release.entity.independent && release.entity.parent"
-			class="site"
-		>
-			<router-link
-				v-tooltip.bottom="`Part of ${release.entity.parent.name}`"
-				:title="`Part of ${release.entity.parent.name}`"
-				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
-				class="site-link"
-			><img
-				:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
-				class="favicon"
-			></router-link>
-
-			<router-link
-				v-tooltip.bottom="`More from ${release.entity.name}`"
-				:title="`More from ${release.entity.name}`"
-				:to="`/${release.entity.type}/${release.entity.slug}`"
-				class="site-link"
-			>{{ release.entity.name }}</router-link>
-		</span>
-
-		<router-link
-			v-else
-			:to="`/${release.entity.type}/${release.entity.slug}`"
-			class="site site-link"
-		><img
-			:src="`/img/logos/${release.entity.slug}/favicon.png`"
-			class="favicon"
-		>{{ release.entity.name }}</router-link>
-
-		<a
-			v-if="release.date"
-			v-tooltip.bottom="release.url && `View release on ${release.entity.name}`"
-			:title="release.url && `View release on ${release.entity.name}`"
-			:href="release.url"
-			:class="{ upcoming: isAfter(release.date, new Date()) }"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="date"
-		><Icon icon="share2" />{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
-
-		<a
-			v-else
-			:href="release.url"
-			:class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
-			title="Scene date N/A, showing date added"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="date"
-		>{{ `(${formatDate(release.dateAdded, 'MMMM D, YYYY')})` }}</a>
-	</span>
-</template>
-
-<script>
-export default {
-	props: {
-		release: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.details {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-	white-space: nowrap;
-    background: var(--profile);
-    font-size: 0;
-	font-weight: bold;
-	box-shadow: 0 0 3px var(--darken);
-
-    .favicon {
-		width: 1rem;
-        margin: 0 .25rem 0 0;
-    }
-
-	/*
-	&.new .date::before {
-		content: '';
-		width: .5rem;
-		height: .5rem;
-		border-radius: 50%;
-		margin: 0 .25rem 0 0;
-		background: var(--primary);
-	}
-	*/
-}
-
-.site,
-.date {
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-size: .8rem;
-    padding: .5rem;
-    color: var(--text-light);
-    text-decoration: none;
-
-	.icon {
-		fill: var(--lighten-weak);
-		margin: 0 .25rem 0 0;
-	}
-
-	&:hover .icon {
-		fill: var(--text-light);
-	}
-}
-
-.site-link {
-    display: flex;
-    color: var(--text-light);
-    text-decoration: none;
-}
-</style>

assets/components/scroll/scroll.vue

@@ -1,257 +0,0 @@
-<template>
-	<div class="scroll">
-		<Expand
-			v-if="expanded"
-			:expanded="expanded"
-			class="expand-dark"
-			@expand="(state) => $emit('expand', state)"
-		/>
-
-		<div class="scrollable">
-			<Expand
-				v-if="expanded"
-				:expanded="expanded"
-				class="expand-light"
-				@expand="(state) => $emit('expand', state)"
-			/>
-
-			<div
-				v-show="enabled && !expanded"
-				class="scroll-button scroll-left noselect"
-				:class="{ 'scroll-start': scrollAtStart }"
-				@click="scroll('left')"
-			><Icon icon="arrow-left3" /></div>
-
-			<slot />
-
-			<div
-				v-show="enabled && !expanded"
-				class="scroll-button scroll-right noselect"
-				:class="{ 'scroll-end': scrollAtEnd }"
-				@click="scroll('right')"
-			><Icon icon="arrow-right3" /></div>
-		</div>
-
-		<Expand
-			v-if="expanded || (expandable && scrollable)"
-			:expanded="expanded"
-			class="expand-dark"
-			@expand="(state) => $emit('expand', state)"
-		/>
-
-		<Expand
-			v-if="expanded || (expandable && scrollable)"
-			:expanded="expanded"
-			class="expand-light"
-			@expand="(state) => $emit('expand', state)"
-		/>
-	</div>
-</template>
-
-<script>
-import Expand from '../expand/expand.vue';
-
-function updateScroll() {
-	this.scrollable = this.target.scrollWidth > this.target.clientWidth;
-	this.scrollAtStart = this.target.scrollLeft === 0;
-	this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
-}
-
-function scroll(direction) {
-	if (direction === 'right') {
-		this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
-	}
-
-	if (direction === 'left') {
-		this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
-	}
-}
-
-function mounted() {
-	this.target = this.$slots.default[0].elm;
-
-	this.target.addEventListener('scroll', () => this.updateScroll());
-	window.addEventListener('resize', this.updateScroll);
-
-	// typically triggered by slotted component when an image loads, affecting scrollWidth
-	this.$on('load', () => this.updateScroll());
-	this.updateScroll();
-}
-
-function beforeDestroy() {
-	this.target.removeEventListener('scroll', this.updateScroll);
-
-	window.removeEventListener('resize', this.updateScroll);
-}
-
-function updated() {
-	this.updateScroll();
-}
-
-export default {
-	components: {
-		Expand,
-	},
-	props: {
-		enabled: {
-			type: Boolean,
-			default: true,
-		},
-		expandable: {
-			type: Boolean,
-			default: true,
-		},
-		expanded: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			target: null,
-			scrollable: true,
-			scrollAtStart: true,
-			scrollAtEnd: false,
-		};
-	},
-	mounted,
-	updated,
-	beforeDestroy,
-	methods: {
-		scroll,
-		updateScroll,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.scroll {
-	background: var(--profile);
-
-	&.expanded {
-		padding: 0;
-
-		.scroll {
-			display: none;
-		}
-	}
-}
-
-.scrollable {
-	position: relative;
-}
-
-.expand-light {
-	display: none;
-}
-
-.scroll-light {
-	background: var(--background-dim);
-
-	.scroll-button {
-		.icon {
-			fill: var(--darken);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-dark);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--background-dim) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--background-dim) 50%, transparent);
-	}
-
-	.expand-dark {
-		display: none;
-	}
-
-	.expand-light {
-		display: block;
-	}
-}
-
-.scroll-dark {
-	background: var(--profile);
-
-	.scroll-button {
-		.icon {
-			fill: var(--lighten);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-light);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--profile) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--profile) 50%, transparent);
-	}
-
-	.expand-light {
-		display: none;
-	}
-
-	.expand-dark {
-		display: block;
-	}
-}
-
-.scroll-button {
-	height: 100%;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	z-index: 10;
-
-	&.scroll-start,
-	&.scroll-end {
-		/* use over v-show so button stays visible while still hovered */
-		display: none;
-	}
-
-	&:hover {
-		display: flex;
-		cursor: pointer;
-	}
-}
-
-.scroll-left {
-	left: 0;
-	padding: 1rem 2rem 1rem .5rem;
-}
-
-.scroll-right {
-	right: 0;
-	padding: 1rem .5rem 1rem 2rem;
-}
-
-@media(max-width: $breakpoint) {
-	.scroll-button {
-		display: none;
-	}
-}
-</style>

assets/components/search/search.vue

@@ -1,121 +0,0 @@
-<template>
-	<div class="content-inner">
-		<span
-			v-if="loading"
-			class="summary"
-		>Searching...</span>
-
-		<span
-			v-if="!loading"
-			class="summary"
-		>Found {{ actors.length }} actors for '{{ query }}'</span>
-
-		<div
-			v-if="!loading && actors.length > 0"
-			v-lazy-container="{ selector: '.lazy' }"
-			class="tiles"
-		>
-			<Actor
-				v-for="actor in actors"
-				:key="`actor-${actor.id}`"
-				:actor="actor.aliasFor || actor"
-				:alias="actor.aliasFor && actor"
-			/>
-		</div>
-
-		<span
-			v-if="!loading"
-			class="summary"
-		>Found {{ releases.length }} releases for '{{ query }}'</span>
-
-		<Releases
-			v-if="!loading && releases.length > 0"
-			class="embedded"
-			:releases="releases"
-		/>
-	</div>
-</template>
-
-<script>
-import Actor from '../actors/tile.vue';
-import Releases from '../releases/releases.vue';
-
-async function search() {
-	const results = await this.$store.dispatch('search', {
-		query: this.query,
-		limit: 100,
-	});
-
-	this.loading = false;
-
-	if (results) {
-		this.actors = results.actors;
-		this.releases = results.releases;
-	}
-}
-
-function query() {
-	return this.$route.query.query || this.$route.query.q;
-}
-
-async function mounted() {
-	await this.search();
-}
-
-async function watchQuery() {
-	await this.search();
-}
-
-export default {
-	components: {
-		Actor,
-		Releases,
-	},
-	data() {
-		return {
-			loading: true,
-			actors: [],
-			releases: [],
-		};
-	},
-	computed: {
-		query,
-	},
-	watch: {
-		query: watchQuery,
-	},
-	mounted,
-	methods: {
-		search,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.content-inner {
-	padding: 1rem;
-}
-
-.summary {
-    display: block;
-    margin: 0 0 1rem 0;
-    color: var(--shadow);
-    font-weight: bold;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-    grid-gap: 0 .5rem;
-    flex-grow: 1;
-	margin: 0 0 1rem 0;
-}
-
-@media(max-width: $breakpoint0) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-}
-</style>

assets/components/sidebar/sidebar.vue

@@ -1,333 +0,0 @@
-<template>
-	<div
-		class="sidebar-container"
-		@click="$emit('toggle', false)"
-	>
-		<div
-			class="sidebar"
-			@click.stop
-		>
-			<div class="sidebar-section">
-				<div class="sidebar-header">
-					<router-link
-						to="/updates"
-						class="logo-link"
-						@click.native="$emit('toggle', false)"
-					>
-						<h1 class="sidebar-logo">
-							<div
-								class="logo"
-								v-html="logo"
-							/>
-						</h1>
-					</router-link>
-
-					<Icon
-						icon="cross2"
-						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
-					/>
-				</div>
-
-				<Search
-					class="search"
-					@search="$emit('toggle', false)"
-				/>
-
-				<nav class="nav">
-					<ul class="nolist">
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/updates"
-								@click.native="$emit('toggle', false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Home</a>
-							</router-link>
-						</li>
-
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/actors"
-								@click.native="$emit('toggle', false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Actors</a>
-							</router-link>
-						</li>
-
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/networks"
-								@click.native="$emit('toggle', false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Channels</a>
-							</router-link>
-						</li>
-
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/movies"
-								@click.native="$emit('toggle', false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Movies</a>
-							</router-link>
-						</li>
-
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/tags"
-								@click.native="$emit('toggle', false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Tags</a>
-							</router-link>
-						</li>
-					</ul>
-				</nav>
-			</div>
-
-			<div class="sidebar-section toggles noselect">
-				<label
-					v-show="sfw"
-					class="toggle"
-					@click="setSfw(false)"
-				><Icon icon="fire" />Disable safe mode</label>
-
-				<label
-					v-show="!sfw"
-					class="toggle"
-					@click="setSfw(true)"
-				><Icon icon="flower" />Enable safe mode</label>
-
-				<label
-					v-show="theme === 'dark'"
-					class="toggle"
-					@click="setTheme('light')"
-				><Icon icon="sun" />Use light theme</label>
-
-				<label
-					v-show="theme === 'light'"
-					class="toggle"
-					@click="setTheme('dark')"
-				><Icon icon="moon" />Use dark theme</label>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-
-import Search from '../header/search.vue';
-
-import logo from '../../img/logo.svg';
-
-function sfw(state) {
-	return state.ui.sfw;
-}
-
-function theme(state) {
-	return state.ui.theme;
-}
-
-function setTheme(newTheme) {
-	this.$store.dispatch('setTheme', newTheme);
-}
-
-function setSfw(enabled) {
-	this.$store.dispatch('setSfw', enabled);
-}
-
-export default {
-	components: {
-		Search,
-	},
-	data() {
-		return {
-			logo,
-		};
-	},
-	computed: {
-		...mapState({
-			sfw,
-			theme,
-		}),
-	},
-	methods: {
-		setTheme,
-		setSfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar-container {
-    height: 100%;
-	width: 100%;
-    position: absolute;
-    z-index: 10;
-	background: var(--darken-weak);
-}
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-	justify-content: space-between;
-    width: 15rem;
-    height: 100%;
-	margin: 0 0 0 auto;
-    color: var(--text);
-    background: var(--background);
-    box-shadow: 0 0 3px var(--darken-weak);
-}
-
-.sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    height: 3rem;
-    border-bottom: solid 1px var(--shadow-hint);
-}
-
-.sidebar-close {
-    width: 1.25rem;
-    height: 100%;
-    padding: 0 1.125rem;
-	fill: var(--shadow-modest);
-
-    &:hover {
-        fill: var(--primary);
-        cursor: pointer;
-    }
-}
-
-.sidebar-logo {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    margin: 0;
-}
-
-.logo-link {
-    display: block;
-    height: 100%;
-    padding: 0 1rem;
-}
-
-.logo {
-    width: 6rem;
-    display: flex;
-    align-items: center;
-    margin: 0;
-	fill: var(--primary);
-}
-
-::v-deep .search {
-	height: 3rem;
-	border-bottom: solid 1px var(--shadow-hint);
-	padding: 0;
-	margin: 0 0 .5rem 0;
-
-	.search-input {
-		padding: .5rem 0 .5rem 1rem;
-	}
-}
-
-.nav-item {
-    display: block;
-}
-
-.nav-link {
-    color: var(--shadow);
-    display: block;
-    padding: 1rem;
-    text-decoration: none;
-    font-weight: bold;
-
-	&:hover {
-        color: var(--shadow-strong);
-    }
-
-    &.active {
-		color: var(--primary);
-    }
-}
-
-.toggles {
-	border-top: solid 1px var(--shadow-hint);
-	margin: .5rem 0 0 0;
-}
-
-.toggle {
-	display: flex;
-	align-self: flex-end;
-	padding: 1rem;
-	color: var(--shadow);
-	font-weight: bold;
-
-	.icon {
-		fill: var(--shadow);
-		margin: 0 1rem 0 0;
-	}
-
-	&.active .icon {
-		fill: var(--primary);
-	}
-
-	&:hover {
-		cursor: pointer;
-		color: var(--shadow-strong);
-
-		&:not(.active) .icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
-.dark .sidebar {
-    background: var(--profile);
-
-	.nav-link {
-		color: var(--shadow);
-
-		&.active {
-			color: var(--text-light);
-		}
-	}
-
-	.sidebar-close {
-		fill: var(--lighten);
-
-		&:hover {
-			fill: var(--text-light);
-		}
-	}
-}
-</style>

assets/components/stats/stats.vue

@@ -1,99 +0,0 @@
-<template>
-	<div class="stats">
-		<div class="content-inner">
-			<h1 class="heading">Stats</h1>
-
-			<span class="version">traxxx {{ version }}</span>
-
-			<dl class="stat-table">
-				<div class="stat-row">
-					<dt class="stat-label">Networks</dt>
-					<dd class="stat-value">{{ totalNetworks }}</dd>
-				</div>
-
-				<div class="stat-row">
-					<dt class="stat-label">Channels</dt>
-					<dd class="stat-value">{{ totalChannels }}</dd>
-				</div>
-
-				<div class="stat-row">
-					<dt class="stat-label">Scenes</dt>
-					<dd class="stat-value">{{ totalScenes }}</dd>
-				</div>
-
-				<div class="stat-row">
-					<dt class="stat-label">Movies</dt>
-					<dd class="stat-value">{{ totalMovies }}</dd>
-				</div>
-
-				<div class="stat-row">
-					<dt class="stat-label">Actors</dt>
-					<dd class="stat-value">{{ totalActors }}</dd>
-				</div>
-			</dl>
-		</div>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-async function mounted() {
-	const stats = await this.$store.dispatch('fetchStats');
-
-	this.totalScenes = stats.totalScenes;
-	this.totalMovies = stats.totalMovies;
-	this.totalActors = stats.totalActors;
-	this.totalNetworks = stats.totalNetworks;
-	this.totalChannels = stats.totalChannels;
-
-	this.version = VERSION; // eslint-disable-line no-undef
-}
-
-export default {
-	data() {
-		return {
-			totalScenes: 0,
-			totalMovies: 0,
-			totalActors: 0,
-			totalNetworks: 0,
-			totalChannels: 0,
-		};
-	},
-	mounted,
-};
-</script>
-
-<style lang="scss" scoped>
-.stats {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.content-inner {
-	padding: 1rem;
-}
-
-.stat-row {
-	width: 20rem;
-	max-width: 100%;
-	display: flex;
-	padding: .5rem 0;
-	justify-content: space-between;
-
-	&:not(:last-child) {
-		border-bottom: solid 1px var(--shadow-hint);
-	}
-}
-
-.stat-label {
-	display: inline-block;
-	font-weight: bold;
-	color: var(--shadow-strong);
-}
-
-.stat-value {
-	display: inline-block;
-}
-</style>

assets/components/tags/photos.vue

@@ -1,148 +0,0 @@
-<template>
-	<div class="photos">
-		<a
-			v-if="tag.poster"
-			:href="`/img/${poster.path}`"
-			:title="poster.comment"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="photo-link"
-		>
-			<img
-				:src="`/img/${poster.thumbnail}`"
-				:alt="tag.poster.comment"
-				class="poster"
-				@load="$parent.$emit('load')"
-			>
-
-			<span
-				v-if="poster.comment"
-				class="photo-comment"
-			>{{ poster.comment }}</span>
-		</a>
-
-		<a
-			v-for="photo in photos"
-			:key="`photo-${photo.id}`"
-			:title="photo.comment"
-			:href="`/img/${photo.path}`"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="photo-link"
-		>
-			<img
-				:src="`/img/${photo.thumbnail}`"
-				:alt="photo.comment"
-				class="photo"
-				@load="$parent.$emit('load')"
-			>
-
-			<span
-				v-if="photo.comment"
-				class="photo-comment"
-			>{{ photo.comment }}</span>
-		</a>
-	</div>
-</template>
-
-<script>
-function poster() {
-	if (this.$store.state.ui.sfw) {
-		return this.tag.poster.sfw;
-	}
-
-	return this.tag.poster;
-}
-
-function photos() {
-	if (this.$store.state.ui.sfw) {
-		return this.tag.photos.map(photo => photo.sfw);
-	}
-
-	return this.tag.photos;
-}
-
-export default {
-	props: {
-		tag: {
-			type: Object,
-			default: null,
-		},
-	},
-	computed: {
-		poster,
-		photos,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.photos {
-	width: 100%;
-	padding: .5rem 1rem 0 .5rem;
-	box-sizing: border-box;
-	overflow-x: auto;
-	white-space: nowrap;
-    scrollbar-width: none;
-	scroll-behavior: smooth;
-    font-size: 0;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-	&.expanded {
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		padding: 0 0 0 1rem;
-
-		.photo-link {
-			margin: 0 .5rem .5rem 0;
-		}
-
-		.poster,
-		.photo {
-			max-height: 18rem;
-		}
-	}
-}
-
-.photo-link {
-	display: inline-block;
-	position: relative;
-	overflow: hidden;
-
-	&:not(:last-child) {
-		margin: 0 .5rem 0 0;
-	}
-
-	&:hover .photo-comment {
-		transform: translateY(0);
-	}
-}
-
-.poster,
-.photo {
-	max-height: 15rem;
-	max-width: 100%;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-
-.photo-comment {
-	width: 100%;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	box-sizing: border-box;
-	padding: .5rem;
-	color: var(--text-light);
-	background: var(--shadow);
-	font-size: .9rem;
-	text-shadow: 0 0 3px var(--shadow);
-	white-space: normal;
-	line-height: 1.25;
-	transform: translateY(100%);
-	transition: transform .25s ease;
-}
-</style>

assets/components/tags/tag.vue

@@ -1,162 +0,0 @@
-<template>
-	<div
-		v-if="tag"
-		class="tag content"
-	>
-		<div class="header">
-			<h2 class="title">
-				<Icon icon="price-tag4" />
-				{{ tag.name }}
-			</h2>
-		</div>
-
-		<div class="content-inner">
-			<div
-				v-if="description"
-				class="description header-description"
-				v-html="description"
-			/>
-
-			<Scroll
-				v-if="hasMedia"
-				:expanded="expanded"
-				class="scroll-light"
-				@expand="(state) => expanded = state"
-			>
-				<Photos
-					:tag="tag"
-					:class="{ expanded }"
-				/>
-			</Scroll>
-
-			<FilterBar :fetch-releases="fetchReleases" />
-			<Releases :releases="releases" />
-
-			<Pagination
-				:items-total="totalCount"
-				:items-per-page="limit"
-				class="pagination-bottom"
-			/>
-
-			<Footer />
-		</div>
-	</div>
-</template>
-
-<script>
-/* eslint-disable no-v-html */
-import { Converter } from 'showdown';
-
-import escapeHtml from '../../../src/utils/escape-html';
-
-import FilterBar from '../filters/filter-bar.vue';
-import Photos from './photos.vue';
-import Releases from '../releases/releases.vue';
-import Pagination from '../pagination/pagination.vue';
-import Scroll from '../scroll/scroll.vue';
-
-const converter = new Converter();
-
-async function fetchReleases() {
-	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
-		tagSlug: this.$route.params.tagSlug,
-		pageNumber: Number(this.$route.params.pageNumber),
-		limit: this.limit,
-		range: this.$route.params.range,
-	});
-
-	this.tag = tag;
-	this.releases = releases;
-	this.totalCount = totalCount;
-
-	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
-	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
-}
-
-async function route() {
-	await this.fetchReleases();
-}
-
-async function mounted() {
-	await this.fetchReleases();
-	this.pageTitle = this.tag.name;
-}
-
-export default {
-	components: {
-		FilterBar,
-		Releases,
-		Photos,
-		Pagination,
-		Scroll,
-	},
-	data() {
-		return {
-			tag: null,
-			description: null,
-			releases: null,
-			totalCount: 0,
-			limit: 15,
-			pageTitle: null,
-			hasMedia: false,
-			expanded: false,
-		};
-	},
-	watch: {
-		$route: route,
-	},
-	mounted,
-	methods: {
-		fetchReleases,
-	},
-};
-</script>
-
-<style lang="scss">
-@import 'theme';
-
-.description a {
-    color: var(--link);
-    text-decoration: inherit;
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-
-.description,
-.description p {
-    padding: 0;
-    margin: 0;
-}
-</style>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.header {
-    background: var(--profile);
-    color: var(--text-light);
-    justify-content: space-between;
-}
-
-.title {
-    padding: .5rem 1rem;
-    margin: 0;
-    flex-shrink: 0;
-    text-transform: capitalize;
-
-    .icon {
-        fill: var(--text-light);
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-}
-
-.description {
-	padding: 0 1rem .5rem 1rem;
-    line-height: 1.5;
-	color: var(--text-light);
-	background: var(--profile);
-}
-</style>

assets/components/tags/tags.vue

@@ -1,214 +0,0 @@
-<template>
-	<div class="tags">
-		<div
-			v-for="(tags, category) in categories"
-			:key="category"
-			class="category"
-		>
-			<h3 class="heading">{{ category }}</h3>
-
-			<div
-				:key="sfw"
-				v-lazy-container
-				class="tiles"
-			>
-				<Tag
-					v-for="tag in tags"
-					:key="`tag-${tag.id}`"
-					:tag="tag"
-					:lazy="true"
-				/>
-			</div>
-		</div>
-
-		<Footer />
-	</div>
-</template>
-
-<script>
-import Tag from './tile.vue';
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-async function mounted() {
-	const tagSlugsByCategory = {
-		popular: [
-			'anal',
-			'lesbian',
-			'interracial',
-			'mff',
-			'mfm',
-			'teen',
-			'milf',
-			'blowjob',
-			'dp',
-			'gangbang',
-			'facial',
-			'creampie',
-			'squirting',
-		],
-		appearance: [
-			'asian',
-			'ebony',
-			'latina',
-			'caucasian',
-			'natural-boobs',
-			'fake-boobs',
-			'blonde',
-			'brunette',
-			'redhead',
-			'tattoos',
-			'piercings',
-		],
-		oral: [
-			'blowjob',
-			'pussy-eating',
-			'ass-eating',
-			'69',
-			'double-blowjob',
-			'deepthroat',
-			'facefucking',
-			'atm',
-		],
-		manual: [
-			'handjob',
-			'fingering',
-			'anal-fingering',
-			'titty-fucking',
-			'fisting',
-			'anal-fisting',
-		],
-		group: [
-			'mfm',
-			'mff',
-			'orgy',
-			'gangbang',
-			'blowbang',
-		],
-		cumshot: [
-			'facial',
-			'creampie',
-			'cum-in-mouth',
-			'cum-on-boobs',
-			'cum-on-butt',
-			'cum-on-pussy',
-			'anal-creampie',
-			'oral-creampie',
-			'bukkake',
-			'fake-cum',
-		],
-		toys: [
-			'toy-anal',
-			'toy-dp',
-			'double-dildo',
-			'double-dildo-blowjob',
-			'double-dildo-kiss',
-			'double-dildo-anal',
-			'double-dildo-dp',
-		],
-		roleplay: [
-			'family',
-			'parody',
-			'schoolgirl',
-			'nurse',
-			'maid',
-		],
-		fetish: [
-			'bdsm',
-			'femdom',
-			'bondage',
-			'blindfold',
-		],
-		extreme: [
-			'dp',
-			'airtight',
-			'dap',
-			'dvp',
-			'da-tp',
-			'dv-tp',
-			'tap',
-		],
-		misc: [
-			'gaping',
-			'squirting',
-			'oil',
-			'bts',
-		],
-	};
-
-	const tags = await this.$store.dispatch('fetchTags', {
-		slugs: Object.values(tagSlugsByCategory).flat(),
-	});
-
-	const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
-
-	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
-		...acc,
-		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
-	}), {});
-
-	this.pageTitle = 'Tags';
-}
-
-export default {
-	components: {
-		Tag,
-	},
-	data() {
-		return {
-			categories: {},
-			pageTitle: null,
-		};
-	},
-	computed: {
-		sfw,
-	},
-	mounted,
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.tags {
-    padding: 1rem 1rem 0 1rem;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
-    grid-gap: 1rem;
-    margin: 0 0 1.5rem 0;
-}
-
-.heading {
-    text-transform: capitalize;
-	padding: 0 0 0 .5rem;
-	margin: 2rem 0 1rem 0;
-}
-
-.category:first-child .heading {
-	margin: .5rem 0 1rem 0;
-}
-
-@media(max-width: $breakpoint3) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, .5fr));
-    }
-}
-
-@media(max-width: $breakpoint) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-		grid-gap: .5rem;
-    }
-}
-
-@media(max-width: $breakpoint0) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-    }
-}
-</style>

assets/components/tags/tile.vue

@@ -1,120 +0,0 @@
-<template>
-	<div
-		v-if="tag.poster"
-		class="tile"
-	>
-		<router-link
-			:to="`/tag/${tag.slug}`"
-			:title="tag.name"
-			class="poster-link"
-		>
-			<img
-				v-if="!lazy && !sfw"
-				:src="`/img/${tag.poster.thumbnail}`"
-				:title="tag.poster.comment"
-				:alt="tag.name"
-				class="poster"
-			>
-
-			<img
-				v-if="!lazy && sfw"
-				:src="`/img/${tag.poster.sfw.thumbnail}`"
-				:title="tag.poster.sfw.comment"
-				:alt="tag.name"
-				class="poster"
-			>
-
-			<img
-				v-if="lazy && !sfw"
-				:data-src="`/img/${tag.poster.thumbnail}`"
-				:data-loading="`/img/${tag.poster.lazy}`"
-				:title="tag.poster.comment"
-				:alt="tag.name"
-				class="poster"
-			>
-
-			<img
-				v-if="lazy && sfw"
-				:data-src="`/img/${tag.poster.sfw.thumbnail}`"
-				:data-loading="`/img/${tag.poster.sfw.lazy}`"
-				:title="tag.poster.sfw.comment"
-				:alt="tag.name"
-				class="poster"
-			>
-		</router-link>
-
-		<router-link
-			class="title"
-			:to="`/tag/${tag.slug}`"
-			:title="tag.name"
-		>{{ tag.name }}</router-link>
-	</div>
-
-	<span
-		v-else
-		class="title"
-	>{{ tag.name }}</span>
-</template>
-
-<script>
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	props: {
-		tag: {
-			type: Object,
-			default: null,
-		},
-		lazy: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.tile {
-    box-sizing: border-box;
-    position: relative;
-	text-decoration: none;
-	font-size: 0;
-
-	&:hover {
-		.poster {
-			box-shadow: 0 0 3px var(--darken);
-		}
-
-		.title {
-			background: var(--primary);
-		}
-	}
-}
-
-.poster {
-    width: 100%;
-    box-shadow: 0 0 3px var(--darken-weak);
-}
-
-.title {
-	display: block;
-    box-sizing: border-box;
-    padding: .5rem 1rem;
-	overflow: hidden;
-	white-space: nowrap;
-	color: var(--text-light);
-	background: var(--profile);
-	text-decoration: none;
-	font-size: .9rem;
-    font-weight: bold;
-    text-transform: capitalize;
-	text-overflow: ellipsis;
-}
-</style>

assets/css/_breakpoints.scss

@@ -1,7 +0,0 @@
-$breakpoint-nano: 320px;
-$breakpoint-micro: 540px;
-$breakpoint-small: 620px;
-$breakpoint: 720px;
-$breakpoint-kilo: 900px;
-$breakpoint-mega: 1200px;
-$breakpoint-giga: 1500px;

assets/css/_inputs.scss

@@ -1,8 +0,0 @@
-.select {
-    color: var(--shadow-strong);
-    background: var(--background);
-    padding: .5rem;
-    font-size: 1rem;
-    border: solid 1px var(--shadow-weak);
-    cursor: pointer;
-}

assets/css/_states.scss

@@ -1,33 +0,0 @@
-.noselect {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.nolist {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        display: inline-block;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-.nolink {
-	display: inline-block;
-	color: inherit;
-	text-decoration: none;
-}
-
-:focus {
-    outline: none;
-}
-
-::-moz-focus-inner {
-    border: 0;
-}

assets/css/_theme.scss

@@ -1,97 +0,0 @@
-$breakpoint0: 540px;
-$breakpoint: 720px;
-$breakpoint2: 900px;
-$breakpoint3: 1200px;
-$breakpoint4: 1500px;
-
-:root {
-	/* --primary: #ff886c; */
-    --primary: #ff6c88;
-
-    --text-dark: #222;
-    --text-light: #fff;
-
-    --darken: rgba(0, 0, 0, .5);
-    --darken-strong: rgba(0, 0, 0, .7);
-    --darken-extreme: rgba(0, 0, 0, .9);
-    --darken-weak: rgba(0, 0, 0, .2);
-    --darken-hint: rgba(0, 0, 0, .1);
-
-    --lighten: rgba(255, 255, 255, .5);
-    --lighten-strong: rgba(255, 255, 255, .7);
-    --lighten-extreme: rgba(255, 255, 255, .9);
-    --lighten-weak: rgba(255, 255, 255, .2);
-    --lighten-hint: rgba(255, 255, 255, .05);
-
-    --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
-    --logo-highlight: drop-shadow(0 0 1px $highlight);
-
-    --male: #0af;
-    --female: #f0a;
-
-    --alert: #f00;
-    --warn: #fa0;
-    --success: #5c2;
-}
-
-.light {
-    --text: #222;
-    --text-contrast: #fff;
-
-    --background: #fff;
-    --background-dim: #fafafa;
-    --background-soft: #fdfdfd;
-
-    --profile: #222;
-    --tile: #2a2a2a;
-
-    --link: #dd6688;
-    --empty: #333;
-
-	--crease: #eaeaea;
-
-    --shadow: rgba(0, 0, 0, .5);
-    --shadow-extreme: rgba(0, 0, 0, .9);
-    --shadow-strong: rgba(0, 0, 0, .7);
-    --shadow-modest: rgba(0, 0, 0, .3);
-    --shadow-weak: rgba(0, 0, 0, .2);
-    --shadow-hint: rgba(0, 0, 0, .1);
-
-    --highlight: rgba(255, 255, 255, .5);
-    --highlight-extreme: rgba(255, 255, 255, .9);
-    --highlight-strong: rgba(255, 255, 255, .7);
-    --highlight-modest: rgba(255, 255, 255, .3);
-    --highlight-weak: rgba(255, 255, 255, .2);
-    --highlight-hint: rgba(255, 255, 255, .075);
-}
-
-.dark {
-    --text: #fff;
-    --text-contrast: #222;
-
-    --background: #222;
-    --background-dim: #181818;
-    --background-soft: #111;
-
-    --profile: #222;
-    --tile: #2a2a2a;
-
-    --link: #dd6688;
-    --empty: #333;
-
-	--crease: #222;
-
-    --shadow: rgba(255, 255, 255, .5);
-    --shadow-extreme: rgba(255, 255, 255, .9);
-    --shadow-strong: rgba(255, 255, 255, .7);
-    --shadow-modest: rgba(255, 255, 255, .3);
-    --shadow-weak: rgba(255, 255, 255, .2);
-    --shadow-hint: rgba(255, 255, 255, .075);
-
-    --highlight: rgba(0, 0, 0, .5);
-    --highlight-extreme: rgba(0, 0, 0, .9);
-    --highlight-strong: rgba(0, 0, 0, .7);
-    --highlight-modest: rgba(0, 0, 0, .3);
-    --highlight-weak: rgba(0, 0, 0, .2);
-    --highlight-hint: rgba(0, 0, 0, .1);
-}

assets/css/_tooltip.scss

@@ -1,112 +0,0 @@
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-
-  .tooltip-inner {
-    max-width: 20rem;
-    background: #222;
-    color: white;
-    border-radius: 16px;
-  }
-
-  &:not(.popover) .tooltip-inner {
-	padding: .5rem 1rem;
-  }
-
-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: #222;
-    z-index: 1;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &.popover {
-    $color: #fff;
-
-    .popover-inner {
-      background: $color;
-      color: black;
-      border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, .1);
-    }
-
-    .popover-arrow {
-      border-color: $color;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    /* transition: opacity .15s, visibility .15s; */
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    /* transition: opacity .15s; */
-  }
-}

assets/css/style.scss

@@ -1,39 +0,0 @@
-@import 'theme';
-@import 'inputs';
-@import 'states';
-@import 'tooltip';
-
-html,
-body {
-    height: 100%;
-}
-
-body {
-    margin: 0;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-.nolist {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        display: inline-block;
-    }
-}
-
-.heading {
-    color: var(--shadow);
-    padding: 0;
-    margin: 0 0 1rem 0;
-    font-size: 1.5rem;
-}
-
-.icon.icon-href {
-    fill: var(--shadow);
-
-    :hover {
-        fill: var(--primary);
-    }
-}

assets/img/favicon/2021-03/favicon.svg

@@ -0,0 +1,69 @@
+<?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="26.528891mm"
+   height="26.528891mm"
+   viewBox="0 0 26.528891 26.528891"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-25.862887"
+     inkscape:cy="46.089189"
+     inkscape:document-units="mm"
+     inkscape:current-layer="text835"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-41.157469,-57.836902)">
+    <g
+       aria-label="t"
+       id="text835"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:35.2778px;line-height:1.25;font-family:Orbitron;-inkscape-font-specification:'Orbitron Heavy';fill:#ff2280;fill-opacity:1;stroke:none;stroke-width:0.264583">
+      <path
+         d="m 53.328303,69.30218 v 9.666111 h 7.584722 v 5.3975 h -7.831667 q -1.058333,0 -2.010833,-0.388055 -0.9525,-0.423334 -1.658056,-1.128889 -0.670277,-0.705556 -1.093611,-1.622778 -0.388055,-0.917222 -0.388055,-1.975556 V 57.836902 h 5.3975 v 6.067778 h 7.584722 v 5.3975 z"
+         style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:35.2778px;font-family:Orbitron;-inkscape-font-specification:'Orbitron Heavy';fill:#ff2280;fill-opacity:1;stroke-width:0.264583"
+         id="path858" />
+    </g>
+  </g>
+</svg>