Re-enabled filename actors and tags in Gamma banner tool, improved disable argument.

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"]
+        }]
     },
     "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:
@@ -18,12 +18,44 @@ Do not modify `config/default.js`, but instead create a copy at `config/local.js
 
 You can also use `npm run flush` to run both steps at once, and wipe the database completely later.
 
+#### Networks and channels
+To scrape the networks and channels available in the database, you can configure `include` and `exclude` lists. To include all available channels and only use the `exclude` list, leave the `include` parameter unconfigured. The `exclude` lists will exclude channels and child networks from networks on the `include` lists, but not vice versa. That is, if the `include` list includes a network and the `exclude` list excludes one of that network's channels, the channel will not be scraped. However, if the `include` list includes a channel, and the `exclude` list includes its parent network, the channel will be scraped.
+
+This configuration will scrape Evil Angel and all XEmpire channels, except for LesbianX.
+```
+include: {
+	networks: [
+		'xempire',
+	],
+	channels: [
+		'evilangel',
+	],
+},
+exclude: {
+	channels: [
+		'lesbianx',
+	],
+}
+```
+
+This configuration will scrape all channels, except for BAM Visions, and except all channels part of the Vixen network.
+```
+exclude: {
+	channels: [
+		'bamvisions',
+	],
+	networks: [
+		'vixen'
+	],
+},
+```
+
 ### Building
 To build traxxx, run the following command:
 
 `npm run build`
 
-To generate the thumbnails for logos and tag photos, run:
+To generate thumbnails for new logos and tag photos, install ImageMagick and run:
 
 `npm run logos-thumbs`
 
@@ -33,27 +65,62 @@ To generate the thumbnails for logos and tag photos, run:
 `./traxxx --option value` or `npm start -- --option value`
 
 * `--server`: Run the web server
-* `--all`: Fetch updates from the channels and networks in the configuration file.
-* `--channel [slug] [slug]`: Fetch updates from specific channels. The slug is the channel's name in lowercase and without cases or special characters. For example, Teens Like It Big is teenslikeitbig.
-* `--network [slug] [slug]`: Fetch updates from all sites of a specific network. The network slug is composed similarly to the channel slug.
+
+#### Channels
+* `--channels [slug] [slug]`: Fetch updates from specific channels. The slug is the channel's name in lowercase and without cases or special characters. For example, Teens Like It Big is teenslikeitbig. Overrides configured included networks and channels.
+* `--networks [slug] [slug]`: Fetch updates from all sites of a specific network. The network slug is composed similarly to the channel slug. Overrides configured included networks and channels.
+* `--exclude-channels [slug] [slug]`: Scrape every configured, specified or available channel, except for specified. Overrides configured excluded channels.
+* `--exclude-networks [slug] [slug]`: Scrape every configured, specified or available network, except for specified. Overrides configured excluded networks.
 * `--after "[time]"`: Do not fetch scenes older than this period or date. Example values are: `"1 month"`, `"3 years"`, `"2019-01-01"`.
 * `--scene [URL]`: Try to retrieve scene details from its official channel or network URL.
 * `--deep`: Follow each release link found running `--channel` or `--network` and scrape it for more details. Enabled by default ; use `--no-deep` to only save information found on the overview pages.
 
+#### Actors
+* `--actors "[name]" "[name]"`: Fetch actor profiles. When no names are specified, actors without existing profiles are scraped
+* `--actors-file [filepath]`: Fetch all scenes for the actors specified in a file using a newline delimiter.
+* `--actors-sources [slug] [slug]`: Scrapers to use for actor profiles. Defaults to config.
+* `--actors-update [time]`: Update actors that don't have any profiles newer than period ("1 month") or date (2020-08-01). Using this argument without a value will default to 1900-01-01, practically updating all actors.
+* `--actors-scenes`: Fetch all scenes for scraped actors. Use with caution, as an actor may have many scenes.
+* `--scene-actors`: Fetch profiles for actors associated with scraped scenes. Use with caution, as scenes may have many actors, each with many profiles.
+
 #### Developers
 * `--no-save`: Do not store retrieved information in local database, forcing re-fetch.
 * `--level`: Change log level to `silly`, `verbose`, `info`, `warn` or `error`.
+* `--delete-scenes`: Delete scenes and assets by ID.
+* `--delete-movies`: Delete movies and assets by ID.
+* `--flush-network`: Delete all scenes and movies with assets from all network channels
+* `--flush-channel`: Delete all scenes and movies with assets from a channel
+* `--flush-batch`: Delete all scenes and movies with assets from a batch ID
+* `--flush-media`: Delete temporary media directory and all unassociated media entries and files
+
+### API
+A GraphQL API is available at `/graphql`, and a REST API is available at the following `GET` endpoints:
+
+* `/api/scenes`: Fetch the latest releases. Supports search with `query` or `q` parameter;
+* `/api/scenes/{ID}`: Fetch scene by ID.
+* `/api/actors`: Fetch actors. Search `query` or `q` parameter required.
+* `/api/actors/{ID|slug}`: Fetch detailed actor by ID or slug.
+* `/api/entities`: Fetch networks and channels. Use the `type` parameter to filter for either `channel`s or `network`s.
+* `/api/entities/{ID|slug}`: Fetch detailed network or channel by ID. To fetch by slug, the `type` parameter must specify either `channel` or `network`.
+* `/api/channels`: Fetch channel entities. Supports the `q` or `query` parameter for searching.
+* `/api/channels/{ID|slug}`: Fetch detailed channel by ID or slug.
+* `/api/networks`: Fetch networks. Supports a `q` or `query` parameter for searching.
+* `/api/networks/{ID|slug}`: Fetch detailed network by ID or slug.
+* `/api/tags`: Fetch tags.
+* `/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
@@ -61,24 +128,40 @@ To generate the thumbnails for logos and tag photos, run:
 * 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
