Skip to content

Commit 53f638f

Browse files
unixunix
committed
feat: migrate to geist v2.2.0
1 parent 36640dc commit 53f638f

40 files changed

+1295
-3863
lines changed

‎jsconfig.json

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎lib/components/blog-configs-provider.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import { BlogConfigs, BlogConfigsContext } from 'lib/config-context'
3+
4+
export interface BlogConfigsProviderProps {
5+
onChange: BlogConfigs['onChange']
6+
}
7+
8+
const BlogConfigsProvider: React.FC<
9+
React.PropsWithChildren<BlogConfigsProviderProps>
10+
> = React.memo(({ onChange, children }) => {
11+
return (
12+
<BlogConfigsContext.Provider value={{ onChange }}>
13+
{children}
14+
</BlogConfigsContext.Provider>
15+
)
16+
})
17+
18+
export default BlogConfigsProvider

‎lib/components/contacts.jsx renamed to ‎lib/components/contacts.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import SunIcon from '@geist-ui/react-icons/sun'
55
import MoonIcon from '@geist-ui/react-icons/moon'
66
import { Configs } from '../utils'
77

8-
const Contacts = ({ isDetailPage = false }) => {
8+
export interface ContactsProps {
9+
isDetailPage?: boolean
10+
}
11+
12+
const Contacts: React.FC<React.PropsWithChildren<ContactsProps>> = ({
13+
isDetailPage = false,
14+
}) => {
915
const theme = useTheme()
1016
const configs = useConfigs()
1117
const isDark = useMemo(() => theme.type === 'dark', [theme.type])
@@ -20,7 +26,7 @@ const Contacts = ({ isDetailPage = false }) => {
2026
return (
2127
<>
2228
<div className="contacts">
23-
{isDetailPage && <Divider y={0.5} />}
29+
{isDetailPage && <Divider h={0.5} />}
2430
<div className="between">
2531
<div className="socials">
2632
{Configs.email && (
@@ -115,7 +121,7 @@ const Contacts = ({ isDetailPage = false }) => {
115121
}
116122
`}</style>
117123
</div>
118-
<Spacer y={3.5} />
124+
<Spacer h={3.5} />
119125
</>
120126
)
121127
}

‎lib/components/home.jsx renamed to ‎lib/components/home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import Profile from './profile'
33

4-
const Home = () => {
4+
const Home: React.FC<unknown> = () => {
55
return (
66
<div className="home">
77
<Profile />

‎lib/components/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export { default as BlogConfigsProvider } from './blog-configs-provider'
2+
export { default as Layout } from './layout'
3+
export { default as Posts } from './posts/posts'
4+
5+
export type { PostMetadata } from './layout'

‎lib/components/layout.jsx renamed to ‎lib/components/layout.tsx

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,18 @@ import Title from './title'
66
import { Spacer } from '@geist-ui/react'
77
import { Configs } from '../utils'
88

9-
const LayoutHeader = ({ meta }) => (
9+
export type PostMetadata = {
10+
title: string
11+
date: string
12+
description?: string
13+
image?: string
14+
}
15+
16+
export type LayoutHeader = {
17+
meta: PostMetadata
18+
}
19+
20+
const LayoutHeader: React.FC<LayoutHeader> = ({ meta }) => (
1021
<Head>
1122
{meta.title && (
1223
<title>
@@ -21,7 +32,23 @@ const LayoutHeader = ({ meta }) => (
2132
</Head>
2233
)
2334

24-
const Layout = ({ children, meta = {} }) => {
35+
export type Props = {
36+
meta?: PostMetadata
37+
}
38+
const defaultProps = {
39+
meta: {
40+
title: '',
41+
date: new Date().toISOString(),
42+
},
43+
}
44+
45+
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
46+
export type LayoutProps = Props & NativeAttrs
47+
48+
const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
49+
children,
50+
meta,
51+
}: LayoutProps & typeof defaultProps) => {
2552
const [showAfterRender, setShowAfterRender] = useState(false)
2653
const inDetailPage = useMemo(() => meta && meta.title, [])
2754
useEffect(() => setShowAfterRender(true), [])
@@ -47,8 +74,8 @@ const Layout = ({ children, meta = {} }) => {
4774
<Profile />
4875
{inDetailPage && <Title title={meta.title} date={meta.date} />}
4976
{children}
50-
<Spacer y={5} />
51-
<Contacts isDetailPage={inDetailPage} />
77+
<Spacer h={5} />
78+
<Contacts isDetailPage={!!inDetailPage} />
5279
</div>
5380

5481
<style jsx>{`
@@ -95,4 +122,6 @@ const Layout = ({ children, meta = {} }) => {
95122
)
96123
}
97124

125+
Layout.defaultProps = defaultProps
126+
98127
export default Layout

‎lib/components/posts/post-item.jsx renamed to ‎lib/components/posts/post-item.tsx

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
import React from 'react'
22
import { Link, useTheme } from '@geist-ui/react'
33
import NextLink from 'next/link'
4-
const options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' }
54

6-
const getDateString = date => {
5+
const options: Intl.DateTimeFormatOptions = {
6+
weekday: 'short',
7+
year: 'numeric',
8+
month: 'long',
9+
day: 'numeric',
10+
}
11+
12+
const getDateString = (date: string = ''): string => {
713
const d = new Date(date)
814
if (`${d}` === 'Invalid Date') return ''
915
return new Date(date).toLocaleString('zh-cn', options).replace('日', '日, &nbsp;')
1016
}
1117

12-
const PostItem = ({ post }) => {
18+
export interface PostItemProps {
19+
post: {
20+
url: string
21+
name: string
22+
meta?: {
23+
date: string
24+
}
25+
}
26+
}
27+
28+
const PostItem: React.FC<PostItemProps> = ({ post }) => {
1329
const theme = useTheme()
1430

1531
return (
@@ -19,7 +35,8 @@ const PostItem = ({ post }) => {
1935
{post.name}
2036
<span
2137
className="date"
22-
dangerouslySetInnerHTML={{ __html: getDateString(post.meta.date) }}></span>
38+
dangerouslySetInnerHTML={{ __html: getDateString(post.meta?.date) }}
39+
/>
2340
</Link>
2441
</NextLink>
2542
<style jsx>{`

‎lib/components/posts/posts.jsx renamed to ‎lib/components/posts/posts.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import Head from 'next/head'
22
import React, { useMemo } from 'react'
33
import PostItem from './post-item'
4-
import { useTheme, Link } from '@geist-ui/react'
5-
import { Configs } from '../../utils'
4+
import { Configs } from 'lib/utils'
65
import NextLink from 'next/link'
7-
import metadata from 'lib/data/metadata'
6+
import metadata from 'lib/data/metadata.json'
7+
import { useTheme, Link } from '@geist-ui/react'
88

9-
const getMoreLink = len => {
9+
const getMoreLink = (len: number): React.ReactNode => {
1010
if (len < Configs.latestLimit) return null
1111
return (
1212
<NextLink href="/blog" passHref>
@@ -15,19 +15,23 @@ const getMoreLink = len => {
1515
)
1616
}
1717

18-
const getLatest = (data, isLatest) => {
18+
const getLatest = (data: typeof metadata, isLatest?: boolean) => {
1919
const postNode = data.find(item => item.name === 'posts')
2020
const posts = (postNode || {}).children || []
2121
if (!isLatest) return posts
2222
return posts.slice(0, Configs.latestLimit)
2323
}
2424

25-
const getTitle = isLatest => {
25+
const getTitle = (isLatest?: boolean): string => {
2626
if (!isLatest) return Configs.labels.list
2727
return Configs.labels.latest
2828
}
2929

30-
const Posts = ({ isLatest = false }) => {
30+
export interface PostsProps {
31+
isLatest?: boolean
32+
}
33+
34+
const Posts: React.FC<PostsProps> = ({ isLatest = false }) => {
3135
const theme = useTheme()
3236
const posts = useMemo(() => getLatest(metadata, isLatest), [])
3337
const title = useMemo(() => getTitle(isLatest), [])

‎lib/components/profile-links.jsx renamed to ‎lib/components/profile-links.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
11
import React, { useMemo } from 'react'
22
import NextLink from 'next/link'
33
import { useTheme, Link } from '@geist-ui/react'
4-
import metadata from '../data/metadata'
4+
import metadata from '../data/metadata.json'
55
import { Configs } from '../utils'
66

7-
const getFixes = metas => {
7+
const getFixes = (metas: typeof metadata) => {
88
const data = metas.find(item => item.name === 'fixed')
99
return (data || {}).children || []
1010
}
1111

12-
const fillSpace = name => {
12+
const fillSpace = (name: string): string => {
1313
return name.replace(/ /g, '_')
1414
}
1515

16-
const makeLink = data => {
16+
export type ProfileLinkItem = {
17+
url: string
18+
name: string
19+
}
20+
21+
const makeLink = (data: ProfileLinkItem): React.ReactNode => {
1722
return (
1823
<NextLink href={data.url} key={data.url} passHref>
1924
<Link>{fillSpace(data.name)}</Link>
2025
</NextLink>
2126
)
2227
}
2328

24-
const ProfileLinks = () => {
29+
const ProfileLinks: React.FC<unknown> = () => {
2530
const theme = useTheme()
2631
const links = useMemo(() => getFixes(metadata), [])
2732
return (

‎lib/components/profile.jsx renamed to ‎lib/components/profile.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState, useEffect } from 'react'
2-
import { Row, useTheme, User, Link } from '@geist-ui/react'
2+
import { useTheme, User, Link } from '@geist-ui/react'
33
import NextLink from 'next/link'
44
import ProfileLinks from './profile-links'
55
import { Configs } from '../utils'
66

7-
const Profile = React.memo(({}) => {
7+
const Profile: React.FC<unknown> = React.memo(() => {
88
const theme = useTheme()
99
const [showText, setShowText] = useState(theme.type === 'dark')
1010
useEffect(() => {
@@ -16,15 +16,15 @@ const Profile = React.memo(({}) => {
1616

1717
return (
1818
<div className="profile">
19-
<Row align="bottom" className="user">
19+
<div className="user">
2020
<NextLink href="/" passHref>
2121
<Link>
2222
<User src="/assets/avatar.png" name={Configs.author} altText="avatar">
2323
{Configs.summary}
2424
</User>
2525
</Link>
2626
</NextLink>
27-
</Row>
27+
</div>
2828
<ProfileLinks />
2929
<style jsx>{`
3030
.profile {

0 commit comments

Comments
 (0)