chore(deploy): footer links style & fixed header clean up

mydearxym · mydearxym · commit 9f89ca7f8e11 · 2021-11-25T16:48:43.000+08:00
diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, Fragment } from 'react'
 
-import type { TArticle, TMetric, TThread } from '@/spec'
+import type { TArticle, TWorks, TMetric, TThread } from '@/spec'
 import { METRIC } from '@/constant'
 
 import Upvote from '@/widgets/Upvote'
@@ -22,12 +22,13 @@ const TitleContent: FC<{ article: TArticle; metric: TMetric }> = ({
 }) => {
   switch (metric) {
     case METRIC.WORKS_ARTICLE: {
+      const works = article as TWorks
       return (
         <Fragment>
-          <Cover src="https://avatars.githubusercontent.com/u/2041385?s=64&v=4" />
-          <Title>CoderPlanets</Title>
+          <Cover src={works.cover} />
+          <Title>{works.title}</Title>
           <DotDivider space={10} />
-          <Desc>可能是最性感的开发者社区, 可能是最性感的开发者社区</Desc>
+          <Desc>{works.desc}</Desc>
         </Fragment>
       )
     }
diff --git a/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx b/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx
@@ -4,7 +4,7 @@ import { FC, memo } from 'react'
 import Link from 'next/link'
 
 import type { TArticle, TC11NLayout, TMetric } from '@/spec'
-import { GITHUB } from '@/config'
+import { ICON, GITHUB } from '@/config'
 import { METRIC, ROUTE } from '@/constant'
 import { joinUS } from '@/utils/helper'
 
@@ -18,6 +18,7 @@ import {
   BaseInfo,
   Item,
   NoLinkItem,
+  HeartCrabIcon,
 } from '../styles/desktop_view/article_layout'
 
 type TProps = {
@@ -44,11 +45,14 @@ const BriefView: FC<TProps> = ({ metric, article, layout }) => {
             <Item href={`${GITHUB}`} rel="noopener noreferrer" target="_blank">
               Github
             </Item>
-            <Link href={`/${ROUTE.SPONSOR}`} passHref>
-              <Item>❤️&nbsp;特别感谢</Item>
-            </Link>
             <Link href="/feedback" passHref>
-              <Item>反馈与建议</Item>
+              <Item>反馈 &amp; 建议</Item>
+            </Link>
+            <Link href={`/${ROUTE.SPONSOR}`} passHref>
+              <Item>
+                <HeartCrabIcon src={`${ICON}/emotion/heart.png`} noLazy />
+                特别感谢
+              </Item>
             </Link>
           </BaseInfo>
         </MainInfos>
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx
@@ -8,21 +8,23 @@ import {
   Wrapper,
   InfoBar,
   CommunityTitle,
+  ArticleTitle,
   Logo,
 } from '../../styles/desktop_view/top_info/article'
 
-type TProps = Pick<TTopInfoProps, 'noBottomBorder'>
+type TProps = TTopInfoProps
 
-const Article: FC<TProps> = ({ noBottomBorder = false }) => {
+const WorksArticle: FC<TProps> = ({ article, noBottomBorder = false }) => {
   return (
     <Wrapper noBottomBorder={noBottomBorder}>
       <InfoBar>
         <Logo />
       </InfoBar>
-      <BlinkCursor duration={2} />
       <CommunityTitle>作品集市</CommunityTitle>
+      <BlinkCursor duration={2} top={0} />
+      <ArticleTitle>{article.title}</ArticleTitle>
     </Wrapper>
   )
 }
 
-export default memo(Article)
+export default memo(WorksArticle)
diff --git a/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx b/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx
@@ -1,8 +1,9 @@
 import { FC, memo } from 'react'
 
+import Link from 'next/link'
 import type { TArticle } from '@/spec'
-import { ISSUE_ADDR, API_SERVER_ADDR, GITHUB } from '@/config'
-import { METRIC } from '@/constant'
+import { ICON, GITHUB } from '@/config'
+import { METRIC, ROUTE } from '@/constant'
 import { joinUS } from '@/utils/helper'
 
 import TopInfo from './TopInfo'
@@ -15,6 +16,7 @@ import {
   BaseInfo,
   Item,
   NoLinkItem,
+  HeartCrabIcon,
 } from '../styles/desktop_view/works_article_layout'
 
 type TProps = {
@@ -32,34 +34,25 @@ const WorksArticleLayout: FC<TProps> = ({ viewingArticle }) => {
         />
         <MainInfos>
           <BaseInfo>
-            <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">
-              关于
-            </Item>
-            <Item
-              href="/cps-support/posts"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              创建社区
-            </Item>
+            <Link href="/home/post/1" passHref>
+              <Item>关于</Item>
+            </Link>
+            <Link href={`/${ROUTE.APPLY_COMMUNITY}`} passHref>
+              <Item>创建社区</Item>
+            </Link>
             <NoLinkItem onClick={() => joinUS()}>加入群聊</NoLinkItem>
             <Item href={`${GITHUB}`} rel="noopener noreferrer" target="_blank">
               Github
             </Item>
-            <Item
-              href={`${API_SERVER_ADDR}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              特别感谢
-            </Item>
-            <Item
-              href={`${ISSUE_ADDR}`}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              反馈与建议
-            </Item>
+            <Link href="/feedback" passHref>
+              <Item>反馈 &amp; 建议</Item>
+            </Link>
+            <Link href={`/${ROUTE.SPONSOR}`} passHref>
+              <Item>
+                <HeartCrabIcon src={`${ICON}/emotion/heart.png`} noLazy />
+                特别感谢
+              </Item>
+            </Link>
           </BaseInfo>
         </MainInfos>
       </InnerWrapper>
diff --git a/src/containers/unit/Footer/styles/desktop_view/article_layout.ts b/src/containers/unit/Footer/styles/desktop_view/article_layout.ts
@@ -5,6 +5,8 @@ import { C11N } from '@/constant'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
+export { HeartCrabIcon } from './home_layout'
+
 type TWrapper = { metric: TMetric; layout: TC11NLayout }
 export const Wrapper = styled.div<TWrapper>`
   ${css.flexColumn('align-end')};
@@ -35,6 +37,7 @@ export const BaseInfo = styled.div`
   ${css.flex()};
 `
 export const Item = styled(Link)`
+  ${css.flex('align-center')};
   margin-right: 25px;
 `
 export const NoLinkItem = styled.div`
diff --git a/src/containers/unit/Footer/styles/desktop_view/home_layout.ts b/src/containers/unit/Footer/styles/desktop_view/home_layout.ts
@@ -78,6 +78,6 @@ export const ItemGitSource = styled.div`
 
 export const HeartCrabIcon = styled(Img)`
   ${css.size(13)};
-  margin-right: 5px;
+  margin-right: 7px;
   filter: saturate(0.6);
 `
diff --git a/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts b/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts
@@ -16,18 +16,19 @@ export const InfoBar = styled(DefaultInfoBar)``
 export const Logo = styled(DefaultLogo)`
   ${css.size(16)};
   margin-right: 5px;
-  margin-top: -2px;
+  margin-top: -4px;
 `
 export const ArticleTitle = styled(DefaultSiteTitle)`
   color: ${theme('footer.title')};
   ${css.cutRest('300px')};
   font-size: 15px;
   font-weight: normal;
-  margin-top: -2px;
+  margin-top: -1px;
 `
 export const CommunityTitle = styled(ArticleTitle)`
   margin-right: 6px;
   text-decoration: none;
+  margin-top: 0;
   &:hover {
     color: ${theme('footer.title')};
     cursor: pointer;
diff --git a/src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts b/src/containers/unit/Footer/styles/desktop_view/works_article_layout.ts
@@ -5,6 +5,7 @@ import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 export { NoLinkItem } from './article_layout'
+export { HeartCrabIcon } from './home_layout'
 
 export const Wrapper = styled.div`
   ${css.flexColumn('align-end')};
@@ -32,5 +33,6 @@ export const BaseInfo = styled.div`
   ${css.flex()};
 `
 export const Item = styled(Link)`
+  ${css.flex('align-center')};
   margin-right: 25px;
 `
diff --git a/src/widgets/BlinkCursor/index.tsx b/src/widgets/BlinkCursor/index.tsx
@@ -8,6 +8,7 @@ import { FC, memo } from 'react'
 
 import { buildLog } from '@/utils/logger'
 
+import type { TSpace } from '@/spec'
 import { Wrapper } from './styles'
 
 /* eslint-disable-next-line */
@@ -16,11 +17,8 @@ const log = buildLog('c:BlinkCursor:index')
 type TProps = {
   testid?: string
   height?: number
-  top?: number
-  left?: number
-  right?: number
   duration?: number
-}
+} & TSpace
 
 const BlinkCursor: FC<TProps> = ({
   testid = 'blink-cursor',
diff --git a/src/widgets/BlinkCursor/styles/index.ts b/src/widgets/BlinkCursor/styles/index.ts
@@ -1,16 +1,14 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
+import type { TTestable, TSpace } from '@/spec'
 
 import animate from '@/utils/animations'
 
-export type TWrapper = TTestable & {
-  height: number
-  top: number
-  left: number
-  right: number
-  duration: number
-}
+export type TWrapper = TTestable &
+  TSpace & {
+    height: number
+    duration: number
+  }
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,

Original file line number	Diff line number	Diff line change
@@ -78,6 +78,6 @@ export const ItemGitSource = styled.div`
`78`	`78`
`79`	`79`	export const HeartCrabIcon = styled(Img)`
`80`	`80`	`${css.size(13)};`
`81`		`- margin-right: 5px;`
	`81`	`+ margin-right: 7px;`
`82`	`82`	`filter: saturate(0.6);`
`83`	`83`	`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import { theme } from '@/utils/themes'`
`5`	`5`	`import css from '@/utils/css'`
`6`	`6`
`7`	`7`	`export { NoLinkItem } from './article_layout'`
	`8`	`+export { HeartCrabIcon } from './home_layout'`
`8`	`9`
`9`	`10`	export const Wrapper = styled.div`
`10`	`11`	`${css.flexColumn('align-end')};`
@@ -32,5 +33,6 @@ export const BaseInfo = styled.div`
`32`	`33`	`${css.flex()};`
`33`	`34`	`
`34`	`35`	export const Item = styled(Link)`
	`36`	`+ ${css.flex('align-center')};`
`35`	`37`	`margin-right: 25px;`
`36`	`38`	`