Move paginated posts under /writeups/ and update nav

Delete root pagination route and add src/pages/writeups/[...page].astro.
Update Pagination to generate /writeups/ URLs and adjust markup. Add
Writeup link preset, change LinkPreset enum values and i18n key. Reorder
nav links (About, Team, Writeup, Archive) and tweak Profile link
rendering and single-link layout. Minor formatting cleanup.

Author: akiidjk

src/components/control/Pagination.astro

@@ -4,9 +4,9 @@ import { Icon } from "astro-icon/components";
 import { url } from "../../utils/url-utils";
 
 interface Props {
-	page: Page;
-	class?: string;
-	style?: string;
+    page: Page;
+    class?: string;
+    style?: string;
 }
 
 const { page, style } = Astro.props;
@@ -23,17 +23,17 @@ let count = 1;
 let l = page.currentPage;
 let r = page.currentPage;
 while (0 < l - 1 && r + 1 <= page.lastPage && count + 2 <= VISIBLE) {
-	count += 2;
-	l--;
-	r++;
+    count += 2;
+    l--;
+    r++;
 }
 while (0 < l - 1 && count < VISIBLE) {
-	count++;
-	l--;
+    count++;
+    l--;
 }
 while (r + 1 <= page.lastPage && count < VISIBLE) {
-	count++;
-	r++;
+    count++;
+    r++;
 }
 
 let pages: number[] = [];
@@ -46,39 +46,69 @@ if (r === page.lastPage - 2) pages.push(page.lastPage - 1);
 if (r < page.lastPage) pages.push(page.lastPage);
 
 const getPageUrl = (p: number) => {
-	if (p === 1) return "/";
-	return `/${p}/`;
+    if (p === 1) return "/writeups/";
+    return `/writeups/${p}/`;
 };
 ---
 
-<div class:list={[className, "flex flex-row gap-3 justify-center"]} style={style}>
-    <a href={page.url.prev || ""} aria-label={page.url.prev ? "Previous Page" : null}
-       class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
-           {"disabled": page.url.prev == undefined}
-       ]}
+<div
+    class:list={[className, "flex flex-row gap-3 justify-center"]}
+    style={style}
+>
+    <a
+        href={page.url.prev || ""}
+        aria-label={page.url.prev ? "Previous Page" : null}
+        class:list={[
+            "btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
+            { disabled: page.url.prev == undefined },
+        ]}
     >
-        <Icon name="material-symbols:chevron-left-rounded" class="text-[1.75rem]"></Icon>
+        <Icon
+            name="material-symbols:chevron-left-rounded"
+            class="text-[1.75rem]"
+        />
     </a>
-    <div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold">
-        {pages.map((p) => {
-            if (p == HIDDEN)
-                return <Icon name="material-symbols:more-horiz" class="mx-1"/>;
-            if (p == page.currentPage)
-                return <div class="h-11 w-11 rounded-lg bg-[var(--primary)] flex items-center justify-center
+    <div
+        class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold"
+    >
+        {
+            pages.map((p) => {
+                if (p == HIDDEN)
+                    return (
+                        <Icon name="material-symbols:more-horiz" class="mx-1" />
+                    );
+                if (p == page.currentPage)
+                    return (
+                        <div
+                            class="h-11 w-11 rounded-lg bg-[var(--primary)] flex items-center justify-center
                     font-bold text-white dark:text-black/70"
-                >
-                    {p}
-                </div>
-            return <a href={url(getPageUrl(p))} aria-label={`Page ${p}`}
-                class="btn-card w-11 h-11 rounded-lg overflow-hidden active:scale-[0.85]"
-            >{p}</a>
-        })}
+                        >
+                            {p}
+                        </div>
+                    );
+                return (
+                    <a
+                        href={url(getPageUrl(p))}
+                        aria-label={`Page ${p}`}
+                        class="btn-card w-11 h-11 rounded-lg overflow-hidden active:scale-[0.85]"
+                    >
+                        {p}
+                    </a>
+                );
+            })
+        }
     </div>
-    <a href={page.url.next || ""} aria-label={page.url.next ? "Next Page" : null}
-       class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
-           {"disabled": page.url.next == undefined}
-       ]}
+    <a
+        href={page.url.next || ""}
+        aria-label={page.url.next ? "Next Page" : null}
+        class:list={[
+            "btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
+            { disabled: page.url.next == undefined },
+        ]}
     >
-        <Icon name="material-symbols:chevron-right-rounded" class="text-[1.75rem]"></Icon>
+        <Icon
+            name="material-symbols:chevron-right-rounded"
+            class="text-[1.75rem]"
+        />
     </a>
-</div>
+</div>

src/components/widget/Profile.astro

@@ -6,34 +6,74 @@ import ImageWrapper from "../misc/ImageWrapper.astro";
 
 const config = profileConfig;
 ---
+
 <div class="card-base p-3">
-    <a aria-label="Go to About Page" href={url('/about/')}
-       class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
-       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
-        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
-        w-full h-full z-50 flex items-center justify-center">
-            <Icon name="fa6-regular:address-card"
-                  class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
-            </Icon>
+    <a
+        aria-label="Go to About Page"
+        href={url("/")}
+        class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
+       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95"
+    >
+        <div
+            class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
+        w-full h-full z-50 flex items-center justify-center"
+        >
+            <Icon
+                name="fa6-regular:address-card"
+                class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl"
+            />
         </div>
