fix: rename notes to log

src/pages/log/index.astro

@@ -0,0 +1,96 @@
+---
+import "../../styles/global.css"
+import Layout from "../../layouts/Layout.astro"
+import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
+
+const posts = (await getCollection('log'))
+  .filter(post => !post.data.private)
+  .sort(
+    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+  );
+---
+
+<Layout>
+  <section class="max-w-7xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Log</h1>
+    <p class="text-md text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify max-w-3xl">
+      I used to think I was following a plan. Then I realized I’d mostly been running on momentum, studying, coding, doing, without really asking why. At some point, I stopped feeling in charge of my own path; everything became reaction. A reaction to schedules, deadlines, expectations.
+      <br>
+			Lately, I’ve been trying to rebuild some structure. To slow down, learn on purpose, and make sense of where all this effort is actually going. This log is part of that process,a way to connect the dots between theory and practice, body and mind, direction and doubt.
+      <br>
+       It’s how I’m trying to turn scattered effort into something deliberate again.
+    </p>
+  </section>
+
+  {/* Grid layout for posts */}
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+    {posts.map((post) => (
+      <article class="group rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-lg transition-all duration-300 overflow-hidden flex flex-col">
+        <a href={`/log/${post.id}/`} class="block flex flex-col h-full">
+          {/* Hero Image */}
+          {post.data.heroImage && (
+            <div class="aspect-video overflow-hidden">
+              <Image
+                src={post.data.heroImage} 
+                alt={post.data.title}
+                width={800}
+                height={450}
+                class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
+                loading="lazy"
+              />
+            </div>
+          )}
+          <div class="p-4 sm:p-6 flex flex-col flex-grow">
+            {/* Title */}
+            <h2 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors mb-2 line-clamp-2">
+              {post.data.title}
+            </h2>
+            {post.data.description && (
+              <p class="text-sm sm:text-base text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-3 leading-relaxed flex-grow">
+                {post.data.description}
+              </p>
+            )}
+            {post.data.tags && post.data.tags.length > 0 && (
+              <div class="flex flex-wrap gap-1.5 mb-4">
+                {post.data.tags.slice(0, 3).map((tag) => (
+                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors">
+                    #{tag}
+                  </span>
+                ))}
+                {post.data.tags.length > 3 && (
+                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-400">
+                    +{post.data.tags.length - 3}
+                  </span>
+                )}
+              </div>
+            )}
+            {post.data.pubDate && (
+              <div class="flex items-center text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mt-auto">
+                <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                </svg>
+                <time datetime={post.data.pubDate.toISOString()}>
+                  {new Date(post.data.pubDate).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                  })}
+                </time>
+                {post.data.updatedDate && (
+                  <span class="ml-1 sm:ml-2 text-xs hidden sm:inline">
+                    (Updated {new Date(post.data.updatedDate).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric'
+                    })})
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </a>
+      </article>
+    ))}
+  </div>
+</Layout>