coderplanets · mydearxym · Nov 20, 2021 · Nov 20, 2021 · Nov 20, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "cookies-next": "^2.0.3",
     "core-js": "3.6.5",
     "cross-env": "^7.0.2",
+    "css-doodle": "^0.21.6",
     "express": "^4.16.4",
     "glob": "^7.1.2",
     "graphql": "^15.5.1",

diff --git a/src/containers/content/HaveADrinkContent/Body/Content.tsx b/src/containers/content/HaveADrinkContent/Body/Content.tsx
@@ -25,7 +25,7 @@ const Content: FC<TProps> = ({ item }) => {
 
     return (
       <ImageContentWrapper>
-        <Image src={imageSrc} />
+        <Image src={imageSrc} size={item.imageSize} />
         {refLink && <Linker src={refLink} hint="参考" top={8} />}
         <Text>{item.text}</Text>
       </ImageContentWrapper>

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

diff --git a/src/containers/content/HaveADrinkContent/spec.ts b/src/containers/content/HaveADrinkContent/spec.ts
@@ -14,6 +14,7 @@ export type TDrinkItem = {
   text: string
   reference?: string
   images?: string[]
+  imageSize?: string
 }
 
 export type TDrinkCategory = {

diff --git a/src/containers/content/HaveADrinkContent/styles/body/content.ts b/src/containers/content/HaveADrinkContent/styles/body/content.ts
@@ -25,8 +25,8 @@ export const ImageContentWrapper = styled(Wrapper)`
   ${css.flexColumn('align-both')}
   margin-top: -30px;
 `
-export const Image = styled(Img)`
-  height: 200px;
+export const Image = styled(Img)<{ size: string }>`
+  height: ${({ size }) => (size === 'small' ? '60px' : '200px')};
   object-fit: cover;
   border-radius: 8px;
 `

diff --git a/...ntainers/content/SponsorContent/Banner.js → ...tainers/content/SponsorContent/Banner.tsx b/...ntainers/content/SponsorContent/Banner.js → ...tainers/content/SponsorContent/Banner.tsx
@@ -6,7 +6,8 @@
  *
  */
 
-import React, { useState } from 'react'
+import { FC, memo, useState, Fragment } from 'react'
+import Link from 'next/link'
 
 import { buildLog } from '@/utils/logger'
 import ViewportTracker from '@/widgets/ViewportTracker'
@@ -27,7 +28,7 @@ import { toggleBannerVisiable } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:SponsorContent')
 
-const Banner = () => {
+const Banner: FC = () => {
   const [anchorHEnter, setAnchorHEnter] = useState(false)
   const [anchorMEnter, setAnchorMEnter] = useState(false)
   const [anchorLEnter, setAnchorLEnter] = useState(false)
@@ -40,7 +41,7 @@ const Banner = () => {
   }
 
   return (
-    <React.Fragment>
+    <Fragment>
       <AnchorH>
         <ViewportTracker
           onEnter={() => setAnchorHEnter(true)}
@@ -73,16 +74,18 @@ const Banner = () => {
         <LogosWrapper>
           <SponsorText>2020</SponsorText>
         </LogosWrapper>
-        <SupportTitle>感谢以下团队、个人对本站的特别赞助</SupportTitle>
+        <SupportTitle>感谢以下团队、个人对本项目的特别赞助</SupportTitle>
         {anchorMEnter && (
-          <SponsorBtn {...linkColors} show={anchorLEnter}>
-            我要赞助
-          </SponsorBtn>
+          <Link href="mailto:coderplanets@outlook.com" passHref>
+            <SponsorBtn {...linkColors} show={anchorLEnter}>
+              我要赞助
+            </SponsorBtn>
+          </Link>
         )}
         {!anchorMEnter && <Divider />}
       </SmileWrapper>
-    </React.Fragment>
+    </Fragment>
   )
 }
 
-export default Banner
+export default memo(Banner)
diff --git a/...ontent/SponsorContent/SponsorTypeTitle.js → ...ntent/SponsorContent/SponsorTypeTitle.tsx b/...ontent/SponsorContent/SponsorTypeTitle.js → ...ntent/SponsorContent/SponsorTypeTitle.tsx
@@ -1,11 +1,15 @@
-import React from 'react'
-import T from 'prop-types'
+import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
 
 import { Wrapper, Title, PrefixIcon } from './styles/sponsor_type_title'
 
-const SponsorTitle = ({ title, type }) => {
+type TProps = {
+  title: string
+  type?: string
+}
+
+const SponsorTitle: FC<TProps> = ({ title, type = 'gold' }) => {
   const iconSrc =
     type === 'gold' ? `${ICON}/shape/wing.svg` : `${ICON}/shape/candy.svg`
 
@@ -18,13 +22,4 @@ const SponsorTitle = ({ title, type }) => {
   )
 }
 
-SponsorTitle.propTypes = {
-  type: T.oneOf(['gold', 'heart']),
-  title: T.string.isRequired,
-}
-
-SponsorTitle.defaultProps = {
-  type: 'gold',
-}
-
-export default React.memo(SponsorTitle)
+export default memo(SponsorTitle)
diff --git a/src/containers/content/SponsorContent/index.tsx b/src/containers/content/SponsorContent/index.tsx
@@ -21,7 +21,14 @@ import type { TStore } from './store'
 import Banner from './Banner'
 import SponsorTypeTitle from './SponsorTypeTitle'
 
-import { Wrapper, InnerWrapper, ContentWrapper, Footer } from './styles'
+import {
+  Wrapper,
+  InnerWrapper,
+  ContentWrapper,
+  DonateTitle,
+  DonateWrapper,
+  DonateAvatar,
+} from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
@@ -30,79 +37,54 @@ const log = buildLog('C:SponsorContent')
 const goldItems = [
   {
     id: '0',
-    addr: 'xxx.com',
-    title: 'javascript',
-    desc: '最性感的开发者社区',
-    level: 'gold',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
   {
     id: '1',
-    addr: 'elixir.com',
-    title: 'elixir',
-    desc: '最性感的开发者社区',
-    level: 'gold',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/elixir.png',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
   {
     id: '2',
-    addr: 'clojure-lang.com',
-    title: 'clojure',
-    desc: '最性感的开发者社区少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    level: 'gold',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
-]
-
-const items = [
   {
     id: '3',
-    addr: 'javascript.com',
-    title: 'Teambition',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
-  },
-  {
-    id: '4',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
-  },
-  {
-    id: '5',
-    addr: 'whatthefuck.com',
-    title: 'whatever',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
+]
+
+const items = [
   {
-    id: '6',
-    addr: 'javascript.com',
-    title: 'Teambition',
-    desc: '一切工作都可以从Teambition开始。无论是策划活动、研发软件、制造机器人、建设发电站或者发射卫星,团队成员以更高效的协作方式,为目标不断创造成果。',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/javascript.png',
+    id: '0',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
   {
-    id: '7',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
+    id: '1',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
   {
-    id: '8',
-    addr: 'whatthefuck.com',
-    title: 'whatever',
-    desc: '最性感的开发者社区',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/pl/clojure.png',
+    id: '2',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
   {
-    id: '9',
-    addr: 'sspai.com',
-    title: '少数派',
-    desc: '少数派致力于更好地运用数字产品或科学方法,帮助用户提升工作效率和生活品质.',
-    icon: 'https://cps-oss.oss-cn-shanghai.aliyuncs.com/editor/embeds/shaoshupai.png',
+    id: '3',
+    addr: 'https://your-brand.com',
+    title: '空缺中',
+    desc: '赞助后你的品牌同时将出现在这里以及本项目的 Github 主页。',
   },
 ]
 
@@ -126,15 +108,24 @@ const SponsorContentContainer: FC<TProps> = ({
       <Banner />
       <InnerWrapper bannerVisiable={bannerVisiable}>
         <Br top={50} />
-        <SponsorTypeTitle title="金牌赞助" />
-        <Br top={20} />
-        <SponsorGallery items={goldItems} column={4} />
+        <SponsorTypeTitle title="天使赞助" />
+        <Br top={45} />
+        <SponsorGallery items={goldItems} level="gold" />
         <ContentWrapper metric={metric}>
-          <SponsorTypeTitle title="温情赞助" type="heart" />
+          <SponsorTypeTitle title="友情赞助" type="heart" />
           <Br top={50} />
-          <SponsorGallery items={items} column={4} />
+          <SponsorGallery items={items} level="silver" />
         </ContentWrapper>
-        <Footer>以上名单按投放时间排序</Footer>
+        <DonateTitle>感谢各位好心人热心打赏</DonateTitle>
+        <DonateWrapper>
+          <DonateAvatar>t</DonateAvatar>
+          <DonateAvatar>h</DonateAvatar>
+          <DonateAvatar>a</DonateAvatar>
+          <DonateAvatar>n</DonateAvatar>
+          <DonateAvatar>k</DonateAvatar>
+          <DonateAvatar>s</DonateAvatar>
+          <DonateAvatar>!</DonateAvatar>
+        </DonateWrapper>
       </InnerWrapper>
     </Wrapper>
   )

diff --git a/...ontainers/content/SponsorContent/logic.js → ...ontainers/content/SponsorContent/logic.ts b/...ontainers/content/SponsorContent/logic.js → ...ontainers/content/SponsorContent/logic.ts
@@ -1,21 +1,24 @@
 import { useEffect } from 'react'
 
 import { buildLog } from '@/utils/logger'
+
+import type { TStore } from './store'
 // import S from './service'
 
-let store = null
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:SponsorContent')
 
-export const toggleBannerVisiable = (bannerVisiable) =>
+export const toggleBannerVisiable = (bannerVisiable: boolean): void => {
   store.mark({ bannerVisiable })
+}
 
 // ###############################
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)