@@ -87,10 +170,13 @@ To generate the thumbnails for logos and tag photos, run:
 * 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
@@ -98,10 +184,13 @@ To generate the thumbnails for logos and tag photos, run:
 * 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,715 +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="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.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.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
-					:fetch-releases="fetchActor"
-					:items-total="totalCount"
-					:items-per-page="limit"
-					:available-tags="actor.tags"
-				/>
-
-				<Releases :releases="releases" />
-
-				<Pagination
-					:items-total="totalCount"
-					:items-per-page="limit"
-					class="pagination-top"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import Pagination from '../pagination/pagination.vue';
-import FilterBar from '../header/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: 10,
-		pageNumber: Number(this.$route.params.pageNumber),
-		range: this.$route.params.range,
-	});
-
-	this.actor = actor;
-	this.releases = releases;
-	this.totalCount = totalCount;
-}
-
-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: 10,
-			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(--highlight-extreme);
-    background: var(--profile);
-    padding: .75rem 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(--highlight-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(--highlight-hint);
-    }
-}
-
-.bio-label,
-.bio-value {
-	display: flex;
-	align-items: center;
-}
-
-.bio-label {
-    color: var(--highlight);
-    margin: 0 1rem 0 0;
-    flex-shrink: 0;
-    font-style: normal;
-    font-weight: 400;
-
-    .icon {
-        fill: var(--highlight);
-        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(--highlight-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 {
-    padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--highlight-weak);
-    margin: 0 0 0 .5rem;
-}
-
-.enhanced.icon {
-    fill: var(--primary);
-    padding: 0 .5rem;
-	transform: scaleX(-1);
-}
-
-.ethnicity,
-.hair,
-.eyes {
-    text-transform: capitalize;
-}
-
-.scraped {
-    color: var(--highlight-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;
-    }
-}
-</style>

assets/components/actors/actors.vue

@@ -1,272 +0,0 @@
-<template>
-	<div class="actors">
-		<nav class="filter">
-			<ul class="genders nolist">
-				<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>
-				<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>
-			</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"
-		/>
-	</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 || 'female';
-}
-
-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,91 +0,0 @@
-<template>
-	<div
-		class="container"
-		:class="theme"
-	>
-		<Sidebar
-			v-if="showSidebar"
-			:toggle-sidebar="toggleSidebar"
-		/>
-
-		<Header :toggle-sidebar="toggleSidebar" />
-
-		<div class="content">
-			<!-- key forces rerender when new and old path use same component -->
-			<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');
-		this.showSidebar = false;
-	});
-}
-
-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 {
-	flex-grow: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-</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,261 +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 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>
-		</div>
-	</div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-import FilterBar from '../header/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,
-			totalCount: null,
-			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: 2.5rem;
-}
-
-.logo-parent {
-	height: 1.5rem;
-}
-
-.favicon {
-	height: 1rem;
-}
-
-.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,79 +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;
-    justify-content: 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/header/filter-bar.vue

