pixelfed/resources/assets/components/landing/partials/PostCard.vue

<template>
	<div class="timeline-status-component">
		<div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;">
			<div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
				<div class="media align-items-center">
					<a :href="post.account.url" class="mr-2" target="_blank">
						<img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;">
					</a>

					<div class="media-body d-flex justify-content-between align-items-center">
						<p class="font-weight-bold username mb-0">
							<a :href="post.account.url" class="text-white" target="_blank">&commat;{{ post.account.username }}</a>
						</p>

						<p class="font-weight-bold mb-0">
							<a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500" target="_blank">Posted {{ timeago(post.created_at) }} ago</a>
							<a v-else :href="post.url" class="text-bluegray-400" target="_blank">View Post</a>
						</p>
					</div>
				</div>
			</div>
			<div class="card-body m-0 p-0">
				<post-content :status="post" />
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import PostContent from './../../partials/post/PostContent';

	export default {
		props: [
			'post',
			'range'
		],

		components: {
			'post-content': PostContent,
		},

		methods: {
			timestampToAgo(ts) {
				let date = Date.parse(ts);
				let seconds = Math.floor((new Date() - date) / 1000);
				let interval = Math.floor(seconds / 63072000);
				if (interval < 0) {
					return "0s";
				}
				if (interval >= 1) {
					return interval + "y";
				}
				interval = Math.floor(seconds / 604800);
				if (interval >= 1) {
					return interval + "w";
				}
				interval = Math.floor(seconds / 86400);
				if (interval >= 1) {
					return interval + "d";
				}
				interval = Math.floor(seconds / 3600);
				if (interval >= 1) {
					return interval + "h";
				}
				interval = Math.floor(seconds / 60);
				if (interval >= 1) {
					return interval + "m";
				}
				return Math.floor(seconds) + "s";
			},

			timeago(ts) {
				let short = this.timestampToAgo(ts);
				return short;
				if(
					short.endsWith('s') ||
					short.endsWith('m') ||
					short.endsWith('h')
				) {
					return short;
				}
				const intl = new Intl.DateTimeFormat(undefined, {
					year:  'numeric',
					month: 'short',
					day:   'numeric',
					hour: 'numeric',
					minute: 'numeric'
				});
				return intl.format(new Date(ts));
			},
		}
	}
</script>