autonomous.contact/public/tabs/essays/essays.html

<style>
	#essays-container {
		padding: 1rem;
		max-width: 60rem;
		margin: 0 auto;
	}

	.essay-container {
		position: relative;
		display: grid;
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-columns: 1fr;
		grid-template-areas:
			"preview"
			"title"
			"info"
			"content"
			"newessay"
			"replies";
		padding: 1rem;
		border: 1px solid var(--border-subtle);
		overflow-y: hidden;
		transition: all ease-in-out 0.33s;
		margin-bottom: 2rem;
	}

	.essay-container .media-preview-container {
		grid-area: preview;
		max-height: 600px;
	}

	.essay-container .media-preview-container img {
		max-width: 100%;
		max-height: 100%;
	}

	.essay-container .info-container {
		grid-area: info;
		display: flex;
		margin-left: 1.8rem;
	}

	.essay-container .info-container .username-container {
		display: block;
		margin: 0 0.5rem;
		font-weight: bold;
		align-content: center;
	}

	.essay-container .info-container .datetime-container {
		display: block;
		margin: 0 0.5rem;
		align-content: center;
	}

	.essay-container .info-container .datetime-container .long {
		font-size: x-small;
		text-transform: uppercase;
	}

	.essay-container .info-container .datetime-container .short {
		font-size: xx-small;
		visibility: hidden;
		display: none;
	}

	.essay-container .title-container {
		grid-area: title;
		padding-left: 1rem;
		margin: 1rem 0;
		font-size: xx-large;
	}

	.essay-container .content-container {
		grid-area: content;
		padding-left: 0.25rem;
		margin: 1rem 0;
		font-size: large;
	}

	.essay-container button[commandfor="eventactionspopover"] {
		position: absolute;
		bottom: 0.25rem;
		right: 0.25rem;
		border: none;
	}

	.essay-container .new-essay-container {
		grid-area: newessay;
		display: none;
	}

	.essay-container .replies-container {
		grid-area: replies;
	}
</style>

<div id="essays" class="tab">
	<input
		type="radio"
		name="top-level-tabs"
		id="essay-tab-input"
		class="tab-switch"
		data-view="essays"
	/>
	<label for="essay-tab-input" class="tab-label"
		><div class="icon essay"></div>
		<div class="label">Essays</div>
	</label>
	<div class="tab-content">
		<div id="essays-container" class="container">
			<!-- #include file="./README.md" -->
			<!-- #include file="./new_essay.html" -->

			<div
				id="essays-list"
				data-feed
				data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.essays.read' ) !== -1"
				data-source="/api/topics/${ document.body.dataset.topic }/events?type=essay,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
				data-longpolling="true"
				data-reverse="true"
				data-insert="prepend"
				data-autoscroll="true"
			>
				<script>
					{
						const feed = document.currentScript.closest("[data-feed]");

						APP.on("topic_changed", () => { feed.__reset && feed.__reset(); });
						APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });

						feed.__target_element = (item) => {
							let target = feed;
							switch (item.type) {
								case "reaction":
									target = document.querySelector(
										`.essay-container[data-event_id='${item.parent_id}'] > .reactions-container`,
									);
									break;
								case "essay":
								default:
									target = feed;
									break;
							}

							return target;
						};

						feed.__context = async (item) => {
							const essay_datetime = datetime_to_local(item.timestamps.created);

							return {
								event: item,
								essay: item,
								creator: await APP.USERS.get(item.creator_id),
								essay_datetime,
							};
						};
					}
				</script>
				<template data-for_type="essay">
					<div
						id="${context.essay.id}"
						class="essay-container"
						data-event_id="${context.essay.id}"
						data-creator_id="${context.creator.id}"
						data-essay_id="${context.essay.id}"
						data-temp_id="${context.essay.meta?.temp_id ?? ''}"
					>
						<div class="media-preview-container">
							${context.essay.data?.media?.length ?
							context.essay.data.media.map(function(url) { return `<img
								src="${url}"
							/>` }).join('\n') : ''}
						</div>

						<div class="info-container">
							<div class="avatar-container inline medium">
								<img
									src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
									alt="user avatar"
								/>
							</div>
							<div class="username-container">
								<span class="username">${context.creator.username}</span>
							</div>
							<div class="datetime-container">
								<span class="long">${context.essay_datetime.long}</span>
								<span class="short">${context.essay_datetime.short}</span>
							</div>
						</div>
						<div class="title-container">${context.essay.data.title}</div>
						<div class="content-container">
							${htmlify(md_to_html(context.essay.data.essay))}
						</div>
						<div class="reactions-container"></div>
						<button class="icon more" commandfor="eventactionspopover"></button>
					</div>
				</template>
				<template data-for_type="reaction">
					<div
						id="${context.event.id}"
						class="reaction-container"
						data-event_id="${context.event.id}"
						data-creator_id="${context.creator.id}"
						data-temp_id="${context.event.meta?.temp_id ?? ''}"
					>
						<span class="reaction">${ context.event.data.reaction }</span>
					</div>
				</template>
			</div>
		</div>
	</div>
</div>