From 5cdbf036f18df3688b8401d1ea9f8c618410d8a2 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Fri, 26 Jan 2024 01:31:15 +0100
Subject: [PATCH] Added tag pages.

---
 assets/css/breakpoints.css           |   3 +
 components/filters/actors.vue        |   6 +-
 components/filters/channels.vue      |   2 +-
 components/filters/filters.vue       |   9 ++
 components/filters/tags.vue          |  16 ++-
 package-lock.json                    | 112 ++++++++++++++++++++-
 package.json                         |   2 +
 pages/about/+Page.vue                |  13 ---
 pages/index/+Page.vue                |  12 ---
 pages/index/Counter.vue              |   8 --
 pages/tags/+Page.vue                 | 142 +++++++++++++++++++++++++++
 pages/tags/+onBeforeRender.js        | 136 +++++++++++++++++++++++++
 pages/tags/@tagId/+Page.vue          |  63 ++++++++++++
 pages/tags/@tagId/+onBeforeRender.js |  50 ++++++++++
 pages/tags/@tagId/+route.js          |  22 +++++
 src/entities.js                      |   2 +-
 src/tags.js                          |  70 +++++++++++--
 src/web/scenes.js                    |   2 +-
 vite.config.js                       |   1 +
 19 files changed, 618 insertions(+), 53 deletions(-)
 delete mode 100644 pages/about/+Page.vue
 delete mode 100644 pages/index/+Page.vue
 delete mode 100644 pages/index/Counter.vue
 create mode 100644 pages/tags/+Page.vue
 create mode 100644 pages/tags/+onBeforeRender.js
 create mode 100644 pages/tags/@tagId/+Page.vue
 create mode 100644 pages/tags/@tagId/+onBeforeRender.js
 create mode 100644 pages/tags/@tagId/+route.js

diff --git a/assets/css/breakpoints.css b/assets/css/breakpoints.css
index 015083e..f6f0ef0 100644
--- a/assets/css/breakpoints.css
+++ b/assets/css/breakpoints.css
@@ -1,3 +1,6 @@
+@custom-media --small-30 (max-width: 540px);
+@custom-media --small-20 (max-width: 650px);
 @custom-media --small-10 (max-width: 768px);
 @custom-media --small (max-width: 900px);
 @custom-media --compact (max-width: 1200px);
+@custom-media --big (max-width: 1500px);
diff --git a/components/filters/actors.vue b/components/filters/actors.vue
index 4739e57..b05f06c 100644
--- a/components/filters/actors.vue
+++ b/components/filters/actors.vue
@@ -63,6 +63,7 @@
 		<UseVirtualList
 			:list="availableActors"
 			:options="{ itemHeight: 30 }"
+			style="height: 20rem;"
 			class="filter-items nolist"
 		>
 			<template #default="{ data: actor, index }">
@@ -153,8 +154,7 @@ function selectGender() {
 	border-top: solid 1px var(--shadow-weak-30);
 }
 
-.list {
-	height: 15rem;
-	overflow-y: auto;
+.filter-items {
+	max-height: unset;
 }
 </style>
diff --git a/components/filters/channels.vue b/components/filters/channels.vue
index 1ec3701..bfd92e0 100644
--- a/components/filters/channels.vue
+++ b/components/filters/channels.vue
@@ -144,7 +144,7 @@ const entities = computed(() => {
 
 <style scoped>
 .filter-items {
-	max-height: 10rem;
+	max-height: 15rem;
 	overflow-y: auto;
 }
 
diff --git a/components/filters/filters.vue b/components/filters/filters.vue
index 7dda845..6ddffa1 100644
--- a/components/filters/filters.vue
+++ b/components/filters/filters.vue
@@ -178,6 +178,15 @@ function toggleFilters(state) {
 			}
 		}
 	}
+
+	&.disabled {
+		opacity: .5;
+		pointer-events: none;
+
+		.filter-include {
+			visibility: hidden;
+		}
+	}
 }
 
 .filter-name {
diff --git a/components/filters/tags.vue b/components/filters/tags.vue
index 8129c6d..0d12f99 100644
--- a/components/filters/tags.vue
+++ b/components/filters/tags.vue
@@ -49,7 +49,11 @@
 				v-for="(tag, index) in group"
 				:key="`filter-tag-${tag.id}`"
 				class="filter-item"
-				:class="{ selected: filters.tags.includes(tag.slug), first: groupKey === 'available' && index === 0 && filters.tags.length > 0 }"
+				:class="{
+					selected: filters.tags.includes(tag.slug),
+					first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
+					disabled: groupKey === 'page',
+				}"
 				@click="emit('update', 'tags', [tag.slug])"
 			>
 				<div
