From 094351e3aeec49bd4bc7dd17c282ecf7388660cd Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Sat, 12 Jul 2025 23:26:33 +0800
Subject: [PATCH] refactor: restructure config system with improved type safety

---
 astro.config.ts                               |   8 +-
 src/components/features/FormattedDate.astro   |   7 +-
 src/components/features/PostList.astro        |  10 +-
 src/components/layout/BaseHead.astro          |  28 ++++-
 src/components/layout/Footer.astro            |   4 +-
 src/components/layout/Header.astro            |   6 +-
 src/components/layout/TransitionWrapper.astro |   4 +-
 src/components/ui/BackButton.astro            |  14 ++-
 src/components/ui/CopyCode.astro              |   6 +-
 src/components/ui/ImageOptimizer.astro        | 100 ++++++++++++++++++
 src/components/ui/TableOfContents.astro       |  62 +++++------
 src/components/ui/ThemeToggle.astro           |   4 +-
 src/config.ts                                 |  48 +++++----
 src/content/config.ts                         |  13 ---
 src/content/posts/theme-guide.md              |  38 +++++--
 src/layouts/BaseLayout.astro                  |  17 +--
 src/layouts/IndexLayout.astro                 |   4 +-
 src/layouts/PostLayout.astro                  |  22 ++--
 src/pages/404.astro                           |   4 +-
 src/pages/index.astro                         |   4 +-
 src/plugins/rehype-image-processor.mjs        |  12 ++-
 src/styles/global.css                         |  11 +-
 src/styles/post.css                           |  45 +++++++-
 src/types/component.types.ts                  |  15 +++
 src/types/config.types.ts                     |  27 ++++-
 src/utils/date.ts                             |   6 +-
 src/utils/draft.ts                            |   2 +-
 src/utils/feed.ts                             |  14 +--
 src/utils/image-config.ts                     |  27 +++++
 29 files changed, 416 insertions(+), 146 deletions(-)
 create mode 100644 src/components/ui/ImageOptimizer.astro
 delete mode 100644 src/content/config.ts
 create mode 100644 src/utils/image-config.ts

diff --git a/astro.config.ts b/astro.config.ts
index 18874fe..915d8f0 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -10,11 +10,12 @@ import rehypeCleanup from './src/plugins/rehype-cleanup.mjs'
 import rehypeImageProcessor from './src/plugins/rehype-image-processor.mjs'
 import rehypeCopyCode from './src/plugins/rehype-copy-code.mjs'
 import remarkTOC from './src/plugins/remark-toc.mjs'
