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

fix: fix errors and reformat code

This commit is contained in:
saicaca 2024-08-03 16:40:20 +08:00
parent 1f93499ece
commit 0ad144add3
44 changed files with 550 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
biome.json
View File

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

57
src/components/ArchivePanel.astro
View File

@ -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 =>
posts = posts.filter(
post =>
(post.data.category && categories.includes(post.data.category)) ||
(!post.data.category && categories.includes(UNCATEGORIZED))
);
(!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 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)]
posts: groupedPosts[parseInt(key)],
}))
// sort years by latest first
groupedPostsArray.sort((a, b) => b.year - a.year)
return groupedPostsArray;
}();
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">

3
src/components/ConfigCarrier.astro
View File

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

5
src/components/Footer.astro
View File

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

22
src/components/LightDarkSwitch.svelte
View File

@ -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',
@ -68,7 +55,6 @@ function hidePanel() {
const panel = document.querySelector('#light-dark-panel')
panel.classList.add('float-panel-closed')
}
</script>
<!-- z-50 make the panel higher than other float panels -->

31
src/components/Navbar.astro
View File

@ -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") {
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 -->

57
src/components/PostCard.astro
View File

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

24
src/components/PostMeta.astro
View File

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

6
src/components/PostPage.astro
View File

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

37
src/components/Search.svelte
View File

