blog: reading mode fixes, add highight.js for codeblocks

This commit is contained in:
ari melody 2025-07-05 15:11:51 +01:00
parent faf6095d16
commit ddbf3444eb
Signed by: ari
GPG key ID: CF99829C92678188
26 changed files with 1777 additions and 25 deletions

View file

@ -14,10 +14,14 @@
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/index.css">
<link rel="stylesheet" href="/style/blogpost.css">
<link rel="stylesheet" href="/vendor/highlight/styles/ari.css">
<script src="/vendor/highlight/highlight.min.js" defer></script>
{{end}}
{{define "content"}}
<main>
<!--
<div id="blog-sidebar">
<ul>
<li>
@ -75,26 +79,25 @@
{{end}}
</ul>
</div>
-->
<div id="blog-container">
<article class="blog">
<div id="blog-header">
<article id="blog">
<header>
<h1 class="typeout"># {{.Title}}</h1>
<p class="blog-author">by <a href="/blog?author={{.Author.Username}}">{{.Author.Username}} <img src="/img/favicon.png" alt="{{.Author.Username}}'s avatar" width="32" height="32"/></a></p>
<p class="blog-author">by <a href="/blog?author={{.Author.Username}}">{{.Author.Username}} <img src="/img/favicon.png" alt="" aria-hidden="true" width="32" height="32"/></a></p>
<p class="blog-date">posted {{.PrintDate}}{{if .ModifiedAt.Valid}} <span class="blog-modified-date">&bull; updated {{.PrintModifiedDate}}</span>{{end}}</p>
</div>
</header>
<hr>
<div id="blog-content">
{{.HTML}}
</div>
{{.HTML}}
</article>
{{if ne .BlueskyURL ""}}
<hr>
<div id="interactions">
<button class="likes" aria-label="{{.Likes}} likes">
<a href="{{.BlueskyURL}}" class="button likes" aria-label="{{.Likes}} likes">
<div class="dark-only">
<img src="/img/blog/like-dark.svg" alt="" width="32" height="32">
</div>
@ -102,8 +105,8 @@
<img src="/img/blog/like-light.svg" alt="" width="32" height="32">
</div>
{{.Likes}}
</button>
<button class="boosts" aria-label="{{.Boosts}} boosts">
</a>
<a href="{{.BlueskyURL}}" class="button boosts" aria-label="{{.Boosts}} boosts">
<div class="dark-only">
<img src="/img/blog/boost-dark.svg" alt="" width="32" height="32">
</div>
@ -111,7 +114,7 @@
<img src="/img/blog/boost-light.svg" alt="" width="32" height="32">
</div>
{{.Boosts}}
</button>
</a>
<p class="comment-callout">
join the conversation on