-import { SITE } from './src/config'
+import { themeConfig } from './src/config'
+import { imageConfig } from './src/utils/image-config'
 import path from 'path'
 
 export default defineConfig({
-  site: SITE.website,
+  site: themeConfig.site.website,
   devToolbar: {
     enabled: false
   },
@@ -24,7 +25,8 @@ export default defineConfig({
   },
   image: {
     service: {
-      entrypoint: 'astro/assets/services/sharp'
+      entrypoint: 'astro/assets/services/sharp',
+      config: imageConfig
     }
   },
   markdown: {
diff --git a/src/components/features/FormattedDate.astro b/src/components/features/FormattedDate.astro
index 6aec9d6..66185ab 100644
--- a/src/components/features/FormattedDate.astro
+++ b/src/components/features/FormattedDate.astro
@@ -1,6 +1,6 @@
 ---
+import { themeConfig } from '@/config'
 import { formatDate } from '@/utils/date'
-import { SITE } from '@/config'
 
 interface Props {
   date: Date
@@ -12,8 +12,9 @@ const { date, format } = Astro.props
 
 <time
   datetime={date.toISOString()}
-  class={!SITE.dateOnRight &&
-  (SITE.dateFormat === 'MONTH DAY YYYY' || SITE.dateFormat === 'DAY MONTH YYYY')
+  class={!themeConfig.date.dateOnRight &&
+  (themeConfig.date.dateFormat === 'MONTH DAY YYYY' ||
+    themeConfig.date.dateFormat === 'DAY MONTH YYYY')
     ? 'date-left'
     : ''}
 >
diff --git a/src/components/features/PostList.astro b/src/components/features/PostList.astro
index a0dc3cb..3488a8d 100644
--- a/src/components/features/PostList.astro
+++ b/src/components/features/PostList.astro
@@ -1,7 +1,7 @@
 ---
 import FormattedDate from '@/components/features/FormattedDate.astro'
 import type { CollectionEntry } from 'astro:content'
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 
 interface Props {
   posts: CollectionEntry<'posts'>[]
@@ -15,15 +15,15 @@ const { posts } = Astro.props
     posts.map((post) => (
       <li>
         <a href={`/${post.id}/`}>
-          <div class={`post-item ${!SITE.dateOnRight ? 'date-left' : ''}`}>
-            {!SITE.dateOnRight && (
+          <div class={`post-item ${!themeConfig.date.dateOnRight ? 'date-left' : ''}`}>
+            {!themeConfig.date.dateOnRight && (
               <p class="date font-features">
                 <FormattedDate date={post.data.pubDate} />
               </p>
             )}
             <p class="title">{post.data.title}</p>
-            {SITE.dateOnRight && <div class="divider" />}
-            {SITE.dateOnRight && (
+            {themeConfig.date.dateOnRight && <div class="divider" />}
+            {themeConfig.date.dateOnRight && (
               <p class="date font-features">
                 <FormattedDate date={post.data.pubDate} />
               </p>
diff --git a/src/components/layout/BaseHead.astro b/src/components/layout/BaseHead.astro
index 37db727..705082e 100644
--- a/src/components/layout/BaseHead.astro
+++ b/src/components/layout/BaseHead.astro
@@ -1,7 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import type { BaseHeadProps } from '@/types/component.types'
 import 'katex/dist/katex.min.css'
 
@@ -13,7 +13,7 @@ const { title, description } = Astro.props as BaseHeadProps
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-{SITE.fadeAnimation && <meta name="view-transition" content="same-origin" />}
+{themeConfig.general.fadeAnimation && <meta name="view-transition" content="same-origin" />}
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
@@ -28,7 +28,7 @@ const { title, description } = Astro.props as BaseHeadProps
 <link
   rel="alternate"
   type="application/rss+xml"
-  title={SITE.title}
+  title={themeConfig.site.title}
   href={new URL('rss.xml', Astro.site)}
 />
 <meta name="generator" content={Astro.generator} />
@@ -38,7 +38,7 @@ const { title, description } = Astro.props as BaseHeadProps
 
 <!-- Primary Meta Tags -->
 <title>
-  {title || SITE.title}
+  {title || themeConfig.site.title}
 </title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
@@ -58,7 +58,7 @@ const { title, description } = Astro.props as BaseHeadProps
 <meta property="twitter:image" content={new URL('/chiri-og.png', Astro.url)} />
 
 <!-- Transitions Initialization -->
-<script is:inline define:vars={{ fadeAnimation: SITE.fadeAnimation }}>
+<script is:inline define:vars={{ fadeAnimation: themeConfig.general.fadeAnimation }}>
   function initMotionPref(doc = document) {
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
     const supportsViewTransitions = 'startViewTransition' in document
@@ -70,6 +70,24 @@ const { title, description } = Astro.props as BaseHeadProps
       !fadeAnimation || !supportsViewTransitions
     )
 
+    // Dynamically control view transition navigation behavior
+    let viewTransitionStyle = doc.getElementById('view-transition-style')
+
+    if (fadeAnimation && supportsViewTransitions && !prefersReducedMotion) {
+      // Enable view transition navigation
+      if (!viewTransitionStyle) {
+        viewTransitionStyle = doc.createElement('style')
+        viewTransitionStyle.id = 'view-transition-style'
+        viewTransitionStyle.textContent = '@view-transition { navigation: auto; }'
+        doc.head.appendChild(viewTransitionStyle)
+      }
+    } else {
+      // Disable view transition navigation
+      if (viewTransitionStyle) {
+        viewTransitionStyle.remove()
+      }
+    }
+
     doc.documentElement.classList.add('js')
   }
 
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index a9cfdc1..1f85911 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -1,5 +1,5 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 const today = new Date()
 ---
 
@@ -10,7 +10,7 @@ const today = new Date()
         &copy;
         {today.getFullYear()}
       </span>
-      {SITE.author}
+      {themeConfig.site.author}
     </div>
     <div class="powered-by">
       Powered by{' '}
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 01d9fe3..c6723a7 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -1,13 +1,13 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import ThemeToggle from '@/components/ui/ThemeToggle.astro'
 ---
 
 <header>
   <nav>
     <div class="logo-container">
-      {SITE.favicon && <img src="/favicon.svg" alt="favicon" class="favicon" />}
-      <a href="/">{SITE.title}</a>
+      {themeConfig.general.favicon && <img src="/favicon.svg" alt="favicon" class="favicon" />}
+      <a href="/">{themeConfig.site.title}</a>
     </div>
     <ThemeToggle />
   </nav>
diff --git a/src/components/layout/TransitionWrapper.astro b/src/components/layout/TransitionWrapper.astro
index 9b9a41d..0e27340 100644
--- a/src/components/layout/TransitionWrapper.astro
+++ b/src/components/layout/TransitionWrapper.astro
@@ -1,5 +1,5 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import type { TransitionProps } from '@/types'
 
 type Props = TransitionProps
@@ -9,7 +9,7 @@ const transitionName = type === 'post' ? 'post-content' : 'page-content'
 ---
 
 {
-  SITE.fadeAnimation ? (
+  themeConfig.general.fadeAnimation ? (
     <div transition:name={transitionName} transition:animate="initial" class={className}>
       <slot />
     </div>
diff --git a/src/components/ui/BackButton.astro b/src/components/ui/BackButton.astro
index 38807d7..1ea5b3c 100644
--- a/src/components/ui/BackButton.astro
+++ b/src/components/ui/BackButton.astro
@@ -1,5 +1,5 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 ---
 
 <a href="/" class="back-button">
@@ -17,9 +17,9 @@ import { SITE } from '@/config'
 <script
   is:inline
   define:vars={{
-    contentWidth: SITE.contentWidth,
-    centeredLayout: SITE.centeredLayout,
-    toc: SITE.toc
+    contentWidth: themeConfig.general.contentWidth,
+    centeredLayout: themeConfig.general.centeredLayout,
+    toc: themeConfig.post.toc
   }}
 >
   ;(function () {
@@ -38,7 +38,11 @@ import { SITE } from '@/config'
       // Calculate available margin space for positioning
       const pageWidth = window.innerWidth
       const contentWidthValue = parseFloat(contentWidth)
-      const margin = (pageWidth - contentWidthValue * 16) / 2
+      // Apply the same minimum width logic as in BaseLayout
+      const widthValue = Math.min(contentWidthValue, 50)
+      const shouldUseCustomWidth = widthValue > 25
+      const finalWidthValue = shouldUseCustomWidth ? widthValue : 25
+      const margin = (pageWidth - finalWidthValue * 16) / 2
       const baseMinSpace = 11 * 16 // Base minimum space needed
       // If toc is enabled, need additional 2.5rem (40px) space
       const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
diff --git a/src/components/ui/CopyCode.astro b/src/components/ui/CopyCode.astro
index 19d5285..e301c2a 100644
--- a/src/components/ui/CopyCode.astro
+++ b/src/components/ui/CopyCode.astro
@@ -1,8 +1,8 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 ---
 
-<script define:vars={{ copyCode: SITE.copyCode }}>
+<script define:vars={{ copyCode: themeConfig.post.copyCode }}>
   function initCopyCode() {
     const copyIcon = `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
@@ -143,6 +143,8 @@ import { SITE } from '@/config'
     justify-content: center;
     border: 1px solid var(--border);
     backdrop-filter: blur(48px);
+    opacity: 0;
+    pointer-events: none;
   }
 
   [data-copy-code='disabled'] .copy-button {
diff --git a/src/components/ui/ImageOptimizer.astro b/src/components/ui/ImageOptimizer.astro
new file mode 100644
index 0000000..a98e625
--- /dev/null
+++ b/src/components/ui/ImageOptimizer.astro
@@ -0,0 +1,100 @@
+---
+import { Image } from 'astro:assets'
+import type { ImageOptimizerProps } from '../../types/component.types'
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  quality = 85,
+  format = 'webp',
+  loading = 'lazy',
+  decoding = 'async',
+  class: className,
+  caption,
+  priority = false
+} = Astro.props as ImageOptimizerProps
+
+// Use eager loading for priority images
+const actualLoading = priority ? 'eager' : loading
+
+// Generate responsive image sizes
+const sizes = '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
+---
+
+<figure class={`optimized-image ${className || ''}`}>
+  {
+    typeof src === 'string' ? (
+      <img
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={actualLoading}
+        decoding={decoding}
+        fetchpriority={priority ? 'high' : 'auto'}
+        sizes={sizes}
+        class="responsive-image"
+      />
+    ) : (
+      <Image
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        quality={quality}
+        format={format}
+        loading={actualLoading}
+        decoding={decoding}
+        fetchpriority={priority ? 'high' : 'auto'}
+        sizes={sizes}
+        class="responsive-image"
+      />
+    )
+  }
+  {caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+  .optimized-image {
+    margin: 1.25em 0;
+    text-align: center;
+  }
+
+  .optimized-image .responsive-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    transition: opacity 0.3s ease;
+    background-color: var(--bg-secondary);
+  }
+
+  .optimized-image figcaption {
+    color: var(--text-secondary);
+    font-size: var(--font-size-s);
+    margin-top: 0.75em;
+    text-align: center;
+  }
+
+  /* Loading state */
+  .optimized-image .responsive-image[loading='lazy'] {
+    opacity: 0;
+    animation: fadeIn 0.3s ease forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Hover effect for interactive images */
+  .optimized-image .responsive-image:hover {
+    transform: scale(1.02);
+    transition: transform 0.3s ease;
+  }
+</style>
diff --git a/src/components/ui/TableOfContents.astro b/src/components/ui/TableOfContents.astro
index 591b9bf..94b058b 100644
--- a/src/components/ui/TableOfContents.astro
+++ b/src/components/ui/TableOfContents.astro
@@ -1,5 +1,5 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import type { TOCProps } from '@/types'
 
 const { toc = [] }: TOCProps = Astro.props
@@ -38,14 +38,12 @@ const { toc = [] }: TOCProps = Astro.props
 <script
   is:inline
   define:vars={{
-    contentWidth: SITE.contentWidth,
-    centeredLayout: SITE.centeredLayout,
-    toc: SITE.toc
+    contentWidth: themeConfig.general.contentWidth,
+    centeredLayout: themeConfig.general.centeredLayout,
+    toc: themeConfig.post.toc
   }}
 >
   ;(function () {
-    let isInitialized = false
-
     // TOC positioning logic (similar to BackButton)
     function adjustTOCPosition() {
       const tocContainer = document.querySelector('.toc-container')
@@ -60,7 +58,11 @@ const { toc = [] }: TOCProps = Astro.props
       // Calculate available margin space for positioning
       const pageWidth = window.innerWidth
       const contentWidthValue = parseFloat(contentWidth)
-      const margin = (pageWidth - contentWidthValue * 16) / 2
+      // Apply the same minimum width logic as in BaseLayout
+      const widthValue = Math.min(contentWidthValue, 50)
+      const shouldUseCustomWidth = widthValue > 25
+      const finalWidthValue = shouldUseCustomWidth ? widthValue : 25
+      const margin = (pageWidth - finalWidthValue * 16) / 2
       const baseMinSpace = 11 * 16 // Base minimum space needed
       // If toc is enabled, need additional 2.5rem (40px) space
       const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
@@ -73,6 +75,9 @@ const { toc = [] }: TOCProps = Astro.props
         // If toc is enabled, move 2.5rem (40px) further left
         const leftPosition = toc ? basePosition - 40 : basePosition
         tocContainer.style.left = `${leftPosition}px`
+
+        // Update active state after TOC becomes visible
+        setTimeout(() => updateActiveTOCItem(), 100)
       } else {
         tocContainer.style.display = 'none'
         tocContainer.classList.remove('fixed-position')
@@ -160,32 +165,23 @@ const { toc = [] }: TOCProps = Astro.props
       }
     }
 
-    function initTOC() {
-      if (isInitialized) return
+    // Initialize immediately to prevent layout shift
+    adjustTOCPosition()
+    checkTOCVisibility()
+    addTOCEventListeners()
+    updateActiveTOCItem() // Set initial active state immediately
 
+    // Listen for various page load events
+    document.addEventListener('astro:page-load', () => {
       adjustTOCPosition()
-      checkTOCVisibility()
       addTOCEventListeners()
-      updateActiveTOCItem() // Initial active state
-
-      isInitialized = true
-    }
-
-    // Initialize on page load
-    function handlePageLoad() {
-      initTOC()
-    }
-
-    // Listen for various page load events
-    document.addEventListener('astro:page-load', handlePageLoad)
-    document.addEventListener('DOMContentLoaded', handlePageLoad)
-
-    // Also initialize immediately if DOM is already loaded
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', handlePageLoad)
-    } else {
-      handlePageLoad()
-    }
+      updateActiveTOCItem() // Update active state after page load
+    })
+    document.addEventListener('DOMContentLoaded', () => {
+      adjustTOCPosition()
+      addTOCEventListeners()
+      updateActiveTOCItem() // Update active state after DOM ready
+    })
 
     // Re-initialize on resize and scroll
     window.addEventListener('resize', adjustTOCPosition)
@@ -198,6 +194,12 @@ const { toc = [] }: TOCProps = Astro.props
     width: 12rem;
     position: relative;
     left: -0.175em;
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+
+  .toc-container.fixed-position {
+    opacity: 1;
   }
 
   .toc-nav {
diff --git a/src/components/ui/ThemeToggle.astro b/src/components/ui/ThemeToggle.astro
index 5ade061..184eccf 100644
--- a/src/components/ui/ThemeToggle.astro
+++ b/src/components/ui/ThemeToggle.astro
@@ -1,9 +1,9 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 ---
 
 {
-  SITE.themeToggle && (
+  themeConfig.general.themeToggle && (
     <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
       <div class="theme-icon hollow-circle" />
       <div class="theme-icon solid-circle" />
diff --git a/src/config.ts b/src/config.ts
index cee71be..2f51714 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,27 +1,37 @@
-export const SITE = {
+import type { ThemeConfig } from './types'
+
+export const themeConfig: ThemeConfig = {
   // SITE INFO ///////////////////////////////////////////////////////////////////////////////////////////
-  website: 'https://astro-chiri.netlify.app/', // Site domain
-  title: 'CHIRI', // Site title
-  author: '3ASH', // Author name
-  description: 'Minimal blog built by Astro', // Site description
-  language: 'en-US', // Default language
+  site: {
+    website: 'https://astro-chiri.netlify.app/', // Site domain
+    title: 'CHIRI', // Site title
+    author: '3ASH', // Author name
+    description: 'Minimal blog built by Astro', // Site description
+    language: 'en-US' // Default language
+  },
 
   // GENERAL SETTINGS ////////////////////////////////////////////////////////////////////////////////////
-  contentWidth: '35rem', // Content area width
-  centeredLayout: true, // Use centered layout (false for left-aligned)
-  favicon: false, // Show favicon on index page
-  themeToggle: false, // Show theme toggle button (uses system theme by default)
-  footer: true, // Show footer
-  fadeAnimation: true, // Enable fade animations
+  general: {
+    contentWidth: '35rem', // Content area width
+    centeredLayout: true, // Use centered layout (false for left-aligned)
+    favicon: false, // Show favicon on index page
+    themeToggle: false, // Show theme toggle button (uses system theme by default)
+    footer: true, // Show footer
+    fadeAnimation: true // Enable fade animations
+  },
 
   // DATE SETTINGS ///////////////////////////////////////////////////////////////////////////////////////
-  dateFormat: 'YYYY-MM-DD', // Date format: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
-  dateSeparator: '.', // Date separator: . - / (except for MONTH DAY YYYY and DAY MONTH YYYY)
-  dateOnRight: true, // Date position in post list (true for right, false for left)
+  date: {
+    dateFormat: 'YYYY-MM-DD', // Date format: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
+    dateSeparator: '.', // Date separator: . - / (except for MONTH DAY YYYY and DAY MONTH YYYY)
+    dateOnRight: true // Date position in post list (true for right, false for left)
+  },
 
   // POST SETTINGS ///////////////////////////////////////////////////////////////////////////////////////
-  readingTime: false, // Show reading time in posts
-  toc: true, // Show the table of contents when there is enough page width
-  imageViewer: true, // Enable image viewer
-  copyCode: true // Enable copy button in code blocks
+  post: {
+    readingTime: false, // Show reading time in posts
+    toc: true, // Show the table of contents (when there is enough page width)
+    imageViewer: true, // Enable image viewer
+    copyCode: true // Enable copy button in code blocks
+  }
 }
diff --git a/src/content/config.ts b/src/content/config.ts
deleted file mode 100644
index b735c48..0000000
--- a/src/content/config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineCollection, z } from 'astro:content'
-
-const posts = defineCollection({
-  type: 'content',
-  schema: z.object({
-    title: z.string(),
-    pubDate: z.date()
-  })
-})
-
-export const collections = {
-  posts
-}
diff --git a/src/content/posts/theme-guide.md b/src/content/posts/theme-guide.md
index 55973c2..02fc62a 100644
--- a/src/content/posts/theme-guide.md
+++ b/src/content/posts/theme-guide.md
@@ -14,12 +14,14 @@ Chiri is a minimal blog theme built with [Astro](https://astro.build), offering
 
 ## Main Files & Directories
 
-- `src/content/about/about.md` - Edit the about section of the index page. Leave it empty if you don’t want any content.
+- `src/content/about/about.md` - Edit the about section of the index page. Leave it empty if you don't want any content.
 - `src/content/posts/` - All blog posts are stored here
 - `src/config.ts` - Configure main site info and settings ↓
 
+- Site Info
+
 ```ts
-export const SITE = {
+site: {
   // Site domain
   website: 'https://astro-chiri.netlify.app/',
   // Site title
@@ -29,36 +31,54 @@ export const SITE = {
   // Site description
   description: 'Minimal blog built by Astro',
   // Default language
-  language: 'en-US',
+  language: 'en-US'
+},
+```
+
+- General Settings
 
+```ts
+general: {
   // Content area width
   contentWidth: '35rem',
   // Use centered layout (false for left-aligned)
   centeredLayout: true,
   // Show favicon on index page
   favicon: false,
-  // Show theme toggle button
+  // Show theme toggle button (uses system theme by default)
   themeToggle: false,
   // Show footer
   footer: true,
   // Enable fade animations
-  fadeAnimation: true,
+  fadeAnimation: true
+},
+```
 
+- Date Settings
+
+```ts
+date: {
   // Date format: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD',
   // Date separator: . - / (except for MONTH DAY YYYY and DAY MONTH YYYY)
   dateSeparator: '.',
   // Date position in post list (true for right, false for left)
-  dateOnRight: true,
+  dateOnRight: true
+},
+```
 
+- Post Settings
+
+```text
+post: {
   // Show reading time in posts
   readingTime: false,
-  // Show table of contents
+  // Show the table of contents (when there is enough page width)
   toc: true,
   // Enable image viewer
   imageViewer: true,
   // Enable copy button in code blocks
-  copyCode: false
+  copyCode: true
 }
 ```
 
@@ -66,7 +86,7 @@ export const SITE = {
 
 Only `title` and `pubDate` are required fields
 
-```md
+```ts
 ---
 title: 'Post Title'
 pubDate: '2025-07-10'
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ebd1f87..d263f0f 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,30 +1,31 @@
 ---
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'
 import type { LayoutProps } from '@/types'
 
 type Props = LayoutProps
 
 const { type = 'page' } = Astro.props
-const contentWidth = SITE.contentWidth
+const language = themeConfig.site.language || 'en-US'
+const contentWidth = themeConfig.general.contentWidth
 const widthValue = Math.min(parseFloat(contentWidth), 50)
 const shouldUseCustomWidth = widthValue > 25
 const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
-
-const language = SITE.language || 'en-US'
 ---
 
 <html
   lang={language}
-  class={SITE.fadeAnimation ? 'view-transitions-enabled' : 'view-transitions-disabled'}
-  {...SITE.fadeAnimation ? { 'transition:animate': 'initial' } : {}}
+  class={themeConfig.general.fadeAnimation
+    ? 'view-transitions-enabled'
+    : 'view-transitions-disabled'}
+  {...themeConfig.general.fadeAnimation ? { 'transition:animate': 'initial' } : {}}
 >
   <head>
     <slot name="head" />
   </head>
   <body
-    data-centered={SITE.centeredLayout}
-    class={!SITE.fadeAnimation ? 'no-fade' : ''}
+    data-centered={themeConfig.general.centeredLayout}
+    class={!themeConfig.general.fadeAnimation ? 'no-fade' : ''}
     style={`
       max-width: ${finalWidth};
       ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
diff --git a/src/layouts/IndexLayout.astro b/src/layouts/IndexLayout.astro
index 52ffd2f..719831e 100644
--- a/src/layouts/IndexLayout.astro
+++ b/src/layouts/IndexLayout.astro
@@ -5,7 +5,7 @@ import Header from '@/components/layout/Header.astro'
 import Footer from '@/components/layout/Footer.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
 import GradientMask from '@/components/ui/GradientMask.astro'
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 
 const { title, description } = Astro.props
 ---
@@ -21,7 +21,7 @@ const { title, description } = Astro.props
       <slot />
     </main>
     {
-      SITE.footer && (
+      themeConfig.general.footer && (
         <div>
           <Footer />
         </div>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 44481f5..58006ef 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -14,25 +14,33 @@ import XPOST from '@/components/ui/XPOST.astro'
 import CopyCode from '@/components/ui/CopyCode.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
 
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 
 const { title, pubDate, readingTime, toc } = Astro.props as PostLayoutProps
 ---
 
-<BaseLayout title={`${title} · ${SITE.title}`} description={SITE.description} type="post">
-  <BaseHead title={`${title} · ${SITE.title}`} description={SITE.description} slot="head" />
+<BaseLayout
+  title={`${title} · ${themeConfig.site.title}`}
+  description={themeConfig.site.description}
+  type="post"
+>
+  <BaseHead
+    title={`${title} · ${themeConfig.site.title}`}
+    description={themeConfig.site.description}
+    slot="head"
+  />
   <div class="post-container">
     <main>
       <div class="prose">
         <GradientMask />
         <BackButton />
-        {SITE.toc && <TableOfContents toc={toc} />}
+        {themeConfig.post.toc && <TableOfContents toc={toc} />}
         <div class="title">
           <h1>{title}</h1>
           <div class="date">
             <FormattedDate date={pubDate} />
             {
-              SITE.readingTime && readingTime && (
+              themeConfig.post.readingTime && readingTime && (
                 <span class="reading-time">
                   <span class="separator">·</span>
                   {readingTime.text}
@@ -48,8 +56,8 @@ const { title, pubDate, readingTime, toc } = Astro.props as PostLayoutProps
     <CopyCode />
     <GitHubCard />
     <XPOST />
-    {SITE.imageViewer && <ImageViewer />}
-    {SITE.footer && <Footer />}
+    {themeConfig.post.imageViewer && <ImageViewer />}
+    {themeConfig.general.footer && <Footer />}
   </div>
 </BaseLayout>
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
index c8276d6..01dc4cb 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,9 +1,9 @@
 ---
+import { themeConfig } from '@/config'
 import IndexLayout from '@/layouts/IndexLayout.astro'
-import { SITE } from '@/config'
 ---
 
-<IndexLayout title={`404 - ${SITE.title}`} description="Not Found">
+<IndexLayout title={`404 - ${themeConfig.site.title}`} description="Not Found">
   <style>
     .error-container {
       color: var(--text-secondary);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 03691bb..1dda6e5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,13 +2,13 @@
 import IndexLayout from '@/layouts/IndexLayout.astro'
 import About from '@/components/pages/About.astro'
 import PostList from '@/components/features/PostList.astro'
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import { getSortedFilteredPosts } from '@/utils/draft'
 
 const posts = await getSortedFilteredPosts()
 ---
 
-<IndexLayout title={SITE.title} description={SITE.description}>
+<IndexLayout title={themeConfig.site.title} description={themeConfig.site.description}>
   <About />
   <main>
     <PostList posts={posts} />
diff --git a/src/plugins/rehype-image-processor.mjs b/src/plugins/rehype-image-processor.mjs
index 829a8b0..178a91e 100644
--- a/src/plugins/rehype-image-processor.mjs
+++ b/src/plugins/rehype-image-processor.mjs
@@ -1,10 +1,11 @@
 import { visit } from 'unist-util-visit'
-import { SITE } from '../config.ts'
+import { themeConfig } from '../config.ts'
 
 /**
  * Rehype plugin that processes images in markdown content:
  * - Wraps images with alt text in figure/figcaption elements
  * - Adds data-preview attribute for image viewer functionality
+ * - Adds lazy loading for better performance
  * - Handles multiple images in a single paragraph
  */
 export default function rehypeImageProcessor() {
@@ -37,9 +38,16 @@ export default function rehypeImageProcessor() {
       for (const imgNode of imgNodes) {
         const alt = imgNode.properties?.alt?.trim()
 
+        // Enhanced image properties with performance optimizations
         imgNode.properties = {
           ...imgNode.properties,
-          'data-preview': SITE.imageViewer ? 'true' : 'false'
+          'data-preview': themeConfig.post.imageViewer ? 'true' : 'false',
+          // Add lazy loading for better performance
+          loading: 'lazy',
+          // Add decoding hint for better performance
+          decoding: 'async',
+          // Add fetchpriority for critical images (first image gets high priority)
+          fetchpriority: newNodes.length === 0 ? 'high' : 'auto'
         }
 
         if (!alt || alt.includes('_')) {
diff --git a/src/styles/global.css b/src/styles/global.css
index ba45396..e52b0a6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -133,17 +133,16 @@ html.view-transitions-enabled {
   view-transition-name: enabled;
 }
 
-@view-transition {
-  navigation: auto;
-}
-
 html.view-transitions-disabled {
   view-transition-name: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  @view-transition {
-    navigation: none;
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
   }
 }
 
diff --git a/src/styles/post.css b/src/styles/post.css
index f3de0f3..bb83f50 100644
--- a/src/styles/post.css
+++ b/src/styles/post.css
@@ -100,12 +100,55 @@
   font-weight: var(--font-weight-bold);
 }
 
-/* Images */
+/* Images with performance optimizations */
 .prose img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 1.25em 0;
+  background-color: var(--astro-code-background);
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Loading state for images */
+.prose img[loading='lazy'] {
+  opacity: 0;
+  animation: fadeIn 0.3s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Ensure images don't cause layout shifts */
+.prose img:not([width]):not([height]) {
+  aspect-ratio: attr(width) / attr(height);
+}
+
+/* Add skeleton loading effect */
+.prose img[loading='lazy']:not([src]) {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--bg-tertiary) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 .prose figure {
diff --git a/src/types/component.types.ts b/src/types/component.types.ts
index c366685..9baef24 100644
--- a/src/types/component.types.ts
+++ b/src/types/component.types.ts
@@ -31,3 +31,18 @@ export interface BaseHeadProps {
   title: string
   description: string
 }
+
+// ImageOptimizer component props interface
+export interface ImageOptimizerProps {
+  src: string | ImageMetadata
+  alt: string
+  width?: number
+  height?: number
+  quality?: number
+  format?: 'avif' | 'webp' | 'jpeg' | 'png'
+  loading?: 'lazy' | 'eager'
+  decoding?: 'async' | 'sync' | 'auto'
+  class?: string
+  caption?: string
+  priority?: boolean
+}
diff --git a/src/types/config.types.ts b/src/types/config.types.ts
index cd79654..51fe27c 100644
--- a/src/types/config.types.ts
+++ b/src/types/config.types.ts
@@ -6,21 +6,44 @@ export type DateFormat =
   | 'MONTH DAY YYYY'
   | 'DAY MONTH YYYY'
 
-// Site configuration type
-export interface SiteConfig {
+// Site info configuration type
+export interface SiteInfo {
   website: string
   title: string
   author: string
   description: string
   language: string
+}
+
+// General settings configuration type
+export interface GeneralSettings {
   contentWidth: string
   centeredLayout: boolean
   favicon: boolean
+  themeToggle: boolean
   footer: boolean
   fadeAnimation: boolean
+}
+
+// Date settings configuration type
+export interface DateSettings {
   dateFormat: DateFormat
   dateSeparator: string
+  dateOnRight: boolean
+}
+
+// Post settings configuration type
+export interface PostSettings {
   readingTime: boolean
+  toc: boolean
   imageViewer: boolean
   copyCode: boolean
 }
+
+// Theme configuration type
+export interface ThemeConfig {
+  site: SiteInfo
+  general: GeneralSettings
+  date: DateSettings
+  post: PostSettings
+}
diff --git a/src/utils/date.ts b/src/utils/date.ts
index c23956f..5b258a1 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,4 +1,4 @@
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 
 const MONTHS_EN = [
   'Jan',
@@ -23,8 +23,8 @@ const VALID_SEPARATORS = ['.', '-', '/']
  * @returns
  */
 export function formatDate(date: Date, format?: string): string {
-  const formatStr = (format || SITE.dateFormat).trim()
-  const configSeparator = SITE.dateSeparator || '-'
+  const formatStr = (format || themeConfig.date.dateFormat).trim()
+  const configSeparator = themeConfig.date.dateSeparator || '-'
 
   const separator = VALID_SEPARATORS.includes(configSeparator.trim()) ? configSeparator.trim() : '.'
 
diff --git a/src/utils/draft.ts b/src/utils/draft.ts
index 51dcb7a..1bb9389 100644
--- a/src/utils/draft.ts
+++ b/src/utils/draft.ts
@@ -5,7 +5,7 @@ import { getCollection, type CollectionEntry } from 'astro:content'
  */
 export async function getFilteredPosts() {
   const posts = await getCollection('posts')
-  return posts.filter((post) => !post.id.startsWith('_'))
+  return posts.filter((post: CollectionEntry<'posts'>) => !post.id.startsWith('_'))
 }
 
 /**
diff --git a/src/utils/feed.ts b/src/utils/feed.ts
index ca86ead..dc141af 100644
--- a/src/utils/feed.ts
+++ b/src/utils/feed.ts
@@ -1,10 +1,10 @@
 import { getCollection, type CollectionEntry } from 'astro:content'
-import { SITE } from '@/config'
+import { themeConfig } from '@/config'
 import type { APIContext } from 'astro'
 
 export async function generateRSS(context: APIContext) {
   const posts = await getCollection('posts')
-  const filteredPosts = posts.filter((post) => !post.id.startsWith('_'))
+  const filteredPosts = posts.filter((post: CollectionEntry<'posts'>) => !post.id.startsWith('_'))
   const sortedPosts = filteredPosts.sort(
     (a: CollectionEntry<'posts'>, b: CollectionEntry<'posts'>) =>
       b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
@@ -13,9 +13,9 @@ export async function generateRSS(context: APIContext) {
   const rss = `<?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
-    <title>${SITE.title}</title>
+    <title>${themeConfig.site.title}</title>
     <link>${context.site}</link>
-    <description>${SITE.description}</description>
+    <description>${themeConfig.site.description}</description>
     <language>zh-CN</language>
     <lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
     <atom:link href="${context.site}/rss.xml" rel="self" type="application/rss+xml" />
@@ -44,7 +44,7 @@ export async function generateRSS(context: APIContext) {
 
 export async function generateAtom(context: APIContext) {
   const posts = await getCollection('posts')
-  const filteredPosts = posts.filter((post) => !post.id.startsWith('_'))
+  const filteredPosts = posts.filter((post: CollectionEntry<'posts'>) => !post.id.startsWith('_'))
   const sortedPosts = filteredPosts.sort(
     (a: CollectionEntry<'posts'>, b: CollectionEntry<'posts'>) =>
       b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
@@ -52,8 +52,8 @@ export async function generateAtom(context: APIContext) {
 
   const atom = `<?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
-  <title>${SITE.title}</title>
-  <subtitle>${SITE.description}</subtitle>
+  <title>${themeConfig.site.title}</title>
+  <subtitle>${themeConfig.site.description}</subtitle>
   <link href="${context.site}/atom.xml" rel="self" type="application/atom+xml" />
   <link href="${context.site}" />
   <id>${context.site}</id>
diff --git a/src/utils/image-config.ts b/src/utils/image-config.ts
new file mode 100644
index 0000000..cda520a
--- /dev/null
+++ b/src/utils/image-config.ts
@@ -0,0 +1,27 @@
+export const imageConfig = {
+  // Enhanced image optimization settings
+  limitInputPixels: 268402689, // ~16K x 16K pixels
+  jpeg: {
+    quality: 85,
+    progressive: true,
+    optimizeScans: true,
+    mozjpeg: true
+  },
+  png: {
+    quality: 85,
+    progressive: true,
+    compressionLevel: 9,
+    adaptiveFiltering: true
+  },
+  webp: {
+    quality: 85,
+    lossless: false,
+    nearLossless: true,
+    smartSubsample: true
+  },
+  avif: {
+    quality: 85,
+    lossless: false,
+    speed: 5
+  }
+}
-- 
2.51.2