Merge pull request #24 from devwqc/develop

[release] develop to main

Author: devwqc

package.json

@@ -2,6 +2,22 @@
   "name": "devwqc-blog",
   "type": "module",
   "version": "0.0.1",
+  "description": "devwqc-blog",
+  "author": "devwqc <devwqc@gmail.com>",
+  "keywords": [
+    "astro",
+    "blog"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devwqc/devwqc.github.io"
+  },
+  "homepage": "https://devwqc.github.io/",
+  "bugs": {
+    "url": "https://github.com/devwqc/devwqc.github.io/issues",
+    "email": "devwqc@gmail.com"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/FormattedDate.astro

@@ -6,7 +6,11 @@ type Props = Omit<HTMLAttributes<'time'>, 'datetime'> & {
 };
 
 const { datetime, ...props } = Astro.props;
-const formattedDate = datetime.toISOString().split('T')[0];
+const formattedDate = datetime.toLocaleDateString('ko-KR', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
 ---
 
 <time datetime={formattedDate} {...props}>{formattedDate}</time>

src/components/Markdown.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<div class="prose pt-10">
+<div class="prose py-10">
   <slot />
 </div>

src/pages/about.astro

@@ -3,5 +3,24 @@ import PageLayout from '@/layouts/PageLayout.astro';
 ---
 
 <PageLayout title="About">
-  <h1>About</h1>
+  <article class="flex flex-col gap-10">
+    <header>
+      <h1 class="text-3xl font-bold py-3">정봉찬</h1>
+      <p class="text-xl">프론트엔드 개발자</p>
+    </header>
+    <section>
+      <h2 class="text-2xl py-2">교육</h2>
+      <ul>
+        <li>
+          <p>
+            코드잇 스프린트 (프론트엔드 부트캠프) <span class="text-slate-500">
+              <time datetime="2023.12">2023.12</time> ~ <time datetime="2024.06"
+                >2024.06</time
+              >
+            </span>
+          </p>
+        </li>
+      </ul>
+    </section>
+  </article>
 </PageLayout>

src/pages/blog/[...slug].astro

@@ -21,12 +21,29 @@ const { Content } = await post.render();
 
 <PageLayout title={post.data.title}>
   <article>
-    <header class="border-b pb-10 text-center">
-      <h1 class="text-3xl font-bold">{post.data.title}</h1>
-      <FormattedDate datetime={post.data.publishedDate} class="text-gray-500" />
+    <header class="border-b pb-10 text-center flex flex-col gap-3">
+      <h1 class="text-4xl font-bold">{post.data.title}</h1>
+      <p class="text-gray-500">
+        <span>
+          작성일:
+          <FormattedDate datetime={post.data.publishedDate} />
+        </span>
+        {
+          post.data.updatedDate && (
+            <span>
+              수정일:
+              <FormattedDate datetime={post.data.updatedDate} />
+            </span>
+          )
+        }
+      </p>
     </header>
     <MarkDown>
       <Content />
     </MarkDown>
+    <footer>
+      <p>방문해 주셔서 감사합니다.</p>
+      <p>오탈자, 잘못된 정보에 대해 말씀해 주시면 감사히 받겠습니다.</p>
+    </footer>
   </article>
 </PageLayout>

src/pages/blog/index.astro

@@ -1,4 +1,5 @@
 ---
+import FormattedDate from '@/components/FormattedDate.astro';
 import PageLayout from '@/layouts/PageLayout.astro';
 import { getCollection } from 'astro:content';
 
@@ -11,13 +12,28 @@ const posts = (await getCollection('blog')).sort(
   <ul>
     {
       posts.map((post) => (
-        <li>
-          <a
-            href={`/blog/${post.slug}/`}
-            class="hover:text-emerald-600 text-3xl"
-          >
-            {post.data.title}
-          </a>
+        <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.publishedDate} />
+                </span>
+                {post.data.updatedDate && (
+                  <span>
+                    수정일:
+                    <FormattedDate datetime={post.data.updatedDate} />
+                  </span>
+                )}
+              </p>
+              <p class="text-slate-500">{post.data.description}</p>
+            </a>
+          </article>
         </li>
       ))
     }

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';
+
+const posts = (await getCollection('blog')).sort(
+  (a, b) => b.data.publishedDate.valueOf() - a.data.publishedDate.valueOf()
+);
 ---
 
 <PageLayout title="Home">
-  <h1>Home</h1>
+  <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.publishedDate} />
+                </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>