Added basic actor page with scenes and co-star filtering.

pages/actors/@actorId/+Page.vue

@@ -1,11 +1,45 @@
 <template>
 	<div class="page">
-		<h2>Actor</h2>
+		<div class="bio">
+			<img
+				v-if="actor.avatar"
+				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
+				class="avatar"
+			>
+
+			<h2 class="name">{{ actor.name }}</h2>
+		</div>
+
+		<Scenes />
 	</div>
 </template>
 
 <script setup>
 import { inject } from 'vue';
 
-const { routeParams } = inject('pageContext');
+import Scenes from '#/components/scenes/scenes.vue';
+
+const pageContext = inject('pageContext');
+const { pageProps } = pageContext;
+
+const { actor } = pageProps;
 </script>
+
+<style scoped>
+.bio {
+	display: flex;
+	padding: 1rem;
+	background: var(--grey-dark-40);
+	color: var(--text-light);
+}
+
+.name {
+	margin: 0;
+}
+
+.avatar {
+	height: 10rem;
+	margin-right: 1rem;
+}
+</style>

pages/actors/@actorId/+onBeforeRender.js

@@ -0,0 +1,35 @@
+import { fetchActorsById } from '#/src/actors.js';
+import { fetchScenes } from '#/src/scenes.js';
+import { curateScenesQuery } from '#/src/web/scenes.js';
+
+export async function onBeforeRender(pageContext) {
+	const [actor] = await fetchActorsById([Number(pageContext.routeParams.actorId)]);
+
+	const {
+		scenes,
+		actors,
+		total,
+		limit,
+	} = await fetchScenes(curateScenesQuery({
+		...pageContext.urlQuery,
+		scope: pageContext.routeParams.scope || 'latest',
+		actorId: Number(pageContext.routeParams.actorId),
+	}), {
+		page: Number(pageContext.routeParams.page) || 1,
+		limit: Number(pageContext.urlParsed.search.limit) || 30,
+		aggregate: true,
+	});
+
+	return {
+		pageContext: {
+			title: actor.name,
+			pageProps: {
+				actor,
+				actors,
+				scenes,
+				total,
+				limit,
+			},
+		},
+	};
+}

pages/actors/@actorId/+route.js

@@ -1 +1,23 @@
-export default '/actor/@actorId/*';
+import { match } from 'path-to-regexp';
+// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
+
+const path = '/actor/:actorId/:actorSlug?/:scope?/:page?';
+const urlMatch = match(path, { decode: decodeURIComponent });
+
+export default (pageContext) => {
+	const matched = urlMatch(pageContext.urlPathname);
+
+	if (matched) {
+		return {
+			routeParams: {
+				actorId: matched.params.actorId,
+				actorSlug: matched.params.actorSlug,
+				scope: matched.params.scope || 'latest',
+				page: matched.params.page || '1',
+				path,
+			},
+		};
+	}
+
+	return false;
+};