refactor: improve code quality

src/components/Navbar.astro

@@ -23,7 +23,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
     "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
     <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
         <div class="flex flex-row text-[var(--primary)] items-center text-md">
-            <Icon name="material-symbols:home-outline-rounded" size={"1.75rem"} class="mb-1 mr-2" />
+            <Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />
             {siteConfig.title}
         </div>
     </a>
@@ -34,7 +34,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
             >
                 <div class="flex items-center">
                     {l.name}
-                    {l.external && <Icon size="0.875rem" name="fa6-solid:arrow-up-right-from-square" class="transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
+                    {l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
                 </div>
             </a>;
         })}
@@ -42,24 +42,24 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
     <div class="flex">
         <!--<SearchPanel client:load>-->
         <Search client:load>
-            <Icon slot="search-icon" name="material-symbols:search" size={"1.25rem"} class="absolute pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
+            <Icon slot="search-icon" name="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
-            <!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" size={"1.25rem"} class="transition my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
+            <!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" class="transition text-[1.25rem] my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
-            <Icon slot="arrow-icon" name="fa6-solid:chevron-right" size={"0.75rem"} class="transition translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
+            <Icon slot="arrow-icon" name="fa6-solid:chevron-right" class="transition text=[0.75rem] translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
-            <Icon slot="search-switch" name="material-symbols:search" size={"1.25rem"}></Icon>
+            <Icon slot="search-switch" name="material-symbols:search" class="text-[1.25rem]"></Icon>
         </Search>
         {!siteConfig.themeColor.fixed && (
             <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
-                <Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
+                <Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
             </button>
         )}
         <LightDarkSwitch client:load></LightDarkSwitch>
         <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden" id="nav-menu-switch">
-            <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
+            <Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
         </button>
     </div>
     <NavMenuPanel links={links}></NavMenuPanel>
     <DisplaySettings client:only="svelte">
-        <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" size={"0.875rem"} class=""></Icon>
+        <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
     </DisplaySettings>
 </div>
 

src/components/PostCard.astro

@@ -40,8 +40,8 @@ const { remarkPluginFrontmatter } = await entry.render();
         before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
         ">
             {title}
-            <Icon class="inline text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
+            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
-            <Icon class="text-[var(--primary)] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
+            <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
         </a>
 
         <!-- metadata -->

src/components/control/BackToTop.astro

@@ -40,7 +40,7 @@ import { Icon } from 'astro-icon/components';
 
 </style>
 
-<script is:raw>
+<script is:raw is:inline>
 function backToTop() {
     window.scroll({ top: 0, behavior: 'smooth' });
 }

src/components/control/Pagination.astro

@@ -64,7 +64,7 @@ const getPageUrl = (p: number) => {
            {"disabled": page.url.prev == undefined}
        ]}
     >