@@ -1,169 +0,0 @@
-<template>
-	<div class="filter-bar noselect">
-		<span class="sort">
-			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 } }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
-				class="range range-button"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 } }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 } }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
-		</span>
-
-		<Filters
-			class="filters"
-			:filter="filter"
-			:available-tags="availableTags"
-			@set-filter="setFilter"
-		/>
-	</div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import Filters from './filters.vue';
-
-function filter(state) {
-	return state.ui.filter;
-}
-
-function range() {
-	return this.$route.params.range;
-}
-
-function batch(state) {
-	return state.ui.batch;
-}
-
-async function setFilter(newFilter) {
-	this.$store.dispatch('setFilter', newFilter);
-
-	await this.fetchReleases();
-}
-
-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: {
-		Filters,
-	},
-	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: () => [],
-		},
-	},
-	computed: {
-		...mapState({
-			filter,
-			range,
-			batch,
-		}),
-	},
-	methods: {
-		setFilter,
-		setRange,
-		setBatch,
-	},
-};
-</script>
-
-<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);
-    }
-}
-
-.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 {
-    display: inline-block;
-	flex-shrink: 0;
-}
-</style>

assets/components/header/filters.vue

@@ -1,171 +0,0 @@
-<template>
-	<v-popover class="filters-container">
-		<div class="filters">
-			<div
-				v-if="selectedTags.length > 0"
-				class="applied"
-			>{{ selectedTags.length }} selected</div>
-
-			<div
-				v-else
-				class="applied empty"
-			>Filter by tags</div>
-
-			<Icon icon="filter" />
-		</div>
-
-		<div slot="popover">
-			<ul class="tags nolist">
-				<li
-					v-for="tag in availableTags"
-					:key="`tag-${tag.id}`"
-					class="tag"
-					:class="{ selected: selectedTags.includes(tag.slug) }"
-				>
-					<router-link :to="{ query: { ...getNewRange(tag.slug) } }">
-						<Icon
-							icon="checkmark"
-							class="include"
-						/>
-					</router-link>
-
-					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }) } }"
-						class="name"
-					>{{ tag.name }}</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
-</template>
-
-<script>
-function getNewRange(tag) {
-	if (this.selectedTags.includes(tag)) {
-		if (this.selectedTags.length > 1) {
-			return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') };
-		}
-
-		return {};
-	}
-
-	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: () => [],
-		},
-	},
-	computed: {
-		selectedTags,
-	},
-	methods: {
-		getNewRange,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.filters {
-	display: inline-flex;
-	align-items: center;
-
-	.icon {
-		fill: var(--shadow);
-		margin: 0 .5rem 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
-.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);
-	}
-}
-
-.tags {
-	padding: .5rem 0;
-}
-
-.tag {
-	display: flex;
-	align-items: center;
-
-	.include {
-		width: 1rem;
-		height: 1rem;
-		padding: .5rem .75rem .5rem 1rem;
-		fill: var(--darken-hint);
-
-		&:hover {
-			cursor: pointer;
-		}
-	}
-
-	.name {
-		min-width: 8rem;
-		display: flex;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: .5rem 1rem .5rem .75rem;
-		color: var(--text);
-		text-decoration: none;
-	}
-
-	&:hover {
-		background: var(--darken-hint);
-		cursor: pointer;
-	}
-
-	.include:hover,
-	.name:hover {
-		background: var(--darken-hint);
-	}
-
-	&.selected .include {
-		fill: var(--success);
-	}
-}
-
-@media(max-width: $breakpoint0) {
-	.applied {
-		display: none;
-	}
-}
-</style>

assets/components/header/header.vue