@@ -144,11 +148,16 @@ const groupedtags = computed(() => {
 			return 0;
 		});
 
-		return { selected, available };
+		return {
+			// page: [pageTag],
+			selected,
+			available,
+		};
 	}
 
 	if (order.value === 'priority') {
 		return {
+			// page: [pageTag],
 			selected,
 			available: [
 				...priorityTags.map((priorityTag) => filtered.find((tag) => tag.slug === priorityTag)).filter(Boolean),
@@ -158,6 +167,7 @@ const groupedtags = computed(() => {
 	}
 
 	return {
+		// page: [pageTag],
 		selected,
 		available: filtered,
 	};
@@ -175,7 +185,7 @@ function toggleTag(tag) {
 
 <style scoped>
 .filter-items {
-	max-height: 10rem;
+	max-height: 15rem;
 	overflow-y: auto;
 }
 
diff --git a/package-lock.json b/package-lock.json
index 5756b63..0d26942 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@brillout/json-serializer": "^0.5.8",
         "@floating-ui/dom": "^1.5.3",
         "@floating-ui/vue": "^1.0.2",
+        "@toycode/markdown-it-class": "^1.2.4",
         "@vitejs/plugin-vue": "^4.5.2",
         "@vue/compiler-sfc": "^3.3.10",
         "@vue/server-renderer": "^3.3.10",
@@ -26,6 +27,7 @@
         "express-query-boolean": "^2.0.0",
         "knex": "^3.1.0",
         "manticoresearch": "^4.0.0",
+        "markdown-it": "^14.0.0",
         "mathjs": "^12.2.1",
         "mitt": "^3.0.1",
         "nanoid": "^5.0.4",
@@ -2738,6 +2740,11 @@
         "@redis/client": "^1.0.0"
       }
     },
+    "node_modules/@toycode/markdown-it-class": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@toycode/markdown-it-class/-/markdown-it-class-1.2.4.tgz",
+      "integrity": "sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -3079,8 +3086,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.0",
@@ -3868,6 +3874,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -5714,6 +5731,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5822,6 +5847,22 @@
         "superagent": "5.1.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.0.0.tgz",
+      "integrity": "sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.0.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/mathjs": {
       "version": "12.2.1",
       "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz",
@@ -5844,6 +5885,11 @@
         "node": ">= 18"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -6556,6 +6602,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -7489,6 +7543,11 @@
         "node": ">= 14"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.0.0.tgz",
+      "integrity": "sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -10116,6 +10175,11 @@
       "integrity": "sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==",
       "requires": {}
     },
+    "@toycode/markdown-it-class": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@toycode/markdown-it-class/-/markdown-it-class-1.2.4.tgz",
+      "integrity": "sha512-hA4gHBK8moObkOYdWTjhy1wYcYy0MJeM3JjSKbsXHRpRMvIKhk6Jm+t3bXsSScTdz/byWqQbs8YIwVYjHp+SlQ=="
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -10364,8 +10428,7 @@
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "array-buffer-byte-length": {
       "version": "1.0.0",
@@ -10931,6 +10994,11 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
+    "entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
     "error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -12284,6 +12352,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "requires": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -12378,6 +12454,19 @@
         "superagent": "5.1.0"
       }
     },
+    "markdown-it": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.0.0.tgz",
+      "integrity": "sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.0.0"
+      }
+    },
     "mathjs": {
       "version": "12.2.1",
       "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz",
@@ -12394,6 +12483,11 @@
         "typed-function": "^4.1.1"
       }
     },
