feat: use .ts instead of .yaml for configurations

src/components/ConfigCarrier.astro

@@ -1,8 +1,8 @@
 ---
 
-import {getConfig} from "../utils/config-utils";
+import {siteConfig} from "../config";
 
 ---
 
-<div id="config-carrier" data-hue={getConfig().appearance.hue}>
+<div id="config-carrier" data-hue={siteConfig.themeHue}>
 </div>

src/components/Footer.astro

@@ -1,12 +1,12 @@
 ---
 
-import {getConfig} from "../utils/config-utils";
+import {profileConfig} from "../config";
 
 ---
 
 <div class="card-base max-w-[var(--page-width)] min-h-[72px] rounded-b-none mx-auto flex items-center px-6">
     <div class="text-black/50 dark:text-white/50 text-sm">
-        © 2023 {getConfig().profile.author}. All Rights Reserved.
+        © 2023 {profileConfig.name}. All Rights Reserved.
         <br>
         Powered by <a class="link text-[var(--primary)]" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
     </div>

src/components/GlobalStyles.astro

@@ -75,6 +75,8 @@ color_set({
 
   --deep-text: oklch(0.25 0.02 var(--hue))
 
+  --title-active: oklch(0.6 0.1 var(--hue))
+
   --line-divider: black(0.08) white(0.08)
 
   --line-color: black(0.1) white(0.1)

src/components/Navbar.astro

@@ -2,20 +2,41 @@
 import Button from "./control/Button.astro";
 import { Icon } from 'astro-icon/components';
 import DisplaySetting from "./widget/DisplaySetting.astro";
-import {getConfig} from "../utils/config-utils";
 import I18nKey from "../i18n/i18nKey";
 import {i18n} from "../i18n/translation";
+import {LinkPreset, NavBarLink} from "../types/config";
+import {navBarConfig, siteConfig} from "../config";
 const className = Astro.props.class;
 
 function isI18nKey(key: string): key is I18nKey {
     return Object.values(I18nKey).includes(key);
 }
 
-function getLinkName(name: string) {
-    if (isI18nKey(name)) {
-        return i18n(name);
+let links: NavBarLink[] = navBarConfig.links.map((item) => {
+    if (typeof item === "number") {
+        return getLinkPresetInfo(item)
+    }
+    return item;
+});
+
+function getLinkPresetInfo(p: LinkPreset): NavBarLink {
+    switch (p) {
+        case LinkPreset.Home:
+            return {
+                name: i18n(I18nKey.home),
+                url: "/page/1"
+            };
+        case LinkPreset.Archive:
+            return {
+                name: i18n(I18nKey.archive),
+                url: "/archive"
+            };
+        case LinkPreset.About:
+            return {
+                name: i18n(I18nKey.about),
+                url: "/about"
+            };
     }
-    return name;
 }
 
 ---
@@ -25,12 +46,12 @@ function getLinkName(name: string) {
     <a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg active:scale-95" light>
         <div class="flex flex-row text-[var(--primary)] items-center text-md">
             <Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
-            {getConfig().title}
+            {siteConfig.title}
         </div>
     </Button></a>
     <div>
-        {Object.keys(getConfig().menu).map((key) => {
-            return <a aria-label={getLinkName(key)} href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg active:scale-95">{getLinkName(key)}</Button></a>
+        {links.map((l) => {
+            return <a aria-label={l.name} href={l.url} target={l.external ? "_blank" : null}><Button light class="font-bold px-5 rounded-lg active:scale-95">{l.name}</Button></a>;
         })}
     </div>
     <div class="flex">

src/components/TitleCardNew.astro

@@ -35,6 +35,7 @@ const { remarkPluginFrontmatter } = await entry.render();
            class="transition w-full block font-bold mb-3 text-3xl
         text-black/90 dark:text-white/90
         hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
+        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
         before:absolute md:before:top-[35px] before:left-[18px]
         ">
@@ -44,7 +45,7 @@ const { remarkPluginFrontmatter } = await entry.render();
         <!-- metadata -->
         <PostMetadata published={published} tags={tags} categories={categories} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
 
-        <div class="transition text-black/75 dark:text-white/75 mb-4">
+        <div class="transition text-black/75 dark:text-white/75 mb-3.5">
             { description }
         </div>
 
@@ -61,8 +62,8 @@ const { remarkPluginFrontmatter } = await entry.render();
                         "max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
                         "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
                     ]} >
-        <div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
-        <div class="absolute z-20 w-full h-full flex items-center justify-center ">
+        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
+        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
             <Icon name="material-symbols:chevron-right-rounded"
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>

src/components/misc/ImageBox.astro

@@ -5,11 +5,23 @@ interface Props {
     class?: string;
     alt?: string
 }
+import { Image } from 'astro:assets';
+
 const {id, src, alt} = Astro.props;
 const className = Astro.props.class;
+
+const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
+
+let img;
+if (isLocal) {
+    img = (await import("../../" + src)).default;
+}
+
 ---
 <div class:list={[className, 'overflow-hidden relative']}>
-    <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50"></div>
-    <img src={src} alt={alt} class="w-full h-full object-center object-cover">
+    <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
+    {isLocal && <Image src={img} alt={alt || ""} class="w-full h-full object-center object-cover" />}
+    {!isLocal && <img src={src} alt={alt || ""} class="w-full h-full object-center object-cover" />}
+
 </div>
 

src/components/widget/DisplaySetting.astro

@@ -1,9 +1,9 @@
 ---
-import {getConfig} from "../../utils/config-utils";
 import {i18n} from "../../i18n/translation";
 import I18nKey from "../../i18n/i18nKey";
+import {siteConfig} from "../../config";
 
-const enableBanner = getConfig().banner.enable;
+const enableBanner = siteConfig.banner.enable;
 
 ---
 <div id="display-setting" class:list={["card-base closed absolute transition-all w-[320px] fixed right-4 border-[var(--primary)] px-4 py-4",

src/components/widget/Profile.astro

@@ -1,30 +1,30 @@
 ---
 import ImageBox from "../misc/ImageBox.astro";
 import Button from "../control/Button.astro";
-import {getConfig} from "../../utils/config-utils";
 import {Icon} from "astro-icon/components";
+import {profileConfig} from "../../config";
 interface props {
 
 }
 const className = Astro.props
 
-const vConf = getConfig();
+const config = profileConfig;
 
 ---
 <div class="card-base">
     <a aria-label="Go to About Page" href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
-        <div class="absolute transition group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
+        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
             <Icon name="material-symbols:person-outline-rounded"
                   class="transition opacity-0 group-hover:opacity-100 text-white text-6xl">
             </Icon>
         </div>
-        <ImageBox src={vConf.profile.avatar} alt="Profile Image of the Author" class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
+        <ImageBox src={config.avatar} alt="Profile Image of the Author" class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
     </a>
-    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
+    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
     <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
-    <div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
+    <div class="text-center text-neutral-400 mb-2 transition">{config.bio}</div>
     <div class="flex gap-2 mx-2 justify-center mb-4">
-        {vConf.profile.links.map(item =>
+        {config.links.map(item =>
             <a aria-label={item.name} href={item.url} target="_blank">
                 <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
             </a>