adds entire posts to homepage and posts page

richiekastl · Mar 6, 2024 · d05bb9c · d05bb9c
1 parent c793433
commit d05bb9c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 46 deletions.
diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
@@ -16,9 +16,9 @@ const shareLinks = [
     linkTitle: `Share this post on Facebook`,
   },
   {
-    name: "Twitter",
-    href: "https://twitter.com/intent/tweet?url=",
-    linkTitle: `Tweet this post`,
+    name: "X",
+    href: "https://x.com/intent/tweet?url=",
+    linkTitle: `share this post`,
   },
   {
     name: "Telegram",

diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -5,6 +5,7 @@ import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Pagination from "@components/Pagination.astro";
+import Datetime from "@components/Datetime";
 import Card from "@components/Card";
 import { SITE } from "@config";
 
@@ -15,26 +16,50 @@ export interface Props {
 }
 
 const { currentPage, totalPages, paginatedPosts } = Astro.props;
+
+const cardPromises = paginatedPosts.map(async (post) => {
+  const { Content } = await post.render();
+  return {
+    href: `/posts/${post.slug}/`,
+    frontmatter: post.data,
+    Content,
+    title: post.data.title,
+    pubDatetime: post.data.pubDatetime,
+    modDatetime: post.data.modDatetime
+  };
+});
+
+const cards = await Promise.all(cardPromises);
 ---
 
 <Layout title={`Posts | ${SITE.title}`}>
   <Header activeNav="posts" />
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
-      {
-        paginatedPosts.map(({ data, slug }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} />
-        ))
-      }
+      {cards.map(({ href, frontmatter, Content, title, pubDatetime, modDatetime }) => (
+        <li class="my-6">
+      <a
+        href={href}
+        class="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+      >
+        <h2>{title}</h2>
+      </a>
+      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
+      <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
+      <Content />
+    </article>
+    <br>
+    <hr>
+    </li>
+
+      ))}
     </ul>
   </Main>
-
   <Pagination
-    {currentPage}
-    {totalPages}
+    currentPage={currentPage}
+    totalPages={totalPages}
     prevUrl={`/posts${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}/`}
     nextUrl={`/posts/${currentPage + 1}/`}
   />
-
   <Footer noMarginTop={totalPages > 1} />
-</Layout>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,17 +6,31 @@ import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
+import Datetime from "@components/Datetime";
 import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
+import ShareLinks from "@components/ShareLinks.astro";
 import { SOCIALS } from "@config";
 
 const posts = await getCollection("blog");
 
 const sortedPosts = getSortedPosts(posts);
-const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
-const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
 const socialCount = SOCIALS.filter(social => social.active).length;
+
+const cardPromises = sortedPosts.map(async (post) => {
+  const { Content } = await post.render();
+  return {
+    href: `/posts/${post.slug}/`,
+    frontmatter: post.data,
+    Content,
+    title: post.data.title,
+    pubDatetime: post.data.pubDatetime,
+    modDatetime: post.data.modDatetime
+  };
+});
+
+const cards = await Promise.all(cardPromises);
 ---
 
 <Layout>
@@ -48,40 +62,29 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     <Hr />
 
     {
-      featuredPosts.length > 0 && (
-        <>
-          <section id="featured">
-            <h2>Featured</h2>
-            <ul>
-              {featuredPosts.map(({ data, slug }) => (
-                <Card
-                  href={`/posts/${slug}/`}
-                  frontmatter={data}
-                  secHeading={false}
-                />
-              ))}
-            </ul>
-          </section>
-          {recentPosts.length > 0 && <Hr />}
-        </>
-      )
-    }
-
-    {
-      recentPosts.length > 0 && (
+      cards.length > 0 && (
         <section id="recent-posts">
           <h2>Recent Posts</h2>
           <ul>
-            {recentPosts.map(
-              ({ data, slug }, index) =>
-                index < 4 && (
-                  <Card
-                    href={`/posts/${slug}/`}
-                    frontmatter={data}
-                    secHeading={false}
-                  />
-                )
-            )}
+            {cards.map(({ href, frontmatter, Content, title, pubDatetime, modDatetime }) => (
+        <li class="my-6">
+      <a
+        href={href}
+        class="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+      >
+        <h2>{title}</h2>
+      </a>
+      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
+      <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
+      <Content />
+    </article>
+    <br>
+    <ShareLinks />
+    <br>
+    <hr>
+    </li>
+
+      ))}
           </ul>
         </section>
       )