From 53c0fdfff8af355dc5d1b1cbd2656ee764082afe Mon Sep 17 00:00:00 2001
From: cannorin <cannorin@users.noreply.github.com>
Date: Mon, 10 Feb 2025 20:00:19 +0900
Subject: [PATCH] Add blog (3)

---
 apps/web/src/routes/(main)/+layout.svelte       | 16 ++++++++++++++++
 apps/web/src/routes/(main)/blog/+page.server.ts |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/routes/(main)/+layout.svelte b/apps/web/src/routes/(main)/+layout.svelte
index 523077e..d5911d8 100644
--- a/apps/web/src/routes/(main)/+layout.svelte
+++ b/apps/web/src/routes/(main)/+layout.svelte
@@ -3,6 +3,7 @@ import { page } from "$app/state";
 import { limitWidth } from "$lib/constants";
 import { cn } from "$lib/utils";
 import LuCopyleft from "lucide-svelte/icons/copyleft";
+import LuChevronsRight from "lucide-svelte/icons/chevrons-right";
 
 let { children } = $props();
 </script>
@@ -16,6 +17,21 @@ let { children } = $props();
         <a href="/">cannorin.net</a>
       {/if}
     </div>
+    <nav>
+      <ul class="flex gap-4">
+        <li>
+          <a href="/blog" class="flex gap-1 items-end leading-5">
+            <LuChevronsRight
+              class={cn("transition-transform",
+                page.url.pathname === "/blog" && "rotate-90",
+                page.url.pathname.startsWith("/blog/") && "-rotate-90",
+              )}
+              size=16 />
+            blog
+          </a>
+        </li>
+      </ul>
+    </nav>
   </header>
 
   {@render children()}
diff --git a/apps/web/src/routes/(main)/blog/+page.server.ts b/apps/web/src/routes/(main)/blog/+page.server.ts
index e72ec0c..fbbdd64 100644
--- a/apps/web/src/routes/(main)/blog/+page.server.ts
+++ b/apps/web/src/routes/(main)/blog/+page.server.ts
@@ -14,7 +14,7 @@ export async function load() {
     });
   }
   return {
-    posts,
+    posts: posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
     seo: {
       title: "blog - cannorin.net",
       description: "cannorin's blog",