From b041c3d7293bbc19a180152b8370dbaace161681 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 16:24:53 +0900
Subject: [PATCH 01/13] implemented pagination

---
 blog.tsx       | 37 ++++++++++++++++++++++++++
 components.tsx | 71 +++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/blog.tsx b/blog.tsx
index 2a52dd5..ccb57fb 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -343,6 +343,30 @@ export async function handler(
       });
     }
   }
+  
+  if(pathname === "/" && searchParams.get('page')?.match(/^[0-9]+$/)){
+    const index = Number(searchParams.get('page'));
+    return html({
+      ...sharedHtmlOptions,
+      title: blogState.title ?? "My Blog",
+      meta: {
+        "description": blogState.description,
+        "og:title": blogState.title,
+        "og:description": blogState.description,
+        "og:image": ogImage ?? blogState.cover,
+        "twitter:title": blogState.title,
+        "twitter:description": blogState.description,
+        "twitter:image": ogImage ?? blogState.cover,
+        "twitter:card": ogImage ? twitterCard : undefined,
+      },
+      styles: [
+        ...(blogState.style ? [blogState.style] : []),
+      ],
+      body: (
+        <Index state={blogState} index={index} postsLength={POSTS.size} posts={getPostsPage(POSTS, index)} />
+      )
+    })
+  }
 
   if (pathname === "/") {
     return html({
@@ -364,7 +388,9 @@ export async function handler(
       body: (
         <Index
           state={blogState}
+          postsLength={POSTS.size}
           posts={filterPosts(POSTS, searchParams)}
+          index={0}
         />
       ),
     });
@@ -523,6 +549,17 @@ export function redirects(redirectMap: Record<string, string>): BlogMiddleware {
   };
 }
 
+function getPostsPage(
+  posts: Map<string, Post>,
+  index: number
+) {
+  const i = Math.round(index);
+  if(i<0) return new Map();
+  return new Map(
+    Array.from(posts.entries()).slice(i*10, i*10+10),
+  )
+}
+
 function filterPosts(
   posts: Map<string, Post>,
   searchParams: URLSearchParams,
diff --git a/components.tsx b/components.tsx
index e722c18..74a4680 100644
--- a/components.tsx
+++ b/components.tsx
@@ -17,12 +17,46 @@ const socialAppIcons = new Map([
   ["linkedin.com", IconLinkedin],
 ]);
 
+interface PaginationProps {
+  index: number;
+  type: "forward" | "backward" | "both";
+}
+function Pagination({ index, type }: PaginationProps) {
+  const page = (
+    <div class="mt-3 flex gap-2 items-center justify-center">
+      {(type === "backward" || type === "both")
+        ? (
+          <a
+            href={`/?page=${index - 1}`}
+            class="relative flex items-center justify-center w-8 h-8 rounded-full bg-gray-600/10 dark:bg-gray-400/10 text-gray-700 dark:text-gray-400 hover:bg-gray-600/15 dark:hover:bg-gray-400/15 hover:text-black dark:hover:text-white transition-colors group"
+          >
+            <IconPrevious />
+          </a>
+        )
+        : ""}
+      {(type === "forward" || type === "both")
+        ? (
+          <a
+            href={`/?page=${index + 1}`}
+            class="relative flex items-center justify-center w-8 h-8 rounded-full bg-gray-600/10 dark:bg-gray-400/10 text-gray-700 dark:text-gray-400 hover:bg-gray-600/15 dark:hover:bg-gray-400/15 hover:text-black dark:hover:text-white transition-colors group"
+          >
+            <IconNext />
+          </a>
+        )
+        : ""}
+    </div>
+  );
+  return page;
+}
+
 interface IndexProps {
   state: BlogState;
   posts: Map<string, Post>;
+  index: number;
+  postsLength: number;
 }
 
-export function Index({ state, posts }: IndexProps) {
+export function Index({ state, posts, index, postsLength }: IndexProps) {
   const postIndex = [];
   for (const [_key, post] of posts.entries()) {
     postIndex.push(post);
@@ -30,6 +64,14 @@ export function Index({ state, posts }: IndexProps) {
   postIndex.sort(
     (a, b) => (b.publishDate?.getTime() ?? 0) - (a.publishDate?.getTime() ?? 0),
   );
+  let page;
+  if ((index + 1) * 10 >= postsLength && index !== 0) {
+    page = <Pagination index={index} type={"backward"} />;
+  } else if (index === 0) {
+    page = <Pagination index={index} type={"forward"} />;
+  } else {
+    page = <Pagination index={index} type={"both"} />;
+  }
 
   return (
     <div class="home">
@@ -114,6 +156,7 @@ export function Index({ state, posts }: IndexProps) {
             />
           ))}
         </div>
+        {page}
 
         {state.footer || <Footer author={state.author} />}
       </div>
@@ -354,6 +397,32 @@ function IconExternalLink() {
   );
 }
 
+function IconPrevious() {
+  return (
+    <svg
+      className="inline-block w-5 h-5"
+      viewBox="0 0 512 512"
+      fill="black"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/>
+    </svg>
+  );
+}
+
+function IconNext(){
+  return (
+    <svg
+      className="inline-block w-5 h-5"
+      viewBox="0 0 512 512"
+      fill="black"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/>
+    </svg>
+  )
+}
+
 function IconGithub() {
   return (
     <svg

From 9b861ef387dbedf477198a6afd02fd8fc9cac570 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 16:40:56 +0900
Subject: [PATCH 02/13] fixed arrow color

---
 components.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components.tsx b/components.tsx
index 74a4680..8b5f6ad 100644
--- a/components.tsx
+++ b/components.tsx
@@ -402,7 +402,7 @@ function IconPrevious() {
     <svg
       className="inline-block w-5 h-5"
       viewBox="0 0 512 512"
-      fill="black"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/>
@@ -415,10 +415,10 @@ function IconNext(){
     <svg
       className="inline-block w-5 h-5"
       viewBox="0 0 512 512"
-      fill="black"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/>
+      <path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/>
     </svg>
   )
 }

From f22dc0a610410e7b88d34676ccde620ff7a4d2cf Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 16:50:53 +0900
Subject: [PATCH 03/13] fixed arrow is showing at index 0

---
 components.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components.tsx b/components.tsx
index 8b5f6ad..e4c7bf8 100644
--- a/components.tsx
+++ b/components.tsx
@@ -67,6 +67,8 @@ export function Index({ state, posts, index, postsLength }: IndexProps) {
   let page;
   if ((index + 1) * 10 >= postsLength && index !== 0) {
     page = <Pagination index={index} type={"backward"} />;
+  } else if(index === 0 && (index + 1) * 10 >= postsLength) {
+    page = "";
   } else if (index === 0) {
     page = <Pagination index={index} type={"forward"} />;
   } else {

From f5e19d4ae02b42353a27eaa2a6778d4cd526a47c Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 16:51:20 +0900
Subject: [PATCH 04/13] merge filterPosts to getPostPage

---
 blog.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index ccb57fb..510ebde 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -363,7 +363,7 @@ export async function handler(
         ...(blogState.style ? [blogState.style] : []),
       ],
       body: (
-        <Index state={blogState} index={index} postsLength={POSTS.size} posts={getPostsPage(POSTS, index)} />
+        <Index state={blogState} index={index} postsLength={POSTS.size} posts={getPostsPage(POSTS, index, searchParams)} />
       )
     })
   }
@@ -389,7 +389,7 @@ export async function handler(
         <Index
           state={blogState}
           postsLength={POSTS.size}
-          posts={filterPosts(POSTS, searchParams)}
+          posts={getPostsPage(POSTS, 0, searchParams)}
           index={0}
         />
       ),
@@ -551,13 +551,20 @@ export function redirects(redirectMap: Record<string, string>): BlogMiddleware {
 
 function getPostsPage(
   posts: Map<string, Post>,
-  index: number
+  index: number,
+  searchParams: URLSearchParams,
 ) {
   const i = Math.round(index);
   if(i<0) return new Map();
+  const tag = searchParams.get("tag");
+  if(!tag){
+    return new Map(
+      Array.from(posts.entries()).slice(i*10, i*10+10),
+    );
+  }
   return new Map(
-    Array.from(posts.entries()).slice(i*10, i*10+10),
-  )
+    Array.from(posts.entries()).slice(i*10, i*10+10).filter(([, p]) => p.tags?.includes(tag)),
+  );
 }
 
 function filterPosts(

From e5188bf88904291d424fa955570054ee211df0cc Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 17:26:49 +0900
Subject: [PATCH 05/13] fixed tags pagination bug

---
 blog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blog.tsx b/blog.tsx
index 510ebde..db6bd9b 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -563,7 +563,7 @@ function getPostsPage(
     );
   }
   return new Map(
-    Array.from(posts.entries()).slice(i*10, i*10+10).filter(([, p]) => p.tags?.includes(tag)),
+    Array.from(posts.entries()).filter(([, p]) => p.tags?.includes(tag)).slice(i*10, i*10+10),
   );
 }
 

From e1afe168e3b1c0e158b15f08005f7b2c992fcfb3 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Sun, 28 Aug 2022 17:40:22 +0900
Subject: [PATCH 06/13] fixed pagination bug when includes tag

---
 blog.tsx       | 24 +++++++++++++-----------
 components.tsx | 20 +++++++++++++-------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index db6bd9b..71c716c 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -346,6 +346,7 @@ export async function handler(
   
   if(pathname === "/" && searchParams.get('page')?.match(/^[0-9]+$/)){
     const index = Number(searchParams.get('page'));
+    const tagPosts = filterPosts(POSTS, searchParams);
     return html({
       ...sharedHtmlOptions,
       title: blogState.title ?? "My Blog",
@@ -363,12 +364,19 @@ export async function handler(
         ...(blogState.style ? [blogState.style] : []),
       ],
       body: (
-        <Index state={blogState} index={index} postsLength={POSTS.size} posts={getPostsPage(POSTS, index, searchParams)} />
+        <Index 
+          state={blogState} 
+          index={index} 
+          postsLength={tagPosts.size} 
+          posts={getPostsPage(tagPosts, index)} 
+          searchParams={searchParams}
+        />
       )
     })
   }
 
   if (pathname === "/") {
+    const tagPosts = filterPosts(POSTS, searchParams);
     return html({
       ...sharedHtmlOptions,
       title: blogState.title ?? "My Blog",
@@ -388,9 +396,10 @@ export async function handler(
       body: (
         <Index
           state={blogState}
-          postsLength={POSTS.size}
-          posts={getPostsPage(POSTS, 0, searchParams)}
+          postsLength={tagPosts.size}
+          posts={getPostsPage(tagPosts, 0)}
           index={0}
+          searchParams={searchParams}
         />
       ),
     });
@@ -552,18 +561,11 @@ export function redirects(redirectMap: Record<string, string>): BlogMiddleware {
 function getPostsPage(
   posts: Map<string, Post>,
   index: number,
-  searchParams: URLSearchParams,
 ) {
   const i = Math.round(index);
   if(i<0) return new Map();
-  const tag = searchParams.get("tag");
-  if(!tag){
-    return new Map(
-      Array.from(posts.entries()).slice(i*10, i*10+10),
-    );
-  }
   return new Map(
-    Array.from(posts.entries()).filter(([, p]) => p.tags?.includes(tag)).slice(i*10, i*10+10),
+    Array.from(posts.entries()).slice(i*10, i*10+10),
   );
 }
 
diff --git a/components.tsx b/components.tsx
index e4c7bf8..98cc936 100644
--- a/components.tsx
+++ b/components.tsx
@@ -20,14 +20,18 @@ const socialAppIcons = new Map([
 interface PaginationProps {
   index: number;
   type: "forward" | "backward" | "both";
+  tag: string | null;
 }
-function Pagination({ index, type }: PaginationProps) {
+function Pagination({ index, type, tag }: PaginationProps) {
+  let t;
+  if(tag) t = "&tag="+tag;
+  else t = "";
   const page = (
     <div class="mt-3 flex gap-2 items-center justify-center">
       {(type === "backward" || type === "both")
         ? (
           <a
-            href={`/?page=${index - 1}`}
+            href={`/?page=${index - 1}${t}`}
             class="relative flex items-center justify-center w-8 h-8 rounded-full bg-gray-600/10 dark:bg-gray-400/10 text-gray-700 dark:text-gray-400 hover:bg-gray-600/15 dark:hover:bg-gray-400/15 hover:text-black dark:hover:text-white transition-colors group"
           >
             <IconPrevious />
@@ -37,7 +41,7 @@ function Pagination({ index, type }: PaginationProps) {
       {(type === "forward" || type === "both")
         ? (
           <a
-            href={`/?page=${index + 1}`}
+            href={`/?page=${index + 1}${t}`}
             class="relative flex items-center justify-center w-8 h-8 rounded-full bg-gray-600/10 dark:bg-gray-400/10 text-gray-700 dark:text-gray-400 hover:bg-gray-600/15 dark:hover:bg-gray-400/15 hover:text-black dark:hover:text-white transition-colors group"
           >
             <IconNext />
@@ -54,9 +58,10 @@ interface IndexProps {
   posts: Map<string, Post>;
   index: number;
   postsLength: number;
+  searchParams: URLSearchParams;
 }
 
-export function Index({ state, posts, index, postsLength }: IndexProps) {
+export function Index({ state, posts, index, postsLength, searchParams }: IndexProps) {
   const postIndex = [];
   for (const [_key, post] of posts.entries()) {
     postIndex.push(post);
@@ -65,14 +70,15 @@ export function Index({ state, posts, index, postsLength }: IndexProps) {
     (a, b) => (b.publishDate?.getTime() ?? 0) - (a.publishDate?.getTime() ?? 0),
   );
   let page;
+  const tag = searchParams.get("tag");
   if ((index + 1) * 10 >= postsLength && index !== 0) {
-    page = <Pagination index={index} type={"backward"} />;
+    page = <Pagination tag={tag} index={index} type={"backward"} />;
   } else if(index === 0 && (index + 1) * 10 >= postsLength) {
     page = "";
   } else if (index === 0) {
-    page = <Pagination index={index} type={"forward"} />;
+    page = <Pagination tag={tag} index={index} type={"forward"} />;
   } else {
-    page = <Pagination index={index} type={"both"} />;
+    page = <Pagination tag={tag} index={index} type={"both"} />;
   }
 
   return (

From 1bec7fc0785ad399a9633a233bbcbd86602caca5 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Mon, 29 Aug 2022 21:05:26 +0900
Subject: [PATCH 07/13] fixed formatting

---
 blog.tsx       | 24 ++++++++++++------------
 components.tsx | 22 +++++++++++++++-------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index 71c716c..bfa85bb 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -343,9 +343,9 @@ export async function handler(
       });
     }
   }
-  
-  if(pathname === "/" && searchParams.get('page')?.match(/^[0-9]+$/)){
-    const index = Number(searchParams.get('page'));
+
+  if (pathname === "/" && searchParams.get("page")?.match(/^[0-9]+$/)) {
+    const index = Number(searchParams.get("page"));
     const tagPosts = filterPosts(POSTS, searchParams);
     return html({
       ...sharedHtmlOptions,
@@ -364,15 +364,15 @@ export async function handler(
         ...(blogState.style ? [blogState.style] : []),
       ],
       body: (
-        <Index 
-          state={blogState} 
-          index={index} 
-          postsLength={tagPosts.size} 
-          posts={getPostsPage(tagPosts, index)} 
+        <Index
+          state={blogState}
+          index={index}
+          postsLength={tagPosts.size}
+          posts={getPostsPage(tagPosts, index)}
           searchParams={searchParams}
         />
-      )
-    })
+      ),
+    });
   }
 
   if (pathname === "/") {
@@ -563,9 +563,9 @@ function getPostsPage(
   index: number,
 ) {
   const i = Math.round(index);
-  if(i<0) return new Map();
+  if (i < 0) return new Map();
   return new Map(
-    Array.from(posts.entries()).slice(i*10, i*10+10),
+    Array.from(posts.entries()).slice(i * 10, i * 10 + 10),
   );
 }
 
diff --git a/components.tsx b/components.tsx
index 98cc936..a6b3a93 100644
--- a/components.tsx
+++ b/components.tsx
@@ -24,7 +24,7 @@ interface PaginationProps {
 }
 function Pagination({ index, type, tag }: PaginationProps) {
   let t;
-  if(tag) t = "&tag="+tag;
+  if (tag) t = "&tag=" + tag;
   else t = "";
   const page = (
     <div class="mt-3 flex gap-2 items-center justify-center">
@@ -61,7 +61,9 @@ interface IndexProps {
   searchParams: URLSearchParams;
 }
 
-export function Index({ state, posts, index, postsLength, searchParams }: IndexProps) {
+export function Index(
+  { state, posts, index, postsLength, searchParams }: IndexProps,
+) {
   const postIndex = [];
   for (const [_key, post] of posts.entries()) {
     postIndex.push(post);
@@ -73,7 +75,7 @@ export function Index({ state, posts, index, postsLength, searchParams }: IndexP
   const tag = searchParams.get("tag");
   if ((index + 1) * 10 >= postsLength && index !== 0) {
     page = <Pagination tag={tag} index={index} type={"backward"} />;
-  } else if(index === 0 && (index + 1) * 10 >= postsLength) {
+  } else if (index === 0 && (index + 1) * 10 >= postsLength) {
     page = "";
   } else if (index === 0) {
     page = <Pagination tag={tag} index={index} type={"forward"} />;
@@ -413,12 +415,15 @@ function IconPrevious() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/>
+      <path
+        fill="currentColor"
+        d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+      />
     </svg>
   );
 }
 
-function IconNext(){
+function IconNext() {
   return (
     <svg
       className="inline-block w-5 h-5"
@@ -426,9 +431,12 @@ function IconNext(){
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/>
+      <path
+        fill="currentColor"
+        d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+      />
     </svg>
-  )
+  );
 }
 
 function IconGithub() {

From 7866e9941207602d8ae76ee81cd96b09d452e6fd Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Mon, 29 Aug 2022 23:18:51 +0900
Subject: [PATCH 08/13] fixed sort by published date bug in pagination

---
 blog.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/blog.tsx b/blog.tsx
index bfa85bb..a7cdaab 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -39,7 +39,7 @@ import type {
 export { Fragment, h };
 
 const IS_DEV = Deno.args.includes("--dev") && "watchFs" in Deno;
-const POSTS = new Map<string, Post>();
+let POSTS = new Map<string, Post>();
 const HMR_SOCKETS: Set<WebSocket> = new Set();
 
 const HMR_CLIENT = `let socket;
@@ -199,6 +199,8 @@ async function loadContent(blogDirectory: string, isDev: boolean) {
     }
   }
 
+  POSTS = new Map(Array.from(POSTS).sort(([,a], [,b])=>b.publishDate.getTime() - a.publishDate.getTime()))
+
   if (isDev) {
     watchForChanges(postsDirectory).catch(() => {});
   }

From 16fe4ebb7c79d70d64b7288e28c5b7315704bd12 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Mon, 29 Aug 2022 23:20:20 +0900
Subject: [PATCH 09/13] update formatting

---
 blog.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/blog.tsx b/blog.tsx
index a7cdaab..7cfec9a 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -199,7 +199,11 @@ async function loadContent(blogDirectory: string, isDev: boolean) {
     }
   }
 
-  POSTS = new Map(Array.from(POSTS).sort(([,a], [,b])=>b.publishDate.getTime() - a.publishDate.getTime()))
+  POSTS = new Map(
+    Array.from(POSTS).sort(([, a], [, b]) =>
+      b.publishDate.getTime() - a.publishDate.getTime()
+    ),
+  );
 
   if (isDev) {
     watchForChanges(postsDirectory).catch(() => {});

From 1d2863858a18407aafc7a3540b26dc99cab1e76e Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Thu, 1 Sep 2022 21:51:11 +0900
Subject: [PATCH 10/13] merged duplicate code

---
 blog.tsx | 65 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index 7cfec9a..961263c 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -350,8 +350,11 @@ export async function handler(
     }
   }
 
-  if (pathname === "/" && searchParams.get("page")?.match(/^[0-9]+$/)) {
-    const index = Number(searchParams.get("page"));
+  if (pathname === "/") {
+    let index = 0;
+    if(searchParams.get("page")?.match(/^[0-9]+$/)){
+      index = Number(searchParams.get("page"));
+    }
     const tagPosts = filterPosts(POSTS, searchParams);
     return html({
       ...sharedHtmlOptions,
@@ -381,35 +384,35 @@ export async function handler(
     });
   }
 
-  if (pathname === "/") {
-    const tagPosts = filterPosts(POSTS, searchParams);
-    return html({
-      ...sharedHtmlOptions,
-      title: blogState.title ?? "My Blog",
-      meta: {
-        "description": blogState.description,
-        "og:title": blogState.title,
-        "og:description": blogState.description,
-        "og:image": ogImage ?? blogState.cover,
-        "twitter:title": blogState.title,
-        "twitter:description": blogState.description,
-        "twitter:image": ogImage ?? blogState.cover,
-        "twitter:card": ogImage ? twitterCard : undefined,
-      },
-      styles: [
-        ...(blogState.style ? [blogState.style] : []),
-      ],
-      body: (
-        <Index
-          state={blogState}
-          postsLength={tagPosts.size}
-          posts={getPostsPage(tagPosts, 0)}
-          index={0}
-          searchParams={searchParams}
-        />
-      ),
-    });
-  }
+  // if (pathname === "/") {
+  //   const tagPosts = filterPosts(POSTS, searchParams);
+  //   return html({
+  //     ...sharedHtmlOptions,
+  //     title: blogState.title ?? "My Blog",
+  //     meta: {
+  //       "description": blogState.description,
+  //       "og:title": blogState.title,
+  //       "og:description": blogState.description,
+  //       "og:image": ogImage ?? blogState.cover,
+  //       "twitter:title": blogState.title,
+  //       "twitter:description": blogState.description,
+  //       "twitter:image": ogImage ?? blogState.cover,
+  //       "twitter:card": ogImage ? twitterCard : undefined,
+  //     },
+  //     styles: [
+  //       ...(blogState.style ? [blogState.style] : []),
+  //     ],
+  //     body: (
+  //       <Index
+  //         state={blogState}
+  //         postsLength={tagPosts.size}
+  //         posts={getPostsPage(tagPosts, 0)}
+  //         index={0}
+  //         searchParams={searchParams}
+  //       />
+  //     ),
+  //   });
+  // }
 
   const post = POSTS.get(pathname);
   if (post) {

From 51d78290968a20c6c2dc4711464e453dad756425 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Thu, 1 Sep 2022 21:54:33 +0900
Subject: [PATCH 11/13] use tag instead of searchParams

---
 blog.tsx       |  2 +-
 components.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index 961263c..99f1d2a 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -378,7 +378,7 @@ export async function handler(
           index={index}
           postsLength={tagPosts.size}
           posts={getPostsPage(tagPosts, index)}
-          searchParams={searchParams}
+          tag={searchParams}
         />
       ),
     });
diff --git a/components.tsx b/components.tsx
index a6b3a93..2c673a8 100644
--- a/components.tsx
+++ b/components.tsx
@@ -58,11 +58,11 @@ interface IndexProps {
   posts: Map<string, Post>;
   index: number;
   postsLength: number;
-  searchParams: URLSearchParams;
+  tag: URLSearchParams;
 }
 
 export function Index(
-  { state, posts, index, postsLength, searchParams }: IndexProps,
+  { state, posts, index, postsLength, tag }: IndexProps,
 ) {
   const postIndex = [];
   for (const [_key, post] of posts.entries()) {
@@ -72,15 +72,15 @@ export function Index(
     (a, b) => (b.publishDate?.getTime() ?? 0) - (a.publishDate?.getTime() ?? 0),
   );
   let page;
-  const tag = searchParams.get("tag");
+  const t = tag.get("tag");
   if ((index + 1) * 10 >= postsLength && index !== 0) {
-    page = <Pagination tag={tag} index={index} type={"backward"} />;
+    page = <Pagination tag={t} index={index} type={"backward"} />;
   } else if (index === 0 && (index + 1) * 10 >= postsLength) {
     page = "";
   } else if (index === 0) {
-    page = <Pagination tag={tag} index={index} type={"forward"} />;
+    page = <Pagination tag={t} index={index} type={"forward"} />;
   } else {
-    page = <Pagination tag={tag} index={index} type={"both"} />;
+    page = <Pagination tag={t} index={index} type={"both"} />;
   }
 
   return (

From 5aa4f69a4b4bfef52fef8ca600ba97a58be2dd26 Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Thu, 1 Sep 2022 21:56:42 +0900
Subject: [PATCH 12/13] Changed getPostsPage to getPostsByPage

---
 blog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blog.tsx b/blog.tsx
index 99f1d2a..68f0dcc 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -377,7 +377,7 @@ export async function handler(
           state={blogState}
           index={index}
           postsLength={tagPosts.size}
-          posts={getPostsPage(tagPosts, index)}
+          posts={getPostsByPage(tagPosts, index)}
           tag={searchParams}
         />
       ),
@@ -567,7 +567,7 @@ export function redirects(redirectMap: Record<string, string>): BlogMiddleware {
   };
 }
 
-function getPostsPage(
+function getPostsByPage(
   posts: Map<string, Post>,
   index: number,
 ) {

From cc79a5ed1c023d47e6681432b70300016791fc7f Mon Sep 17 00:00:00 2001
From: Jaehee Lee <jhlee838@gmail.com>
Date: Thu, 1 Sep 2022 21:58:40 +0900
Subject: [PATCH 13/13] fixed fmt

---
 blog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blog.tsx b/blog.tsx
index 68f0dcc..cd39000 100644
--- a/blog.tsx
+++ b/blog.tsx
@@ -352,7 +352,7 @@ export async function handler(
 
   if (pathname === "/") {
     let index = 0;
-    if(searchParams.get("page")?.match(/^[0-9]+$/)){
+    if (searchParams.get("page")?.match(/^[0-9]+$/)) {
       index = Number(searchParams.get("page"));
     }
     const tagPosts = filterPosts(POSTS, searchParams);