first commit, mate!

2026-08-08 14:43:59 +08:00
commit 852613586f
19 changed files with 3455 additions and 0 deletions
@@ -0,0 +1,134 @@
+<!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>&copy; 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>