+    "mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12870,6 +12964,11 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true
     },
+    "punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
+    },
     "qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -13540,6 +13639,11 @@
       "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.1.tgz",
       "integrity": "sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ=="
     },
+    "uc.micro": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.0.0.tgz",
+      "integrity": "sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig=="
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index a3b8baa..27402e2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@brillout/json-serializer": "^0.5.8",
     "@floating-ui/dom": "^1.5.3",
     "@floating-ui/vue": "^1.0.2",
+    "@toycode/markdown-it-class": "^1.2.4",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.3.10",
     "@vue/server-renderer": "^3.3.10",
@@ -26,6 +27,7 @@
     "express-query-boolean": "^2.0.0",
     "knex": "^3.1.0",
     "manticoresearch": "^4.0.0",
+    "markdown-it": "^14.0.0",
     "mathjs": "^12.2.1",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.4",
diff --git a/pages/about/+Page.vue b/pages/about/+Page.vue
deleted file mode 100644
index 0bee504..0000000
--- a/pages/about/+Page.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <h1>About</h1>
-  <p>Example of app using Vike.</p>
-</template>
-
-<style>
-code {
-  font-family: monospace;
-  background-color: #eaeaea;
-  padding: 3px 5px;
-  border-radius: 4px;
-}
-</style>
diff --git a/pages/index/+Page.vue b/pages/index/+Page.vue
deleted file mode 100644
index 2e5a277..0000000
--- a/pages/index/+Page.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <h1>Welcome</h1>
-  This page is:
-  <ul>
-    <li>Rendered to HTML.</li>
-    <li>Interactive. <Counter /></li>
-  </ul>
-</template>
-
-<script setup>
-import Counter from './Counter.vue'
-</script>
diff --git a/pages/index/Counter.vue b/pages/index/Counter.vue
deleted file mode 100644
index 151013d..0000000
--- a/pages/index/Counter.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <button type="button" @click="state.count++">Counter {{ state.count }}</button>
-</template>
-
-<script setup>
-import { reactive } from 'vue'
-const state = reactive({ count: 0 })
-</script>
diff --git a/pages/tags/+Page.vue b/pages/tags/+Page.vue
new file mode 100644
index 0000000..5f13b84
--- /dev/null
+++ b/pages/tags/+Page.vue
@@ -0,0 +1,142 @@
+<template>
+	<div class="page">
+		<div
+			v-for="(tags, category) in categories"
+			:key="`category-${category}`"
+		>
+			<h3 class="category">{{ category }}</h3>
+
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="`tag-${tag.slug}`"
+					class="tag"
+				>
+					<div class="thumb-container">
+						<a
+							:href="`/tag/${tag.slug}`"
+							class="tag nolink"
+						>
+							<img
+								v-if="tag.poster"
+								:src="`/${tag.poster.thumbnail}`"
+								:title="tag.poster.comment"
+								class="thumb"
+								loading="lazy"
+							>
+						</a>
+
+						<a
+							v-if="tag.poster?.entity"
+							:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
+							class="favicon-link"
+						>
+							<img
+								:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
+								:alt="tag.poster.entity.name"
+								:title="tag.poster.entity.name"
+								class="favicon"
+							>
+						</a>
+					</div>
+
+					<a
+						:href="`/tag/${tag.slug}`"
+						class="name nolink"
+					>{{ tag.name }}</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const pageContext = inject('pageContext');
+const categories = pageContext.pageProps.tagShowcase;
+</script>
+
+<style scoped>
+.tags {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    gap: 1rem .5rem;
+	padding: .75rem 1rem;
+}
+
+.category {
+	padding: 1rem 1rem 0 1.5rem;
+	margin: 0;
+	text-transform: capitalize;
+	color: var(--shadow);
+}
+
+.tag {
+	display: flex;
+	flex-direction: column;
+
+	&:hover {
+		.name {
+			color: var(--primary);
+		}
+
+		.thumb {
+			box-shadow: 0 0 3px var(--shadow-weak-10);
+		}
+	}
+}
+
+.name {
+	padding: .25rem .5rem 0 .5rem;
+	text-transform: capitalize;
+	font-size: .9rem;
+	font-weight: bold;
+	color: var(--shadow-strong-10);
+}
+
+.thumb-container {
+	position: relative;
+}
+
+.thumb {
+	display: inline-block;
+    width: 100%;
+	aspect-ratio: 5/3;
+	object-fit: cover;
+	border-radius: .25rem;
+	background-size: cover;
+	background-position: center;
+    box-shadow: 0 0 3px var(--shadow-weak-20);
+}
+
+.favicon-link {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	font-size: 0;
+
+	&:hover .favicon {
+		filter: drop-shadow(0 0 2px var(--shadow-weak-20))
+	}
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	padding: .5rem;
+	object-fit: contain;
+}
+
+@media(--compact) {
+	.tags {
+		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+	}
+}
+
+@media(--small-30) {
+	.tags {
+		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+	}
+}
+</style>
diff --git a/pages/tags/+onBeforeRender.js b/pages/tags/+onBeforeRender.js
new file mode 100644
index 0000000..2bc069b
--- /dev/null
+++ b/pages/tags/+onBeforeRender.js
@@ -0,0 +1,136 @@
+import { fetchTagsById } from '#/src/tags.js';
+
+const tagSlugs = {
+	popular: [
+		'anal',
+		'lesbian',
+		'interracial',
+		'mff',
+		'mfm',
+		'teen',
+		'milf',
+		'blowjob',
+		'gay',
+		'transsexual',
+		'dp',
+		'gangbang',
+		'facial',
+		'creampie',
+		'squirting',
+	],
+	appearance: [
+		'asian',
+		'black',
+		'latina',
+		'white',
+		'natural-boobs',
+		'enhanced-boobs',
+		'blonde',
+		'brunette',
+		'redhead',
+		'tattoos',
+		'piercings',
+	],
+	sexuality: [
+		'gay',
+		'bisexual',
+		'transsexual',
+	],
+	oral: [
+		'blowjob',
+		'pussy-eating',
+		'ass-eating',
+		'deepthroat',
+		'facefucking',
+		'69',
+		'atm',
+	],
+	manual: [
+		'handjob',
+		'fingering',
+		'anal-fingering',
+		'titty-fucking',
+		'fisting',
+		'anal-fisting',
+	],
+	group: [
+		'mfm',
+		'mff',
+		'orgy',
+		'gangbang',
+		'blowbang',
+	],
+	cumshot: [
+		'facial',
+		'creampie',
+		'cum-in-mouth',
+		'cum-on-boobs',
+		'cum-on-butt',
+		'cum-on-pussy',
+		'anal-creampie',
+		'oral-creampie',
+		'bukkake',
+		'fake-cum',
+	],
+	roleplay: [
+		'family',
+		'parody',
+		'schoolgirl',
+		'nurse',
+		'maid',
+		'nun',
+	],
+	extreme: [
+		'dp',
+		'airtight',
+		'dap',
+		'dvp',
+		'triple-penetration',
+		'tap',
+		'tvp',
+	],
+	fetish: [
+		'bdsm',
+		'femdom',
+		'bondage',
+		'free-use',
+		'latex',
+		'blindfold',
+	],
+	toys: [
+		'toys',
+		'toy-anal',
+		'toy-dp',
+		'double-dildo',
+		'double-dildo-blowjob',
+		'double-dildo-kiss',
+		'double-dildo-anal',
+		'double-dildo-dp',
+	],
+	misc: [
+		'gaping',
+		'squirting',
+		'oil',
+		'vr',
+		'bts',
+	],
+};
+
+export async function onBeforeRender(_pageContext) {
+	const tags = await fetchTagsById(Object.values(tagSlugs).flat());
+	const tagsBySlug = Object.fromEntries(tags.map((tag) => [tag.slug, tag]));
+
+	const tagShowcase = Object.fromEntries(Object.entries(tagSlugs).map(([category, categorySlugs]) => [
+		category,
+		categorySlugs.map((slug) => tagsBySlug[slug]).filter(Boolean),
+	]));
+
+	return {
+		pageContext: {
+			title: 'Tags',
+			pageProps: {
+				tagShowcase,
+			},
+		},
+	};
+}
diff --git a/pages/tags/@tagId/+Page.vue b/pages/tags/@tagId/+Page.vue
new file mode 100644
index 0000000..e65c21f
--- /dev/null
+++ b/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>
diff --git a/pages/tags/@tagId/+onBeforeRender.js b/pages/tags/@tagId/+onBeforeRender.js
new file mode 100644
index 0000000..2808c6d
--- /dev/null
+++ b/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,
+			},
+		},
+	};
+}
diff --git a/pages/tags/@tagId/+route.js b/pages/tags/@tagId/+route.js
new file mode 100644
index 0000000..77c1805
--- /dev/null
+++ b/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;
+};
diff --git a/src/entities.js b/src/entities.js
index 0dd3784..461de34 100644
--- a/src/entities.js
+++ b/src/entities.js
@@ -4,7 +4,7 @@ import initLogger from './logger.js';
 
 const logger = initLogger();
 
