style improvements and bluesky comments!

This commit is contained in:
ari melody 2025-04-02 23:49:20 +01:00
parent 1a8dc4d9ce
commit 835dd344ca
Signed by: ari
GPG key ID: 60B5F0386E3DDB7E
7 changed files with 393 additions and 13 deletions

View file

@ -24,11 +24,63 @@
<hr>
{{.HTML}}
<hr>
<!-- comments section here! -->
</article>
<hr>
<div class="interactions">
<span class="likes">❤️ {{.Likes}}</span>
<span class="reposts">🔁 {{.Reposts}}</span>
<a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
<!-- TODO: mastodon support -->
<a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
</div>
<div class="comments">
{{range .Comments}}
{{template "comment" .}}
{{end}}
</div>
<script type="module" src="/script/blog.js"></script>
</main>
{{end}}
{{define "comment"}}
<article class="comment">
<div class="comment-hover">
<div class="comment-header">
<a href="https://bsky.app/profile/{{.Post.Author.DID}}" target="_blank">
<img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar">
<span class="display-name">{{.Post.Author.DisplayName}}</span>
<span class="handle">@{{.Post.Author.Handle}}</span>
</a>
</div>
<a class="comment-body" href="{{.Post.BskyURL}}" target="_blank">
<div>
<p class="comment-text">{{.Post.Record.Text}}</p>
{{if .Post.HasImage}}
<p class="comment-images">
{{range .Post.Embed.Media.Images}}
<a href="{{.Fullsize}}" target="_blank">[image]</a>
{{end}}
</p>
{{end}}
</div>
<div class="comment-footer">
<!-- <span>{{.Post.LikeCount}} likes</span> -->
<!-- <span>{{.Post.RepostCount}} reposts</span> -->
<span class="comment-date">{{.Post.Record.CreatedAtPrint}}</span>
</div>
</a>
</div>
<div class="comment-replies">
{{range .Replies}}
{{template "comment" .}}
{{end}}
</div>
</article>
{{end}}