@@ -1,372 +0,0 @@
-<template>
-	<header class="header">
-		<div class="header-nav">
-			<div
-				class="sidebar-toggle"
-				@click.stop="toggleSidebar"
-			>
-				<Icon icon="menu" />
-				<div
-					class="logo"
-					v-html="logo"
-				/>
-			</div>
-
-			<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>
-				</ul>
-			</nav>
-		</div>
-
-		<div class="header-section">
-			<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="evil2"
-					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%;
-}
-
-.header-section {
-    height: 100%;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-}
-
-.sidebar-toggle {
-    display: none;
-	align-items: center;
-	height: 100%;
-
-	.logo {
-		fill: var(--primary);
-		padding: .5rem;
-	}
-
-	.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: 0 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-micro) {
-    .nav,
-	.header-logo {
-        display: none;
-    }
-
-    .sidebar-toggle {
-        display: flex;
-    }
-}
-
-@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;
-    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,79 +0,0 @@
-<template>
-	<div class="content">
-		<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>
-	</div>
-</template>
-
-<script>
-import FilterBar from '../header/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>

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,158 +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"
-			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-if="query.length === 0"
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in entities"
-				:key="`entity-tile-${entity.slug}`"
-				:entity="entity"
-			/>
-		</div>
-	</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,188 +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 } }"
-			><Icon icon="first2" /></router-link>
-
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageNumber - 1 } }"
-			><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 } }"
-				class="pagination-button page"
-			> {{ pageNumber - pageX }} </router-link>
-		</span>
-
-		<router-link
-			:key="`page-${pageNumber}`"
-			:to="{ params: { pageNumber } }"
-			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 } }"
-				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 } }"
-			><Icon icon="arrow-right" /></router-link>
-
-			<router-link
-				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageCount } }"
-			><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;
-	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/media.vue

@@ -1,277 +0,0 @@
-<template>
-	<div 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)"
-				: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
-					:src="`/media/${cover.thumbnail}`"
-					class="item cover"
-					@load="$parent.$emit('load')"
-				>
-			</a>
-		</template>
-
-		<div
-			v-for="photo in photos"
-			:key="`media-${photo.index}`"
-			class="item-container"
-		>
-			<a
-				:href="`/media/${photo.path}`"
-				:class="{ sfw }"
-				class="item-link"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					: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() {
-	if (this.release.trailer || this.release.teaser) {
-		// poster will be on trailer video
-		return this.release.photos;
-	}
-
-	if (this.release.poster) {
-		// no trailer, add poster to photos
-		return [this.release.poster].concat(this.release.photos);
-	}
-
-	// no poster available
-	return this.release.photos;
-}
-
-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/release.vue

