Added tag pages.
This commit is contained in:
@@ -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>
|
||||
142
pages/tags/+Page.vue
Normal file
142
pages/tags/+Page.vue
Normal 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>
|
||||
136
pages/tags/+onBeforeRender.js
Normal file
136
pages/tags/+onBeforeRender.js
Normal 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
63
pages/tags/@tagId/+Page.vue
Normal file
63
pages/tags/@tagId/+Page.vue
Normal 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>
|
||||
50
pages/tags/@tagId/+onBeforeRender.js
Normal file
50
pages/tags/@tagId/+onBeforeRender.js
Normal 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
22
pages/tags/@tagId/+route.js
Normal file
22
pages/tags/@tagId/+route.js
Normal 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;
|
||||
};
|
||||
Reference in New Issue
Block a user