Added tag pages.

pages/tags/@tagId/+Page.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="page">
+		<div class="header">
+			<h2 class="title">{{ tag.name }}</h2>
+		</div>
+
+		<div class="content">
+			<div
+				v-if="description"
+				class="description"
+				v-html="description"
+			/>
+
+			<Scenes />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+import Scenes from '#/components/scenes/scenes.vue';
+
+const pageContext = inject('pageContext');
+const { tag, description } = pageContext.pageProps;
+</script>
+
+<style>
+.description .link {
+	color: var(--primary);
+}
+</style>
+
+<style scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.content {
+	flex-grow: 1;
+	overflow-y: auto;
+}
+
+.header {
+	padding: .5rem 1rem;
+	color: var(--text-light);
+	background: var(--grey-dark-40);
+}
+
+.title {
+	margin: 0;
+	text-transform: capitalize;
+}
+
+.description {
+	padding: 0 1rem .5rem 1rem;
+	color: var(--text-light);
+	background: var(--grey-dark-40);
+	line-height: 1.5;
+}
+</style>

pages/tags/@tagId/+onBeforeRender.js

@@ -0,0 +1,50 @@
+import markdownIt from 'markdown-it';
+import markdownItClass from '@toycode/markdown-it-class';
+
+import { fetchTagsById } from '#/src/tags.js';
+import { fetchScenes } from '#/src/scenes.js';
+import { curateScenesQuery } from '#/src/web/scenes.js';
+
+const md = markdownIt().use(markdownItClass, { a: 'link' });
+
+export async function onBeforeRender(pageContext) {
+	const [[tag], tagScenes] = await Promise.all([
+		fetchTagsById([pageContext.routeParams.tagSlug]),
+		fetchScenes(await curateScenesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'latest',
+			tagSlug: pageContext.routeParams.tagSlug,
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 30,
+			aggregate: true,
+		}),
+	]);
+
+	const {
+		scenes,
+		aggActors,
+		aggTags,
+		aggChannels,
+		total,
+		limit,
+	} = tagScenes;
+
+	const description = tag.description && md.renderInline(tag.description);
+
+	return {
+		pageContext: {
+			title: tag.name,
+			pageProps: {
+				tag,
+				description,
+				scenes,
+				aggActors,
+				aggTags,
+				aggChannels,
+				total,
+				limit,
+			},
+		},
+	};
+}

pages/tags/@tagId/+route.js

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