ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

blog sidebar, some cosmetic changes

Browse source
This commit is contained in:
ari melody 2025-06-23 20:38:28 +01:00
parent 3da0249555
commit 3d64333b4f
Signed by: ari
GPG key ID: CF99829C92678188
15 changed files with 202 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

114
view/blog.html
View file

@ -18,39 +18,99 @@
{{define "content"}}
<main>
<article class="blog">
<h1 class="typeout">{{.Title}}</h1>
<p class="blog-date">Posted by <a href="/blog/{{.AuthorID}}">{{.AuthorID}}</a> @ {{.PrintDate}}</p>
<div id="blog-sidebar">
<ul>
<li>
<a href="#copy-link" id="blog-copy-link" title="copy link">
<div class="dark-only">
<img src="/img/blog/copy-link-dark.svg" alt="" width="36" height="36">
</div>
<div class="light-only">
<img src="/img/blog/copy-link-light.svg" alt="" width="36" height="36">
</div>
</a>
</li>
{{if ne .BlueskyURL ""}}
<li>
<a href="{{.BlueskyURL}}" id="blog-share-bsky" title="share on bluesky">
<div class="dark-only">
<img src="/img/blog/bluesky-dark.svg" alt="" width="36" height="36">
</div>
<div class="light-only">
<img src="/img/blog/bluesky-light.svg" alt="" width="36" height="36">
</div>
</a>
</li>
<li>
<a href="{{.BlueskyURL}}" id="blog-like" title="like this post">
<div class="dark-only">
<img src="/img/blog/like-dark.svg" alt="" width="36" height="36">
</div>
<div class="light-only">
<img src="/img/blog/like-light.svg" alt="" width="36" height="36">
</div>
</a>
</li>
<li>
<a href="{{.BlueskyURL}}" id="blog-boost" title="boost this post">
<div class="dark-only">
<img src="/img/blog/boost-dark.svg" alt="" width="36" height="36">
</div>
<div class="light-only">
<img src="/img/blog/boost-light.svg" alt="" width="36" height="36">
</div>
</a>
</li>
<li>
<a href="#comments" id="blog-comments" title="comments">
<div class="dark-only">
<img src="/img/blog/comment-dark.svg" alt="" width="36" height="36">
</div>
<div class="light-only">
<img src="/img/blog/comment-light.svg" alt="" width="36" height="36">
</div>
</a>
</li>
{{end}}
</ul>
</div>
<div id="blog-container">
<article class="blog">
<h1 class="typeout">{{.Title}}</h1>
<p class="blog-date">Posted by <a href="/blog/{{.AuthorID}}">{{.AuthorID}}</a> @ {{.PrintDate}}</p>
<hr>
{{.HTML}}
</article>
{{if ne .BlueskyURL ""}}
<hr>
{{.HTML}}
</article>
<div id="interactions">
<span class="likes">❤️ {{.Likes}}</span>
<span class="reposts">🔁 {{.Reposts}}</span>
</div>
<hr>
<p class="comment-callout">
join the conversation on
<a class="bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
<!-- TODO: mastodon support -->
<!--
and
<a class="mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
-->
</p>
<div class="interactions">
<span class="likes">❤️ {{.Likes}}</span>
<span class="reposts">🔁 {{.Reposts}}</span>
</div>
<p class="comment-callout">
join the conversation on
<a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
<!-- TODO: mastodon support -->
<!--
or
<a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
-->
</p>
<div class="comments">
{{range .Comments}}
{{template "comment" .}}
<div id="comments">
{{range .Comments}}
{{template "comment" .}}
{{end}}
</div>
{{end}}
</div>
<script type="module" src="/script/blog.js"></script>
<script type="module" src="/script/blog.js"></script>
</div>
</main>
{{end}}
@ -59,7 +119,7 @@
<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">
<img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="32" height="32">
<span class="display-name">{{.Post.Author.DisplayName}}</span>
<span class="handle">@{{.Post.Author.Handle}}</span>
</a>