-        <ImageWrapper src={config.avatar || ""} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
+        <ImageWrapper
+            src={config.avatar || ""}
+            alt="Profile Image of the Author"
+            class="mx-auto lg:w-full h-full lg:mt-0"
+        />
     </a>
     <div class="px-2">
-        <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
-        <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
-        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
+        <div
+            class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition"
+        >
+            {config.name}
+        </div>
+        <div
+            class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"
+        >
+        </div>
+        <div class="text-center text-neutral-400 mb-2.5 transition">
+            {config.bio}
+        </div>
         <div class="flex flex-wrap gap-2 justify-center mb-1">
-            {config.links.length > 1 && config.links.map(item =>
-                    <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
-                        <Icon name={item.icon} class="text-[1.5rem]"></Icon>
+            {
+                config.links.length > 1 &&
+                    config.links.map((item) => (
+                        <a
+                            rel="me"
+                            aria-label={item.name}
+                            href={item.url}
+                            target="_blank"
+                            class="btn-regular rounded-lg h-10 w-10 active:scale-90"
+                        >
+                            <Icon name={item.icon} class="text-[1.5rem]" />
+                        </a>
+                    ))
+            }
+            {
+                config.links.length == 1 && (
+                    <a
+                        rel="me"
+                        aria-label={config.links[0].name}
+                        href={config.links[0].url}
+                        target="_blank"
+                        class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95"
+                    >
+                        <Icon
+                            name={config.links[0].icon}
+                            class="text-[1.5rem]"
+                        />
+                        {config.links[0].name}
                     </a>
-            )}
-            {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
-                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
-                <Icon name={config.links[0].icon} class="text-[1.5rem]"></Icon>
-                {config.links[0].name}
-            </a>}
+                )
+            }
         </div>
     </div>
 </div>
-

src/config.ts

@@ -40,10 +40,10 @@ export const siteConfig: SiteConfig = {
 
 export const navBarConfig: NavBarConfig = {
 	links: [
-		LinkPreset.Home,
-		LinkPreset.Archive,
-		LinkPreset.About,
+	  LinkPreset.About,
 		LinkPreset.Team,
+		LinkPreset.Writeup,
+		LinkPreset.Archive,
 		{
 			name: "GitHub",
 			url: "https://github.com/ByteTheCookies", // Internal links should not include the base path, as it is automatically added

src/constants/link-presets.ts

@@ -3,13 +3,13 @@ import { i18n } from "@i18n/translation";
 import { LinkPreset, type NavBarLink } from "@/types/config";
 
 export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
-	[LinkPreset.Home]: {
-		name: i18n(I18nKey.home),
+ 	[LinkPreset.About]: {
+		name: i18n(I18nKey.about),
 		url: "/",
 	},
-	[LinkPreset.About]: {
-		name: i18n(I18nKey.about),
-		url: "/about/",
+	[LinkPreset.Writeup]: {
+		name: i18n(I18nKey.writeups),
+		url: "/writeups/",
 	},
 	[LinkPreset.Archive]: {
 		name: i18n(I18nKey.archive),

src/i18n/i18nKey.ts

@@ -1,5 +1,5 @@
 enum I18nKey {
-	home = "home",
+	writeups = "writeups",
 	about = "about",
 	archive = "archive",
 	team = "team",

src/i18n/languages/en.ts

@@ -2,7 +2,7 @@ import Key from "../i18nKey";
 import type { Translation } from "../translation";
 
 export const en: Translation = {
-	[Key.home]: "Home",
+	[Key.writeups]: "Writeups",
 	[Key.about]: "About",
 	[Key.archive]: "Archive",
 	[Key.team]: "Team",

src/pages/[...page].astro

@@ -0,0 +1,27 @@
+---
+import type { GetStaticPaths } from "astro";
+import Pagination from "../../components/control/Pagination.astro";
+import PostPage from "../../components/PostPage.astro";
+import { PAGE_SIZE } from "../../constants/constants";
+import MainGridLayout from "../../layouts/MainGridLayout.astro";
+import { getSortedPosts } from "../../utils/content-utils";
+
+export const getStaticPaths = (async ({ paginate }) => {
+    const allBlogPosts = await getSortedPosts();
+    return paginate(allBlogPosts, { pageSize: PAGE_SIZE });
+}) satisfies GetStaticPaths;
+// https://github.com/withastro/astro/issues/6507#issuecomment-1489916992
+
+const { page } = Astro.props;
+
+const len = page.data.length;
+---
+
+<MainGridLayout>
+    <PostPage page={page} />
+    <Pagination
+        class="mx-auto onload-animation"
+        page={page}
+        style={`animation-delay: calc(var(--content-delay) + ${len * 50}ms)`}
+    />
+</MainGridLayout>

src/pages/about.astro src/pages/index.astrosrc/pages/about.astro renamed to src/pages/index.astro

@@ -45,9 +45,9 @@ export type Favicon = {
 };
 
 export enum LinkPreset {
-	Home = 0,
+  About = 0,
 	Archive = 1,
-	About = 2,
+	Writeup = 2,
 	Team = 3,
 }