Fork of Chiri for Astro for my blog
chore(types): minor cleanup and fixes
+53
-44
+4
-7
src/components/features/FormattedDate.astro
+4
-7
src/components/features/FormattedDate.astro
···
1
1
---
2
2
import { themeConfig } from '@/config'
3
3
import { formatDate } from '@/utils/date'
4
+
import type { FormattedDateProps } from '@/types'
4
5
5
-
interface Props {
6
-
date: Date
7
-
format?: string
8
-
}
9
-
10
-
const { date, format } = Astro.props
6
+
const { date, format, context = 'default' } = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
11
7
---
12
8
13
9
<time
14
10
datetime={date.toISOString()}
15
11
class={!themeConfig.date.dateOnRight &&
16
12
(themeConfig.date.dateFormat === 'MONTH DAY YYYY' ||
17
-
themeConfig.date.dateFormat === 'DAY MONTH YYYY')
13
+
themeConfig.date.dateFormat === 'DAY MONTH YYYY') &&
14
+
context === 'list'
18
15
? 'date-left'
19
16
: ''}
20
17
>
+4
-8
src/components/features/PostList.astro
+4
-8
src/components/features/PostList.astro
···
1
1
---
2
2
import FormattedDate from '@/components/features/FormattedDate.astro'
3
-
import type { CollectionEntry } from 'astro:content'
3
+
import type { PostListProps } from '@/types'
4
4
import { themeConfig } from '@/config'
5
5
6
-
interface Props {
7
-
posts: CollectionEntry<'posts'>[]
8
-
}
9
-
10
-
const { posts } = Astro.props
6
+
const { posts } = Astro.props as PostListProps
11
7
---
12
8
13
9
<ul>
···
18
14
<div class={`post-item ${!themeConfig.date.dateOnRight ? 'date-left' : ''}`}>
19
15
{!themeConfig.date.dateOnRight && (
20
16
<p class="date font-features">
21
-
<FormattedDate date={post.data.pubDate} />
17
+
<FormattedDate date={post.data.pubDate} context="list" />
22
18
</p>
23
19
)}
24
20
<p class="title">{post.data.title}</p>
25
21
{themeConfig.date.dateOnRight && <div class="divider" />}
26
22
{themeConfig.date.dateOnRight && (
27
23
<p class="date font-features">
28
-
<FormattedDate date={post.data.pubDate} />
24
+
<FormattedDate date={post.data.pubDate} context="list" />
29
25
</p>
30
26
)}
31
27
</div>
+2
-25
src/components/ui/GitHubCard.astro
+2
-25
src/components/ui/GitHubCard.astro
···
1
1
<script>
2
-
let githubCardsObserver: IntersectionObserver | null = null
2
+
import type { GitHubRepoData, CachedRepoData, CardElements } from '@/types'
3
3
4
-
interface GitHubRepoData {
5
-
owner?: {
6
-
avatar_url: string
7
-
}
8
-
description?: string
9
-
stargazers_count?: number
10
-
forks_count?: number
11
-
license?: {
12
-
spdx_id: string
13
-
}
14
-
}
15
-
16
-
interface CachedRepoData {
17
-
data: GitHubRepoData
18
-
timestamp: number
19
-
}
4
+
let githubCardsObserver: IntersectionObserver | null = null
20
5
21
6
// Retrieve cached GitHub repository data from localStorage with expiration check
22
7
function getCachedData(repo: string): GitHubRepoData | null {
···
57
42
} catch (error) {
58
43
console.warn('Failed to save to cache:', error)
59
44
}
60
-
}
61
-
62
-
interface CardElements {
63
-
avatar: HTMLElement | null
64
-
desc: HTMLElement | null
65
-
stars: HTMLElement | null
66
-
forks: HTMLElement | null
67
-
license: HTMLElement | null
68
45
}
69
46
70
47
// Update the GitHub card UI elements with fetched repository data
+1
-1
src/layouts/PostLayout.astro
+1
-1
src/layouts/PostLayout.astro
+35
src/types/component.types.ts
+35
src/types/component.types.ts
···
46
46
caption?: string
47
47
priority?: boolean
48
48
}
49
+
50
+
// FormattedDate component props interface
51
+
export interface FormattedDateProps {
52
+
date: Date
53
+
format?: string
54
+
context?: 'list' | 'post' | 'default'
55
+
}
56
+
57
+
// GitHub repository data interface
58
+
export interface GitHubRepoData {
59
+
owner?: {
60
+
avatar_url: string
61
+
}
62
+
description?: string
63
+
stargazers_count?: number
64
+
forks_count?: number
65
+
license?: {
66
+
spdx_id: string
67
+
}
68
+
}
69
+
70
+
// Cached repository data interface
71
+
export interface CachedRepoData {
72
+
data: GitHubRepoData
73
+
timestamp: number
74
+
}
75
+
76
+
// GitHub card UI elements interface
77
+
export interface CardElements {
78
+
avatar: HTMLElement | null
79
+
desc: HTMLElement | null
80
+
stars: HTMLElement | null
81
+
forks: HTMLElement | null
82
+
license: HTMLElement | null
83
+
}
+5
src/types/content.types.ts
+5
src/types/content.types.ts
+2
-3
src/utils/date.ts
+2
-3
src/utils/date.ts
···
1
1
import { themeConfig } from '@/config'
2
+
import type { DateFormat } from '@/types'
2
3
3
4
const MONTHS_EN = [
4
5
'Jan',
···
56
57
}
57
58
}
58
59
59
-
export const SUPPORTED_DATE_FORMATS = [
60
+
export const SUPPORTED_DATE_FORMATS: readonly DateFormat[] = [
60
61
'YYYY-MM-DD',
61
62
'MM-DD-YYYY',
62
63
'DD-MM-YYYY',
63
64
'MONTH DAY YYYY',
64
65
'DAY MONTH YYYY'
65
66
] as const
66
-
67
-
export type DateFormat = (typeof SUPPORTED_DATE_FORMATS)[number]