135 lines
4.3 KiB
HTML
135 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.post.Title}} - Blog</title>
|
|
<link rel="stylesheet" href="/static/css/material.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header__content">
|
|
<a href="/" class="header__logo">📝 Blog</a>
|
|
<nav class="header__nav">
|
|
<a href="/">Home</a>
|
|
<a href="#about">About</a>
|
|
<a href="/feed">RSS Feed</a>
|
|
<a href="/dashboard">Dashboard</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container" style="padding: 40px 16px; max-width: 800px;">
|
|
<article>
|
|
<header style="margin-bottom: 40px;">
|
|
<h1 style="margin-top: 0;">{{.post.Title}}</h1>
|
|
|
|
<div class="post-meta" style="margin: 20px 0;">
|
|
<span>By {{.author}}</span>
|
|
<span>{{.post.CreatedAt.Format "2006-01-02"}}</span>
|
|
{{if .post.Category}}
|
|
<span><a href="/category/{{.post.Category}}">{{.post.Category}}</a></span>
|
|
{{end}}
|
|
<span>{{.commentCount}} comments</span>
|
|
</div>
|
|
|
|
{{if .post.Tags}}
|
|
<div class="tags">
|
|
{{range .post.Tags}}
|
|
<a href="/tag/{{.}}" class="tag">{{.}}</a>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</header>
|
|
|
|
<div style="
|
|
line-height: 1.8;
|
|
color: var(--md-sys-color-on-background);
|
|
margin-bottom: 40px;
|
|
">
|
|
{{.post.Content}}
|
|
</div>
|
|
</article>
|
|
|
|
<hr style="border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 40px 0;">
|
|
|
|
<section style="margin: 40px 0;">
|
|
<h2>Comments</h2>
|
|
|
|
<form id="comment-form" style="background: var(--md-sys-color-surface-variant); padding: 24px; border-radius: 12px; margin-bottom: 24px;">
|
|
<div class="form-group">
|
|
<label for="comment-content">Leave a comment</label>
|
|
<textarea
|
|
id="comment-content"
|
|
name="content"
|
|
placeholder="Your comment (will be moderated)"
|
|
required
|
|
style="min-height: 100px;"
|
|
></textarea>
|
|
</div>
|
|
<button type="submit" class="button button--primary">Post Comment</button>
|
|
</form>
|
|
|
|
<div id="comments-list">
|
|
<p style="color: var(--md-sys-color-on-surface-variant); font-style: italic;">
|
|
Comments are moderated and will appear after approval.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--md-sys-color-outline-variant);">
|
|
<nav style="display: flex; justify-content: space-between;">
|
|
<a href="/" class="button button--secondary">← Back to posts</a>
|
|
</nav>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="footer__content">
|
|
<div class="footer__section">
|
|
<h4>About This Post</h4>
|
|
<p>Published on {{.post.CreatedAt.Format "January 2, 2006"}}.
|
|
{{if ne .post.UpdatedAt .post.CreatedAt}}
|
|
Updated on {{.post.UpdatedAt.Format "January 2, 2006"}}.
|
|
{{end}}
|
|
</p>
|
|
</div>
|
|
<div class="footer__section">
|
|
<h4>Share</h4>
|
|
<ul>
|
|
<li><a href="https://twitter.com/intent/tweet?url={{.post.Slug}}&text={{.post.Title}}" target="_blank">Share on X</a></li>
|
|
<li><a href="https://www.linkedin.com/sharing/share-offsite/?url={{.post.Slug}}" target="_blank">Share on LinkedIn</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer__bottom">
|
|
<p>© 2024. Self-hosted with care.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
<script>
|
|
document.getElementById('comment-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const content = document.getElementById('comment-content').value;
|
|
const postID = '{{.post.ID}}';
|
|
|
|
try {
|
|
const result = await api.post('/comments', {
|
|
post_id: postID,
|
|
content: content
|
|
});
|
|
|
|
if (result.success) {
|
|
Toast.show('Comment submitted! It will appear after moderation.', 'success');
|
|
document.getElementById('comment-form').reset();
|
|
}
|
|
} catch (error) {
|
|
Toast.show('Error posting comment', 'error');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|