🚀 refactor: redesign the layout, reduce page size, and significantly improve build speed

package.json

@@ -18,7 +18,7 @@
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.3.0",
     "@waline/client": "^3.5.6",
-    "astro": "^5.5.3",
+    "astro": "^5.5.4",
     "astro-compress": "^2.3.6",
     "astro-og-canvas": "^0.7.0",
     "astro-robots-txt": "^1.0.0",
@@ -32,16 +32,16 @@
     "sanitize-html": "^2.15.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.10.1",
+    "@antfu/eslint-config": "^4.10.2",
     "@astrojs/check": "^0.9.4",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.13.11",
     "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-plugin": "66.1.0-beta.6",
     "@unocss/preset-attributify": "66.1.0-beta.6",
     "@unocss/reset": "66.1.0-beta.6",
-    "astro-eslint-parser": "^1.2.1",
+    "astro-eslint-parser": "^1.2.2",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-astro": "^1.3.1",
     "lint-staged": "^15.5.0",
     "mdast-util-to-string": "^4.0.0",

src/components/Button.astro

@@ -0,0 +1,67 @@
+---
+import { moreLocales } from '@/config'
+import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
+import { isPostPage, isTagPage } from '@/utils/page'
+
+interface Props {
+  supportedLangs: string[]
+}
+
+const { supportedLangs } = Astro.props
+const currentPath = Astro.url.pathname
+const isPost = isPostPage(currentPath)
+const isTag = isTagPage(currentPath)
+
+// Check if there are other languages to switch
+const showLanguageSwitcher = moreLocales.length > 0
+
+// Check if only the supported language switch list is used
+const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
+
+// Choose a language switch list according to the page type
+const nextUrl = useSupportedLangs
+  ? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
+  : getNextGlobalLangPath(currentPath) // Switch between all languages
+---
+
+<div
+class:list={[
+  'absolute flex gap-6 top-14.6 right-7.25vw min-[823px]:max-[1024px]:right-[calc(50vw-22rem)]',
+  '[@supports(-webkit-touch-callout:none)]:top-13.6', // fix position issue on ios
+  'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])'
+]}
+>
+  <!-- Language switcher -->
+  {showLanguageSwitcher && (
+    <a
+      href={nextUrl}
+      class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+      aria-label="Switch website language"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        class="h-full w-full"
+        fill="currentColor"
+      >
+        <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" />
+      </svg>
+    </a>
+  )}
+
+  <!-- Theme toggle -->
+  <button
+    aria-label="Switch light/dark theme"
+    class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      fill="currentColor"
+    >
+      <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
+    </svg>
+  </button>
+</div>

src/components/Footer.astro

@@ -1,21 +1,18 @@
 ---
-import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
-import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
 import { defaultLocale, themeConfig } from '@/config'
 import { getLangFromPath } from '@/i18n/lang'
 
-interface Props {
-  class?: string
-  supportedLangs: string[]
-}
-
-const { class: className, supportedLangs = [] } = Astro.props
 const { author } = themeConfig.site
-const { links: configLinks, startYear } = themeConfig.footer
+const { links: socialLinks, startYear } = themeConfig.footer
+
+const currentYear = new Date().getFullYear()
+const year = Number(startYear) === currentYear
+  ? startYear
+  : `${startYear}-${currentYear}`
 
 // i18n rss path
 const currentLang = getLangFromPath(Astro.url.pathname)
