Added tag pages.
This commit is contained in:
parent
d739975d36
commit
5cdbf036f1
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const entities = computed(() => {
|
|||
|
||||
<style scoped>
|
||||
.filter-items {
|
||||
max-height: 10rem;
|
||||
max-height: 15rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -178,6 +178,15 @@ function toggleFilters(state) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
|
||||
.filter-include {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-name {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
70
src/tags.js
70
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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export default {
|
|||
redirects: {
|
||||
'/': '/updates',
|
||||
},
|
||||
trailingSlash: true, // for some reason /tags breaks without this
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue