next/components/listings/singleStory.vue

<script lang="ts" setup>
import type { IStory } from "~/models/stories/index";
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")
let prop = defineProps<{ story: IStory, last?: boolean }>()
const idxo = ((prop.last || false) ? prop.story.chapters.length : 1) - 1
console.log("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;">
				<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
					{{ story.title }}
				</NuxtLink>
				<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>