-const links = configLinks.map((link) => {
+const links = socialLinks.map((link) => {
   if (link.name === 'RSS') {
     return {
       ...link,
@@ -24,25 +21,12 @@ const links = configLinks.map((link) => {
   }
   return link
 })
-
-const currentYear = new Date().getFullYear()
-const year = Number(startYear) === currentYear
-  ? startYear
-  : `${startYear}-${currentYear}`
 ---
 
 <footer
-  class:list={[
+  class="text-3 leading-4.75 font-navbar lg:text-3.5"
-    'bottom-22 text-3 lg:text-3.5 leading-4.75 font-navbar',
+  lg="uno-desktop-column bottom-20"
-    className,
-  ]}
 >
-  <!-- Desktop widget -->
-  <div class="mb-11.5 ml-1.5 hidden gap-7 lg:flex">
-    <ThemeToggle />
-    <LanguageSwitcher supportedLangs={supportedLangs} />
-  </div>
-
   <p>
     {links.map((link, index) => (
       <>

src/components/Header.astro

@@ -0,0 +1,64 @@
+---
+import themeConfig from '@/config'
+import { ui } from '@/i18n/ui'
+import { getPageInfo } from '@/utils/page'
+
+const { currentLang, getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
+const { title, subtitle, i18nTitle } = themeConfig.site
+const { titleGap } = themeConfig.global
+
+const currentUI = ui[currentLang as keyof typeof ui]
+const headerTitle = i18nTitle ? currentUI.title : title
+const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
+
+const marginBottom = {
+    1: 'mb-0.9',
+    2: 'mb-1.8',
+    3: 'mb-2.7',
+  }[titleGap] || 'mb-1.8 '
+
+const postMarginBottom = {
+  1: 'mb-1.9 lg:mb-0.9',
+  2: 'mb-2.8 lg:mb-1.8',
+  3: 'mb-3.7 lg:mb-2.7',
+}[titleGap] || 'mb-2.8 lg:mb-1.8'
+
+const TitleTag = isPost ? 'h2' : 'h1'
+const SubtitleTag = isPost ? 'div' : 'h2'
+---
+
+<header
+  class="mb-10.5"
+  lg="uno-desktop-column top-20"
+>
+  <TitleTag
+    class:list={[
+      isPost
+        ? `${postMarginBottom} mt-3.2 text-5.375 c-secondary lg:(mt-0 text-9 c-primary)`
+        : `${marginBottom} text-8 w-75% c-primary lg:(text-9 w-full)`,
+      'font-bold font-title',
+    ]}
+  >
+    <a
+      href={getLocalizedPath('/')}
+      transition:name={`site-title-${currentLang}`}
+      data-disable-transition-on-theme
+    >
+        {headerTitle}
+      </a>
+  </TitleTag>
+
+  {headerSubtitle && (
+    <SubtitleTag
+      class:list={[
+        isPost
+          ? `opacity-0 lg:opacity-100`
+          : 'w-75% text-balance lg:w-full',
+        'c-secondary font-navbar text-3.5 lg:text-4',
+      ]}
+      aria-hidden={isPost}
+    >
+      {headerSubtitle}
+    </SubtitleTag>
+  )}
+</header>

src/components/MainHeader.astro

@@ -1,40 +0,0 @@
----
-import themeConfig from '@/config'
-import { ui } from '@/i18n/ui'
-import { getPageInfo } from '@/utils/page'
-
-const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
-const currentUI = ui[currentLang as keyof typeof ui]
-
-const { title, subtitle, i18nTitle } = themeConfig.site
-const headerTitle = i18nTitle ? currentUI.title : title
-const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
-
-const { titleGap } = themeConfig.global
-const marginBottom = {
-    1: 'mb-0.625',
-    2: 'mb-1.875',
-    3: 'mb-3.125',
-  }[titleGap] || 'mb-3.125'
----
-
-<header class="mb-10.5 lg:fixed">
-  <h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:(text-9 w-full) w-75%`}>
-    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
-    <div
-      class="box-content inline-block pr-1.25"
-      transition:name={`site-title-${currentLang}`}
-      data-disable-transition-on-theme
-    >
-      <a href={getLocalizedPath('/')}>
-        {headerTitle}
-      </a>
-    </div>
-  </h1>
-
-  {headerSubtitle && (
-    <h2 class="w-75% text-balance text-3.5 c-secondary font-navbar lg:(w-full text-4)">
-      {headerSubtitle}
-    </h2>
-  )}
-</header>

src/components/MobileHeader.astro

@@ -1,43 +0,0 @@
----
-import themeConfig from '@/config'
-import { ui } from '@/i18n/ui'
-import { getPageInfo } from '@/utils/page'
-
-const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
-const currentUI = ui[currentLang as keyof typeof ui]
-
-const { title, subtitle, i18nTitle } = themeConfig.site
-const headerTitle = i18nTitle ? currentUI.title : title
-const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
-
-const { titleGap } = themeConfig.global
-const marginBottom = {
-    1: 'mb-1.625',
-    2: 'mb-2.875',
-    3: 'mb-4.125',
-  }[titleGap] || 'mb-2.875'
----
-
-<header class="mb-15 lg:hidden">
-  <h2 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
-    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
-    <div
-      class="box-content inline-block pr-1.25"
-      transition:name={`site-title-${currentLang}`}
-      data-disable-transition-on-theme
-    >
-      <a href={getLocalizedPath('/')}>
-        {headerTitle}
-      </a>
-    </div>
-  </h2>
-
-  {headerSubtitle && (
-    <div
-      class="text-3.5 opacity-0"
-      aria-hidden="true"
-    >
-      {headerSubtitle}
-    </div>
-  )}
-</header>

src/components/Navbar.astro

@@ -33,8 +33,11 @@ const navItems = [
 ---
 
 <nav
-  class="mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar"
+  class:list={[
-  lg="fixed bottom-50 text-4 leading-9.72"
+    isPost ? 'hidden lg:block' : '',
+    'mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar',
+    'lg:(uno-desktop-column text-4 leading-9.72 bottom-50)',
+  ]}
 >
   <ul>
     {navItems.map(item => (

src/components/Widgets/LanguageSwitcher.astro

@@ -1,43 +0,0 @@
----
-import { moreLocales } from '@/config'
-import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
-import { isPostPage, isTagPage } from '@/utils/page'
-
-interface Props {
-  supportedLangs: string[]
-}
-
-const { supportedLangs } = Astro.props
-const currentPath = Astro.url.pathname
-const isPost = isPostPage(currentPath)
-const isTag = isTagPage(currentPath)
-
-// Check if there are other languages to switch
-const showLanguageSwitcher = moreLocales.length > 0
-
-// Check if only the supported language switch list is used
-const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
-
-// Choose a language switch list according to the page type
-const nextUrl = useSupportedLangs
-  ? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
-  : getNextGlobalLangPath(currentPath) // Switch between all languages
----
-
-{showLanguageSwitcher && (
-  <a
-    href={nextUrl}
-    class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
-    aria-label="Switch website language"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      class="h-full w-full"
-      fill="currentColor"
-    >
-      <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" />
-    </svg>
-  </a>
-)}

src/components/Widgets/ThemeToggle.astro

@@ -1,13 +0,0 @@
-<button
-  aria-label="Switch light/dark theme"
-  class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    aria-hidden="true"
-    fill="currentColor"
-  >
-    <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
-  </svg>
-</button>

src/layouts/Layout.astro

@@ -1,17 +1,11 @@
 ---
-// import BackToTop from '@/components/BackToTop.astro'
 import Footer from '@/components/Footer.astro'
-import MainHeader from '@/components/MainHeader.astro'
+import Header from '@/components/Header.astro'
-import MobileHeader from '@/components/MobileHeader.astro'
+import Navbar from '@/components/Navbar.astro'
-import Navigation from '@/components/Navbar.astro'
+import Button from '@/components/Button.astro'
-import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
-// import PhotoSwipe from '@/components/PhotoSwipe.astro'
-// import Scrollbar from '@/components/Scrollbar.astro'
-import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
-
 import '@/styles/font.css'
 import '@/styles/global.css'
 import '@/styles/heti.css'
@@ -24,74 +18,32 @@ interface Props {
 }
 
 const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
-const { isHome, isPost, getLocalizedPath } = getPageInfo(Astro.url.pathname)
+const { getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
 const localizedHome = getLocalizedPath('/')
 const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
-const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
-  ? 'mt-8'
-  : 'mt-12'
 ---
 
 <html
-  lang={Astro.currentLocale || 'en-US'}
+  lang={Astro.currentLocale}
   class={fontStyle}
   data-overlayscrollbars-initialize
 >
   <Head {postTitle} {postDescription} {postSlug} />
   <body data-overlayscrollbars-initialize>
 
-    <!-- Layout Calculation -->
-    <!-- Mobile -->
-    <!-- mobile width: 393px / suitable words number: 21 / content width: 21*16px=336px / padding: (393px-336px)/2=28.5px=（28.5px/393px）=7.25vw -->
-    <!-- max mobile width: 1024px / max word number: 42+2=44 / max content width: 44*16px=704px / max div width: 704px/(100vw-7.25vw*2)=823.3918px/4=205.848 / max padding: 823.3918px-704px=119.3918px/2=59.6959px/16=3.731rem -->
-    <!-- Desktop -->
-    <!-- desktop min div width: 1024px-90px*2=844px / min words number: 32 / min content width: 32*16px=512px/16=32rem / title width: 14*16px=224px/16=14rem / min-gap: 844px-512px-224px=108px -->
-    <!-- desktop max div width: 1100px+90px*2=1280px/4=320 / max words number: 42+2=44 / max content width: 44*16px=704px / title width: 14*16px=224px / max-gap: 1100px-704px-224px=172px/16=10.75rem -->
-    <!-- content width: calc(32rem+(100vw-1024px)*(44rem-32rem)/(1280-1024))=calc(75vw-16rem) / gap width: calc(6.75rem+(100vw-1024px)*(10.75rem-6.75rem)/(1280-1024))=calc(25vw-9.25rem) -->
-
     <div
       class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
-      p="x-[min(7.25vw,3.731rem)] y-9 lg:(x-22.5 y-20)"
+      p="x-[min(7.25vw,3.731rem)] y-9"
-      lg="max-w-320 grid cols-[min(calc(75vw-16rem),44rem)_14rem] gap-[min(calc(25vw-9.25rem),10.75rem)]"
+      lg="p-0 max-w-[min(calc(75vw-16rem),44rem)] mx-[max(5.625rem,calc(50vw-34.375rem))] my-20"
     >
-      <!-- hide header and navigation on mobile for post pages -->
+      <Header />
-      <div class={!isHome && isPost ? 'hidden lg:block' : ''}>
+      <Navbar />
-        <MainHeader />
+      <main class="mb-10.5">
-        <Navigation />
-        <!-- Desktop footer -->
-        <Footer
-          class="fixed hidden lg:block"
-          supportedLangs={supportedLangs}
-        />
-      </div>
-
-      <!-- show simple header on mobile for post pages -->
-      {!isHome && isPost && <MobileHeader />}
-
-      <!-- main content area -->
-      <main class="col-start-1 row-start-1">
         <slot />
       </main>
-
+      <Button supportedLangs={supportedLangs} />
-      <!-- Mobile footer -->
+      <Footer />
-      <Footer
-        class={`block lg:hidden ${mobileFooterMargin}`}
-        supportedLangs={supportedLangs}
-      />
-    </div>
-
-    <!-- <Scrollbar /> -->
-    <!-- <BackToTop /> -->
-    <!-- <PhotoSwipe /> -->
-
-    <!-- Mobile widget (fix position issue on ios / fix right distance)-->
-    <div
-      class="absolute right-7.25vw top-14.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-13.5 min-[823px]:right-[calc(50vw-22rem)]"
-      lg="hidden"
-    >
-      <LanguageSwitcher supportedLangs={supportedLangs} />
-      <ThemeToggle />
     </div>
 
     <!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->

src/pages/404.astro

@@ -3,11 +3,8 @@ import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-
   <!-- Decorative line -->
   <div class="uno-decorative-line"></div>
-
   <!-- 404  -->
   <h1 class="mt-10 text-8 font-title">404</h1>
-
 </Layout>

src/pages/[...about].astro

@@ -38,13 +38,10 @@ const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
 ---
 
 <Layout>
-
   <!-- Decorative line -->
   <div class="uno-decorative-line"></div>
-
   <!-- About page content -->
   <div class="heti">
     {Content && <Content />}
   </div>
-
 </Layout>

src/pages/[...index].astro

@@ -35,8 +35,6 @@ const pinnedPosts = await getPinnedPosts(lang)
 const postsByYear = await getPostsByYear(lang)
 ---
 <Layout>
-  <main>
-
   <!-- Pinned Posts -->
   {pinnedPosts.length > 0 && (
     <section class="mb-7.5 lg:mb-10">
@@ -44,7 +42,6 @@ const postsByYear = await getPostsByYear(lang)
       <PostList posts={pinnedPosts} lang={lang} />
     </section>
   )}
-
   <!-- Regular Posts -->
   {[...postsByYear.entries()].map(([_year, posts]) => (
     <section class="mb-7.5 lg:mb-10">
@@ -52,6 +49,4 @@ const postsByYear = await getPostsByYear(lang)
       <PostList posts={posts} lang={lang} />
     </section>
   ))}
-
-  </main>
 </Layout>

src/pages/[...posts_slug].astro

@@ -107,10 +107,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
 >
   <article class="heti mb-12.6">
     <div class="relative">
-
       <!-- Desktop back home button -->
       <BackHome />
-
       <!-- Title -->
       <h1 class="post-title">
         <span
@@ -134,7 +132,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
         minutes={remarkPluginFrontmatter.minutes}
       />
     </div>
-
     <!-- Content -->
     <Content />
   </article>
@@ -153,8 +150,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
       ))}
     </div>
   )}
-
   <!-- Comments -->
   <Comments />
-
 </Layout>

src/pages/[...tags].astro

@@ -34,10 +34,8 @@ const allTags = await getAllTags(lang)
 ---
 
 <Layout>
-
   <!-- Decorative line -->
   <div class="uno-decorative-line"></div>
-
   <!-- Tags list -->
   <div class="uno-tags-wrapper">
     {allTags.map(tag => (
@@ -49,5 +47,4 @@ const allTags = await getAllTags(lang)
       </a>
     ))}
   </div>
-
 </Layout>

src/pages/[...tags_tag].astro

@@ -53,10 +53,8 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
 ---
 
 <Layout supportedLangs={supportedLangs}>
-
   <!-- Decorative line -->
   <div class="uno-decorative-line"></div>
-
   <!-- Tags list -->
   <div class="uno-tags-wrapper">
     {allTags.map(tagName => (
@@ -77,5 +75,4 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
   <div class="mt-10.5">
     <PostList posts={posts} lang={lang} />
   </div>
-
 </Layout>

uno.config.ts

@@ -33,6 +33,7 @@ export default defineConfig({
     },
   },
   shortcuts: {
+    'uno-desktop-column': 'fixed w-14rem right-[max(5.625rem,calc(50vw-34.375rem))]',
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
     'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5 lg:(w-11 mb-6)',
     'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2 lg:w-100%',