blog: Bump to 0.0.1 version.

.gitattributes

@@ -1 +1 @@
-public/assets/images/profile.png filter=lfs diff=lfs merge=lfs -text
+public/assets/images/profile.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -3,7 +3,7 @@
 # SPDX-License-Identifier: Apache-2.0
 #
 
-FROM node:20-alpine
+FROM node:22-alpine
 
 WORKDIR /app
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-blog",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "author": "Hadad Darajat",
   "type": "module",
@@ -15,29 +15,29 @@
     "preview": "npm run build && npm run start"
   },
   "dependencies": {
-    "chokidar": "^3.6.0",
+    "chokidar": "^4.0.3",
     "cors": "^2.8.5",
-    "express": "^4.21.0",
+    "express": "^4.21.2",
     "front-matter": "^4.0.2",
-    "highlight.js": "^11.10.0",
-    "lucide-react": "^0.454.0",
-    "marked": "^14.1.2",
-    "marked-highlight": "^2.1.4",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.469.0",
+    "marked": "^15.0.6",
+    "marked-highlight": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^22.7.5",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.2",
-    "concurrently": "^9.0.1",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.9"
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.1.2",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
   }
 }

src/client/App.tsx

@@ -4,19 +4,25 @@
 //
 
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ThemeProvider } from "./contexts/ThemeContext";
+import { PageProvider } from "./contexts/PageContext";
 import { Layout } from "./components/layout/Layout";
 import { HomePage } from "./pages/HomePage";
 import { PostPage } from "./pages/PostPage";
 
 export const App = (): JSX.Element => {
   return (
-    <BrowserRouter>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/post/:slug" element={<PostPage />} />
-        </Routes>
-      </Layout>
-    </BrowserRouter>
+    <ThemeProvider>
+      <PageProvider>
+        <BrowserRouter>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/post/:slug" element={<PostPage />} />
+            </Routes>
+          </Layout>
+        </BrowserRouter>
+      </PageProvider>
+    </ThemeProvider>
   );
 };

src/client/components/blog/PostCard.tsx

@@ -4,13 +4,14 @@
 //
 
 import { Link } from "react-router-dom";
