fix: fix errors and reformat code

biome.json

@@ -8,7 +8,7 @@
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,
-    "ignore": [],
+    "ignore": ["src/config.ts"],
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 80

src/components/ArchivePanel.astro

@@ -1,63 +1,68 @@
 ---
-import {getSortedPosts} from "../utils/content-utils";
-import {getPostUrlBySlug} from "../utils/url-utils";
-import {i18n} from "../i18n/translation";
-import I18nKey from "../i18n/i18nKey";
-import {UNCATEGORIZED} from "@constants/constants";
+import { getSortedPosts } from '../utils/content-utils'
+import { getPostUrlBySlug } from '../utils/url-utils'
+import { i18n } from '../i18n/translation'
+import I18nKey from '../i18n/i18nKey'
+import { UNCATEGORIZED } from '@constants/constants'
 
 interface Props {
-    keyword?: string;
-    tags?: string[];
-    categories?: string[];
+  keyword?: string
+  tags?: string[]
+  categories?: string[]
 }
-const { keyword, tags, categories} = Astro.props;
+const { keyword, tags, categories } = Astro.props
 
 let posts = await getSortedPosts()
 
 if (Array.isArray(tags) && tags.length > 0) {
-    posts = posts.filter(post =>
-        Array.isArray(post.data.tags) && post.data.tags.some(tag => tags.includes(tag))
-    );
+  posts = posts.filter(
+    post =>
+      Array.isArray(post.data.tags) &&
+      post.data.tags.some(tag => tags.includes(tag)),
+  )
 }
 
 if (Array.isArray(categories) && categories.length > 0) {
-    posts = posts.filter(post =>
-        (post.data.category && categories.includes(post.data.category)) ||
-        (!post.data.category && categories.includes(UNCATEGORIZED))
-    );
+  posts = posts.filter(
+    post =>
+      (post.data.category && categories.includes(post.data.category)) ||
+      (!post.data.category && categories.includes(UNCATEGORIZED)),
+  )
 }
 
-const groups: {year: number, posts: typeof posts}[] = function () {
-    const groupedPosts = posts.reduce((grouped: {[year: number]: typeof posts}, post) => {
-        const year = post.data.published.getFullYear()
-        if (!grouped[year]) {
-            grouped[year] = []
-        }
-        grouped[year].push(post)
-        return grouped
-    }, {})
+const groups: { year: number; posts: typeof posts }[] = (function () {
+  const groupedPosts = posts.reduce(
+    (grouped: { [year: number]: typeof posts }, post) => {
+      const year = post.data.published.getFullYear()
+      if (!grouped[year]) {
+        grouped[year] = []
+      }
+      grouped[year].push(post)
+      return grouped
+    },
+    {},
+  )
 
-    // convert the object to an array
-    const groupedPostsArray = Object.keys(groupedPosts).map(key => ({
-        year: parseInt(key),
-        posts: groupedPosts[parseInt(key)]
-    }))
+  // convert the object to an array
+  const groupedPostsArray = Object.keys(groupedPosts).map(key => ({
+    year: parseInt(key),
+    posts: groupedPosts[parseInt(key)],
+  }))
 
-    // sort years by latest first
-    groupedPostsArray.sort((a, b) => b.year - a.year)
-    return groupedPostsArray;
-}();
+  // sort years by latest first
+  groupedPostsArray.sort((a, b) => b.year - a.year)
+  return groupedPostsArray
+})()
 
 function formatDate(date: Date) {
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    return `${month}-${day}`;
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const day = date.getDate().toString().padStart(2, '0')
+  return `${month}-${day}`
 }
 
 function formatTag(tag: string[]) {
-    return tag.map(t => `#${t}`).join(' ');
+  return tag.map(t => `#${t}`).join(' ')
 }
-
 ---
 
 <div class="card-base px-8 py-6">

src/components/ConfigCarrier.astro

@@ -1,7 +1,6 @@
 ---
 
