shack/components/posts/post.vue

<template>
	<div class="post">
		<div class="votes noselect">
			<div
				class="vote bump"
				:class="{ active: hasBump }"
				title="Bump"
				@click="submitVote(1)"
			>+</div>

			<div
				class="tally"
				:title="`${post.vote.total} ${post.vote.total === 1 ? 'vote' : 'votes'}`"
			>{{ tally }}</div>

			<div
				class="vote sink"
				:class="{ active: hasSink }"
				title="Sink"
				@click="submitVote(-1)"
			>-</div>
		</div>

		<a
			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
			target="_blank"
			class="title-link"
		>
			<img
				v-if="post.hasThumbnail"
				class="thumbnail"
				:src="`/media/thumbnails/${post.id}.jpeg`"
			>

			<img
				v-else
				class="thumbnail missing"
				:src="blockedIcon"
			>
		</a>

		<div class="body">
			<div class="header">
				<h2 class="title">
					<a
						:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
						class="title-link"
					>{{ post.title }}</a>
				</h2>

				<a
					v-if="post.link"
					:href="post.link"
					target="_blank"
					class="link"
				>{{ post.link }}</a>
			</div>

			<div class="meta">
				<a
					:href="`/s/${post.shelf.slug}`"
					class="shelf link"
				>s/{{ post.shelf.slug }}</a>

				<a
					:href="`/user/${post.user.username}`"
					class="username link"
				>u/{{ post.user.username }}</a>

				<span
					:title="format(post.createdAt, 'MMMM d, yyyy hh:mm:ss')"
					class="timestamp"
				>{{ formatDistance(post.createdAt, now, { includeSeconds: true }) }} ago</span>
			</div>

			<div class="actions">
				<a
					:href="`/s/${post.shelf.slug}/post/${post.id}`"
					class="link comments"
				>{{ post.commentCount }} comments</a>
			</div>
		</div>

		<a
			:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
			class="fill"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { format, formatDistance } from 'date-fns';

import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-disable-line import/no-unresolved
import { usePageContext } from '../../renderer/usePageContext';
import * as api from '../../assets/js/api';

const { me, now } = usePageContext();

const props = defineProps({
	post: {
		type: Object,
		default: null,
	},
	shelf: {
		type: Object,
		default: null,
	},
});

const tally = ref(props.post.vote.tally);
const hasBump = ref(props.post.vote.bump);
const hasSink = ref(props.post.vote.sink);
const voting = ref(false);

async function submitVote(value) {
	if (!me || voting.value) {
		return;
	}

	voting.value = true;

	const undo = (value > 0 && hasBump.value) || (value < 0 && hasSink.value);
	const vote = await api.post(`/posts/${props.post.id}/votes`, { value: undo ? 0 : value });

	tally.value = vote.tally;
	hasBump.value = vote.bump;
	hasSink.value = vote.sink;

	voting.value = false;
}
</script>

<style scoped>
.post {
	display: flex;
	color: var(--text);
	border-radius: .25rem;
	margin-bottom: .25rem;
	background: var(--background);
	text-decoration: none;
	overflow: hidden;

	& :hover {
		cursor: pointer;

		.title {
			color: var(--text);
		}
	}
}

.body {
	margin-left: 1rem;
}

.header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.title {
	display: inline-block;
	padding: .25rem 0;
	margin: .25rem 1rem 0 0;
	font-size: 1rem;
	font-weight: bold;
	color: var(--grey-dark-30);
}

.title-link {
	color: inherit;
	text-decoration: none;
}

.thumbnail {
	width: 7rem;
	height: 4rem;
	box-sizing: border-box;
	border-radius: .25rem;
	margin: .5rem;
	object-fit: cover;

	&.missing {
		padding: 1rem;
		background: var(--grey-light-10);
		opacity: .25;
		object-fit: contain;
	}
}

.votes {
	width: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.vote,
.tally {
	display: flex;
	align-items: center;
	height: 1rem;
	font-weight: bold;
}

.vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1rem;
	box-sizing: border-box;
	padding: .6rem;
	margin: .25rem 0;
	border-radius: .5rem;
	background: var(--shadow-weak-40);
}

.tally {
	color: var(--shadow-strong-20);
	font-size: .9rem;
}

.bump.active {
	color: var(--text-light);
	background: var(--bump);
}

.sink.active {
	color: var(--text-light);
	background: var(--sink);
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin-bottom: .25rem;
	font-size: .9rem;
}

.username {
	color: inherit;
}

.shelf {
	color: inherit;
	font-weight: bold;
}

.timestamp {
	color: var(--grey-dark-20);
}

.comments {
	color: inherit;
	font-size: .9rem;
}

.fill {
	flex-grow: 1;
}
</style>