@@ -1,550 +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>
-
-		<div class="details">
-			<div class="column">
-				<div class="tidbits">
-					<a
-						v-if="release.date"
-						:title="release.url && `View scene on ${release.entity.name}`"
-						:href="release.url"
-						:class="{ link: release.url }"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="tidbit date"
-					>
-						<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY', release.datePrecision) }}</span>
-						<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</span>
-
-						<Icon
-							v-if="release.url"
-							icon="share2"
-						/>
-					</a>
-				</div>
-
-				<div class="site">
-					<template v-if="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>
-
-		<Expand
-			v-if="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"
-			>
-				<ul class="tags nolist">
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
-					>
-						<a
-							:href="`/tag/${tag.slug}`"
-							class="link"
-						>{{ tag.name }}</a>
-					</li>
-				</ul>
-			</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
-					v-if="release.movies && release.movies.length > 0"
-					class="movies"
-				>
-					<Release :release="release.movies[0]" />
-				</div>
-			</div>
-
-			<div
-				v-if="release.scenes && release.scenes.length > 0"
-				class="scenes"
-			>
-				<h3>Scenes</h3>
-				<Releases
-					:releases="release.scenes"
-					class="row"
-				/>
-			</div>
-
-			<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">
-						<span
-							v-if="release.duration >= 3600"
-							class="duration-segment"
-						>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
-						<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
-						<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
-					</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>
-
-			<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"
-				>{{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</router-link>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import Media from './media.vue';
-import Actor from '../actors/tile.vue';
-import Release from './tile.vue';
-import Releases from './releases.vue';
-import Scroll from '../scroll/scroll.vue';
-import Expand from '../expand/expand.vue';
-
-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));
-}
-
-async function mounted() {
-	this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
-}
-
-export default {
-	components: {
-		Actor,
-		Media,
-		Release,
-		Releases,
-		Scroll,
-		Expand,
-	},
-	data() {
-		return {
-			release: null,
-			expanded: false,
-		};
-	},
-	computed: {
-		pageTitle,
-	},
-	mounted,
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-.column {
-    width: 1200px;
-    max-width: 100%;
-    padding: 0 1rem;
-    margin: 0 auto;
-    box-sizing: border-box;
-}
-
-.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;
-        padding: 0 2rem 0 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;
-}
-
-.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;
-}
-
-.duration {
-    font-size: 0;
-}
-
-.duration-segment {
-    font-size: 1rem;
-}
-
-.actors {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
-    flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.link {
-    display: inline-flex;
-    color: var(--link);
-    text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
-}
-
-.tag .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);
-    }
-}
-
-.showable {
-    display: none;
-}
-
-@media(max-width: $breakpoint3) {
-    .logo-parent,
-    .chain {
-        display: none;
-    }
-
-	.logo-site {
-		width: 100%;
-	}
-}
-
-@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,125 +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}`"
-			>
-				<ReleaseTile
-					: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 ReleaseTile from './tile.vue';
-
-function range() {
-	return this.$route.params.range;
-}
-
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-export default {
-	components: {
-		ReleaseTile,
-	},
-	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 {
-	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/tile-details.vue

@@ -1,129 +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 scene on ${release.entity.name}`"
-			:title="release.url && `View scene on ${release.entity.name}`"
-			:href="release.url"
-			:class="{ upcoming: isAfter(release.date, new Date()) }"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="date"
-		>{{ 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;
-    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;
-}
-
-/*
-.date {
-    &.new:before {
-        content: '';
-        background: var(--primary);
-        width: .5rem;
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -.5rem;
-    }
-}
-*/
-
-.site-link {
-    display: flex;
-    color: var(--text-light);
-    text-decoration: none;
-}
-</style>

assets/components/releases/tile.vue

@@ -1,295 +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.top="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">
-				<span
-					v-if="release.shootId"
-					:title="release.studio && release.studio.name"
-					class="shoot"
-				>{{ 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;
-    padding: 0 0 .5rem 0;
-    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 .25rem .25rem 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);
-}
-
-.network {
-    color: #555;
-    margin: 0 .25rem 0 0;
-    font-size: .8rem;
-}
-
-.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: .25rem .5rem 1rem .5rem;
-    max-height: .5rem;
-    overflow-y: hidden;
-}
-
-.shoot {
-	display: inline;
-	padding: .25rem;
-	background: var(--shadow-hint);
-	color: var(--shadow);
-	font-size: 0.8rem;
-	font-weight: bold;
-}
-
-.tags {
-	display: inline;
-    word-wrap: break-word;
-}
-
-.tag {
-    margin: 0 .25rem .25rem 0;
-}
-
-.tag-link {
-    color: var(--shadow);
-    display: inline-block;
-    padding: .25rem;
-    font-size: .75rem;
-    font-weight: bold;
-    text-decoration: none;
-    line-height: 1;
-    border: solid 1px var(--shadow-hint);
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-</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,300 +0,0 @@
-<template>
-	<div class="sidebar-container">
-		<div
-			class="sidebar"
-			@click.stop
-		>
-			<div class="sidebar-section">
-				<div class="sidebar-header">
-					<Icon
-						icon="cross2"
-						class="sidebar-close"
-						@click.native="toggleSidebar(false)"
-					/>
-
-					<router-link
-						to="/updates"
-						class="logo-link"
-						@click.native="toggleSidebar(false)"
-					>
-						<h1 class="sidebar-logo">
-							<div
-								class="logo"
-								v-html="logo"
-							/>
-						</h1>
-					</router-link>
-				</div>
-
-				<nav class="nav">
-					<ul class="nolist">
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/updates"
-								@click.native="toggleSidebar(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="toggleSidebar(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="toggleSidebar(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="/tags"
-								@click.native="toggleSidebar(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="evil2" />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 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 {
-	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
-	},
-	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-hint);
-}
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-	justify-content: space-between;
-    width: 15rem;
-    height: 100%;
-    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);
-    margin: 0 0 .5rem 0;
-}
-
-.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);
-}
-
-.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/tags/photos.vue

