next/components/listings/singleStory.vue

<script lang="ts" setup>
	import type { IStory } from "~/models/stories/index";
	import { log } from "~/lib/server/logger";
	import { format } from "date-fns";
	import icon from "../icon.vue";
	import { theme } from "ant-design-vue";
	import metaItem from "./metaItem.vue";

	const { useToken } = theme;
	const { token } = useToken();
	const dark = inject<Ref<boolean>>("dark");
	const { data } = useAuth();
	let prop = defineProps<{ story: IStory; last?: boolean }>();
	const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
	// console.log("idx0->", idxo)
	// log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
	const shortDate = format(
		Date.parse(
			prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
		),
		"yyyy/MM/dd",
	);
	const longDate = format(
		Date.parse(
			prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
		),
		"iiii',' yyyy-MM-dd",
	);
</script>
<template>
	<a-card>
		<template #title>
			<div style="padding-top: 1em; padding-bottom: 0.8em">
				<div style="display: flex; justify-content: space-between">
					<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
						{{ story.title }}
					</NuxtLink>
					<a-tooltip placement="topLeft">
						<template #title>
							You'll need to log in to read this story. Register if you don't
							already have an account -- it's free!
						</template>
						<icon v-if="!data?.user" istyle="solid" name="lock" />
					</a-tooltip>
				</div>

				<div
					style="display: flex; font-size: 0.9em; align-items: baseline"
					class="headerthing"
				>
					<span> a </span>
					<div
						style=""
						v-for="(band, idx) in story.chapters[idxo].bands.filter((a) => !!a)"
					>
						<span>
							<NuxtLink :to="`/band/${band._id}`"> {{ band.name }} </NuxtLink
							>{{ idx < story.chapters[idxo].bands.length - 1 ? ", " : "" }}
						</span>
					</div>
					<span> fic by </span>
					<span>
						<NuxtLink :to="`/user/${story.author._id}`">
							{{ story.author.username }}
						</NuxtLink>
					</span>
				</div>
			</div>
		</template>
		<div v-html="story.chapters[idxo].summary" />
		<a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding">
			Written as a gift for
			<NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`">
				{{ story.ficmas.wisher?.username || "<...>" }}
			</NuxtLink>
			as part of {{ story.ficmas.year }}&rsquo;s
			<span v-if="story.ficmas.anniversary"> Anniversary Ficmas Fest </span>
			<span v-else> A Very Kinky Rockfic Ficmas Fest. </span>
		</a-card>
		<a-card
			v-if="story.challenge != null"
			:style="{
				background: story.challenge.color,
			}"
			class="lessPadding"
		>
			Entry for the
			<NuxtLink :to="`/challenge/${story.challenge._id}`">
				{{ story.challenge.name }}
			</NuxtLink>
			challenge.
		</a-card>
		<a-divider :style="{ borderColor: token['pink-5'], marginBottom: '1em' }" />
		<div class="storyMeta">
			<div class="inner">
				<span v-if="story.chapters.length > 1">
					<NuxtLink :to="`/story/${story._id}/chapters`">
						{{ story.chapters.length }} chapters
					</NuxtLink>
				</span>
				<span v-else> {{ story.chapters.length }} chapter </span>
				<span>
					{{ story.chapters[idxo].nsfw ? "Adult" : "Not so adult" }}
				</span>
				<span>
					{{ story.completed ? "Completed" : "WIP" }}
				</span>
			</div>

			<div class="outer">
				<meta-item :span="1" label="Genre(s)">
					{{ story.chapters[idxo].genre.join(", ") }}
				</meta-item>
				<meta-item label="Characters">
					{{ story.chapters[idxo].characters.join(", ") }}
				</meta-item>
				<meta-item label="Relationship(s)">
					<div
						style="display: inline-block"
						v-for="(rel, idx) in story.chapters[idxo].relationships"
					>
						<span>
							{{ Array.isArray(rel) ? rel.join("/") : rel }}
							{{
								idx < story.chapters[idxo].relationships.length - 1 ? "," : ""
							}}
						</span>
					</div>
					<span v-if="story.chapters[idxo].relationships.length < 1">
						<i>N/A</i>
					</span>
				</meta-item>
				<meta-item label="Last updated">
					<a-tooltip>
						<template #title>
							{{ longDate }}
						</template>
						{{ shortDate }}
					</a-tooltip>
				</meta-item>
			</div>
		</div>
		<div class="stats">
			<span>
				<span class="staticon">
					<icon
						:istyle="!dark ? 'solid' : 'regular'"
						icolor="#ff2883"
						:size="12"
						name="heart"
					/>
				</span>
				<span>
					{{ story.favs }}
				</span>
			</span>
			<span>
				<span class="staticon">
					<icon
						:istyle="!dark ? 'solid' : 'regular'"
						icolor="#1787d7"
						:size="12"
						name="book-open"
					/>
				</span>
				<span>
					{{ story.views }}
				</span>
			</span>
			<span>
				<span class="staticon">
					<icon
						:istyle="!dark ? 'solid' : 'regular'"
						icolor="#51e07c"
						:size="12"
						name="thumbs-up"
					/>
				</span>
				<span>
					{{ story.recs }}
				</span>
			</span>
			<span>
				<span class="staticon">
					<icon
						:istyle="!dark ? 'solid' : 'regular'"
						icolor="#c2d420"
						:size="12"
						name="download"
					/>
				</span>
				<span>
					{{ story.downloads }}
				</span>
			</span>
			<span>
				<span class="staticon">
					<icon istyle="solid" icolor="#0083aa" :size="12" name="comment" />
				</span>
				<span>
					{{ story.reviews }}
				</span>
			</span>
		</div>
	</a-card>
</template>
<style>
	.lessPadding > .ant-card-body {
		padding: 0.8em !important;
	}

	.ant-descriptions-view tr {
		border: none;
	}

	.ant-descriptions-item {
		padding-bottom: 0 !important;
	}

	.storyMeta .ant-descriptions-item-container,
	.storyMeta .ant-descriptions-item-container > * {
		font-size: 1em !important;
	}
</style>
<style scoped>
	.stats {
		padding-top: 0.25em;
	}

	.stats > * + * {
		margin-left: 0.5em;
	}

	.stats > * > * + * {
		margin-left: 0.5em;
	}

	.headerthing > * + * {
		margin-left: 0.3em;
		font-size: 0.9em !important;
	}

	hr {
		background-color: #aaa !important;
		border: none !important;
	}

	.ficmasBlurb {
		background-color: #13b658;
		color: white;
		/* border-radius:  */
	}

	.ficmasBlurb a {
		color: #000;
		font-weight: bold;
	}

	.ficmasBlurb a:hover {
		text-decoration: underline;
	}

	.storyMeta {
		display: flex;
		flex-direction: column;
		font-size: 0.857em !important;
	}

	.storyMeta .outer {
		display: flex;
		flex-direction: column;
		margin-top: 0.5em;
	}

	.storyMeta .inner > * + *::before {
		content: "♪";
		color: #ff2883;
		margin: 0 0.7em;
	}
</style>