-import { Calendar, User, ArrowRight } from "lucide-react";
+import { Calendar, User, ArrowRight, Sparkles } from "lucide-react";
 import { siteConfig } from "@shared/config";
 import type { PostSummary } from "@shared/types";
 import type { CSSProperties } from "react";
 
 interface PostCardProps {
   post: PostSummary;
+  isLatest?: boolean;
 }
 
 const cardStyle: CSSProperties = {
@@ -20,16 +21,40 @@ const cardStyle: CSSProperties = {
   padding: "var(--spacing-lg)",
   border: "1px solid var(--color-border)",
   textDecoration: "none",
-  transition:
-    "transform var(--transition-fast), box-shadow var(--transition-fast)",
+  transition: "transform var(--transition-fast), box-shadow var(--transition-fast)",
+  position: "relative",
 };
 
 const titleStyle: CSSProperties = {
   fontSize: "var(--font-size-xl)",
   fontWeight: 600,
   color: "var(--color-text-primary)",
+  lineHeight: 1.3,
   marginBottom: "var(--spacing-sm)",
+};
+
+const titleWithBadgeStyle: CSSProperties = {
+  fontSize: "var(--font-size-xl)",
+  fontWeight: 600,
+  color: "var(--color-text-primary)",
   lineHeight: 1.3,
+  marginBottom: 0,
+};
+
+const latestBadgeStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+  backgroundColor: "var(--color-accent)",
+  color: "#ffffff",
+  padding: "2px var(--spacing-sm)",
+  borderRadius: "var(--border-radius-sm)",
+  fontSize: "var(--font-size-xs)",
+  fontWeight: 600,
+  marginTop: "var(--spacing-xs)",
+  marginBottom: "var(--spacing-sm)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
 };
 
 const descriptionStyle: CSSProperties = {
@@ -72,10 +97,16 @@ const formatDate = (dateString: string): string => {
   return date.toLocaleDateString(siteConfig.locale, siteConfig.dateFormat);
 };
 
-export const PostCard = ({ post }: PostCardProps): JSX.Element => {
+export const PostCard = ({ post, isLatest = false }: PostCardProps): JSX.Element => {
   return (
     <Link to={`/post/${post.slug}`} style={cardStyle}>
-      <h2 style={titleStyle}>{post.frontMatter.title}</h2>
+      <h2 style={isLatest ? titleWithBadgeStyle : titleStyle}>{post.frontMatter.title}</h2>
+      {isLatest && (
+        <div style={latestBadgeStyle}>
+          <Sparkles size={10} />
+          {siteConfig.messages.latestArticles}
+        </div>
+      )}
       <p style={descriptionStyle}>{post.frontMatter.description}</p>
       <div style={metaContainerStyle}>
         <span style={metaItemStyle}>

src/client/components/blog/PostContent.tsx

@@ -3,8 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { Link } from "react-router-dom";
-import { Calendar, User, ArrowLeft, Tag } from "lucide-react";
+import { Calendar, User, Tag, Linkedin, Facebook, X } from "lucide-react";
 import { siteConfig } from "@shared/config";
 import type { Post } from "@shared/types";
 import type { CSSProperties } from "react";
@@ -14,18 +13,9 @@ interface PostContentProps {
 }
 
 const articleStyle: CSSProperties = {
-  maxWidth: "var(--max-width-content)",
+  maxWidth: "var(--max-width-container)",
   margin: "0 auto",
-};
-
-const backLinkStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--spacing-xs)",
-  color: "var(--color-accent)",
-  fontSize: "var(--font-size-sm)",
-  marginBottom: "var(--spacing-lg)",
-  textDecoration: "none",
+  width: "100%",
 };
 
 const headerStyle: CSSProperties = {
@@ -79,19 +69,81 @@ const contentStyle: CSSProperties = {
   color: "var(--color-text-primary)",
 };
 
+const shareContainerStyle: CSSProperties = {
+  marginTop: "var(--spacing-xl)",
+  paddingTop: "var(--spacing-md)",
+};
+
+const shareTitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  fontWeight: 500,
+  color: "var(--color-text-muted)",
+  marginBottom: "var(--spacing-sm)",
+};
+
+const shareButtonsStyle: CSSProperties = {
+  display: "flex",
+  gap: "var(--spacing-sm)",
+  flexWrap: "wrap",
+};
+
+const shareButtonBaseStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "24px",
+  height: "24px",
+  borderRadius: "var(--border-radius-sm)",
+  border: "none",
+  textDecoration: "none",
+  cursor: "pointer",
+  transition: "opacity var(--transition-fast)",
+};
+
+const linkedinButtonStyle: CSSProperties = {
+  ...shareButtonBaseStyle,
+  backgroundColor: "#0077b5",
+  color: "#ffffff",
+};
+
+const facebookButtonStyle: CSSProperties = {
+  ...shareButtonBaseStyle,
+  backgroundColor: "#1877f2",
+  color: "#ffffff",
+};
+
+const XButtonStyle: CSSProperties = {
+  ...shareButtonBaseStyle,
+  backgroundColor: "#000000",
+  color: "#ffffff",
+};
+
 const formatDate = (dateString: string): string => {
   const date = new Date(dateString);
   return date.toLocaleDateString(siteConfig.locale, siteConfig.dateFormat);
 };
 
+const getShareUrl = (): string => {
+  if (typeof window !== "undefined") {
+    return encodeURIComponent(window.location.href);
+  }
+  return "";
+};
+
+const getShareTitle = (title: string): string => {
+  return encodeURIComponent(title);
+};
+
 export const PostContent = ({ post }: PostContentProps): JSX.Element => {
+  const shareUrl = getShareUrl();
+  const shareTitle = getShareTitle(post.frontMatter.title);
+
+  const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`;
+  const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`;
+  const XShareUrl = `https://x.com/intent/tweet?url=${shareUrl}&text=${shareTitle}`;
+
   return (
     <article style={articleStyle}>
-      <Link to="/" style={backLinkStyle}>
-        <ArrowLeft size={16} />
-        {siteConfig.messages.backToHome}
-      </Link>
-
       <header style={headerStyle}>
         <h1 style={titleStyle}>{post.frontMatter.title}</h1>
 
@@ -126,6 +178,39 @@ export const PostContent = ({ post }: PostContentProps): JSX.Element => {
         style={contentStyle}
         dangerouslySetInnerHTML={{ __html: post.content }}
       />
+
+      <div style={shareContainerStyle}>
+        <p style={shareTitleStyle}>{siteConfig.messages.shareArticle}</p>
+        <div style={shareButtonsStyle}>
+          <a
+            href={linkedinShareUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={linkedinButtonStyle}
+            title="Share on LinkedIn"
+          >
+            <Linkedin size={16} />
+          </a>
+          <a
+            href={facebookShareUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={facebookButtonStyle}
+            title="Share on Facebook"
+          >
+            <Facebook size={16} />
+          </a>
+          <a
+            href={XShareUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={XButtonStyle}
+            title="Share on X"
+          >
+            <X size={16} />
+          </a>
+        </div>
+      </div>
     </article>
   );
 };

src/client/components/blog/PostList.tsx

@@ -10,6 +10,7 @@ import type { CSSProperties } from "react";
 
 interface PostListProps {
   posts: PostSummary[];
+  latestSlug?: string;
 }
 
 const listStyle: CSSProperties = {
@@ -25,7 +26,7 @@ const emptyStyle: CSSProperties = {
   fontSize: "var(--font-size-lg)",
 };
 
-export const PostList = ({ posts }: PostListProps): JSX.Element => {
+export const PostList = ({ posts, latestSlug }: PostListProps): JSX.Element => {
   if (posts.length === 0) {
     return <div style={emptyStyle}>{siteConfig.messages.noPosts}</div>;
   }
@@ -34,7 +35,11 @@ export const PostList = ({ posts }: PostListProps): JSX.Element => {
     <div style={listStyle}>
       {posts.map(
         (post: PostSummary): JSX.Element => (
-          <PostCard key={post.slug} post={post} />
+          <PostCard
+            key={post.slug}
+            post={post}
+            isLatest={post.slug === latestSlug}
+          />
         )
       )}
     </div>

src/client/components/layout/Footer.tsx

@@ -7,10 +7,14 @@ import { siteConfig } from "@shared/config";
 import type { CSSProperties } from "react";
 
 const footerStyle: CSSProperties = {
-  marginTop: "auto",
+  flexShrink: 0,
+  zIndex: 50,
   borderTop: "1px solid var(--color-border)",
-  padding: "var(--spacing-lg) 0",
-  backgroundColor: "var(--color-surface)",
+  padding: "var(--spacing-sm) 0",
+  backgroundColor: "var(--color-background)",
+  height: "var(--footer-height)",
+  overflowY: "hidden",
+  scrollbarGutter: "stable",
 };
 
 const footerContainerStyle: CSSProperties = {
@@ -18,6 +22,10 @@ const footerContainerStyle: CSSProperties = {
   margin: "0 auto",
   padding: "0 var(--spacing-md)",
   textAlign: "center",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
 };
 
 const footerTextStyle: CSSProperties = {

src/client/components/layout/Header.tsx

@@ -5,33 +5,58 @@
 
 import { Link } from "react-router-dom";
 import { siteConfig } from "@shared/config";
+import { useTheme } from "../../contexts/ThemeContext";
+import { usePageContext } from "../../contexts/PageContext";
+import { Sun, Moon, MonitorCog, Home, ChevronRight } from "lucide-react";
 import type { CSSProperties } from "react";
 
 const headerStyle: CSSProperties = {
-  position: "sticky",
-  top: 0,
+  flexShrink: 0,
   zIndex: 100,
   backgroundColor: "var(--color-background)",
   borderBottom: "1px solid var(--color-border)",
-  padding: "var(--spacing-md) 0",
+  height: "var(--header-height)",
+  overflowY: "hidden",
+  scrollbarGutter: "stable",
 };
 
 const headerContainerStyle: CSSProperties = {
   maxWidth: "var(--max-width-container)",
   margin: "0 auto",
-  padding: "0 var(--spacing-md)",
+  padding: "var(--spacing-md)",
   display: "flex",
   alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--spacing-md)",
+  height: "100%",
+};
+
+const leftSectionStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+};
+
+const centerSectionStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+  flex: 1,
   justifyContent: "center",
+  minWidth: 0,
+  overflow: "hidden",
 };
 
-const logoLinkStyle: CSSProperties = {
+const rightSectionStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: "var(--spacing-sm)",
-  color: "var(--color-text-primary)",
-  fontWeight: 600,
-  fontSize: "var(--font-size-xl)",
+  flexShrink: 0,
+};
+
+const profileLinkStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
   textDecoration: "none",
 };
 
@@ -42,18 +67,119 @@ const profileImageStyle: CSSProperties = {
   objectFit: "cover",
 };
 
+const blogTitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-lg)",
+  fontWeight: 600,
+  color: "var(--color-text-primary)",
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+};
+
+const breadcrumbContainerStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+  minWidth: 0,
+  overflow: "hidden",
+};
+
+const chevronStyle: CSSProperties = {
+  color: "var(--color-text-muted)",
+  flexShrink: 0,
+};
+
+const postTitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-base)",
+  fontWeight: 500,
+  color: "var(--color-text-secondary)",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "200px",
+};
+
+const iconButtonStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "36px",
+  height: "36px",
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-text-primary)",
+  cursor: "pointer",
+  transition: "background-color var(--transition-fast), border-color var(--transition-fast)",
+  textDecoration: "none",
+};
+
+const ThemeIcon = ({ theme }: { theme: "system" | "light" | "dark" }): JSX.Element => {
+  if (theme === "light") {
+    return <Sun size={18} />;
+  }
+  if (theme === "dark") {
+    return <Moon size={18} />;
+  }
+  return <MonitorCog size={18} />;
+};
+
 export const Header = (): JSX.Element => {
+  const { theme, setTheme } = useTheme();
+  const { currentPostTitle } = usePageContext();
+
+  const cycleTheme = (): void => {
+    const themes: Array<"system" | "light" | "dark"> = ["system", "light", "dark"];
+    const currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setTheme(themes[nextIndex]);
+  };
+
+  const isOnPostPage = currentPostTitle !== null;
+
   return (
     <header style={headerStyle}>
       <div style={headerContainerStyle}>
-        <Link to="/" style={logoLinkStyle}>
-          <img
-            src="/assets/images/profile.png"
-            alt={siteConfig.name}
-            style={profileImageStyle}
-          />
-          <span>{siteConfig.description}</span>
-        </Link>
+        <div style={leftSectionStyle}>
+          <Link to="/" style={profileLinkStyle}>
+            <img
+              src="/assets/images/profile.png"
+              alt={siteConfig.name}
+              style={profileImageStyle}
+            />
+          </Link>
+        </div>
+
+        <div style={centerSectionStyle}>
+          <div style={breadcrumbContainerStyle}>
+            <Link to="/" style={blogTitleStyle}>
+              {siteConfig.description}
+            </Link>
+            {isOnPostPage && (
+              <>
+                <ChevronRight size={16} style={chevronStyle} />
+                <span style={postTitleStyle} title={currentPostTitle}>
+                  {currentPostTitle}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div style={rightSectionStyle}>
+          {isOnPostPage && (
+            <Link to="/" style={iconButtonStyle} title={siteConfig.messages.backToHome}>
+              <Home size={18} />
+            </Link>
+          )}
+          <button
+            type="button"
+            onClick={cycleTheme}
+            style={iconButtonStyle}
+            title={`Theme: ${theme}`}
+          >
+            <ThemeIcon theme={theme} />
+          </button>
+        </div>
       </div>
     </header>
   );

src/client/components/layout/Layout.tsx

@@ -12,24 +12,36 @@ interface LayoutProps {
 }
 
 const layoutStyle: CSSProperties = {
-  minHeight: "100vh",
+  height: "100%",
   display: "flex",
   flexDirection: "column",
+  overflow: "hidden",
 };
 
 const mainStyle: CSSProperties = {
   flex: 1,
+  overflowY: "auto",
+  overflowX: "hidden",
+  scrollbarGutter: "stable",
+};
+
+const mainContentStyle: CSSProperties = {
   width: "100%",
   maxWidth: "var(--max-width-container)",
   margin: "0 auto",
   padding: "var(--spacing-xl) var(--spacing-md)",
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100%",
 };
 
 export const Layout = ({ children }: LayoutProps): JSX.Element => {
   return (
     <div style={layoutStyle}>
       <Header />
-      <main style={mainStyle}>{children}</main>
+      <main style={mainStyle}>
+        <div style={mainContentStyle}>{children}</div>
+      </main>
       <Footer />
     </div>
   );

src/client/contexts/PageContext.tsx

@@ -0,0 +1,45 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+
+interface PageContextValue {
+  currentPostTitle: string | null;
+  setCurrentPostTitle: (title: string | null) => void;
+}
+
+const PageContext = createContext<PageContextValue | null>(null);
+
+interface PageProviderProps {
+  children: ReactNode;
+}
+
+export const PageProvider = ({ children }: PageProviderProps): JSX.Element => {
+  const [currentPostTitle, setCurrentPostTitleState] = useState<string | null>(null);
+
+  const setCurrentPostTitle = useCallback((title: string | null): void => {
+    setCurrentPostTitleState(title);
+  }, []);
+
+  const contextValue = useMemo((): PageContextValue => ({
+    currentPostTitle,
+    setCurrentPostTitle,
+  }), [currentPostTitle, setCurrentPostTitle]);
+
+  return (
+    <PageContext.Provider value={contextValue}>
+      {children}
+    </PageContext.Provider>
+  );
+};
+
+export const usePageContext = (): PageContextValue => {
+  const context = useContext(PageContext);
+  if (!context) {
+    throw new Error("usePageContext must be used within a PageProvider");
+  }
+  return context;
+};

src/client/contexts/ThemeContext.tsx

@@ -0,0 +1,105 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+
+type ThemeMode = "system" | "light" | "dark";
+type ResolvedTheme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const THEME_STORAGE_KEY = "blog-theme-preference";
+
+const getSystemTheme = (): ResolvedTheme => {
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+};
+
+const getStoredTheme = (): ThemeMode => {
+  if (typeof window !== "undefined" && window.localStorage) {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  }
+  return "system";
+};
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider = ({ children }: ThemeProviderProps): JSX.Element => {
+  const [theme, setThemeState] = useState<ThemeMode>(getStoredTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() => {
+    const stored = getStoredTheme();
+    return stored === "system" ? getSystemTheme() : stored;
+  });
+
+  const applyTheme = useCallback((mode: ThemeMode): void => {
+    const resolved: ResolvedTheme = mode === "system" ? getSystemTheme() : mode;
+    setResolvedTheme(resolved);
+
+    if (mode === "system") {
+      document.documentElement.removeAttribute("data-theme");
+    } else {
+      document.documentElement.setAttribute("data-theme", mode);
+    }
+  }, []);
+
+  const setTheme = useCallback((newTheme: ThemeMode): void => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined" && window.localStorage) {
+      localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+    }
+    applyTheme(newTheme);
+  }, [applyTheme]);
+
+  useEffect((): (() => void) => {
+    applyTheme(theme);
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemThemeChange = (): void => {
+      if (theme === "system") {
+        setResolvedTheme(getSystemTheme());
+      }
+    };
+
+    mediaQuery.addEventListener("change", handleSystemThemeChange);
+
+    return (): void => {
+      mediaQuery.removeEventListener("change", handleSystemThemeChange);
+    };
+  }, [theme, applyTheme]);
+
+  const contextValue = useMemo((): ThemeContextValue => ({
+    theme,
+    resolvedTheme,
+    setTheme,
+  }), [theme, resolvedTheme, setTheme]);
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

src/client/hooks/usePosts.ts

@@ -37,7 +37,7 @@ export const usePosts = (): UsePostsResult => {
       } else {
         setError(result.error || "Failed to fetch posts");
       }
-    } catch (fetchError) {
+    } catch {
       setError("Failed to connect to server");
     } finally {
       setLoading(false);
@@ -70,7 +70,7 @@ export const usePost = (slug: string): UsePostResult => {
         } else {
           setError(result.error || "Post not found");
         }
-      } catch (fetchError) {
+      } catch {
         setError("Failed to connect to server");
       } finally {
         setLoading(false);

src/client/pages/HomePage.tsx

@@ -3,24 +3,25 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+import { useState, useEffect, useMemo } from "react";
 import { usePosts } from "../hooks/usePosts";
+import { usePageContext } from "../contexts/PageContext";
 import { PostList } from "../components/blog/PostList";
 import { Head } from "../components/common/Head";
 import { siteConfig } from "@shared/config";
-import { Loader, AlertCircle } from "lucide-react";
+import { Loader, AlertCircle, ChevronLeft, ChevronRight } from "lucide-react";
 import type { CSSProperties } from "react";
 
+const POSTS_PER_PAGE = 5;
+
 const containerStyle: CSSProperties = {
-  maxWidth: "var(--max-width-content)",
+  maxWidth: "var(--max-width-container)",
   margin: "0 auto",
-};
-
-const headingStyle: CSSProperties = {
-  fontSize: "var(--font-size-3xl)",
-  fontWeight: 700,
-  marginBottom: "var(--spacing-xl)",
-  color: "var(--color-text-primary)",
-  textAlign: "center",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  justifyContent: "center",
+  width: "100%",
 };
 
 const loadingContainerStyle: CSSProperties = {
@@ -28,7 +29,7 @@ const loadingContainerStyle: CSSProperties = {
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  padding: "var(--spacing-2xl)",
+  flex: 1,
   gap: "var(--spacing-md)",
   color: "var(--color-text-muted)",
 };
@@ -38,7 +39,7 @@ const errorContainerStyle: CSSProperties = {
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  padding: "var(--spacing-2xl)",
+  flex: 1,
   gap: "var(--spacing-md)",
   color: "var(--color-text-muted)",
   textAlign: "center",
@@ -48,37 +49,158 @@ const spinnerStyle: CSSProperties = {
   animation: "spin 1s linear infinite",
 };
 
+const contentWrapperStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--spacing-lg)",
+};
+
+const paginationContainerStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "var(--spacing-lg)",
+};
+
+const paginationButtonStyle: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--spacing-xs)",
+  padding: "var(--spacing-sm) var(--spacing-md)",
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-text-primary)",
+  fontSize: "var(--font-size-sm)",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "background-color var(--transition-fast), border-color var(--transition-fast)",
+};
+
+const paginationButtonDisabledStyle: CSSProperties = {
+  ...paginationButtonStyle,
+  opacity: 0.5,
+  cursor: "not-allowed",
+};
+
+const paginationInfoStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  color: "var(--color-text-muted)",
+  position: "absolute",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+
+const paginationWrapperStyle: CSSProperties = {
+  position: "relative",
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+};
+
 export const HomePage = (): JSX.Element => {
   const { posts, loading, error } = usePosts();
+  const { setCurrentPostTitle } = usePageContext();
+  const [currentPage, setCurrentPage] = useState<number>(1);
 
-  return (
-    <div style={containerStyle}>
-      <Head title={siteConfig.title} description={siteConfig.description} />
+  useEffect((): void => {
+    setCurrentPostTitle(null);
+  }, [setCurrentPostTitle]);
 
-      <h1 style={headingStyle}>{siteConfig.messages.latestArticles}</h1>
+  const totalPages = useMemo((): number => {
+    return Math.ceil(posts.length / POSTS_PER_PAGE);
+  }, [posts.length]);
 
-      {loading && (
+  const paginatedPosts = useMemo(() => {
+    const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
+    const endIndex = startIndex + POSTS_PER_PAGE;
+    return posts.slice(startIndex, endIndex);
+  }, [posts, currentPage]);
+
+  const latestSlug = useMemo((): string | undefined => {
+    if (posts.length > 0 && currentPage === 1) {
+      return posts[0].slug;
+    }
+    return undefined;
+  }, [posts, currentPage]);
+
+  const handlePreviousPage = (): void => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const handleNextPage = (): void => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={containerStyle}>
+        <Head title={siteConfig.title} description={siteConfig.description} />
         <div style={loadingContainerStyle}>
           <Loader size={32} style={spinnerStyle} />
           <span>{siteConfig.messages.loading}</span>
         </div>
-      )}
+      </div>
+    );
+  }
 
