Blog entries page design tweaked

brklntmhwk · Mar 28, 2024 · f8794e4 · f8794e4
1 parent d868814
commit f8794e4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/src/components/Svg/icons/publish.svg b/src/components/Svg/icons/publish.svg
diff --git a/src/components/Svg/icons/update.svg b/src/components/Svg/icons/update.svg
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
@@ -3,6 +3,7 @@ import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'
 import { getCollection, getEntry } from 'astro:content'
 import BaseLayout from '@/layouts/BaseLayout.astro'
 import Pager from '@/components/Pager.astro'
+import Svg from '@/components/Svg/index.astro'
 import { LIMIT_PER_PAGE } from '@/lib/consts'
 
 export const getStaticPaths = (async ({ paginate }) => {
@@ -35,16 +36,33 @@ const { page } = Astro.props
               {page.data.map((entry) => (
                 <li>
                   <article>
-                    <span class="date">
-                      <time datetime={entry.data.publishedAt.toISOString()}>
-                        {new Intl.DateTimeFormat('en-US', {
-                          year: 'numeric',
-                          month: 'short',
-                          day: 'numeric',
-                        }).format(entry.data.publishedAt)}
-                      </time>
-                    </span>
-                    <a href={`/blog/${entry.slug}`}>{entry.data.title}</a>
+                    <section class="date">
+                      <div>
+                        <Svg iconName="publish" width={20} height={20} />
+                        <time datetime={entry.data.publishedAt.toISOString()}>
+                          {new Intl.DateTimeFormat('en-US', {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                          }).format(entry.data.publishedAt)}
+                        </time>
+                      </div>
+                      {entry.data.modifiedAt && (
+                        <div>
+                          <Svg iconName="update" width={20} height={20} />
+                          <time datetime={entry.data.modifiedAt.toISOString()}>
+                            {new Intl.DateTimeFormat('en-US', {
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
+                            }).format(entry.data.modifiedAt)}
+                          </time>
+                        </div>
+                      )}
+                    </section>
+                    <a class="blog-title" href={`/blog/${entry.slug}`}>
+                      {entry.data.title}
+                    </a>
                     <span>{entry.data.description}</span>
                     <ul class="tag-list">
                       {entry.data.tags?.map((tag) => (
@@ -70,13 +88,23 @@ const { page } = Astro.props
     flex-direction: column;
     justify-content: space-between;
   }
+  a.blog-title {
+    font-size: 2rem;
+    font-weight: bolder;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 7px;
+    }
+  }
   ul.entry-list {
     display: grid;
-    row-gap: 15px;
+    row-gap: 1.25rem;
+    padding: 0;
   }
   ul.entry-list > li {
     list-style: none;
-    border: 1px solid black;
+    /* border: 1px solid black; */
   }
   ul.entry-list article {
     display: grid;
@@ -91,4 +119,13 @@ const { page } = Astro.props
   ul.tag-list > li {
     list-style: none;
   }
+  section.date {
+    display: flex;
+    column-gap: 10px;
+  }
+  section.date > div {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+  }
 </style>