rimgo/views/post.hbs

128 lines
3.6 KiB
Handlebars
Raw Normal View History

2022-01-17 20:23:04 +00:00
<!DOCTYPE html>
<html lang="en">
2022-01-17 20:48:24 +00:00
2022-01-17 20:23:04 +00:00
<head>
2022-02-02 15:48:25 +00:00
<title>
{{#if post.Title}}
{{post.Title}} -
2022-02-02 15:48:25 +00:00
{{/if}}
rimgo
2023-06-10 16:04:29 +00:00
</title>
2022-01-18 23:31:15 +00:00
2022-01-17 20:23:04 +00:00
{{> partials/head }}
</head>
2022-01-17 20:48:24 +00:00
2023-06-10 16:04:29 +00:00
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
2022-01-17 20:48:24 +00:00
<section class="my-4 w-full flex flex-col items-center">
{{> partials/searchBar }}
</section>
2022-08-05 00:14:17 +00:00
<header>
2023-06-10 16:04:29 +00:00
<h1 class="text-3xl font-bold">{{post.Title}}</h1>
<p>{{post.CreatedAt}}</p>
2022-08-05 00:14:17 +00:00
</header>
2022-08-05 00:14:17 +00:00
<main>
<div class="flex flex-col sm:flex-row my-4 w-full justify-between">
<div class="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center">
{{#if post.User.Username}}
<a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
<img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />
<p>
<b>{{post.User.Username}}</b>
</p>
</a>
2022-01-26 21:28:03 +00:00
{{/if}}
<div class="flex gap-2 items-center">
<div class="flex flex-center gap-2">
<img class="icon invert" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
<p>{{post.Views}}</p>
</div>
{{#if post.SharedWithCommunity}}
<div class="flex flex-center gap-2">
<img class="icon invert" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
<p>{{post.Upvotes}}</p>
</div>
<div class="flex flex-center gap-2">
<img class="icon invert" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
<p>{{post.Downvotes}}</p>
</div>
{{/if}}
</div>
2022-01-17 22:11:33 +00:00
</div>
{{#noteq next ""}}
<a href="{{next}}" class="self-end">
<button class="p-2 rounded-lg bg-slate-600">Next &gt;</button>
</a>
{{/noteq}}
2022-01-17 22:11:33 +00:00
</div>
<div class="flex flex-center flex-col break-words">
2022-10-13 21:29:05 +00:00
{{#each post.Media}}
{{#if this.Title}}
2023-06-10 16:04:29 +00:00
<h4 class="font-bold">{{this.Title}}</h4>
2022-10-13 21:29:05 +00:00
{{/if}}
2022-01-18 00:25:49 +00:00
2022-01-18 21:45:57 +00:00
{{#equal this.Type "image"}}
2023-06-10 16:04:29 +00:00
<img class="my-2 max-h-96 object-contain" src="{{this.Url}}" loading="lazy">
2022-01-18 21:45:57 +00:00
{{/equal}}
{{#equal this.Type "video"}}
2023-06-10 16:04:29 +00:00
<video class="my-2 max-h-96 object-contain" controls loop>
2022-01-18 21:45:57 +00:00
<source type="{{this.MimeType}}" src="{{this.Url}}" />
</video>
{{/equal}}
2022-10-13 21:29:05 +00:00
{{#if this.Description}}
<p>{{{this.Description}}}</p>
{{/if}}
{{/each}}
2022-10-13 21:29:05 +00:00
</div>
2022-01-18 23:05:06 +00:00
2022-02-21 17:14:00 +00:00
{{#if post.tags}}
2023-08-10 16:16:31 +00:00
<div class="flex gap-2 my-2 flex-wrap">
2022-07-22 16:20:51 +00:00
<style nonce="{{nonce}}">
{{#each post.tags}}
.{{this.BackgroundId}} { background-image: url('{{this.Background}}') }
{{/each}}
2022-07-22 16:20:51 +00:00
</style>
2022-02-21 17:14:00 +00:00
{{#each post.tags}}
<a href="/t/{{this.Tag}}">
2023-06-10 16:04:29 +00:00
<div class="rounded-md p-4 min-w-[110px] bg-slate-500 {{this.BackgroundId}}">
2023-08-10 16:16:31 +00:00
<p class="font-bold text-white text-center">
{{#if tag.Display}}
{{this.Display}}
{{else}}
{{this.Tag}}
{{/if}}
</p>
2022-02-21 17:14:00 +00:00
</div>
</a>
{{/each}}
</div>
{{/if}}
2022-08-05 00:14:17 +00:00
</main>
2022-02-21 17:14:00 +00:00
2022-08-05 00:14:17 +00:00
<section>
2022-01-24 01:59:29 +00:00
{{#if comments}}
2022-01-18 23:05:06 +00:00
<div>
2023-06-10 16:04:29 +00:00
<input id="comments__expandBtn" type="checkbox" checked>
<label class="comments__expandBtn__label my-2 py-4 border-solid border-t-2 border-slate-400"
for="comments__expandBtn">
2023-06-10 16:04:29 +00:00
<h3 class="text-xl font-bold">Comments ({{post.Comments}})</h3>
<span class="text-xl font-bold"></span>
2022-01-18 23:05:06 +00:00
</label>
2023-06-10 16:04:29 +00:00
<div class="comments flex flex-col gap-2">
2022-01-18 23:05:06 +00:00
{{#each comments}}
{{> partials/comment }}
{{/each}}
</div>
</div>
2022-01-24 01:59:29 +00:00
{{/if}}
2022-08-05 00:14:17 +00:00
</section>
2022-01-17 22:11:33 +00:00
{{> partials/footer }}
2022-01-17 20:23:04 +00:00
</body>
2022-01-17 20:48:24 +00:00
2022-01-17 20:23:04 +00:00
</html>