-      {error && (
+  if (error) {
+    return (
+      <div style={containerStyle}>
+        <Head title={siteConfig.title} description={siteConfig.description} />
         <div style={errorContainerStyle}>
           <AlertCircle size={32} />
           <span>{error}</span>
         </div>
-      )}
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle}>
+      <Head title={siteConfig.title} description={siteConfig.description} />
+
+      <div style={contentWrapperStyle}>
+        <PostList posts={paginatedPosts} latestSlug={latestSlug} />
+
+        {totalPages > 1 && (
+          <div style={paginationContainerStyle}>
+            <div style={paginationWrapperStyle}>
+              <button
+                type="button"
+                onClick={handlePreviousPage}
+                disabled={currentPage === 1}
+                style={currentPage === 1 ? paginationButtonDisabledStyle : paginationButtonStyle}
+              >
+                <ChevronLeft size={18} />
+                {siteConfig.messages.previous}
+              </button>
 
-      {!loading && !error && <PostList posts={posts} />}
+              <span style={paginationInfoStyle}>
+                {currentPage} / {totalPages}
+              </span>
 
-      <style>{`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `}</style>
+              <button
+                type="button"
+                onClick={handleNextPage}
+                disabled={currentPage === totalPages}
+                style={currentPage === totalPages ? paginationButtonDisabledStyle : paginationButtonStyle}
+              >
+                {siteConfig.messages.next}
+                <ChevronRight size={18} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

src/client/pages/PostPage.tsx

@@ -4,19 +4,27 @@
 //
 
 import { useParams, Link } from "react-router-dom";
+import { useEffect } from "react";
 import { usePost } from "../hooks/usePosts";
+import { usePageContext } from "../contexts/PageContext";
 import { PostContent } from "../components/blog/PostContent";
 import { Head } from "../components/common/Head";
 import { siteConfig } from "@shared/config";
 import { Loader, AlertCircle, ArrowLeft } from "lucide-react";
 import type { CSSProperties } from "react";
 
+const containerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+};
+
 const loadingContainerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  padding: "var(--spacing-2xl)",
+  flex: 1,
   gap: "var(--spacing-md)",
   color: "var(--color-text-muted)",
 };
@@ -26,7 +34,7 @@ const errorContainerStyle: CSSProperties = {
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  padding: "var(--spacing-2xl)",
+  flex: 1,
   gap: "var(--spacing-md)",
   color: "var(--color-text-muted)",
   textAlign: "center",
@@ -48,37 +56,46 @@ const spinnerStyle: CSSProperties = {
 export const PostPage = (): JSX.Element => {
   const { slug } = useParams<{ slug: string }>();
   const { post, loading, error } = usePost(slug || "");
+  const { setCurrentPostTitle } = usePageContext();
+
+  useEffect((): (() => void) => {
+    if (post) {
+      setCurrentPostTitle(post.frontMatter.title);
+    }
+
+    return (): void => {
+      setCurrentPostTitle(null);
+    };
+  }, [post, setCurrentPostTitle]);
 
   if (loading) {
     return (
-      <div style={loadingContainerStyle}>
-        <Loader size={32} style={spinnerStyle} />
-        <span>{siteConfig.messages.loading}</span>
-        <style>{`
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-        `}</style>
+      <div style={containerStyle}>
+        <div style={loadingContainerStyle}>
+          <Loader size={32} style={spinnerStyle} />
+          <span>{siteConfig.messages.loading}</span>
+        </div>
       </div>
     );
   }
 
   if (error || !post) {
     return (
-      <div style={errorContainerStyle}>
-        <AlertCircle size={32} />
-        <span>{error || siteConfig.messages.postNotFound}</span>
-        <Link to="/" style={backLinkStyle}>
-          <ArrowLeft size={16} />
-          {siteConfig.messages.backToHome}
-        </Link>
+      <div style={containerStyle}>
+        <div style={errorContainerStyle}>
+          <AlertCircle size={32} />
+          <span>{error || siteConfig.messages.postNotFound}</span>
+          <Link to="/" style={backLinkStyle}>
+            <ArrowLeft size={16} />
+            {siteConfig.messages.backToHome}
+          </Link>
+        </div>
       </div>
     );
   }
 
   return (
-    <>
+    <div style={containerStyle}>
       <Head
         title={post.frontMatter.title}
         description={post.frontMatter.description}
@@ -86,6 +103,6 @@ export const PostPage = (): JSX.Element => {
         type="article"
       />
       <PostContent post={post} />
-    </>
+    </div>
   );
 };

src/client/styles/global.css

@@ -22,6 +22,7 @@
   --color-border: #e5e7eb;
   --color-code-background: #1e1e2e;
   --color-code-text: #cdd6f4;
+  --color-hr: #9ca3af;
   --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",
@@ -53,13 +54,52 @@
   --line-height-tight: 1.4;
   --line-height-base: 1.75;
   --line-height-relaxed: 2;
+  --header-height: 60px;
+  --footer-height: 44px;
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(0.263 0 0);
+  --color-surface: oklch(0.32 0 0);
+  --color-text-primary: #f5f5f7;
+  --color-text-secondary: #c5c5d0;
+  --color-text-muted: #9898a8;
+  --color-accent: #60a5fa;
+  --color-accent-hover: #93c5fd;
+  --color-border: oklch(0.4 0 0);
+  --color-code-background: oklch(0.22 0 0);
+  --color-code-text: #e2e8f0;
+  --color-hr: #7a7a8c;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-background: oklch(0.263 0 0);
+    --color-surface: oklch(0.32 0 0);
+    --color-text-primary: #f5f5f7;
+    --color-text-secondary: #c5c5d0;
+    --color-text-muted: #9898a8;
+    --color-accent: #60a5fa;
+    --color-accent-hover: #93c5fd;
+    --color-border: oklch(0.4 0 0);
+    --color-code-background: oklch(0.22 0 0);
+    --color-code-text: #e2e8f0;
+    --color-hr: #7a7a8c;
+  }
+
+  :root:not([data-theme="light"]) .hljs-comment,
+  :root:not([data-theme="light"]) .hljs-quote,
+  :root:not([data-theme="light"]) .hljs-deletion,
+  :root:not([data-theme="light"]) .hljs-meta {
+    color: #8888a0;
+  }
 }
 
 html {
   font-size: 16px;
-  scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  height: 100%;
 }
 
 body {
@@ -68,16 +108,13 @@ body {
   line-height: var(--line-height-base);
   color: var(--color-text-primary);
   background-color: var(--color-background);
-  min-height: 100vh;
-  overflow-x: hidden;
+  height: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 #root {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
 }
 
 a {
@@ -304,6 +341,13 @@ pre code {
   color: #f38ba8;
 }
 
+[data-theme="dark"] .hljs-comment,
+[data-theme="dark"] .hljs-quote,
+[data-theme="dark"] .hljs-deletion,
+[data-theme="dark"] .hljs-meta {
+  color: #8888a0;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -325,8 +369,10 @@ th {
 
 hr {
   border: none;
-  border-top: 1px solid var(--color-border);
+  height: 0.5px;
+  background-color: var(--color-hr);
   margin: var(--spacing-2xl) 0;
+  border-radius: 1px;
 }
 
 iframe {
@@ -340,28 +386,6 @@ iframe {
   color: var(--color-background);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: oklch(0.263 0 0);
-    --color-surface: oklch(0.32 0 0);
-    --color-text-primary: #f5f5f7;
-    --color-text-secondary: #c5c5d0;
-    --color-text-muted: #9898a8;
-    --color-accent: #60a5fa;
-    --color-accent-hover: #93c5fd;
-    --color-border: oklch(0.4 0 0);
-    --color-code-background: oklch(0.22 0 0);
-    --color-code-text: #e2e8f0;
-  }
-
-  .hljs-comment,
-  .hljs-quote,
-  .hljs-deletion,
-  .hljs-meta {
-    color: #8888a0;
-  }
-}
-
 @media (max-width: 320px) {
   html {
     font-size: 14px;
@@ -384,4 +408,13 @@ iframe {
   html {
     font-size: 24px;
   }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/server/routes/apiRoutes.ts

@@ -35,7 +35,8 @@ apiRoutes.get(
   "/posts/:slug",
   async (request: Request, response: Response): Promise<void> => {
     try {
-      const slug: string = request.params.slug;
+      const slugParam = request.params.slug;
+      const slug: string = Array.isArray(slugParam) ? slugParam[0] : slugParam;
       const post: Post | null = await getPostBySlug(slug);
 
       if (!post) {

src/shared/config.ts

@@ -17,12 +17,15 @@ export const siteConfig = {
     copyrightText: "Copyright",
   },
   messages: {
-    loading: "Loading article...",
+    loading: "Please wait a moment...",
     noPosts: "There are no post available at this time",
     postNotFound: "Article not found",
     backToHome: "Back to Home",
     readMore: "Read more",
-    latestArticles: "Latest Articles",
+    latestArticles: "Latest",
+    shareArticle: "Share this article",
+    previous: "Previous",
+    next: "Next",
   },
   defaults: {
     postTitle: "Untitled",