</div>
<div class="user-info">
<span class="username">👤 ${escapeHTML(username)}</span>
- <a href="/" class="admin-btn">View Blog</a>
<a href="/logout" class="logout-btn">Logout</a>
</div>
</div>
.username {
color: #666;
}
- .logout-btn, .login-btn, .admin-btn {
+ .logout-btn, .login-btn {
color: white;
padding: 8px 16px;
border: none;
}
.logout-btn { background: #E6521F; }
.logout-btn:hover { background: #EA2F14; }
- .login-btn { background: #B4E197; }
- .login-btn:hover { background: #83BD75; }
- .admin-btn { background: #234C6A; }
- .admin-btn:hover { background: #1B3C53; }
+ .login-btn { background: #289672; }
+ .login-btn:hover { background: #1E6F5C; }
h1 { font-size: 2em; margin-bottom: 10px; }
h1 a { color: #333; text-decoration: none; }
h1 a:hover { color: #555; }
font-size: 1em;
}
textarea {
- min-height: 800px;
+ min-height: 500px;
resize: vertical;
font-family: 'Courier New', monospace;
}
visitCount: number,
): Promise<string> {
const posts = await getAllPosts();
- const sortedPosts = posts.sort((a, b) => b.timestamp - a.timestamp);
-
- const postsHTML = sortedPosts.length > 0
- ? `<h2>Recent Posts (${sortedPosts.length})</h2>` +
- sortedPosts.slice(0, 5).map((post) => {
- const excerpt = trimMD(post.content).slice(0, 100) +
- "...";
- return `
- <div class="post-item" onclick="window.location='/post/${post.id}'">
- <a href="/post/${post.id}" class="post-title">${
- escapeHTML(post.title)
- }</a>
- <div class="post-meta">
- <span>${new Date(post.timestamp).toLocaleDateString()}</span>
- </div>
- <div class="post-excerpt">${escapeHTML(excerpt)}</div>
- </div>
- `;
- }).join("")
- : '<div class="empty">No posts yet. Create your first post below!</div>';
const metricsHTML = `
<section class="metrics-section">
<div class="metrics-label">Total visits</div>
<div class="metrics-value">${visitCount.toLocaleString()}</div>
</div>
+ <div class="metrics-card">
+ <div class="metrics-label">Total posts</div>
+ <div class="metrics-value">${posts.length}</div>
+ </div>
</div>
</section>
`;
</form>
${metricsHTML}
-
- <section>
- ${postsHTML}
- </section>
`);
}