Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: improve code quality

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ArchivePanel.astro
View File

@@ -6,9 +6,9 @@ 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;
@@ -27,8 +27,8 @@ if (Array.isArray(categories) && categories.length > 0) {
);
}
const groups = function () {
const groupedPosts = posts.reduce((grouped, post) => {
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] = []
@@ -39,8 +39,8 @@ const groups = function () {
// convert the object to an array
const groupedPostsArray = Object.keys(groupedPosts).map(key => ({
year: key,
posts: groupedPosts[key]
year: parseInt(key),
posts: groupedPosts[parseInt(key)]
}))
// sort years by latest first

20
src/components/Navbar.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import DisplaySettings from "./widget/DisplaySettings.svelte";
import {LinkPreset, NavBarLink} from "../types/config";
import {LinkPreset, type NavBarLink} from "../types/config";
import {navBarConfig, siteConfig} from "../config";
import NavMenuPanel from "./widget/NavMenuPanel.astro";
import Search from "./Search.svelte";
@@ -34,7 +34,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
>
<div class="flex items-center">
{l.name}
{l.external && <Icon size="14" 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 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>}
</div>
</a>;
})}
@@ -80,22 +80,20 @@ function switchTheme() {
function loadButtonScript() {
let switchBtn = document.getElementById("scheme-switch");
switchBtn.addEventListener("click", function () {
switchBtn!.addEventListener("click", function () {
switchTheme()
});
let settingBtn = document.getElementById("display-settings-switch");
if (settingBtn) {
settingBtn.addEventListener("click", function () {
let settingPanel = document.getElementById("display-setting");
settingPanel.classList.toggle("float-panel-closed");
});
}
settingBtn!.addEventListener("click", function () {
let settingPanel = document.getElementById("display-setting");
settingPanel!.classList.toggle("float-panel-closed");
});
let menuBtn = document.getElementById("nav-menu-switch");
menuBtn.addEventListener("click", function () {
menuBtn!.addEventListener("click", function () {
let menuPanel = document.getElementById("nav-menu-panel");
menuPanel.classList.toggle("float-panel-closed");
menuPanel!.classList.toggle("float-panel-closed");
});
}

5
src/components/PostCard.astro
View File

@@ -8,7 +8,7 @@ import I18nKey from "../i18n/i18nKey";
import {getDir} from "../utils/url-utils";
interface Props {
class: string;
class?: string;
entry: any;
title: string;
url: string;
@@ -17,11 +17,10 @@ interface Props {
category: string;
image: string;
description: string;
words: number;
draft: boolean;
style: string;
}
const { entry, title, url, published, tags, category, image, description, words, style } = Astro.props;
const { entry, title, url, published, tags, category, image, description, style } = Astro.props;
const className = Astro.props.class;
const hasCover = image !== undefined && image !== null && image !== '';

4
src/components/PostMeta.astro
View File

@@ -10,9 +10,9 @@ interface Props {
published: Date;
tags: string[];
category: string;
hideTagsForMobile: boolean;
hideTagsForMobile?: boolean;
}
const {published, tags, category, hideTagsForMobile} = Astro.props;
const {published, tags, category, hideTagsForMobile = false} = Astro.props;
const className = Astro.props.class;
---

4
src/components/control/ButtonLink.astro
View File

@@ -4,9 +4,9 @@ interface Props {
url?: string
label?: string
}
const { badge, url, name } = Astro.props
const { badge, url, label } = Astro.props
---
<a href={url} aria-label={name}>
<a href={url} aria-label={label}>
<button
class:list={`
w-full

4
src/components/control/Pagination.astro
View File

@@ -59,7 +59,7 @@ const getPageUrl = (p: number) => {
---
<div class:list={[className, "flex flex-row gap-3 justify-center"]} style={style}>
<a href={url(page.url.prev)} aria-label={page.url.prev ? "Previous Page" : null}
<a href={url(page.url.prev || "")} aria-label={page.url.prev ? "Previous Page" : null}
class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
{"disabled": page.url.prev == undefined}
]}
@@ -81,7 +81,7 @@ const getPageUrl = (p: number) => {
>{p}</a>
})}
</div>
<a href={url(page.url.next)} aria-label={page.url.next ? "Next Page" : null}
<a href={url(page.url.next || "")} aria-label={page.url.next ? "Next Page" : null}
class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
{"disabled": page.url.next == undefined}
]}

5
src/components/misc/ImageWrapper.astro
View File

@@ -24,6 +24,9 @@ if (isLocal) {
const files = import.meta.glob<ImageMetadata>("../../**", { import: 'default' });
let normalizedPath = path.normalize(path.join("../../", basePath, src)).replace(/\\/g, "/");
img = await (files[normalizedPath])();
if (!img) {
console.error(`No image found for path ${normalizedPath}`);
}
}
const imageClass = 'w-full h-full object-cover';
@@ -31,7 +34,7 @@ const imageStyle = `object-position: ${position}`
---
<div class:list={[className, 'overflow-hidden relative']}>
<div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
{isLocal && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
{isLocal && img && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
{!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
</div>

2
src/components/misc/License.astro
View File

@@ -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="240"></Icon>
<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>
</div>

4
src/components/widget/Categories.astro
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}

6
src/components/widget/NavMenuPanel.astro
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>

2
src/components/widget/Profile.astro
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>

12
src/components/widget/WidgetLayout.astro
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');
})
}
}