-import {siteConfig} from "../config";
-
+import { siteConfig } from '../config'
 ---
 
 <div id="config-carrier" data-hue={siteConfig.themeColor.hue}>

src/components/Footer.astro

@@ -1,8 +1,7 @@
 ---
 
-import {profileConfig} from "../config";
-import {url} from "../utils/url-utils";
-
+import { profileConfig } from '../config'
+import { url } from '../utils/url-utils'
 ---
 
 <div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">

src/components/LightDarkSwitch.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
 import type { LIGHT_DARK_MODE } from '@/types/config.ts'
-import {
-  AUTO_MODE,
-  DARK_MODE,
-  LIGHT_MODE,
-} from '@constants/constants.ts'
+import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from '@constants/constants.ts'
 import I18nKey from '@i18n/i18nKey'
 import { i18n } from '@i18n/translation'
 import Icon from '@iconify/svelte'
@@ -15,27 +11,18 @@ import {
 } from '@utils/setting-utils.ts'
 import { onMount } from 'svelte'
 
-const seq: LIGHT_DARK_MODE[] = [
-  LIGHT_MODE,
-  DARK_MODE,
-  AUTO_MODE,
-]
+const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE, AUTO_MODE]
 let mode: LIGHT_DARK_MODE = AUTO_MODE
 
 onMount(() => {
   mode = getStoredTheme()
-  const darkModePreference = window.matchMedia(
-    '(prefers-color-scheme: dark)',
-  )
+  const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)')
   const changeThemeWhenSchemeChanged: Parameters<
     typeof darkModePreference.addEventListener<'change'>
   >[1] = e => {
     applyThemeToDocument(mode)
   }
-  darkModePreference.addEventListener(
-    'change',
-    changeThemeWhenSchemeChanged,
-  )
+  darkModePreference.addEventListener('change', changeThemeWhenSchemeChanged)
   return () => {
     darkModePreference.removeEventListener(
       'change',
@@ -50,25 +37,24 @@ function switchScheme(newMode: LIGHT_DARK_MODE) {
 }
 
 function toggleScheme() {
-    let i = 0
-    for (; i < seq.length; i++) {
-        if (seq[i] === mode) {
-            break
-        }
+  let i = 0
+  for (; i < seq.length; i++) {
+    if (seq[i] === mode) {
+      break
     }
-    switchScheme(seq[(i + 1) % seq.length])
+  }
+  switchScheme(seq[(i + 1) % seq.length])
 }
 
 function showPanel() {
-    const panel = document.querySelector('#light-dark-panel')
-    panel.classList.remove('float-panel-closed')
+  const panel = document.querySelector('#light-dark-panel')
+  panel.classList.remove('float-panel-closed')
 }
 
 function hidePanel() {
-    const panel = document.querySelector('#light-dark-panel')
-    panel.classList.add('float-panel-closed')
+  const panel = document.querySelector('#light-dark-panel')
+  panel.classList.add('float-panel-closed')
 }
-
 </script>
 
 <!-- z-50 make the panel higher than other float panels -->

src/components/Navbar.astro

@@ -1,22 +1,23 @@
 ---
-import { Icon } from 'astro-icon/components';
-import DisplaySettings from "./widget/DisplaySettings.svelte";
-import {LinkPreset, type NavBarLink} from "../types/config";
-import {navBarConfig, siteConfig} from "../config";
-import NavMenuPanel from "./widget/NavMenuPanel.astro";
-import Search from "./Search.svelte";
-import {LinkPresets} from "../constants/link-presets";
-import LightDarkSwitch from "./LightDarkSwitch.svelte";
-import {url} from "../utils/url-utils";
-const className = Astro.props.class;
+import { Icon } from 'astro-icon/components'
+import DisplaySettings from './widget/DisplaySettings.svelte'
+import { LinkPreset, type NavBarLink } from '../types/config'
+import { navBarConfig, siteConfig } from '../config'
+import NavMenuPanel from './widget/NavMenuPanel.astro'
+import Search from './Search.svelte'
+import { LinkPresets } from '../constants/link-presets'
+import LightDarkSwitch from './LightDarkSwitch.svelte'
+import { url } from '../utils/url-utils'
+const className = Astro.props.class
 
-let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset): NavBarLink => {
-    if (typeof item === "number") {
-        return LinkPresets[item]
+let links: NavBarLink[] = navBarConfig.links.map(
+  (item: NavBarLink | LinkPreset): NavBarLink => {
+    if (typeof item === 'number') {
+      return LinkPresets[item]
     }
-    return item;
-});
-
+    return item
+  },
+)
 ---
 <div id="navbar" class="sticky top-0 z-50 onload-animation">
     <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->

src/components/PostCard.astro

@@ -1,34 +1,43 @@
 ---
-import path from "path";
-import PostMetadata from "./PostMeta.astro";
-import ImageWrapper from "./misc/ImageWrapper.astro";
-import { Icon } from 'astro-icon/components';
-import {i18n} from "../i18n/translation";
-import I18nKey from "../i18n/i18nKey";
-import {getDir} from "../utils/url-utils";
+import path from 'path'
+import PostMetadata from './PostMeta.astro'
+import ImageWrapper from './misc/ImageWrapper.astro'
+import { Icon } from 'astro-icon/components'
+import { i18n } from '../i18n/translation'
+import I18nKey from '../i18n/i18nKey'
+import { getDir } from '../utils/url-utils'
 
 interface Props {
-    class?: string;
-    entry: any;
-    title: string;
-    url: string;
-    published: Date;
-    tags: string[];
-    category: string;
-    image: string;
-    description: string;
-    draft: boolean;
-    style: string;
+  class?: string
+  entry: any
+  title: string
+  url: string
+  published: Date
+  tags: string[]
+  category: string
+  image: string
+  description: string
+  draft: boolean
+  style: string
 }
-const { entry, title, url, published, tags, category, image, description, style } = Astro.props;
-const className = Astro.props.class;
+const {
+  entry,
+  title,
+  url,
+  published,
+  tags,
+  category,
+  image,
+  description,
+  style,
+} = Astro.props
+const className = Astro.props.class
 
-const hasCover = image !== undefined && image !== null && image !== '';
+const hasCover = image !== undefined && image !== null && image !== ''
 
-const coverWidth = "28%";
-
-const { remarkPluginFrontmatter } = await entry.render();
+const coverWidth = '28%'
 
+const { remarkPluginFrontmatter } = await entry.render()
 ---
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
     <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>

src/components/PostMeta.astro

@@ -1,19 +1,19 @@
 ---
-import {formatDateToYYYYMMDD} from "../utils/date-utils";
-import { Icon } from 'astro-icon/components';
-import {i18n} from "../i18n/translation";
-import I18nKey from "../i18n/i18nKey";
-import {url} from "../utils/url-utils";
+import { formatDateToYYYYMMDD } from '../utils/date-utils'
+import { Icon } from 'astro-icon/components'
+import { i18n } from '../i18n/translation'
+import I18nKey from '../i18n/i18nKey'
+import { url } from '../utils/url-utils'
 
 interface Props {
-    class: string;
-    published: Date;
-    tags: string[];
-    category: string;
-    hideTagsForMobile?: boolean;
+  class: string
+  published: Date
+  tags: string[]
+  category: string
+  hideTagsForMobile?: boolean
 }
-const {published, tags, category, hideTagsForMobile = false} = Astro.props;
-const className = Astro.props.class;
+const { published, tags, category, hideTagsForMobile = false } = Astro.props
+const className = Astro.props.class
 ---
 
 <div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>

src/components/PostPage.astro

@@ -1,8 +1,8 @@
 ---
-import {getPostUrlBySlug} from "@utils/url-utils";
-import PostCard from "./PostCard.astro";
+import { getPostUrlBySlug } from '@utils/url-utils'
+import PostCard from './PostCard.astro'
 
-const {page} = Astro.props;
+const { page } = Astro.props
 
 let delay = 0
 const interval = 50