Added tag pages.

This commit is contained in:
DebaucheryLibrarian 2024-01-26 01:31:15 +01:00
parent d739975d36
commit 5cdbf036f1
19 changed files with 618 additions and 53 deletions

View File

@ -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-10 (max-width: 768px);
@custom-media --small (max-width: 900px); @custom-media --small (max-width: 900px);
@custom-media --compact (max-width: 1200px); @custom-media --compact (max-width: 1200px);
@custom-media --big (max-width: 1500px);

View File

@ -63,6 +63,7 @@
<UseVirtualList <UseVirtualList
:list="availableActors" :list="availableActors"
:options="{ itemHeight: 30 }" :options="{ itemHeight: 30 }"
style="height: 20rem;"
class="filter-items nolist" class="filter-items nolist"
> >
<template #default="{ data: actor, index }"> <template #default="{ data: actor, index }">
@ -153,8 +154,7 @@ function selectGender() {
border-top: solid 1px var(--shadow-weak-30); border-top: solid 1px var(--shadow-weak-30);
} }
.list { .filter-items {
height: 15rem; max-height: unset;
overflow-y: auto;
} }
</style> </style>

View File

@ -144,7 +144,7 @@ const entities = computed(() => {
<style scoped> <style scoped>
.filter-items { .filter-items {
max-height: 10rem; max-height: 15rem;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -178,6 +178,15 @@ function toggleFilters(state) {
} }
} }
} }
&.disabled {
opacity: .5;
pointer-events: none;
.filter-include {
visibility: hidden;
}
}
} }
.filter-name { .filter-name {

View File

@ -49,7 +49,11 @@
v-for="(tag, index) in group" v-for="(tag, index) in group"
:key="`filter-tag-${tag.id}`" :key="`filter-tag-${tag.id}`"
class="filter-item" 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])" @click="emit('update', 'tags', [tag.slug])"
> >
<div <div
@ -144,11 +148,16 @@ const groupedtags = computed(() => {
return 0; return 0;
}); });
return { selected, available }; return {
// page: [pageTag],
selected,
available,
};
} }
if (order.value === 'priority') { if (order.value === 'priority') {
return { return {
// page: [pageTag],
selected, selected,
available: [ available: [
...priorityTags.map((priorityTag) => filtered.find((tag) => tag.slug === priorityTag)).filter(Boolean), ...priorityTags.map((priorityTag) => filtered.find((tag) => tag.slug === priorityTag)).filter(Boolean),
@ -158,6 +167,7 @@ const groupedtags = computed(() => {
} }
return { return {
// page: [pageTag],
selected, selected,
available: filtered, available: filtered,
}; };
@ -175,7 +185,7 @@ function toggleTag(tag) {
<style scoped> <style scoped>
.filter-items { .filter-items {
max-height: 10rem; max-height: 15rem;
overflow-y: auto; overflow-y: auto;
} }

112
package-lock.json generated
View File

@ -10,6 +10,7 @@
"@brillout/json-serializer": "^0.5.8", "@brillout/json-serializer": "^0.5.8",
"@floating-ui/dom": "^1.5.3", "@floating-ui/dom": "^1.5.3",
"@floating-ui/vue": "^1.0.2", "@floating-ui/vue": "^1.0.2",
"@toycode/markdown-it-class": "^1.2.4",
"@vitejs/plugin-vue": "^4.5.2", "@vitejs/plugin-vue": "^4.5.2",
"@vue/compiler-sfc": "^3.3.10", "@vue/compiler-sfc": "^3.3.10",
"@vue/server-renderer": "^3.3.10", "@vue/server-renderer": "^3.3.10",
@ -26,6 +27,7 @@
"express-query-boolean": "^2.0.0", "express-query-boolean": "^2.0.0",
"knex": "^3.1.0", "knex": "^3.1.0",
"manticoresearch": "^4.0.0", "manticoresearch": "^4.0.0",
"markdown-it": "^14.0.0",
"mathjs": "^12.2.1", "mathjs": "^12.2.1",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nanoid": "^5.0.4", "nanoid": "^5.0.4",
@ -2738,6 +2740,11 @@
"@redis/client": "^1.0.0" "@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": { "node_modules/@types/json5": {
"version": "0.0.29", "version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -3079,8 +3086,7 @@
"node_modules/argparse": { "node_modules/argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
"dev": true
}, },
"node_modules/array-buffer-byte-length": { "node_modules/array-buffer-byte-length": {
"version": "1.0.0", "version": "1.0.0",
@ -3868,6 +3874,17 @@
"node": ">= 0.8" "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": { "node_modules/error-stack-parser": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@ -5714,6 +5731,14 @@
"node": ">= 0.8.0" "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": { "node_modules/locate-path": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -5822,6 +5847,22 @@
"superagent": "5.1.0" "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": { "node_modules/mathjs": {
"version": "12.2.1", "version": "12.2.1",
"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz", "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz",
@ -5844,6 +5885,11 @@
"node": ">= 18" "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": { "node_modules/media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -6556,6 +6602,14 @@
"node": ">=6" "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": { "node_modules/qs": {
"version": "6.11.0", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@ -7489,6 +7543,11 @@
"node": ">= 14" "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": { "node_modules/unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@ -10116,6 +10175,11 @@
"integrity": "sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==", "integrity": "sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==",
"requires": {} "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": { "@types/json5": {
"version": "0.0.29", "version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -10364,8 +10428,7 @@
"argparse": { "argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
"dev": true
}, },
"array-buffer-byte-length": { "array-buffer-byte-length": {
"version": "1.0.0", "version": "1.0.0",
@ -10931,6 +10994,11 @@
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==" "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": { "error-stack-parser": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@ -12284,6 +12352,14 @@
"type-check": "~0.4.0" "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": { "locate-path": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -12378,6 +12454,19 @@
"superagent": "5.1.0" "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": { "mathjs": {
"version": "12.2.1", "version": "12.2.1",
"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz", "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.2.1.tgz",
@ -12394,6 +12483,11 @@
"typed-function": "^4.1.1" "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": { "media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -12870,6 +12964,11 @@
"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
"dev": true "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": { "qs": {
"version": "6.11.0", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", "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", "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.1.tgz",
"integrity": "sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ==" "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": { "unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

View File

@ -10,6 +10,7 @@
"@brillout/json-serializer": "^0.5.8", "@brillout/json-serializer": "^0.5.8",
"@floating-ui/dom": "^1.5.3", "@floating-ui/dom": "^1.5.3",
"@floating-ui/vue": "^1.0.2", "@floating-ui/vue": "^1.0.2",
"@toycode/markdown-it-class": "^1.2.4",
"@vitejs/plugin-vue": "^4.5.2", "@vitejs/plugin-vue": "^4.5.2",
"@vue/compiler-sfc": "^3.3.10", "@vue/compiler-sfc": "^3.3.10",
"@vue/server-renderer": "^3.3.10", "@vue/server-renderer": "^3.3.10",
@ -26,6 +27,7 @@
"express-query-boolean": "^2.0.0", "express-query-boolean": "^2.0.0",
"knex": "^3.1.0", "knex": "^3.1.0",
"manticoresearch": "^4.0.0", "manticoresearch": "^4.0.0",
"markdown-it": "^14.0.0",
"mathjs": "^12.2.1", "mathjs": "^12.2.1",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nanoid": "^5.0.4", "nanoid": "^5.0.4",

View File

@ -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>

View File

@ -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>

View File

@ -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>

142
pages/tags/+Page.vue Normal file
View File

@ -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>

View File

@ -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,
},
},
};
}

View File

@ -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>

View File

@ -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,
},
},
};
}

View File

@ -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;
};

View File

@ -4,7 +4,7 @@ import initLogger from './logger.js';
const logger = initLogger(); const logger = initLogger();
function curateEntity(entity, context) { export function curateEntity(entity, context) {
if (!entity) { if (!entity) {
return null; return null;
} }

View File

@ -2,6 +2,8 @@ import knex from './knex.js';
import redis from './redis.js'; import redis from './redis.js';
import initLogger from './logger.js'; import initLogger from './logger.js';
import { curateEntity } from './entities.js';
const logger = initLogger(); const logger = initLogger();
function curateTag(tag, context) { function curateTag(tag, context) {
@ -9,35 +11,89 @@ function curateTag(tag, context) {
id: tag.id, id: tag.id,
name: tag.name, name: tag.name,
slug: tag.slug, slug: tag.slug,
description: tag.description,
priority: tag.priority, 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 = {}) { export async function fetchTags(options = {}) {
const [tags] = await Promise.all([ const [tags, posters] = await Promise.all([
knex('tags') 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) => { .modify((builder) => {
if (options.order) { if (options.order) {
builder.orderBy(...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) { 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 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) { if (!tag) {
console.warn(`Can't match tag ${tagId}`); console.warn(`Can't match tag ${tagId}`);
return null; return null;
} }
return curateTag(tag, { append: options.append }); return curateTag({
...tag,
poster: postersByTagId[tag.id],
}, { append: options.append });
}).filter(Boolean); }).filter(Boolean);
return curatedTags; return curatedTags;

View File

@ -26,7 +26,7 @@ export async function curateScenesQuery(query) {
return { return {
scope: query.scope || 'latest', scope: query.scope || 'latest',
actorIds: [query.actorId, ...(query.actors?.split(',') || []).map((identifier) => parseActorIdentifier(identifier)?.id)].filter(Boolean), 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, entityId: query.e ? await getIdsBySlug([query.e], 'entities').then(([id]) => id) : query.entityId,
}; };
} }

View File

@ -12,6 +12,7 @@ export default {
redirects: { redirects: {
'/': '/updates', '/': '/updates',
}, },
trailingSlash: true, // for some reason /tags breaks without this
}), }),
], ],
css: { css: {