Refactor

src/pages/index.astro

@@ -1,95 +1,49 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Card from "../components/Card.astro";
-import PostCard from "../components/PostCard.vue"
 ---
 
-<Layout title="Welcome to Astro.">
-  <main>
-    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <p class="instructions">
-      Check out the <code>src/pages</code> directory to get started.<br />
-      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-    </p>
-    <ul role="list" class="link-card-grid">
-      <Card href="https://docs.astro.build/" title="Documentation"
-        body="Learn how Astro works and explore the official API docs." />
-      <Card href="https://astro.build/integrations/" title="Integrations"
-        body="Supercharge your project with new frameworks and libraries." />
-      <Card href="https://astro.build/themes/" title="Themes"
-        body="Explore a galaxy of community-built starter themes." />
-      <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
-    </ul>
-    <ul class="list-decimal list-inside">
-      <li th:text="#{foo}"></li>
-      <li th:text="#{bar}"></li>
-      <li th:text="#{hello('Ryan Wang')}"></li>
-    </ul>
-    <PostCard client:visible />
-    <p th:each="post : ${postFinder.list(1, 10)}">
-      <span th:text="${post.name}">Onions</span>
-    </p>
-  </main>
+<Layout>
+  <Fragment slot="head">
+    <title th:text="${site.title}"></title>
+  </Fragment>
+  <ul class="post-feed__list" role="list">
+    <li th:each="post : ${posts.items}" class="post-feed__item">
+      <a class="post-feed__link" th:href="@{${post.status.permalink}}">
+        <div class="post-feed__body">
+          <p
+            class="post-feed__date"
+            th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
+          >
+          </p>
+          <h2 class="post-feed__title" th:text="${post.spec.title}"></h2>
+          <p class="post-feed__excerpt" th:text="${post.status.excerpt}"></p>
+        </div>
+        <img
+          th:unless="${#strings.isEmpty(post.spec.cover)}"
+          class="post-feed__image"
+          th:src="${post.spec.cover}"
+        />
+      </a>
+    </li>
+  </ul>
+
+  <nav
+    th:if="${posts.totalPages gt 1}"
+    class="pagination"
+    aria-label="Pagination"
+  >
+    <a
+      th:if="${posts.hasPrevious()}"
+      th:href="@{${posts.prevUrl}}"
+      class="pagination__prev">&larr; 较新</a
+    >
+    <span
+      class="pagination__info"
+      th:text="|${posts.page} / ${posts.totalPages}|"></span>
+    <a
+      th:if="${posts.hasNext()}"
+      th:href="@{${posts.nextUrl}}"
+      class="pagination__next">较旧 &rarr;</a
+    >
+  </nav>
 </Layout>
-
-<style>
-  :root {
-    --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-  }
-
-  h1 {
-    margin: 2rem 0;
-  }
-
-  main {
-    margin: auto;
-    padding: 1em;
-    max-width: 70ch;
-  }
-
-  .text-gradient {
-    font-weight: 900;
-    background-image: var(--astro-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 100% 200%;
-    background-position-y: 100%;
-    border-radius: 0.4rem;
-    animation: pulse 4s ease-in-out infinite;
-  }
-
-  @keyframes pulse {
-
-    0%,
-    100% {
-      background-position-y: 0%;
-    }
-
-    50% {
-      background-position-y: 80%;
-    }
-  }
-
-  .instructions {
-    line-height: 1.6;
-    margin: 1rem 0;
-    background: #4f39fa;
-    padding: 1rem;
-    border-radius: 0.4rem;
-    color: var(--color-bg);
-  }
-
-  .instructions code {
-    font-size: 0.875em;
-    border: 0.1em solid var(--color-border);
-    border-radius: 4px;
-    padding: 0.15em 0.25em;
-  }
-
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 1rem;
-    padding: 0;
-  }
-</style>