refactor(footer): better naming for different layout & re-org (#1105)

* refactor(footer): re-org

* refactor(footer): adjust holyGrail layout width, padding

* chore(footer): add darken bg on HomeView

Author: mydearxym

config/index.ts

@@ -7,6 +7,9 @@ export { default as SEO } from './next_seo'
 
 export const DEFAULT_THEME = CONFIG.DEFAULT_THEME as TThemeName
 
+export const SITE_LOGO =
+  'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static/new-logo.jpg'
+
 export const {
   GRAPHQL_ENDPOINT,
   SENIOR_AMOUNT_THRESHOLD,

src/components/BlinkCursor/index.tsx

@@ -0,0 +1,45 @@
+/*
+ *
+ * BlinkCursor
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils'
+
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:BlinkCursor:index')
+
+type TProps = {
+  testid?: string
+  height?: number
+  top?: number
+  left?: number
+  right?: number
+  duration?: number
+}
+
+const BlinkCursor: FC<TProps> = ({
+  testid = 'blink-cursor',
+  height = 12,
+  top = 2,
+  left = 10,
+  right = 10,
+  duration = 2,
+}) => {
+  return (
+    <Wrapper
+      testid={testid}
+      height={height}
+      top={top}
+      left={left}
+      right={right}
+      duration={duration}
+    />
+  )
+}
+
+export default memo(BlinkCursor)

src/components/BlinkCursor/styles/index.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+// import Img from '@/Img'
+import { animate } from '@/utils'
+
+export type TWrapper = TTestable & {
+  height: number
+  top: number
+  left: number
+  right: number
+  duration: number
+}
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TWrapper>`
+  background-color: #139c9e;
+
+  height: ${({ height }) => `${height}px`};
+
+  margin-top: ${({ top }) => `${top}px`};
+  margin-left: ${({ left }) => `${left}px`};
+  margin-right: ${({ right }) => `${right}px`};
+
+  width: 1px;
+
+  opacity: 1;
+  animation: ${animate.blink} 2s linear infinite alternate;
+
+  animation-duration: ${({ duration }) => `${duration}s`};
+`
+
+export const Title = styled.div``

src/components/BlinkCursor/tests/index.test.ts

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import BlinkCursor from '../index'
+
+describe('TODO <BlinkCursor />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

src/components/CommunityFaceLogo/index.tsx

@@ -7,6 +7,7 @@
 import { FC, memo } from 'react'
 import { isEmpty } from 'ramda'
 
+import { SITE_LOGO } from '@/config'
 import { HCN } from '@/constant'
 // import { ICON_BASE } from '@/config'
 import { buildLog } from '@/utils'
@@ -32,13 +33,7 @@ const CommunityFaceLogo: FC<TProps> = ({
   className = 'community-facelogo-class',
 }) => {
   if (raw === HCN || isEmpty(src)) {
-    return (
-      <HomeLogo
-        // src={`${ICON_BASE}/site_logo.svg`}
-        src="https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static/new-logo.jpg"
-        className={className}
-      />
-    )
+    return <HomeLogo src={SITE_LOGO} className={className} />
   }
 
   return (

src/components/Navigator/DigestView.tsx

@@ -1,12 +1,14 @@
 import { FC, memo } from 'react'
 
 import { METRIC } from '@/constant'
+
+import BlinkCursor from '@/components/BlinkCursor'
+
 import {
   Breadcrumbs,
   Logo,
   LogoLink,
   LogoMargin,
-  LineDivider,
   LogoText,
   OfflineWrapper,
   ActionText,
@@ -42,7 +44,11 @@ const DigestView: FC<TProps> = ({ metric, showLogoText, isOnline, layout }) => {
         {showLogoText && <LogoText>oderPlanets</LogoText>}
       </LogoLink>
 
-      {showLogoText ? <LogoMargin layout={layout} /> : <LineDivider />}
+      {showLogoText ? (
+        <LogoMargin layout={layout} />
+      ) : (
+        <BlinkCursor duration={1.2} height={14} left={5} right={2} />
+      )}
 
       {isOnline ? (
         renderMainEntries(metric)

src/components/Navigator/styles/index.ts

@@ -26,16 +26,6 @@ export const LogoMargin = styled.div<{ layout: TC11NLayout }>`
   margin-right: ${({ layout }) =>
     layout === C11N.HOLY_GRAIL ? '42px' : '32px'};
 `
-export const LineDivider = styled.div`
-  background-color: #139c9e;
-  margin-left: 5px;
-  margin-right: 2px;
-  width: 1px;
-  height: 14px;
-  margin-top: 3px;
-  opacity: 1;
-  animation: ${animate.blink} 1.2s linear infinite alternate;
-`
 export const LogoText = styled.a`
   color: ${theme('header.fg')};
   font-weight: bold;

src/containers/unit/Footer/SocialList.tsx renamed to src/containers/unit/Footer/ContactList.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import { ICON_CMD, EMAIL_SUPPORT } from '@/config'
 import { joinUS } from '@/utils'
 
-import { Wrapper, Item, Icon } from './styles/social_list'
+import { Wrapper, Item, Icon } from './styles/contact_list'
 
 const SocialList: FC = () => (
   <Wrapper>
@@ -26,15 +26,6 @@ const SocialList: FC = () => (
         <Icon src={`${ICON_CMD}/github.svg`} />
       </Item>
     </a>
-    <a
-      href="https://zhuanlan.zhihu.com/coderplanets"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <Item>
-        <Icon src={`${ICON_CMD}/zhihu_solid.svg`} />
-      </Item>
-    </a>
   </Wrapper>
 )
 

src/containers/unit/Footer/DesktopView/BriefView.tsx renamed to src/containers/unit/Footer/DesktopView/ArticleView.tsx

@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
 
-import type { TArticle } from '@/spec'
+import type { TArticle, TC11NLayout } from '@/spec'
 import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config'
 import TopInfo from './TopInfo'
 import BottomInfo from './BottomInfo'
@@ -11,20 +11,19 @@ import {
   MainInfos,
   BaseInfo,
   Item,
-} from '../styles/desktop_view/brief_view'
+} from '../styles/desktop_view/article_view'
 
 type TProps = {
-  curView: string // todo
   viewingArticle: TArticle
   metric: string
+  layout: TC11NLayout
 }
 
-const BriefView: FC<TProps> = ({ curView, metric, viewingArticle }) => {
+const BriefView: FC<TProps> = ({ metric, viewingArticle, layout }) => {
   return (
-    <Wrapper metric={metric}>
+    <Wrapper metric={metric} layout={layout}>
       <InnerWrapper>
         <TopInfo type="article" title={viewingArticle.title} noBottomBorder />
-        {/* <MainInfos center={curView === 'BRIEF' || false}> */}
         <MainInfos>
           <BaseInfo>
             <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">

src/containers/unit/Footer/DesktopView/BottomInfo.tsx

@@ -1,13 +1,11 @@
 import { FC, memo } from 'react'
 
 import type { TC11NLayout } from '@/spec'
-import { ROUTE } from '@/constant'
 
 import {
   Wrapper,
   InnerWrapper,
   BeianLink,
-  CompanyLink,
 } from '../styles/desktop_view/bottom_info'
 
 type TProps = {
@@ -19,9 +17,6 @@ const BottomInfo: FC<TProps> = ({ metric, layout }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper layout={layout}>
-        <CompanyLink href={ROUTE.SPONSOR}>
-          Groupher @ 2021. 保留所有权利。
-        </CompanyLink>
         <BeianLink href="http://beian.miit.gov.cn">
           蜀ICP备17043722号-4
         </BeianLink>