From 6f770a1cb8fcf7329f7558e852e7fc4e6246edde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 10 Oct 2023 22:07:57 -0400
Subject: [PATCH] style(components): fix formatting on story listing components

---
 components/listings/metaItem.vue    |  18 +-
 components/listings/singleStory.vue | 508 +++++++++++++++-------------
 components/listings/stories.vue     | 115 ++++---
 3 files changed, 340 insertions(+), 301 deletions(-)

diff --git a/components/listings/metaItem.vue b/components/listings/metaItem.vue
index dd94a0b..dd4839e 100644
--- a/components/listings/metaItem.vue
+++ b/components/listings/metaItem.vue
@@ -1,9 +1,9 @@
-<script setup lang="ts">
-const props = defineProps<{ label?: string }>()
-</script>
-
-<template>
-	<span>
-		<b>{{ label }}</b>: <slot/>
-	</span>
-</template>
\ No newline at end of file
+<script setup lang="ts">
+	const props = defineProps<{ label?: string }>();
+</script>
+
+<template>
+	<span>
+		<b>{{ label }}</b> : <slot />
+	</span>
+</template>
diff --git a/components/listings/singleStory.vue b/components/listings/singleStory.vue
index e92375e..edd684b 100644
--- a/components/listings/singleStory.vue
+++ b/components/listings/singleStory.vue
@@ -1,240 +1,268 @@
-<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>
\ No newline at end of file
+<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");
+	let prop = defineProps<{ story: IStory; last?: boolean }>();
+	const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
+	// 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">
+				<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>
diff --git a/components/listings/stories.vue b/components/listings/stories.vue
index d026c92..95c2280 100644
--- a/components/listings/stories.vue
+++ b/components/listings/stories.vue
@@ -1,52 +1,63 @@
-<script setup lang="ts">
-;
-import singleStory from '~/components/listings/singleStory.vue';
-const route = useRoute()
-let curPage = ref(route.query.page || 1)
-const props = defineProps<{ prefix: string; }>()
-let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
-	query: {
-		page: curPage
-	}
-})
-let rdata = ref(data)
-const pagiChange = async (page, pageSize) => {
-	curPage.value = page;
-	// await navigateTo({
-	// 	path: useRoute().fullPath,
-	// 	query: {
-	// 		page
-	// 	}
-	// })
-	// let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
-	// 	query: {
-	// 		page: curPage
-	// 	}
-	// })
-	// rdata.value = data;
-}
-</script>
-<template>
-	<a-list :pagination="{
-		defaultPageSize: 20,
-		total: rdata.total,
-		defaultCurrent: curPage as number,
-		// onChange: pagiChange,
-		hideOnSinglePage: true,
-		showSizeChanger: false
-	}" :data-source="rdata.stories" item-layout="vertical">
-		<template #renderItem="{ item }">
-			<!-- {{ item.title }} -->
-			<single-story :story="item"/>
-		</template>
-	</a-list>
-</template>
-<style scoped>
-.ant-list-items>*+* {
-	margin-top: 1.2em;
-}
-
-.ant-pagination {
-	text-align: center;
-}
-</style>
\ No newline at end of file
+<script setup lang="ts">
+	import singleStory from "~/components/listings/singleStory.vue";
+	import { IStory } from "~/models/stories";
+	const route = useRoute();
+	let curPage = ref(route.query.page || 1);
+	const props = defineProps<{ prefix?: string; items?: IStory[] }>();
+	let data;
+	if (!props.prefix) {
+		data = props.items;
+	} else if (!props.items) {
+		data = (
+			await useApiFetch<any>(`${props.prefix}`, {
+				query: {
+					page: curPage,
+				},
+			})
+		).data;
+	}
+	let rdata = ref(data);
+	const pagiChange = async (page, pageSize) => {
+		curPage.value = page;
+		// await navigateTo({
+		// 	path: useRoute().fullPath,
+		// 	query: {
+		// 		page
+		// 	}
+		// })
+		// let {data: data } = await useApiFetch(`${props.prefix}/stories`, {
+		// 	query: {
+		// 		page: curPage
+		// 	}
+		// })
+		// rdata.value = data;
+	};
+</script>
+<template>
+	<a-list
+		:pagination="{
+			defaultPageSize: 20,
+			total: rdata.total,
+			defaultCurrent: curPage as number,
+			// onChange: pagiChange,
+			hideOnSinglePage: true,
+			showSizeChanger: false,
+		}"
+		:data-source="rdata.stories"
+		item-layout="vertical"
+	>
+		<template #renderItem="{ item }">
+			<!-- {{ item.title }} -->
+			<single-story :story="item" />
+		</template>
+	</a-list>
+</template>
+<style scoped>
+	.ant-list-items > * + * {
+		margin-top: 1.2em;
+	}
+
+	.ant-pagination {
+		text-align: center;
+	}
+</style>