-function curateEntity(entity, context) {
+export function curateEntity(entity, context) {
 	if (!entity) {
 		return null;
 	}
diff --git a/src/tags.js b/src/tags.js
index 3369f58..eb7f68d 100644
--- a/src/tags.js
+++ b/src/tags.js
@@ -2,6 +2,8 @@ import knex from './knex.js';
 import redis from './redis.js';
 import initLogger from './logger.js';
 
+import { curateEntity } from './entities.js';
+
 const logger = initLogger();
 
 function curateTag(tag, context) {
@@ -9,35 +11,89 @@ function curateTag(tag, context) {
 		id: tag.id,
 		name: tag.name,
 		slug: tag.slug,
+		description: tag.description,
 		priority: tag.priority,
-		...context.append?.[tag.id],
+		poster: tag.poster && {
+			id: tag.poster.id,
+			path: tag.poster.path,
+			thumbnail: tag.poster.thumbnail,
+			lazy: tag.poster.lazy,
+			isS3: tag.poster.is_s3,
+			comment: tag.poster.comment,
+			entity: tag.poster.entity && curateEntity({
+				...tag.poster.entity,
+				parent: tag.poster.entity_parent,
+			}),
+		},
+		...context?.append?.[tag.id],
 	};
 }
 
-export async function fetchTagsById(tagIds, options = {}) {
-	const [tags] = await Promise.all([
+export async function fetchTags(options = {}) {
+	const [tags, posters] = await Promise.all([
 		knex('tags')
-			.whereIn('tags.id', tagIds)
+			.select('tags.*', 'tags_posters.media_id as poster_id')
+			.modify((builder) => {
+				if (!options.includeAliases) {
+					builder.whereNull('alias_for');
+				}
+			}),
+		knex('tags_posters')
+			.select('tags_posters.tag_id', 'media.*', knex.raw('row_to_json(entities) as entity'), knex.raw('row_to_json(parents) as entity_parent'))
+			.leftJoin('media', 'media.id', 'tags_posters.media_id')
+			.leftJoin('entities', 'entities.id', 'media.entity_id')
+			.leftJoin('entities as parents', 'entities.id', 'entities.parent_id'),
+	]);
+
+	const postersByTagId = Object.fromEntries(posters.map((poster) => [poster.tag_id, poster]));
+
+	return tags.map((tagEntry) => curateTag({
+		...tagEntry,
+		poster: postersByTagId[tagEntry.id],
+	}));
+}
+
+export async function fetchTagsById(tagIds, options = {}) {
+	const [tags, posters] = await Promise.all([
+		knex('tags')
+			.whereIn('tags.id', tagIds.filter((tagId) => typeof tagId === 'number'))
+			.orWhereIn('tags.slug', tagIds.filter((tagId) => typeof tagId === 'string'))
 			.modify((builder) => {
 				if (options.order) {
 					builder.orderBy(...options.order);
 				}
 			}),
+		knex('tags_posters')
+			.select('tags_posters.tag_id', 'media.*', knex.raw('row_to_json(entities) as entity'), knex.raw('row_to_json(parents) as entity_parent'))
+			.leftJoin('tags', 'tags.id', 'tags_posters.tag_id')
+			.leftJoin('media', 'media.id', 'tags_posters.media_id')
+			.leftJoin('entities', 'entities.id', 'media.entity_id')
+			.leftJoin('entities as parents', 'parents.id', 'entities.parent_id')
+			.whereIn('tags.id', tagIds.filter((tagId) => typeof tagId === 'number'))
+			.orWhereIn('tags.slug', tagIds.filter((tagId) => typeof tagId === 'string')),
 	]);
 
+	const postersByTagId = Object.fromEntries(posters.map((poster) => [poster.tag_id, poster]));
+
 	if (options.order) {
-		return tags.map((tagEntry) => curateTag(tagEntry, { append: options.append }));
+		return tags.map((tagEntry) => curateTag({
+			...tagEntry,
+			poster: postersByTagId[tagEntry.id],
+		}, { append: options.append }));
 	}
 
 	const curatedTags = tagIds.map((tagId) => {
-		const tag = tags.find((tagEntry) => tagEntry.id === tagId);
+		const tag = tags.find((tagEntry) => (typeof tagId === 'string' ? tagEntry.slug === tagId : tagEntry.id === tagId));
 
 		if (!tag) {
 			console.warn(`Can't match tag ${tagId}`);
 			return null;
 		}
 
-		return curateTag(tag, { append: options.append });
+		return curateTag({
+			...tag,
+			poster: postersByTagId[tag.id],
+		}, { append: options.append });
 	}).filter(Boolean);
 
 	return curatedTags;
diff --git a/src/web/scenes.js b/src/web/scenes.js
index bf7e1ea..7a60aa6 100644
--- a/src/web/scenes.js
+++ b/src/web/scenes.js
@@ -26,7 +26,7 @@ export async function curateScenesQuery(query) {
 	return {
 		scope: query.scope || 'latest',
 		actorIds: [query.actorId, ...(query.actors?.split(',') || []).map((identifier) => parseActorIdentifier(identifier)?.id)].filter(Boolean),
-		tagIds: await getIdsBySlug([query.tagId, ...(query.tags?.split(',') || [])], 'tags'),
+		tagIds: await getIdsBySlug([query.tagSlug, ...(query.tags?.split(',') || [])], 'tags'),
 		entityId: query.e ? await getIdsBySlug([query.e], 'entities').then(([id]) => id) : query.entityId,
 	};
 }
diff --git a/vite.config.js b/vite.config.js
index 45afd56..e168955 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,6 +12,7 @@ export default {
 			redirects: {
 				'/': '/updates',
 			},
+			trailingSlash: true, // for some reason /tags breaks without this
 		}),
 	],
 	css: {