✨ Events

src/components/Navbar.astro

@@ -51,7 +51,7 @@ const items: MenuItem[] = [
         }
       </ul>
     </div>
-    <a class="btn btn-ghost text-xl">山羊寒舍</a>
+    <a class="btn btn-ghost text-xl" href="/">山羊寒舍</a>
   </div>
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1">

src/layouts/PageLayout.astro

@@ -3,7 +3,7 @@ import RootLayout from "./RootLayout.astro";
 ---
 
 <RootLayout>
-  <main class="container h-fullpage mt-[81px]">
+  <main class="container mx-auto h-fullpage mt-header">
     <slot />
   </main>
 </RootLayout>

src/pages/events/index.astro

@@ -0,0 +1,70 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+
+import { client } from "../../../tina/__generated__/client";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+const eventsResponse = await client.queries.eventConnection();
+const events = eventsResponse.data.eventConnection.edges
+  ?.sort((a, b) =>
+    new Date(a?.node?.date ?? 0).getTime() <=
+    new Date(b?.node?.date ?? 0).getTime()
+      ? -1
+      : 0
+  )
+  .map((event) => {
+    return { ...event?.node, slug: event?.node?._sys.filename };
+  });
+---
+
+<PageLayout>
+  <div class="max-w-[720px] mx-auto">
+    <div class="card w-full shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">活动</h2>
+        <p>读岁月史书，涨人生阅历</p>
+        <div class="divider"></div>
+
+        <ul
+          class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical"
+        >
+          {
+            events?.map((item: any, idx: number) => {
+              let align = idx % 2 === 0 ? "start" : "end";
+              let textAlign = idx % 2 === 0 ? "left" : "right";
+
+              return (
+                <li>
+                  {idx > 0 && <hr />}
+                  <div class="timeline-middle">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      class="h-5 w-5"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class={`timeline-${align} md:text-${textAlign} mb-10`}>
+                    <time class="font-mono italic">
+                      {new Date(item.date).toLocaleDateString()}
+                    </time>
+                    <div class="text-lg font-black">{item.title}</div>
+                    <TinaMarkdown content={item._body} />
+                  </div>
+                  <hr />
+                </li>
+              );
+            })
+          }
+        </ul>
+        <div class="text-center max-md:text-left italic">我们的故事还在继续……</div>
+      </div>
+    </div>
+  </div>
+</PageLayout>

src/pages/index.astro

@@ -1,12 +1,13 @@
 ---
 import RootLayout from "../layouts/RootLayout.astro";
 
-import { client } from "../..//tina/__generated__/client";
+import { client } from "../../tina/__generated__/client";
 
 const eventsResponse = await client.queries.eventConnection();
 const events = eventsResponse.data.eventConnection.edges
   ?.sort((a, b) =>
-    new Date(a?.node?.date ?? 0).getTime() <= new Date(b?.node?.date ?? 0).getTime()
+    new Date(a?.node?.date ?? 0).getTime() <=
+    new Date(b?.node?.date ?? 0).getTime()
       ? -1
       : 0
   )
@@ -46,7 +47,7 @@ const events = eventsResponse.data.eventConnection.edges
         class="hero-content w-full grid grid-cols-1 md:grid-cols-2 max-md:gap-[60px]"
       >
         <div class="flex justify-center md:justify-start">
-          <div class="stats shadow">
+          <div class="stats shadow overflow-x-auto">
             <div class="stat">
               <div class="stat-figure text-secondary">
                 <svg
@@ -116,9 +117,9 @@ const events = eventsResponse.data.eventConnection.edges
             年。自那年起我们一直在开发让人喜欢的开源软件。在我们这里，“取之于开源，用之于开源”
             不仅是原则，更是我们信仰的座右铭。
           </p>
-          <a href="#history" class="btn btn-primary btn-md pl-[24px]"
-            >查看「岁月史书」</a
-          >
+          <a href="#history" class="btn btn-primary btn-md pl-[24px]">
+            查看「岁月史书」
+          </a>
         </div>
       </div>
     </div>
@@ -156,7 +157,7 @@ const events = eventsResponse.data.eventConnection.edges
                     </svg>
                   </div>
                   <div class="timeline-end timeline-box">
-                    <h2 class="font-bold">{item.title}</h2>
+                    <h2 class="font-bold text-lg">{item.title}</h2>
                     <div class="line-clamp-2">{item.description}</div>
                   </div>
                   {idx < events?.length - 1 && <hr />}