shack/components/posts/post.vue

<template>
	<div class="post">
		<a
			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}`"
			target="_blank"
			class="title-link"
		>
			<img
				class="thumbnail"
				:src="blockedIcon"
			>
		</a>

		<div class="body">
			<div class="header">
				<h2 class="title">
					<a
						:href="`/s/${post.shelf.slug}/post/${post.id}`"
						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/shack/post/${post.id}`"
					class="link comments"
				>{{ post.commentCount }} comments</a>
			</div>
		</div>

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

<script setup>
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';

const { now } = usePageContext();

defineProps({
	post: {
		type: Object,
		default: null,
	},
});
</script>

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

	& :hover {
		cursor: pointer;

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

.body {
	margin-left: 1rem;
}

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

.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;
	padding: 1rem;
	border-radius: .25rem;
	margin: .5rem;
	background: var(--grey-light-10);
	opacity: .25;
}

.meta {
	display: flex;
	gap: 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>