refactor: improve code quality

This commit is contained in:
saicaca
2024-07-21 15:47:49 +08:00
parent 743d8dd9c2
commit 003c644146
20 changed files with 76 additions and 69 deletions

View File

@@ -3,7 +3,7 @@ import WidgetLayout from "./WidgetLayout.astro";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import {Category, getCategoryList} from "../../utils/content-utils";
import {getCategoryList} from "../../utils/content-utils";
import {getCategoryUrl} from "../../utils/url-utils";
import ButtonLink from "../control/ButtonLink.astro";
@@ -29,7 +29,7 @@ const style = Astro.props.style
{categories.map((c) =>
<ButtonLink
url={getCategoryUrl(c.name)}
badge={c.count}
badge={String(c.count)}
label=`View all posts in the ${c.name} category`
>
{c.name}

View File

@@ -1,5 +1,5 @@
---
import {NavBarLink} from "../../types/config";
import {type NavBarLink} from "../../types/config";
import {Icon} from "astro-icon/components";
import {url} from "../../utils/url-utils";
@@ -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="20"
class="transition text-[var(--primary)]" size="1.25rem"
>
</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="12"
class="transition text-black/25 dark:text-white/25 -translate-x-1" size="0.75rem"
>
</Icon>}
</a>

View File

@@ -16,7 +16,7 @@ const config = profileConfig;
class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
</Icon>
</div>
<ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
<ImageWrapper src={config.avatar || ""} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
</a>
<div class="px-2">
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>

View File

@@ -21,7 +21,7 @@ const {
const className = Astro.props.class
---
<widget-layout data-id={id} data-is-collapsed={isCollapsed} class={"pb-4 card-base " + className} style={style}>
<widget-layout data-id={id} data-is-collapsed={String(isCollapsed)} class={"pb-4 card-base " + className} style={style}>
<div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>
@@ -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={28}></Icon> {i18n(I18nKey.more)}
<Icon name="material-symbols:more-horiz" size="1.75rem"></Icon> {i18n(I18nKey.more)}
</div>
</button>
</div>}
@@ -48,15 +48,15 @@ const className = Astro.props.class
constructor() {
super();
if (this.dataset.isCollapsed === undefined || this.dataset.isCollapsed === false)
if (this.dataset.isCollapsed !== "true")
return;
const id = this.dataset.id;
const btn = this.querySelector('.expand-btn');
const wrapper = this.querySelector(`#${id}`)
btn.addEventListener('click', () => {
wrapper.classList.remove('collapsed');
btn.classList.add('hidden');
btn!.addEventListener('click', () => {
wrapper!.classList.remove('collapsed');
btn!.classList.add('hidden');
})
}
}