@ -1,39 +1,42 @@
<script lang="ts">
import { onMount } from 'svelte'
import {url} from "@utils/url-utils.ts"
import { i18n } from '@i18n/translation';
import I18nKey from '@i18n/i18nKey';
import { url } from '@utils/url-utils.ts'
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
let keywordDesktop = ''
let keywordMobile = ''
let result = []
const fakeResult = [{
const fakeResult = [
{
url: url('/'),
meta: {
title: 'This Is a Fake Search Result'
title: 'This Is a Fake Search Result',
},
excerpt: 'Because the search cannot work in the <mark>dev</mark> environment.'
}, {
excerpt:
'Because the search cannot work in the <mark>dev</mark> environment.',
},
{
url: url('/'),
meta: {
title: 'If You Want to Test the Search'
title: 'If You Want to Test the Search',
},
excerpt: 'Try running <mark>npm build && npm preview</mark> instead.'
}]
excerpt: 'Try running <mark>npm build && npm preview</mark> instead.',
},
]
let search = (keyword: string, isDesktop: boolean) => {}
onMount(() => {
search = async (keyword: string, isDesktop: boolean) => {
let panel = document.getElementById('search-panel')
if (!panel)
return
if (!panel) return
if (!keyword && isDesktop) {
panel.classList.add("float-panel-closed")
panel.classList.add('float-panel-closed')
return
}
let arr = [];
let arr = []
if (import.meta.env.PROD) {
const ret = await pagefind.search(keyword)
for (const item of ret.results) {
@ -46,12 +49,12 @@ onMount(() => {
}
if (!arr.length && isDesktop) {
panel.classList.add("float-panel-closed")
panel.classList.add('float-panel-closed')
return
}
if (isDesktop) {
panel.classList.remove("float-panel-closed")
panel.classList.remove('float-panel-closed')
}
result = arr
}
@ -59,7 +62,7 @@ onMount(() => {
const togglePanel = () => {
let panel = document.getElementById('search-panel')
panel?.classList.toggle("float-panel-closed")
panel?.classList.toggle('float-panel-closed')
}
$: search(keywordDesktop, true)

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

@ -1,5 +1,5 @@
---
import { Icon } from 'astro-icon/components';
import { Icon } from 'astro-icon/components'
---
<!-- There can't be a filter on parent element, or it will break `fixed` -->

10
src/components/control/ButtonTag.astro
View File

@ -1,11 +1,11 @@
---
interface Props {
size?: string;
dot?: boolean;
href?: string;
label?: string;
size?: string
dot?: boolean
href?: string
label?: string
}
const { size, dot, href, label }: Props = Astro.props;
const { size, dot, href, label }: Props = Astro.props
---
<a href={href} aria-label={label} class="btn-regular h-8 text-sm px-3 rounded-lg">
{dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}

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

@ -1,61 +1,53 @@
---
import type { Page } from "astro";
import { Icon } from 'astro-icon/components';
import {url} from "../../utils/url-utils";
import type { Page } from 'astro'
import { Icon } from 'astro-icon/components'
import { url } from '../../utils/url-utils'
interface Props {
page: Page;
class?: string;
style?: string;
page: Page
class?: string
style?: string
}
const {page, style} = Astro.props;
const { page, style } = Astro.props
const HIDDEN = -1;
const HIDDEN = -1
const className = Astro.props.class;
const className = Astro.props.class
const ADJ_DIST = 2;
const VISIBLE = ADJ_DIST * 2 + 1;
const ADJ_DIST = 2
const VISIBLE = ADJ_DIST * 2 + 1
// for test
let count = 1;
let l = page.currentPage, r = page.currentPage;
let count = 1
let l = page.currentPage,
r = page.currentPage
while (0 < l - 1 && r + 1 <= page.lastPage && count + 2 <= VISIBLE) {
count += 2;
l--;
r++;
count += 2
l--
r++
}
while (0 < l - 1 && count < VISIBLE) {
count++;
l--;
count++
l--
}
while (r + 1 <= page.lastPage && count < VISIBLE) {
count++;
r++;
count++
r++
}
let pages: number[] = [];
if (l > 1)
pages.push(1);
if (l == 3)
pages.push(2);
if (l > 3)
pages.push(HIDDEN);
for (let i = l; i <= r; i++)
pages.push(i);
if (r < page.lastPage - 2)
pages.push(HIDDEN);
if (r == page.lastPage - 2)
pages.push(page.lastPage - 1);
if (r < page.lastPage)
pages.push(page.lastPage);
let pages: number[] = []
if (l > 1) pages.push(1)
if (l == 3) pages.push(2)
if (l > 3) pages.push(HIDDEN)
for (let i = l; i <= r; i++) pages.push(i)
if (r < page.lastPage - 2) pages.push(HIDDEN)
if (r == page.lastPage - 2) pages.push(page.lastPage - 1)
if (r < page.lastPage) pages.push(page.lastPage)
const getPageUrl = (p: number) => {
if (p == 1)
return '/';
return `/${p}/`;
if (p == 1) return '/'
return `/${p}/`
}
---
<div class:list={[className, "flex flex-row gap-3 justify-center"]} style={style}>

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

@ -1,35 +1,44 @@
---
import path from "path";
import path from 'path'
interface Props {
id?: string
src: string;
class?: string;
src: string
class?: string
alt?: string
position?: string;
position?: string
basePath?: string
}
import { Image } from 'astro:assets';
import { url } from "../../utils/url-utils";
import { Image } from 'astro:assets'
import { url } from '../../utils/url-utils'
const {id, src, alt, position = 'center', basePath = '/'} = Astro.props;
const className = Astro.props.class;
const { id, src, alt, position = 'center', basePath = '/' } = Astro.props
const className = Astro.props.class
const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
const isPublic = src.startsWith('/');
const isLocal = !(
src.startsWith('/') ||
src.startsWith('http') ||
src.startsWith('https') ||
src.startsWith('data:')
)
const isPublic = src.startsWith('/')
// TODO temporary workaround for images dynamic import
// https://github.com/withastro/astro/issues/3373
let img;
let img
if (isLocal) {
const files = import.meta.glob<ImageMetadata>("../../**", { import: 'default' });
let normalizedPath = path.normalize(path.join("../../", basePath, src)).replace(/\\/g, "/");
img = await (files[normalizedPath])();
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}`);
console.error(`No image found for path ${normalizedPath}`)
}
}
const imageClass = 'w-full h-full object-cover';
const imageClass = 'w-full h-full object-cover'
const imageStyle = `object-position: ${position}`
---
<div id={id} class:list={[className, 'overflow-hidden relative']}>

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

@ -1,23 +1,22 @@
---
import {formatDateToYYYYMMDD} from "../../utils/date-utils";
import { Icon } from 'astro-icon/components';
import {licenseConfig, profileConfig} from "../../config";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import { formatDateToYYYYMMDD } from '../../utils/date-utils'
import { Icon } from 'astro-icon/components'
import { licenseConfig, profileConfig } from '../../config'
import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'
interface Props {
title: string;
slug: string;
pubDate: Date;
class: string;
title: string
slug: string
pubDate: Date
class: string
}
const { title, slug, pubDate } = Astro.props;
const className = Astro.props.class;
const profileConf = profileConfig;
const licenseConf = licenseConfig;
const postUrl = decodeURIComponent(Astro.url.toString());
const { title, slug, pubDate } = Astro.props
const className = Astro.props.class
const profileConf = profileConfig
const licenseConf = licenseConfig
const postUrl = decodeURIComponent(Astro.url.toString())
---
<div class=`relative transition overflow-hidden bg-[var(--license-block-bg)] py-5 px-6 ${className}`>
<div class="transition font-bold text-black/75 dark:text-white/75">

11
src/components/misc/Markdown.astro
View File

@ -1,11 +1,11 @@
---
import '@fontsource-variable/jetbrains-mono';
import '@fontsource-variable/jetbrains-mono/wght-italic.css';
import '@fontsource-variable/jetbrains-mono'
import '@fontsource-variable/jetbrains-mono/wght-italic.css'
interface Props {
class: string;
class: string
}
const className = Astro.props.class;
const className = Astro.props.class
---
<div data-pagefind-body class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
@ -46,12 +46,13 @@ const className = Astro.props.class;
wrapper.appendChild(codeBlock);
wrapper.appendChild(copyButton);
let timeout;
let timeout: ReturnType<typeof setTimeout>;
copyButton.addEventListener("click", async () => {
if (timeout) {
clearTimeout(timeout);
}
let text = codeBlock?.querySelector("code")?.innerText;
if (text === undefined) return;
await navigator.clipboard.writeText(text);
copyButton.classList.add("success");
timeout = setTimeout(() => {

25
src/components/widget/Categories.astro
View File

@ -1,26 +1,25 @@
---
import WidgetLayout from "./WidgetLayout.astro";
import WidgetLayout from './WidgetLayout.astro'
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import {getCategoryList} from "../../utils/content-utils";
import {getCategoryUrl} from "../../utils/url-utils";
import ButtonLink from "../control/ButtonLink.astro";
import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'
import { getCategoryList } from '../../utils/content-utils'
import { getCategoryUrl } from '../../utils/url-utils'
import ButtonLink from '../control/ButtonLink.astro'
const categories = await getCategoryList();
const categories = await getCategoryList()
const COLLAPSED_HEIGHT = "7.5rem";
const COLLAPSE_THRESHOLD = 5;
const COLLAPSED_HEIGHT = '7.5rem'
const COLLAPSE_THRESHOLD = 5
const isCollapsed = categories.length >= COLLAPSE_THRESHOLD;
const isCollapsed = categories.length >= COLLAPSE_THRESHOLD
interface Props {
class?: string;
style?: string;
class?: string
style?: string
}
const className = Astro.props.class
const style = Astro.props.style
---
<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}

6
src/components/widget/DisplaySettings.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import {i18n} from '@i18n/translation';
import I18nKey from '@i18n/i18nKey';
import {getDefaultHue, getHue, setHue} from '@utils/setting-utils';
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
import { getDefaultHue, getHue, setHue } from '@utils/setting-utils'
let hue = getHue()
const defaultHue = getDefaultHue()

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

@ -1,13 +1,13 @@
---
import {type NavBarLink} from "../../types/config";
import {Icon} from "astro-icon/components";
import {url} from "../../utils/url-utils";
import { type NavBarLink } from '../../types/config'
import { Icon } from 'astro-icon/components'
import { url } from '../../utils/url-utils'
interface Props {
links: NavBarLink[],
links: NavBarLink[]
}
const links = Astro.props.links;
const links = Astro.props.links
---
<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
{links.map((link) => (

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

@ -1,10 +1,10 @@
---
import ImageWrapper from "../misc/ImageWrapper.astro";
import {Icon} from "astro-icon/components";
import {profileConfig} from "../../config";
import {url} from "../../utils/url-utils";
import ImageWrapper from '../misc/ImageWrapper.astro'
import { Icon } from 'astro-icon/components'
import { profileConfig } from '../../config'
import { url } from '../../utils/url-utils'
const config = profileConfig;
const config = profileConfig
---
<div class="card-base p-3">
<a aria-label="Go to About Page" href={url('/about/')}

8
src/components/widget/SideBar.astro
View File

@ -1,9 +1,9 @@
---
import Profile from "./Profile.astro";
import Tag from "./Tags.astro";
import Categories from "./Categories.astro";
import Profile from './Profile.astro'
import Tag from './Tags.astro'
import Categories from './Categories.astro'
const className = Astro.props.class;
const className = Astro.props.class
---
<div id="sidebar" class:list={[className, "w-full"]}>
<div class="flex flex-col w-full gap-4 mb-4">

23
src/components/widget/Tags.astro
View File

@ -1,25 +1,24 @@
---
import WidgetLayout from "./WidgetLayout.astro";
import ButtonTag from "../control/ButtonTag.astro";
import {getTagList} from "../../utils/content-utils";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import {url} from "../../utils/url-utils";
import WidgetLayout from './WidgetLayout.astro'
import ButtonTag from '../control/ButtonTag.astro'
import { getTagList } from '../../utils/content-utils'
import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'
import { url } from '../../utils/url-utils'
const tags = await getTagList();
const tags = await getTagList()
const COLLAPSED_HEIGHT = "7.5rem";
const COLLAPSED_HEIGHT = '7.5rem'
const isCollapsed = tags.length >= 20;
const isCollapsed = tags.length >= 20
interface Props {
class?: string;
style?: string;
class?: string
style?: string
}
const className = Astro.props.class
const style = Astro.props.style
---
<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
<div class="flex gap-2 flex-wrap">

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

@ -1,25 +1,18 @@
---
import { Icon } from 'astro-icon/components';
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import { Icon } from 'astro-icon/components'
import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'
interface Props {
id: string;
name?: string;
isCollapsed?: boolean;
collapsedHeight?: string;
class?: string;
style?: string;
id: string
name?: string
isCollapsed?: boolean
collapsedHeight?: string
class?: string
style?: string
}
const props = Astro.props;
const {
id,
name,
isCollapsed,
collapsedHeight,
style,
} = Astro.props
const props = Astro.props
const { id, name, isCollapsed, collapsedHeight, style } = Astro.props
const className = Astro.props.class
---
<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

4
src/constants/constants.ts
View File

@ -2,5 +2,7 @@ export const UNCATEGORIZED = '__uncategorized__'
export const PAGE_SIZE = 8
export const LIGHT_MODE = 'light', DARK_MODE = 'dark', AUTO_MODE = 'auto'
export const LIGHT_MODE = 'light',
DARK_MODE = 'dark',
AUTO_MODE = 'auto'
export const DEFAULT_THEME = AUTO_MODE

25
src/constants/icon.ts
View File

@ -1,37 +1,44 @@
import type {Favicon} from "@/types/config.ts";
import type { Favicon } from '@/types/config.ts'
export const defaultFavicons: Favicon[] = [
{
src: '/favicon/favicon-light-32.png',
theme: 'light',
sizes: '32x32',
}, {
},
{
src: '/favicon/favicon-light-128.png',
theme: 'light',
sizes: '128x128',
}, {
},
{
src: '/favicon/favicon-light-180.png',
theme: 'light',
sizes: '180x180',
}, {
},
{
src: '/favicon/favicon-light-192.png',
theme: 'light',
sizes: '192x192',
}, {
},
{
src: '/favicon/favicon-dark-32.png',
theme: 'dark',
sizes: '32x32',
}, {
},
{
src: '/favicon/favicon-dark-128.png',
theme: 'dark',
sizes: '128x128',
}, {
},
{
src: '/favicon/favicon-dark-180.png',
theme: 'dark',
sizes: '180x180',
}, {
},
{
src: '/favicon/favicon-dark-192.png',
theme: 'dark',
sizes: '192x192',
}
},
]

14
src/content/config.ts
View File

@ -5,16 +5,16 @@ const postsCollection = defineCollection({
title: z.string(),
published: z.date(),
draft: z.boolean().optional().default(false),
description: z.string().optional().default(""),
image: z.string().optional().default(""),
description: z.string().optional().default(''),
image: z.string().optional().default(''),
tags: z.array(z.string()).optional().default([]),
category: z.string().optional().default(""),
category: z.string().optional().default(''),
/* For internal use */
prevTitle: z.string().default(""),
prevSlug: z.string().default(""),
nextTitle: z.string().default(""),
nextSlug: z.string().default(""),
prevTitle: z.string().default(''),
prevSlug: z.string().default(''),
nextTitle: z.string().default(''),
nextSlug: z.string().default(''),
}),
})
export const collections = {

2
src/i18n/translation.ts
View File

@ -22,7 +22,7 @@ const map: { [key: string]: Translation } = {
ja: ja,
ja_jp: ja,
ko: ko,
ko_kr: ko
ko_kr: ko,
}
export function getTranslation(lang: string): Translation {

3
src/layouts/Layout.astro
View File

@ -297,7 +297,7 @@ const setup = () => {
document.documentElement.style.setProperty('--content-delay', '0ms')
})
window.swup.hooks.on('content:replace', initCustomScrollbar)
window.swup.hooks.on('visit:start', (visit) => {
window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
// change banner height immediately when a link is clicked
const bodyElement = document.querySelector('body')
if (pathsEqual(visit.to.url, url('/'))) {
@ -364,7 +364,6 @@ const setup = () => {
window.swup.hooks.on(
"content:replace",
() => {
console.log("content:replace")
lightbox?.destroy?.()
},
{ before: true },

9
src/layouts/MainGridLayout.astro
View File

@ -4,8 +4,8 @@ import Navbar from '@components/Navbar.astro'
import BackToTop from '@components/control/BackToTop.astro'
import SideBar from '@components/widget/SideBar.astro'
import Layout from './Layout.astro'
import { Icon } from 'astro-icon/components';
import { siteConfig } from '../config';
import { Icon } from 'astro-icon/components'
import { siteConfig } from '../config'
interface Props {
title?: string
@ -14,8 +14,9 @@ interface Props {
}
const { title, banner, description } = Astro.props
const hasBannerCredit = siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!(siteConfig.banner.credit.url)
const hasBannerCredit =
siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!siteConfig.banner.credit.url
---
<Layout title={title} banner={banner} description={description}>

9
src/pages/about.astro
View File

@ -1,16 +1,15 @@
---
import MainGridLayout from "../layouts/MainGridLayout.astro";
import MainGridLayout from '../layouts/MainGridLayout.astro'
import { getEntry } from 'astro:content'
import {i18n} from "../i18n/translation";
import I18nKey from "../i18n/i18nKey";
import Markdown from "@components/misc/Markdown.astro";
import { i18n } from '../i18n/translation'
import I18nKey from '../i18n/i18nKey'
import Markdown from '@components/misc/Markdown.astro'
const aboutPost = await getEntry('spec', 'about')
const { Content } = await aboutPost.render()
---
<MainGridLayout title={i18n(I18nKey.about)} description={i18n(I18nKey.about)}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">

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

@ -1,23 +1,22 @@
---
import {getCategoryList} from "@utils/content-utils";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import ArchivePanel from "@components/ArchivePanel.astro";
import {i18n} from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import { getCategoryList } from '@utils/content-utils'
import MainGridLayout from '@layouts/MainGridLayout.astro'
import ArchivePanel from '@components/ArchivePanel.astro'
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
export async function getStaticPaths() {
const categories = await getCategoryList();
const categories = await getCategoryList()
return categories.map(category => {
return {
params: {
category: category.name
category: category.name,
},
}
}
});
})
}
const category = Astro.params.category as string;
const category = Astro.params.category as string
---
<MainGridLayout title={i18n(I18nKey.archive)} description={i18n(I18nKey.archive)}>

10
src/pages/archive/category/uncategorized.astro
View File

@ -1,9 +1,9 @@
---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import ArchivePanel from "@components/ArchivePanel.astro";
import {i18n} from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import {UNCATEGORIZED} from "@constants/constants";
import MainGridLayout from '@layouts/MainGridLayout.astro'
import ArchivePanel from '@components/ArchivePanel.astro'
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
import { UNCATEGORIZED } from '@constants/constants'
---
<MainGridLayout title={i18n(I18nKey.archive)}>

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

@ -1,8 +1,8 @@
---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import ArchivePanel from "@components/ArchivePanel.astro";
import {i18n} from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import MainGridLayout from '@layouts/MainGridLayout.astro'
import ArchivePanel from '@components/ArchivePanel.astro'
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
---
<MainGridLayout title={i18n(I18nKey.archive)}>

27
src/pages/archive/tag/[tag].astro
View File

@ -1,31 +1,30 @@
---
import {getSortedPosts} from "@utils/content-utils";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import ArchivePanel from "@components/ArchivePanel.astro";
import {i18n} from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import { getSortedPosts } from '@utils/content-utils'
import MainGridLayout from '@layouts/MainGridLayout.astro'
import ArchivePanel from '@components/ArchivePanel.astro'
import { i18n } from '@i18n/translation'
import I18nKey from '@i18n/i18nKey'
export async function getStaticPaths() {
let posts = await getSortedPosts()
const allTags = posts.reduce((acc, post) => {
post.data.tags.forEach(tag => acc.add(tag));
return acc;
}, new Set());
post.data.tags.forEach(tag => acc.add(tag))
return acc
}, new Set())
const allTagsArray = Array.from(allTags);
const allTagsArray = Array.from(allTags)
return allTagsArray.map(tag => {
return {
params: {
tag: tag
tag: tag,
},
}
}
});
})
}
const tag= Astro.params.tag as string;
const tag = Astro.params.tag as string
---
<MainGridLayout title={i18n(I18nKey.archive)} description={i18n(I18nKey.archive)}>

8
src/pages/robots.txt.ts
View File

@ -1,16 +1,16 @@
import type { APIRoute } from 'astro';
import type { APIRoute } from 'astro'
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}
`.trim();
`.trim()
export const GET: APIRoute = () => {
return new Response(robotsTxt, {
headers: {
'Content-Type': 'text/plain; charset=utf-8',
},
});
};
})
}

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

@ -1,25 +1,25 @@
import rss from '@astrojs/rss';
import {siteConfig} from '@/config';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
import {getSortedPosts} from "@utils/content-utils.ts";
const parser = new MarkdownIt();
import rss from '@astrojs/rss'
import { siteConfig } from '@/config'
import sanitizeHtml from 'sanitize-html'
import MarkdownIt from 'markdown-it'
import { getSortedPosts } from '@utils/content-utils.ts'
const parser = new MarkdownIt()
export async function GET(context: any) {
const blog = await getSortedPosts();
const blog = await getSortedPosts()
return rss({
title: siteConfig.title,
description: siteConfig.subtitle || 'No description',
site: context.site,
items: blog.map((post) => ({
items: blog.map(post => ({
title: post.data.title,
pubDate: post.data.published,
description: post.data.description,
link: `/posts/${post.slug}/`,
content: sanitizeHtml(parser.render(post.body), {
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
}),
})),
customData: `<language>${siteConfig.lang}</language>`,
});
})
}

21
src/plugins/rehype-component-admonition.mjs
View File

@ -12,20 +12,21 @@ import { h } from 'hastscript'
*/
export function AdmonitionComponent(properties, children, type) {
if (!Array.isArray(children) || children.length === 0)
return h("div",
return h(
'div',
{ class: 'hidden' },
'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")'
);
'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")',
)
let label = null
if (properties && properties['has-directive-label']) {
label = children[0]; // The first child is the label
children = children.slice(1);
label.tagName = "div"; // Change the tag <p> to <div>
label = children[0] // The first child is the label
children = children.slice(1)
label.tagName = 'div' // Change the tag <p> to <div>
}
return h(`blockquote`,
{ class: `admonition bdm-${type}` },
[ h("span", { class: `bdm-title` }, label ? label : type.toUpperCase()), ...children]
);
return h(`blockquote`, { class: `admonition bdm-${type}` }, [
h('span', { class: `bdm-title` }, label ? label : type.toUpperCase()),
...children,
])
}

93
src/plugins/rehype-component-github-card.mjs
View File

@ -11,71 +11,52 @@ import { h } from 'hastscript'
*/
export function GithubCardComponent(properties, children) {
if (Array.isArray(children) && children.length !== 0)
return h("div",
{ class: 'hidden' },
['Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")']
);
return h('div', { class: 'hidden' }, [
'Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")',
])
if (!properties.repo || !properties.repo.includes("/"))
return h("div",
if (!properties.repo || !properties.repo.includes('/'))
return h(
'div',
{ class: 'hidden' },
'Invalid repository. ("repo" attributte must be in the format "owner/repo")'
);
'Invalid repository. ("repo" attributte must be in the format "owner/repo")',
)
const repo = properties.repo;
const repo = properties.repo
const cardUuid = `GC${Math.random().toString(36).slice(-6)}` // Collisions are not important
const nAvatar = h(
`div#${cardUuid}-avatar`,
{ class: "gc-avatar"},
)
const nAvatar = h(`div#${cardUuid}-avatar`, { class: 'gc-avatar' })
const nLanguage = h(
`span#${cardUuid}-language`,
{ class: "gc-language" },
"Waiting..."
{ class: 'gc-language' },
'Waiting...',
)
const nTitle = h(
`div`,
{ class: "gc-titlebar" },
[
h("div", { class: "gc-titlebar-left"}, [
h("div", { class: "gc-owner" }, [
const nTitle = h(`div`, { class: 'gc-titlebar' }, [
h('div', { class: 'gc-titlebar-left' }, [
h('div', { class: 'gc-owner' }, [
nAvatar,
h("div", { class: "gc-user" }, repo.split("/")[0] ),
h('div', { class: 'gc-user' }, repo.split('/')[0]),
]),
h("div", { class: "gc-divider" }, "/" ),
h("div", { class: "gc-repo" }, repo.split("/")[1] )
h('div', { class: 'gc-divider' }, '/'),
h('div', { class: 'gc-repo' }, repo.split('/')[1]),
]),
h("div", { class: "github-logo"})
]
)
h('div', { class: 'github-logo' }),
])
const nDescription = h(
`div#${cardUuid}-description`,
{ class: "gc-description" },
"Waiting for api.github.com..."
{ class: 'gc-description' },
'Waiting for api.github.com...',
)
const nStars = h(
`div#${cardUuid}-stars`,
{ class: "gc-stars" },
"00K"
)
const nForks = h(
`div#${cardUuid}-forks`,
{ class: "gc-forks" },
"0K"
)
const nLicense = h(
`div#${cardUuid}-license`,
{ class: "gc-license" },
"0K"
)
const nStars = h(`div#${cardUuid}-stars`, { class: 'gc-stars' }, '00K')
const nForks = h(`div#${cardUuid}-forks`, { class: 'gc-forks' }, '0K')
const nLicense = h(`div#${cardUuid}-license`, { class: 'gc-license' }, '0K')
const nScript = h(
`script#${cardUuid}-script`,
{ type: "text/javascript", defer: true },
{ type: 'text/javascript', defer: true },
`
fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
document.getElementById('${cardUuid}-description').innerText = data.description.replace(/:[a-zA-Z0-9_]+:/g, '');
@ -97,22 +78,22 @@ export function GithubCardComponent(properties, children) {
c.classList.add("fetch-error");
console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
})
`
`,
)
return h(`a#${cardUuid}-card`,
{ class: "card-github fetch-waiting no-styling",
return h(
`a#${cardUuid}-card`,
{
class: 'card-github fetch-waiting no-styling',
href: `https://github.com/${repo}`,
target: '_blank',
repo },
repo,
},
[
nTitle,
nDescription,
h("div",
{ class: "gc-infobar" },
[nStars, nForks, nLicense, nLanguage]
),
nScript
]
);
h('div', { class: 'gc-infobar' }, [nStars, nForks, nLicense, nLanguage]),
nScript,
],
)
}

11
src/plugins/remark-directive-rehype.js
View File

@ -1,6 +1,6 @@
// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
import { h } from 'hastscript';
import {visit} from 'unist-util-visit'
import { h } from 'hastscript'
import { visit } from 'unist-util-visit'
export function parseDirectiveNode() {
return (tree, { data }) => {
@ -12,7 +12,11 @@ export function parseDirectiveNode() {
) {
const data = node.data || (node.data = {})
node.attributes = node.attributes || {}
if (node.children.length > 0 && node.children[0].data && node.children[0].data.directiveLabel) {
if (
node.children.length > 0 &&
node.children[0].data &&
node.children[0].data.directiveLabel
) {
// Add a flag to the node to indicate that it has a directive label
node.attributes['has-directive-label'] = true
}
@ -24,4 +28,3 @@ export function parseDirectiveNode() {
})
}
}

4
src/plugins/remark-excerpt.js
View File

@ -3,7 +3,7 @@ import { toString } from 'mdast-util-to-string'
/* Use the post's first paragraph as the excerpt */
export function remarkExcerpt() {
return (tree, { data }) => {
let excerpt = '';
let excerpt = ''
for (let node of tree.children) {
if (node.type !== 'paragraph') {
continue
@ -12,5 +12,5 @@ export function remarkExcerpt() {
break
}
data.astro.frontmatter.excerpt = excerpt
};
}
}

7
src/types/config.ts
View File

@ -1,4 +1,4 @@
import type { LIGHT_MODE, DARK_MODE, AUTO_MODE } from "@constants/constants"
import type { LIGHT_MODE, DARK_MODE, AUTO_MODE } from '@constants/constants'
export type SiteConfig = {
title: string
@ -63,4 +63,7 @@ export type LicenseConfig = {
url: string
}
export type LIGHT_DARK_MODE = typeof LIGHT_MODE | typeof DARK_MODE | typeof AUTO_MODE
export type LIGHT_DARK_MODE =
| typeof LIGHT_MODE
| typeof DARK_MODE
| typeof AUTO_MODE

10
src/utils/setting-utils.ts
View File

@ -1,4 +1,9 @@
import {AUTO_MODE, DARK_MODE, DEFAULT_THEME, LIGHT_MODE} from "@constants/constants.ts";
import {
AUTO_MODE,
DARK_MODE,
DEFAULT_THEME,
LIGHT_MODE,
} from '@constants/constants.ts'
import type { LIGHT_DARK_MODE } from '@/types/config'
export function getDefaultHue(): number {
@ -21,7 +26,6 @@ export function setHue(hue: number): void {
r.style.setProperty('--hue', String(hue))
}
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
switch (theme) {
case LIGHT_MODE:
@ -46,5 +50,5 @@ export function setTheme(theme: LIGHT_DARK_MODE): void {
}
export function getStoredTheme(): LIGHT_DARK_MODE {
return localStorage.getItem('theme') as LIGHT_DARK_MODE || DEFAULT_THEME
return (localStorage.getItem('theme') as LIGHT_DARK_MODE) || DEFAULT_THEME
}

2
src/utils/url-utils.ts
View File

@ -9,7 +9,7 @@ export function pathsEqual(path1: string, path2: string) {
function joinUrl(...parts: string[]): string {
const joined = parts.join('/')
return joined.replace(/\/+/g, '/');
return joined.replace(/\/+/g, '/')
}
export function getPostUrlBySlug(slug: string): string {