@@ -1,109 +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"
-			>
-		</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"
-			>
-		</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: 1rem 1rem 0 1rem;
-	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:not(:last-child) {
-	margin: 0 .5rem 0 0;
-}
-
-.poster,
-.photo {
-	max-height: 15rem;
-	max-width: 100%;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-</style>

assets/components/tags/tag.vue

@@ -1,144 +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="tag.releases" />
-		</div>
-	</div>
-</template>
-
-<script>
-/* eslint-disable no-v-html */
-import { Converter } from 'showdown';
-
-import escapeHtml from '../../../src/utils/escape-html';
-
-import FilterBar from '../header/filter-bar.vue';
-import Photos from './photos.vue';
-import Releases from '../releases/releases.vue';
-import Scroll from '../scroll/scroll.vue';
-
-const converter = new Converter();
-
-async function fetchReleases() {
-	this.tag = await this.$store.dispatch('fetchTagBySlug', {
-		tagSlug: this.$route.params.tagSlug,
-		range: this.$route.params.range,
-	});
-
-	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,
-		Scroll,
-	},
-	data() {
-		return {
-			tag: null,
-			description: null,
-			releases: null,
-			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: .75rem 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,179 +0,0 @@
-<template>
-	<div class="tags">
-		<div
-			v-for="(tags, category) in categories"
-			:key="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>
-	</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',
-			'orgy',
-			'gangbang',
-			'dp',
-			'facial',
-			'creampie',
-			'squirting',
-		],
-		appearance: [
-			'asian',
-			'ebony',
-			'latina',
-			'caucasian',
-			'indian',
-			'natural-boobs',
-			'fake-boobs',
-			'blonde',
-			'brunette',
-			'redhead',
-			'tattoos',
-			'piercings',
-		],
-		oral: [
-			'blowjob',
-			'deepthroat',
-			'facefucking',
-			'double-blowjob',
-			'blowbang',
-			'pussy-eating',
-			'ass-eating',
-			'atm',
-		],
-		extreme: [
-			'airtight',
-			'dap',
-			'dvp',
-			'da-tp',
-			'dv-tp',
-			'tap',
-		],
-		cumshot: [
-			'facial',
-			'bukkake',
-			'creampie',
-			'anal-creampie',
-			'cum-in-mouth',
-			'cum-on-butt',
-		],
-		roleplay: [
-			'family',
-			'schoolgirl',
-			'nurse',
-			'maid',
-		],
-		fetish: [
-			'bdsm',
-			'femdom',
-		],
-		toys: [
-			'double-dildo',
-			'double-dildo-blowjob',
-		],
-		misc: [
-			'gaping',
-			'squirting',
-			'oil',
-		],
-	};
-
-	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;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
-    grid-gap: 1rem;
-    margin: 0 0 1.5rem 0;
-}
-
-.heading {
-    font-size: 1.3rem;
-    text-transform: capitalize;
-}
-
-@media(max-width: $breakpoint3) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, .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>
-	<router-link
-		:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
-		:title="tag.name"
-		class="tile"
-	>
-		<template v-if="tag.poster">
-			<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"
-			>
-		</template>
-
-		<span class="title">{{ tag.name }}</span>
-	</router-link>
-</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 {
-    color: var(--text-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    box-sizing: border-box;
-    position: relative;
-	text-decoration: none;
-    box-shadow: 0 0 3px var(--darken-weak);
-	overflow: hidden;
-}
-
-.poster {
-    width: 100%;
-	height: 100%;
-    object-fit: cover;
-    object-position: 50% 100%;
-}
-
-.title {
-    width: 100%;
-    display: flex;
-    box-sizing: border-box;
-    padding: .5rem 1rem;
-    position: absolute;
-    bottom: 0;
-    background: var(--darken);
-	overflow: hidden;
-	white-space: nowrap;
-    font-size: 1rem;
-    font-weight: bold;
-    text-transform: capitalize;
-    text-shadow: 0 0 3px var(--darken-strong);
-	text-overflow: ellipsis;
-}
-
-@media(max-width: $breakpoint) {
-	.tile {
-		position: initial;
-	}
-
-	.title {
-		position: initial;
-		color: var(--text);
-		background: var(--background);
-		text-shadow: none;
-	}
-}
-</style>

assets/css/_breakpoints.scss

@@ -1,6 +0,0 @@
-$breakpoint-nano: 320px;
-$breakpoint-micro: 540px;
-$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,27 +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;
-    }
-}
-
-: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>