Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: improve code quality

This commit is contained in:
saicaca 2024-07-21 18:41:03 +08:00
parent 003c644146
commit 96223c0b5a
15 changed files with 38 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Navbar.astro
View File

@ -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="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="fa6-solid:chevron-right" size={"0.75rem"} class="transition 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-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" class="transition text-[1.25rem] my-auto text-[var(&#45;&#45;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" 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>

4
src/components/PostCard.astro
View File

@ -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="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="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)] 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 -->

2
src/components/control/BackToTop.astro
View File

@ -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' });
}

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

@ -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>

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="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>

4
src/components/widget/NavMenuPanel.astro
View File

@ -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>

4
src/components/widget/Profile.astro
View File

@ -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>

2
src/components/widget/WidgetLayout.astro
View File

@ -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>}

32
src/layouts/Layout.astro
View File

@ -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,
SizeObserverPlugin,
ClickScrollPlugin
// ScrollbarsHidingPlugin,
// SizeObserverPlugin,
// 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 => {

8
src/layouts/MainGridLayout.astro
View File

@ -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 enableBanner = siteConfig.banner.enable
// const isHomePage = pathsEqual(Astro.url.pathname, '/')
// const enableBanner = siteConfig.banner.enable
---

8
src/pages/[...page].astro
View File

@ -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;

2
src/pages/archive/category/[category].astro
View File

@ -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";

1
src/pages/archive/index.astro
View File

@ -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";

6
src/pages/posts/[...slug].astro
View File

@ -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>

1
src/pages/rss.xml.ts
View File

@ -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";