Merge pull request #61 from devwqc/fix/home-blog

[fix] Home, Blog 페이지 통일

Author: devwqc

src/components/HeaderLink.astro

@@ -1,13 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'a'>;
+type Props = HTMLAttributes<'a'> & {
+  incldues: string[];
+};
 
-const { href, class: className, ...props } = Astro.props;
+const { href, incldues, class: className, ...props } = Astro.props;
 
 const { pathname } = Astro.url;
 const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + subpath?.[0];
+const isActive = incldues.find((path) => {
+  return path === pathname || path === '/' + subpath?.[0];
+});
 ---
 
 <a

src/components/Navigation.astro

@@ -7,7 +7,9 @@ import { menu } from '@/constants/menu';
   {
     menu.map((item) => (
       <li>
-        <HeaderLink href={item.path}>{item.label}</HeaderLink>
+        <HeaderLink href={item.path} incldues={item.includes}>
+          {item.label}
+        </HeaderLink>
       </li>
     ))
   }

src/components/NavigationMobile.astro

@@ -12,7 +12,7 @@ import HamburgerSvg from './HamburgerSvg.astro';
   {
     menu.map((item) => (
       <li>
-        <HeaderLink href={item.path} class="block">
+        <HeaderLink href={item.path} incldues={item.includes} class="block">
           {item.label}
         </HeaderLink>
       </li>

src/constants/menu.ts

@@ -1,10 +1,16 @@
-export const menu = [
+export const menu: {
+  path: string;
+  label: string;
+  includes: string[];
+}[] = [
   {
     path: '/blog',
     label: 'Blog',
+    includes: ['/', '/blog'],
   },
   {
     path: '/about',
     label: 'About',
+    includes: ['/about'],
   },
 ];

src/pages/index.astro

@@ -1,7 +1,41 @@
 ---
+import FormattedDate from '@/components/FormattedDate.astro';
 import PageLayout from '@/layouts/PageLayout.astro';
+import { getCollection } from 'astro:content';
 
-return Astro.redirect('/blog');
+const posts = (await getCollection('blog')).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
 ---
 
-<PageLayout title="Home" />
+<PageLayout title="Home">
+  <ul>
+    {
+      posts.map((post) => (
+        <li class="py-5">
+          <article>
+            <a
+              href={`/blog/${post.slug}/`}
+              class="hover:text-emerald-600 flex flex-col gap-1"
+            >
+              <h2 class="text-3xl font-bold">{post.data.title}</h2>
+              <p class="text-gray-500 text-sm">
+                <span>
+                  작성일:
+                  <FormattedDate datetime={post.data.pubDate} />
+                </span>
+                {post.data.updatedDate && (
+                  <span>
+                    수정일:
+                    <FormattedDate datetime={post.data.updatedDate} />
+                  </span>
+                )}
+              </p>
+              <p class="text-slate-500">{post.data.description}</p>
+            </a>
+          </article>
+        </li>
+      ))
+    }
+  </ul>
+</PageLayout>