-        <Icon name="material-symbols:chevron-left-rounded" size="1.75rem"></Icon>
+        <Icon name="material-symbols:chevron-left-rounded" class="text-[1.75rem]"></Icon>
     </a>
     <div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold">
         {pages.map((p) => {
@@ -86,6 +86,6 @@ const getPageUrl = (p: number) => {
            {"disabled": page.url.next == undefined}
        ]}
     >
-        <Icon name="material-symbols:chevron-right-rounded" size="1.75rem"></Icon>
+        <Icon name="material-symbols:chevron-right-rounded" class="text-[1.75rem]"></Icon>
     </a>
 </div>

src/components/misc/License.astro

@@ -40,5 +40,5 @@ const postUrl = decodeURIComponent(Astro.url.toString());
             <a href={licenseConf.url} target="_blank" class="link text-[var(--primary)] whitespace-nowrap">{licenseConf.name}</a>
         </div>
     </div>
-    <Icon name="fa6-brands:creative-commons" class="transition absolute pointer-events-none right-6 top-1/2 -translate-y-1/2 text-black/5 dark:text-white/5" size="15rem"></Icon>
+    <Icon name="fa6-brands:creative-commons" class="transition text-[15rem] absolute pointer-events-none right-6 top-1/2 -translate-y-1/2 text-black/5 dark:text-white/5"></Icon>
 </div>

src/components/widget/NavMenuPanel.astro

@@ -20,11 +20,11 @@ const links = Astro.props.links;
                 {link.name}
             </div>
             {!link.external && <Icon name="material-symbols:chevron-right-rounded"
-                  class="transition text-[var(--primary)]" size="1.25rem"
+                  class="transition text-[1.25rem] text-[var(--primary)]"
             >
             </Icon>}
             {link.external && <Icon name="fa6-solid:arrow-up-right-from-square"
-                  class="transition text-black/25 dark:text-white/25 -translate-x-1" size="0.75rem"
+                  class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1"
             >
             </Icon>}
         </a>

src/components/widget/Profile.astro

@@ -25,12 +25,12 @@ const config = profileConfig;
         <div class="flex gap-2 justify-center mb-1">
             {config.links.length > 1 && config.links.map(item =>
                     <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
-                        <Icon name={item.icon} size="1.5rem"></Icon>
+                        <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                     </a>
             )}
             {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
                                             class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
-                <Icon name={config.links[0].icon} size="1.5rem"></Icon>
+                <Icon name={config.links[0].icon} class="text-[1.5rem]"></Icon>
                 {config.links[0].name}
             </a>}
         </div>

src/components/widget/WidgetLayout.astro

@@ -31,7 +31,7 @@ const className = Astro.props.class
     {isCollapsed && <div class="expand-btn px-4 -mb-2">
         <button class="btn-plain rounded-lg w-full h-9">
             <div class="text-[var(--primary)] flex items-center justify-center gap-2 -translate-x-2">
-                <Icon name="material-symbols:more-horiz" size="1.75rem"></Icon> {i18n(I18nKey.more)}
+                <Icon name="material-symbols:more-horiz" class="text-[1.75rem]"></Icon> {i18n(I18nKey.more)}
             </div>
         </button>
     </div>}

src/layouts/Layout.astro

@@ -23,28 +23,6 @@ let { title, banner, description } = Astro.props;
 
 const isHomePage = pathsEqual(Astro.url.pathname, '/');
 
-const anim = {
-	old: {
-		name: 'fadeIn',
-		duration: '4s',
-		easing: 'linear',
-		fillMode: 'forwards',
-		mixBlendMode: 'normal',
-	},
-	new: {
-		name: 'fadeOut',
-		duration: '4s',
-		easing: 'linear',
-		fillMode: 'backwards',
-		mixBlendMode: 'normal',
-	}
-};
-
-const myFade = {
-	forwards: anim,
-	backwards: anim,
-};
-
 // defines global css variables
 // why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
 const configHue = siteConfig.themeColor.hue;
@@ -100,7 +78,7 @@ const siteLang = siteConfig.lang.replace('_', '-')
 			/>
 		))}
 		<!-- Set the theme before the page is rendered to avoid a flash -->
-		<script define:vars={{DEFAULT_THEME: DEFAULT_THEME, LIGHT_MODE: LIGHT_MODE, DARK_MODE: DARK_MODE, AUTO_MODE: AUTO_MODE}}>
+		<script is:inline define:vars={{DEFAULT_THEME: DEFAULT_THEME, LIGHT_MODE: LIGHT_MODE, DARK_MODE: DARK_MODE, AUTO_MODE: AUTO_MODE}}>
 			const theme = localStorage.getItem('theme') || DEFAULT_THEME;
 			switch (theme) {
 				case LIGHT_MODE:
@@ -178,9 +156,9 @@ const siteLang = siteConfig.lang.replace('_', '-')
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
 	OverlayScrollbars,
-	ScrollbarsHidingPlugin,
+	// ScrollbarsHidingPlugin,
-	SizeObserverPlugin,
+	// SizeObserverPlugin,
-	ClickScrollPlugin
+	// ClickScrollPlugin
 } from 'overlayscrollbars';
 import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
 
@@ -200,6 +178,7 @@ import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
 /* TODO This is a temporary solution for style flicker issue when the transition is activated */
 /* issue link: https://github.com/withastro/astro/issues/8711, the solution get from here too */
 /* update: fixed in Astro 3.2.4 */
