ritual.sh/layouts/blog/single.html

115 lines
3.7 KiB
HTML

{{ define "main" }}
<div class="blogs-page">
<div class="blogs-container">
<div class="blogs-screen">
<div class="blogs-content">
<nav class="blog-navigation">
<a href="/blog/" class="nav-link back-link">← All Blog Posts</a>
</nav>
<article class="blog-post-card">
<h1 class="blog-title">
{{ .Title }} {{ if .Date }}
<span class="blog-date">{{ .Date.Format "02-01-2006" }}</span>
{{ end }}
</h1>
{{ if .Params.tags }}
<div class="blog-tags">
{{ range .Params.tags }}
<span class="tag">{{ . }}</span>
{{ end }}
</div>
{{ end }}
<div class="blog-summary">{{ .Content }}</div>
</article>
<section class="blog-contact-section">
<h2 class="contact-title">Contact</h2>
<div class="contact-content">
<p>
If you found this interesting, have any comments, questions,
corrections, or just fancy saying "hello" please feel free to get
in touch.
</p>
<div class="contact-email">
<span class="contact-label">Email:</span>
<a href="mailto:dan@ritual.sh">dan@ritual.sh</a>
</div>
<div class="contact-pgp">
<span class="contact-label">PGP Public Key:</span>
<div class="pgp-actions">
<a
href="/publickey.asc"
download
class="pgp-button download-key"
>
<span class="button-icon"></span> Download
</a>
<button id="copy-pgp-key" class="pgp-button copy-key">
<span class="button-icon"></span> Copy to Clipboard
</button>
</div>
<div id="copy-feedback" class="copy-feedback"></div>
</div>
</div>
</section>
<nav class="blog-post-navigation">
<div class="post-nav-links">
{{ with .PrevInSection }}
<a href="{{ .Permalink }}" class="nav-link prev-post"
>← {{ .Title }}</a
>
{{ else }}
<span class="nav-link disabled">← Previous</span>
{{ end }} {{ with .NextInSection }}
<a href="{{ .Permalink }}" class="nav-link next-post"
>{{ .Title }} →</a
>
{{ else }}
<span class="nav-link disabled">Next →</span>
{{ end }}
</div>
</nav>
</div>
</div>
<div class="window">{{ partial "elements/window.html" . }}</div>
<div class="blogs-lavalamp">{{ partial "elements/lavalamp.html" . }}</div>
</div>
</div>
<script src="/js/footnote-scroll.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const copyButton = document.getElementById("copy-pgp-key");
const feedback = document.getElementById("copy-feedback");
if (copyButton) {
copyButton.addEventListener("click", async function () {
try {
const response = await fetch("/publickey.asc");
const pgpKey = await response.text();
await navigator.clipboard.writeText(pgpKey);
feedback.textContent = "PGP key copied to clipboard!";
feedback.classList.add("show", "success");
setTimeout(() => {
feedback.classList.remove("show");
}, 3000);
} catch (err) {
feedback.textContent = "Failed to copy key";
feedback.classList.add("show", "error");
setTimeout(() => {
feedback.classList.remove("show");
}, 3000);
}
});
}
});
</script>
{{ end }}