Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit a02065a

Browse files
mydearxymmydearxym
authored
refactor: sponsor demo (#1196)
* refactor(drink): upsert & image style enhance * refactor(sponsor): make it look nice
1 parent 899a62f commit a02065a

File tree

23 files changed

+338
-342
lines changed

23 files changed

+338
-342
lines changed

‎package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"cookies-next": "^2.0.3",
6161
"core-js": "3.6.5",
6262
"cross-env": "^7.0.2",
63+
"css-doodle": "^0.21.6",
6364
"express": "^4.16.4",
6465
"glob": "^7.1.2",
6566
"graphql": "^15.5.1",

‎src/containers/content/HaveADrinkContent/Body/Content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Content: FC<TProps> = ({ item }) => {
2525

2626
return (
2727
<ImageContentWrapper>
28-
<Image src={imageSrc} />
28+
<Image src={imageSrc} size={item.imageSize} />
2929
{refLink && <Linker src={refLink} hint="参考" top={8} />}
3030
<Text>{item.text}</Text>
3131
</ImageContentWrapper>

‎src/containers/content/HaveADrinkContent/demo.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,24 @@ const demo = [
1414
images: [],
1515
},
1616
{
17-
text: 'CoderPlanets 成员在不同的子社区有不同的昵称，比如在首页叫 CPer，在 Elixir 社区叫 Alchemist， 在 Rust 社区叫 Rustacean 等等。',
17+
text: 'CoderPlanets 的用户在不同子社区中有对应的昵称，比如在首页叫 CPer，在 Elixir 社区叫 Alchemist， 在 Rust 社区叫 Rustacean 等等。',
18+
reference: 'https://coderplanets.com/elixir',
1819
},
1920
{
2021
text: 'CoderPlanets 评论表情包中的感谢概念，是一个由爱心抽象出来的大螃蟹钳子，谐音为「谢谢」。',
22+
images: [`${ASSETS_ENDPOINT}/ugc/tmp/drink-crabheart.png`],
23+
imageSize: 'small',
2124
},
2225
{
23-
text: 'CoderPlanets 的分享模块，除了常见的第三方社交平台，还有程序员常用的 MD, 以及 Org-Mode 格式。',
26+
text: 'CoderPlanets 中的链接分享，除了常见的第三方社交平台，还有程序员常用的 Markdown，Org-Mode 等格式。',
2427
},
2528
{
2629
text: 'CoderPlanets 遵循中文排版原则，后端会自动为中英文间插入空格，中文的引号转义为「」等等。',
2730
},
31+
{
32+
text: 'CoderPlanets 会员升级页面的招呼「你好哇」，来自「程序员」王小波给李银河的情书集 —《爱你就像爱生命》。',
33+
reference: 'https://coderplanets.com/membership',
34+
},
2835
{
2936
text: 'CoderPlanets 的前端没有使用任何流行的「UI 组件库」，几乎所有组件都是量身定制，基本上没有撞衫的可能。',
3037
},

‎src/containers/content/HaveADrinkContent/spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export type TDrinkItem = {
1414
text: string
1515
reference?: string
1616
images?: string[]
17+
imageSize?: string
1718
}
1819

1920
export type TDrinkCategory = {

‎src/containers/content/HaveADrinkContent/styles/body/content.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const ImageContentWrapper = styled(Wrapper)`
2525
${css.flexColumn('align-both')}
2626
margin-top: -30px;
2727
`
28-
export const Image = styled(Img)`
29-
height: 200px;
28+
export const Image = styled(Img)<{ size: string }>`
29+
height: ${({ size }) => (size === 'small' ? '60px' : '200px')};
3030
object-fit: cover;
3131
border-radius: 8px;
3232
`

‎src/containers/content/SponsorContent/Banner.js‎ renamed to ‎src/containers/content/SponsorContent/Banner.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
*
77
*/
88

9-
import React, { useState } from 'react'
9+
import { FC, memo, useState, Fragment } from 'react'
10+
import Link from 'next/link'
1011

1112
import { buildLog } from '@/utils/logger'
1213
import ViewportTracker from '@/widgets/ViewportTracker'
@@ -27,7 +28,7 @@ import { toggleBannerVisiable } from './logic'
2728
/* eslint-disable-next-line */
2829
const log = buildLog('C:SponsorContent')
2930

30-
const Banner = () => {
31+
const Banner: FC = () => {
3132
const [anchorHEnter, setAnchorHEnter] = useState(false)
3233
const [anchorMEnter, setAnchorMEnter] = useState(false)
3334
const [anchorLEnter, setAnchorLEnter] = useState(false)
@@ -40,7 +41,7 @@ const Banner = () => {
4041
}
4142

4243
return (
43-
<React.Fragment>
44+
<Fragment>
4445
<AnchorH>
4546
<ViewportTracker
4647
onEnter={() => setAnchorHEnter(true)}
@@ -73,16 +74,18 @@ const Banner = () => {
7374
<LogosWrapper>
7475
<SponsorText>2020</SponsorText>
7576
</LogosWrapper>
76-
<SupportTitle>感谢以下团队、个人对本站的特别赞助</SupportTitle>
77+
<SupportTitle>感谢以下团队、个人对本项目的特别赞助</SupportTitle>
7778
{anchorMEnter && (
78-
<SponsorBtn {...linkColors} show={anchorLEnter}>
79-
我要赞助
80-
</SponsorBtn>
79+
<Link href="mailto:coderplanets@outlook.com" passHref>
80+
<SponsorBtn {...linkColors} show={anchorLEnter}>
81+
我要赞助
82+
</SponsorBtn>
83+
</Link>
8184
)}
8285
{!anchorMEnter && <Divider />}
8386
</SmileWrapper>
84-
</React.Fragment>
87+
</Fragment>
8588
)
8689
}
8790

88-
export default Banner
91+
export default memo(Banner)

‎src/containers/content/SponsorContent/SponsorTypeTitle.js‎ renamed to ‎src/containers/content/SponsorContent/SponsorTypeTitle.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import React from 'react'
2-
import T from 'prop-types'
1+
import { FC, memo } from 'react'
32

43
import { ICON } from '@/config'
54

65
import { Wrapper, Title, PrefixIcon } from './styles/sponsor_type_title'
76

8-
const SponsorTitle = ({ title, type }) => {
7+
type TProps = {
8+
title: string
9+
type?: string
10+
}
11+
12+
const SponsorTitle: FC<TProps> = ({ title, type = 'gold' }) => {
913
const iconSrc =
1014
type === 'gold' ? `${ICON}/shape/wing.svg` : `${ICON}/shape/candy.svg`
1115

@@ -18,13 +22,4 @@ const SponsorTitle = ({ title, type }) => {
1822
)
1923
}
2024

21-
SponsorTitle.propTypes = {
22-
type: T.oneOf(['gold', 'heart']),
23-
title: T.string.isRequired,
24-
}
25-
26-
SponsorTitle.defaultProps = {
27-
type: 'gold',
28-
}
29-
30-
export default React.memo(SponsorTitle)
25+
export default memo(SponsorTitle)

‎src/containers/content/SponsorContent/index.tsx‎

Lines changed: 54 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,14 @@ import type { TStore } from './store'
2121
import Banner from './Banner'
2222
import SponsorTypeTitle from './SponsorTypeTitle'
2323

24-
import { Wrapper, InnerWrapper, ContentWrapper, Footer } from './styles'
24+
import {
25+
Wrapper,
26+
InnerWrapper,
27+
ContentWrapper,
28+
DonateTitle,
29+
DonateWrapper,
30+
DonateAvatar,
31+
} from './styles'
2532
import { useInit } from './logic'
2633

2734
/* eslint-disable-next-line */
@@ -30,79 +37,54 @@ const log = buildLog('C:SponsorContent')
3037
const goldItems = [
3138
{
3239
id: '0',
33-
addr: 'xxx.com',
34-
title: 'javascript',
35-
desc: '最性感的开发者社区',
36-
level: 'gold',
37-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
40+
addr: 'https://your-brand.com',
41+
title: '空缺中',
42+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
3843
},
3944
{
4045
id: '1',
41-
addr: 'elixir.com',
42-
title: 'elixir',
43-
desc: '最性感的开发者社区',
44-
level: 'gold',
45-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/elixir.png',
46+
addr: 'https://your-brand.com',
47+
title: '空缺中',
48+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
4649
},
4750
{
4851
id: '2',
49-
addr: 'clojure-lang.com',
50-
title: 'clojure',
51-
desc: '最性感的开发者社区少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
52-
level: 'gold',
53-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
52+
addr: 'https://your-brand.com',
53+
title: '空缺中',
54+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
5455
},
55-
]
56-
57-
const items = [
5856
{
5957
id: '3',
60-
addr: 'javascript.com',
61-
title: 'Teambition',
62-
desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
63-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
64-
},
65-
{
66-
id: '4',
67-
addr: 'sspai.com',
68-
title: '少数派',
69-
desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
70-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
71-
},
72-
{
73-
id: '5',
74-
addr: 'whatthefuck.com',
75-
title: 'whatever',
76-
desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
77-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
58+
addr: 'https://your-brand.com',
59+
title: '空缺中',
60+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
7861
},
62+
]
63+
64+
const items = [
7965
{
80-
id: '6',
81-
addr: 'javascript.com',
82-
title: 'Teambition',
83-
desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
84-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
66+
id: '0',
67+
addr: 'https://your-brand.com',
68+
title: '空缺中',
69+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
8570
},
8671
{
87-
id: '7',
88-
addr: 'sspai.com',
89-
title: '少数派',
90-
desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
91-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
72+
id: '1',
73+
addr: 'https://your-brand.com',
74+
title: '空缺中',
75+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
9276
},
9377
{
94-
id: '8',
95-
addr: 'whatthefuck.com',
96-
title: 'whatever',
97-
desc: '最性感的开发者社区',
98-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
78+
id: '2',
79+
addr: 'https://your-brand.com',
80+
title: '空缺中',
81+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
9982
},
10083
{
101-
id: '9',
102-
addr: 'sspai.com',
103-
title: '少数派',
104-
desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
105-
icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
84+
id: '3',
85+
addr: 'https://your-brand.com',
86+
title: '空缺中',
87+
desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
10688
},
10789
]
10890

@@ -126,15 +108,24 @@ const SponsorContentContainer: FC<TProps> = ({
126108
<Banner />
127109
<InnerWrapper bannerVisiable={bannerVisiable}>
128110
<Br top={50} />
129-
<SponsorTypeTitle title="金牌赞助" />
130-
<Br top={20} />
131-
<SponsorGallery items={goldItems} column={4} />
111+
<SponsorTypeTitle title="天使赞助" />
112+
<Br top={45} />
113+
<SponsorGallery items={goldItems} level="gold" />
132114
<ContentWrapper metric={metric}>
133-
<SponsorTypeTitle title="温情赞助" type="heart" />
115+
<SponsorTypeTitle title="友情赞助" type="heart" />
134116
<Br top={50} />
135-
<SponsorGallery items={items} column={4} />
117+
<SponsorGallery items={items} level="silver" />
136118
</ContentWrapper>
137-
<Footer>以上名单按投放时间排序</Footer>
119+
<DonateTitle>感谢各位好心人热心打赏</DonateTitle>
120+
<DonateWrapper>
121+
<DonateAvatar>t</DonateAvatar>
122+
<DonateAvatar>h</DonateAvatar>
123+
<DonateAvatar>a</DonateAvatar>
124+
<DonateAvatar>n</DonateAvatar>
125+
<DonateAvatar>k</DonateAvatar>
126+
<DonateAvatar>s</DonateAvatar>
127+
<DonateAvatar>!</DonateAvatar>
128+
</DonateWrapper>
138129
</InnerWrapper>
139130
</Wrapper>
140131
)

‎src/containers/content/SponsorContent/logic.js‎ renamed to ‎src/containers/content/SponsorContent/logic.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import { useEffect } from 'react'
22

33
import { buildLog } from '@/utils/logger'
4+
5+
import type { TStore } from './store'
46
// import S from './service'
57

6-
let store = null
8+
let store: TStore | undefined
79

810
/* eslint-disable-next-line */
911
const log = buildLog('L:SponsorContent')
1012

11-
export const toggleBannerVisiable = (bannerVisiable) =>
13+
export const toggleBannerVisiable = (bannerVisiable: boolean): void => {
1214
store.mark({ bannerVisiable })
15+
}
1316

1417
// ###############################
1518
// init & uninit handlers
1619
// ###############################
1720

18-
export const useInit = (_store) => {
21+
export const useInit = (_store: TStore): void => {
1922
useEffect(() => {
2023
store = _store
2124
log('useInit: ', store)

0 commit comments

Comments
 (0)