<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 }}’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>