+/*
 function disableAnimation() {
 	const css = document.createElement('style')
 	css.appendChild(
@@ -225,6 +204,7 @@ function disableAnimation() {
 		}, 1)
 	}
 }
+*/
 
 function setClickOutsideToClose(panel: string, ignores: string[]) {
 	document.addEventListener("click", event => {

src/layouts/MainGridLayout.astro

@@ -2,10 +2,10 @@
 import Layout from "./Layout.astro";
 import Navbar from "@components/Navbar.astro";
 import SideBar from "@components/widget/SideBar.astro";
-import {pathsEqual} from "@utils/url-utils";
 import Footer from "@components/Footer.astro";
 import BackToTop from "@components/control/BackToTop.astro";
-import {siteConfig} from "@/config";
+// import {siteConfig} from "@/config";
+// import {pathsEqual} from "@utils/url-utils";
 
 interface Props {
     title?: string;
@@ -14,8 +14,8 @@ interface Props {
 }
 
 const { title, banner, description } = Astro.props
-const isHomePage = pathsEqual(Astro.url.pathname, '/')
+// const isHomePage = pathsEqual(Astro.url.pathname, '/')
-const enableBanner = siteConfig.banner.enable
+// const enableBanner = siteConfig.banner.enable
 
 ---
 

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

@@ -1,16 +1,16 @@
 ---
 import MainGridLayout from "../layouts/MainGridLayout.astro";
-import PostCard from "../components/PostCard.astro";
 import Pagination from "../components/control/Pagination.astro";
 import {getSortedPosts} from "../utils/content-utils";
-import {getPostUrlBySlug} from "../utils/url-utils";
 import {PAGE_SIZE} from "../constants/constants";
 import PostPage from "../components/PostPage.astro";
+import {type GetStaticPaths} from "astro";
 
-export async function getStaticPaths({ paginate }) {
+export const getStaticPaths = (async ({ paginate }) => {
     const allBlogPosts = await getSortedPosts();
     return paginate(allBlogPosts, { pageSize: PAGE_SIZE });
-}
+}) satisfies GetStaticPaths
+// https://github.com/withastro/astro/issues/6507#issuecomment-1489916992
 
 const {page} = Astro.props;
 

src/pages/archive/category/[category].astro

@@ -1,5 +1,5 @@
 ---
-import {getCategoryList, getSortedPosts} from "@utils/content-utils";
+import {getCategoryList} from "@utils/content-utils";
 import MainGridLayout from "@layouts/MainGridLayout.astro";
 import ArchivePanel from "@components/ArchivePanel.astro";
 import {i18n} from "@i18n/translation";

src/pages/archive/index.astro

@@ -1,5 +1,4 @@
 ---
-import { getCollection, getEntry } from "astro:content";
 import MainGridLayout from "@layouts/MainGridLayout.astro";
 import ArchivePanel from "@components/ArchivePanel.astro";
 import {i18n} from "@i18n/translation";

src/pages/posts/[...slug].astro

@@ -45,7 +45,7 @@ const jsonLd = {
 
 ---
 <MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description}>
-    <script slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
+    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
             {}
@@ -111,7 +111,7 @@ const jsonLd = {
         <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
            class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
             {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center justify-start gap-4" >
-                <Icon name="material-symbols:chevron-left-rounded" size="2rem" class="text-[var(--primary)]" />
+                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
                 <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                     {entry.data.nextTitle}
                 </div>
@@ -124,7 +124,7 @@ const jsonLd = {
                 <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                     {entry.data.prevTitle}
                 </div>
-                <Icon name="material-symbols:chevron-right-rounded" size="2rem" class="text-[var(--primary)]" />
+                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
             </div>}
         </a>
     </div>

src/pages/rss.xml.ts

@@ -1,6 +1,5 @@
 import rss from '@astrojs/rss';
 import {siteConfig} from '@/config';
-import { getCollection } from 'astro:content';
 import sanitizeHtml from 'sanitize-html';
 import MarkdownIt from 'markdown-it';
 import {getSortedPosts} from "@utils/content-utils.ts";