Add metrics

diff --git a/main.ts b/main.ts
index a416f34b86ac1c0c429ab3b5c36a518a0fa69623..682cd96634b5dd6eee95b304206ab944ca288039 100644 (file)
--- a/main.ts
+++ b/main.ts
@@ -202,7 +202,6 @@ function renderHeader(username?: string) {
         </div>
         <div class="user-info">
           <span class="username">👤 ${escapeHTML(username)}</span>
         </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>
           <a href="/logout" class="logout-btn">Logout</a>
         </div>
       </div>


@@ -258,7 +257,7 @@ function renderHTML(content: string): string {
     .username {
       color: #666;
     }
     .username {
       color: #666;
     }

-    .logout-btn, .login-btn, .admin-btn {
+    .logout-btn, .login-btn {

       color: white;
       padding: 8px 16px;
       border: none;
       color: white;
       padding: 8px 16px;
       border: none;


@@ -270,10 +269,8 @@ function renderHTML(content: string): string {
     }
     .logout-btn { background: #E6521F; }
     .logout-btn:hover { background: #EA2F14; }
     }
     .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; }
     h1 { font-size: 2em; margin-bottom: 10px; }
     h1 a { color: #333; text-decoration: none; }
     h1 a:hover { color: #555; }


@@ -391,7 +388,7 @@ function renderHTML(content: string): string {
       font-size: 1em;
     }
     textarea { 
       font-size: 1em;
     }
     textarea { 

-      min-height: 800px; 
+      min-height: 500px; 

       resize: vertical;
       font-family: 'Courier New', monospace;
     }
       resize: vertical;
       font-family: 'Courier New', monospace;
     }


@@ -540,26 +537,6 @@ async function renderAdminPage(
   visitCount: number,
 ): Promise<string> {
   const posts = await getAllPosts();
   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">
 
   const metricsHTML = `
     <section class="metrics-section">


@@ -568,6 +545,10 @@ async function renderAdminPage(
           <div class="metrics-label">Total visits</div>
           <div class="metrics-value">${visitCount.toLocaleString()}</div>
         </div>
           <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>
   `;
       </div>
     </section>
   `;


@@ -599,10 +580,6 @@ function fn() {
     </form>
 
     ${metricsHTML}
     </form>
 
     ${metricsHTML}

-
-    <section>
-      ${postsHTML}
-    </section>

   `);
 }
 
   `);
 }