diff --git a/cypress/integration/discovery/layout.spec.js b/cypress/integration/explore/layout.spec.js
similarity index 77%
rename from cypress/integration/discovery/layout.spec.js
rename to cypress/integration/explore/layout.spec.js
index 24c487976..04e1cb664 100644
--- a/cypress/integration/discovery/layout.spec.js
+++ b/cypress/integration/explore/layout.spec.js
@@ -1,8 +1,8 @@
 //
-describe('discovery page: ', () => {
+describe('explore page: ', () => {
   // beforeEach(() => {
   before(() => {
-    cy.visit('/discovery')
+    cy.visit('/explore')
   })
 
   it('basic layout', () => {
@@ -13,13 +13,13 @@ describe('discovery page: ', () => {
 
     // cy.id('sidebar').should('be.visible')
 
-    cy.id('discovery-banner').should('be.visible')
+    cy.id('explore-banner').should('be.visible')
     // cypress can not load dynamic Footer
     // cy.id('footer').should('be.visible')
   })
 
   it('discovery link should be highlight', () => {
-    cy.id('header-discovery-link')
+    cy.id('header-explore-link')
       .should('not.have.css', 'background', 'transparent')
       .and('have.css', 'padding', '5px 6px')
   })
diff --git a/server/routes.js b/server/routes.js
index 6aa8b7c61..25ca6f088 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -113,10 +113,10 @@ router.route('/create/works').get((req, res) => {
 })
 
 // 所有社区
-router.route('/discovery').get((req, res) => res.redirect('/discovery/pl'))
+router.route('/explore').get((req, res) => res.redirect('/explore/pl'))
 
-router.route('/discovery/:category').get((req, res) => {
-  return renderAndCache({ req, res, path: '/discovery' })
+router.route('/explore/:category').get((req, res) => {
+  return renderAndCache({ req, res, path: '/explore' })
 })
 
 // 帮助中心
diff --git a/size-limit.config.json b/size-limit.config.json
index 4f4fa9bbe..b5fb062f3 100644
--- a/size-limit.config.json
+++ b/size-limit.config.json
@@ -9,7 +9,7 @@
       "maxSize": "280 kB"
     },
     {
-      "path": ".next/server/pages/discovery.js",
+      "path": ".next/server/pages/explore.js",
       "maxSize": "280 kB"
     },
     {
diff --git a/src/components/Header/DesktopView/CommunityLayout.tsx b/src/components/Header/DesktopView/CommunityLayout.tsx
index bba4c7de7..e926fece9 100644
--- a/src/components/Header/DesktopView/CommunityLayout.tsx
+++ b/src/components/Header/DesktopView/CommunityLayout.tsx
@@ -30,7 +30,7 @@ const AddOns = dynamic(() => import('../AddOns'), { ssr: false })
 
 const hasNoBorder = (metric: TMetric): boolean =>
   contains(metric, [
-    METRIC.DISCOVERY,
+    METRIC.EXPLORE,
     METRIC.SPONSOR,
     METRIC.SUPPORT_US,
     METRIC.SUBSCRIBE,
diff --git a/src/components/Header/DesktopView/GeneralLayout.tsx b/src/components/Header/DesktopView/GeneralLayout.tsx
index 4719cf991..4f5ede4c1 100644
--- a/src/components/Header/DesktopView/GeneralLayout.tsx
+++ b/src/components/Header/DesktopView/GeneralLayout.tsx
@@ -29,7 +29,7 @@ const AddOns = dynamic(() => import('../AddOns'), { ssr: false })
 
 const hasNoBorder = (metric: TMetric): boolean =>
   contains(metric, [
-    METRIC.DISCOVERY,
+    METRIC.EXPLORE,
     METRIC.SPONSOR,
     METRIC.SUPPORT_US,
     METRIC.SUBSCRIBE,
diff --git a/src/components/Header/DesktopView/WorksLayout.tsx b/src/components/Header/DesktopView/WorksLayout.tsx
index 880edbc2e..c6885d978 100644
--- a/src/components/Header/DesktopView/WorksLayout.tsx
+++ b/src/components/Header/DesktopView/WorksLayout.tsx
@@ -29,7 +29,7 @@ const AddOns = dynamic(() => import('../AddOns'), { ssr: false })
 
 const hasNoBorder = (metric: TMetric): boolean =>
   contains(metric, [
-    METRIC.DISCOVERY,
+    METRIC.EXPLORE,
     METRIC.SPONSOR,
     METRIC.SUPPORT_US,
     METRIC.SUBSCRIBE,
diff --git a/src/components/Navigator/MainEntries/DesktopView.tsx b/src/components/Navigator/MainEntries/DesktopView.tsx
index 378af14b1..3a705129b 100644
--- a/src/components/Navigator/MainEntries/DesktopView.tsx
+++ b/src/components/Navigator/MainEntries/DesktopView.tsx
@@ -22,10 +22,10 @@ const DesktopView: FC<TProps> = ({ type }) => {
 
   return (
     <Wrapper type={type}>
-      <Link href={`/${ROUTE.DISCOVERY}`} passHref>
+      <Link href={`/${ROUTE.EXPLORE}`} passHref>
         <SiteLink
-          active={mainPath === ROUTE.DISCOVERY}
-          testid="header-discovery-link"
+          active={mainPath === ROUTE.EXPLORE}
+          testid="header-explore-link"
         >
           发现
         </SiteLink>
diff --git a/src/components/Navigator/MorePanel/MobileView.tsx b/src/components/Navigator/MorePanel/MobileView.tsx
index 0b09ce2ed..a075eb220 100644
--- a/src/components/Navigator/MorePanel/MobileView.tsx
+++ b/src/components/Navigator/MorePanel/MobileView.tsx
@@ -20,35 +20,35 @@ const items = [
     icon: `${ICON}/route/light.svg`,
     title: '作品集市',
     desc: '作品，产品的跳蚤集市',
-    href: `/${ROUTE.DISCOVERY}`,
+    href: `/${ROUTE.EXPLORE}`,
     raw: 11,
   },
   {
     icon: `${ICON}/route/cool-guide.svg`,
     title: '酷导航',
     desc: '发现有意思的东西',
-    href: `/${ROUTE.DISCOVERY}`,
+    href: `/${ROUTE.EXPLORE}`,
     raw: 12,
   },
   {
     icon: `${ICON}/route/job.svg`,
     title: '工作',
     desc: '找工作？来这里看看',
-    href: `/${ROUTE.DISCOVERY}`,
+    href: `/${ROUTE.EXPLORE}`,
     raw: 13,
   },
   {
     icon: `${ICON}/route/cup.svg`,
     title: '来一杯',
     desc: '渴了累了来一杯？',
-    href: `/${ROUTE.DISCOVERY}`,
+    href: `/${ROUTE.EXPLORE}`,
     raw: 14,
   },
   {
     icon: `${ICON}/route/meetup.svg`,
     title: '活动',
     desc: '来线下和同行聊聊?',
-    href: `/${ROUTE.DISCOVERY}`,
+    href: `/${ROUTE.EXPLORE}`,
     raw: 15,
   },
   {
diff --git a/src/containers/content/CommunitiesContent/store.js b/src/containers/content/CommunitiesContent/store.js
index 5054a5698..b64e2c47d 100644
--- a/src/containers/content/CommunitiesContent/store.js
+++ b/src/containers/content/CommunitiesContent/store.js
@@ -1,5 +1,5 @@
 /*
- * DiscoveryContentStore store
+ * ExploreContentStore store
  *
  */
 
@@ -11,7 +11,7 @@ import { markStates, toJS } from '@/utils/mobx'
 import { Trans } from '@/utils/i18n'
 import { PagedCommunities, PagedCategories, emptyPagiData } from '@/model'
 
-const DiscoveryContentStore = T.model('DiscoveryContentStore', {
+const ExploreContentStore = T.model('ExploreContentStore', {
   // current active sidbar menu id
   activeCatalogId: T.maybeNull(T.string),
   pagedCommunities: T.optional(PagedCommunities, emptyPagiData),
@@ -121,11 +121,11 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
     },
     addSubscribedCommunity(community) {
       self.root.account.addSubscribedCommunity(community)
-      self.root.discoveryContent.toggleSubscribe(community)
+      self.root.exploreContent.toggleSubscribe(community)
     },
     removeSubscribedCommunity(community) {
       self.root.account.removeSubscribedCommunity(community)
-      self.root.discoveryContent.toggleSubscribe(community)
+      self.root.exploreContent.toggleSubscribe(community)
     },
     markRoute(query) {
       self.root.markRoute(query)
@@ -135,4 +135,4 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
     },
   }))
 
-export default DiscoveryContentStore
+export default ExploreContentStore
diff --git a/src/containers/content/DiscoveryContent/CommunityCard.js b/src/containers/content/DiscoveryContent/CommunityCard.js
deleted file mode 100755
index 67abfcb0d..000000000
--- a/src/containers/content/DiscoveryContent/CommunityCard.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import { contains } from 'ramda'
-
-import { NON_FILL_COMMUNITY } from '@/constant'
-import { prettyNum, cutRest } from '@/utils/helper'
-
-import TrendLine from '@/components/TrendLine'
-import { CommunityHolder } from '@/components/Loading'
-
-import SubscribeBtn from './SubscribeBtn'
-
-import {
-  Wrapper,
-  CommunityIcon,
-  Title,
-  Desc,
-  ActivitySpark,
-  Footer,
-} from './styles/community_card'
-
-const CommunityCard = ({ community, restProps }) => (
-  <Wrapper>
-    <a
-      href={`/${community.raw}/posts`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <CommunityIcon
-        nonFill={contains(community.raw, NON_FILL_COMMUNITY)}
-        src={community.logo}
-        loading={<CommunityHolder text={community.raw} place="discovery" />}
-      />
-    </a>
-    <Title>{community.title}</Title>
-    <Desc>{cutRest(community.desc, 20)}</Desc>
-    <ActivitySpark>
-      <TrendLine data={community.contributesDigest} />
-    </ActivitySpark>
-    <Footer>
-      <>
-        {/* TODO: number color should be different when number grow large */}
-        {prettyNum(community.subscribersCount)}{' '}
-        {community.subscribersCount < 1000 ? '人加入' : '加入'}
-      </>
-
-      <SubscribeBtn community={community} restProps={restProps} />
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(CommunityCard)
diff --git a/src/containers/content/DiscoveryContent/CommunityList.js b/src/containers/content/DiscoveryContent/CommunityList.js
deleted file mode 100755
index 3224636cb..000000000
--- a/src/containers/content/DiscoveryContent/CommunityList.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import CommunityCard from './CommunityCard'
-
-import { Wrapper } from './styles/community_list'
-
-const CommnityList = ({ entries, restProps }) => {
-  return (
-    <Wrapper>
-      {entries.map((community) => (
-        <CommunityCard
-          key={community.raw}
-          community={community}
-          restProps={restProps}
-        />
-      ))}
-    </Wrapper>
-  )
-}
-
-export default React.memo(CommnityList)
diff --git a/src/containers/content/DiscoveryContent/Hinter.js b/src/containers/content/DiscoveryContent/Hinter.js
deleted file mode 100755
index db704f1e9..000000000
--- a/src/containers/content/DiscoveryContent/Hinter.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-// import { ICON_CMD } from 'config'
-import { Wrapper, Title, Desc } from './styles/hinter'
-
-const Hinter = ({ title, desc }) => (
-  <Wrapper>
-    <Title>【{title}】</Title>
-    <Desc>{desc}</Desc>
-  </Wrapper>
-)
-
-export default React.memo(Hinter)
diff --git a/src/containers/content/DiscoveryContent/SubscribeBtn.js b/src/containers/content/DiscoveryContent/SubscribeBtn.js
deleted file mode 100755
index d226bd539..000000000
--- a/src/containers/content/DiscoveryContent/SubscribeBtn.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { HCN } from '@/constant'
-
-import Button from '@/components/Buttons/Button'
-import Tooltip from '@/components/Tooltip'
-import Hinter from './Hinter'
-
-import { SubscribedBox, BtnWrapper, PrefixIcon } from './styles'
-import { subscribe, unSubscribe } from './logic'
-
-const AlreadySubedBtn = ({ community }) => (
-  <>
-    {community.raw !== HCN ? (
-      <Tooltip
-        content={
-          <Hinter title="退出" desc="之后该社区将不会出现在左侧订阅列表中" />
-        }
-        animation="perspective"
-        delay={1000}
-      >
-        <div>
-          <Button
-            size="small"
-            type="primary"
-            ghost
-            onClick={() => unSubscribe(community.id)}
-          >
-            <BtnWrapper>
-              <PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
-              <div>已加入</div>
-            </BtnWrapper>
-          </Button>
-        </div>
-      </Tooltip>
-    ) : (
-      <SubscribedBox>
-        <BtnWrapper>
-          <PrefixIcon src={`${ICON_CMD}/check2.svg`} primary />
-          <div>&nbsp;已加入</div>
-        </BtnWrapper>
-      </SubscribedBox>
-    )}
-  </>
-)
-
-const SubscribeBtn = ({
-  community,
-  restProps: { subscribing, subscribingId },
-}) => {
-  if (subscribing && community.id === subscribingId) {
-    return (
-      <Button size="small" type="primary">
-        加入 ..
-      </Button>
-    )
-  }
-  return (
-    <>
-      {community.viewerHasSubscribed ? (
-        <AlreadySubedBtn community={community} />
-      ) : (
-        <Tooltip
-          content={
-            <Hinter title="加入" desc="之后该社区将会出现在左侧订阅列表中" />
-          }
-          animation="perspective"
-          delay={1000}
-        >
-          <div>
-            <Button
-              size="small"
-              type="primary"
-              onClick={() => subscribe(community.id)}
-            >
-              <BtnWrapper>
-                <PrefixIcon src={`${ICON_CMD}/plus.svg`} />
-                <div>加入</div>
-              </BtnWrapper>
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-    </>
-  )
-}
-
-export default React.memo(SubscribeBtn)
diff --git a/src/containers/content/DiscoveryContent/tests/store.test.ts b/src/containers/content/DiscoveryContent/tests/store.test.ts
deleted file mode 100755
index bb3f708b6..000000000
--- a/src/containers/content/DiscoveryContent/tests/store.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * DiscoveryContentStore store test
- *
- */
-
-// import DiscoveryContentStore from '../index'
-
-it('TODO: test DiscoveryContentStore', () => {
-  expect(1 + 1).toBe(2)
-})
diff --git a/src/containers/content/DiscoveryContent/Banner.js b/src/containers/content/ExploreContent/Banner.tsx
similarity index 89%
rename from src/containers/content/DiscoveryContent/Banner.js
rename to src/containers/content/ExploreContent/Banner.tsx
index 3bc4bc860..ca6291cd1 100755
--- a/src/containers/content/DiscoveryContent/Banner.js
+++ b/src/containers/content/ExploreContent/Banner.tsx
@@ -4,10 +4,11 @@
  *
  */
 
-import React from 'react'
+import { FC, memo } from 'react'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 
+import type { TSearchState } from './spec'
 import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils/logger'
 
@@ -34,7 +35,11 @@ export const SloganText = dynamic(() => import('./SloganText'), {
 /* eslint-disable-next-line */
 const log = buildLog('C:CommunitiesBanner')
 
-const Banner = ({
+type TProps = {
+  searchStatus: TSearchState
+}
+
+const Banner: FC<TProps> = ({
   searchStatus: {
     searchValue,
     showSearchMask,
@@ -45,7 +50,7 @@ const Banner = ({
   },
 }) => {
   return (
-    <BannerContainer testid="discovery-banner">
+    <BannerContainer testid="explore-banner">
       <IntroWrapper>
         <IntroTitle>
           <SearchIcon src={`${ICON_CMD}/search.svg`} />
@@ -55,7 +60,6 @@ const Banner = ({
           showSearchMask={showSearchMask}
           onChange={searchOnChange}
           value={searchValue}
-          searching={false}
         />
 
         {showSearchResultHint && (
@@ -84,4 +88,4 @@ const Banner = ({
   )
 }
 
-export default React.memo(Banner)
+export default memo(Banner)
diff --git a/src/containers/content/ExploreContent/CommunityCard.tsx b/src/containers/content/ExploreContent/CommunityCard.tsx
new file mode 100755
index 000000000..0532340ea
--- /dev/null
+++ b/src/containers/content/ExploreContent/CommunityCard.tsx
@@ -0,0 +1,68 @@
+import { FC, memo } from 'react'
+import { contains } from 'ramda'
+
+import type { TCommunity, TID } from '@/spec'
+import { NON_FILL_COMMUNITY } from '@/constant'
+import { prettyNum, cutRest } from '@/utils/helper'
+
+import TrendLine from '@/components/TrendLine'
+// import { CommunityHolder } from '@/components/Loading'
+
+import SubscribeBtn from './SubscribeBtn'
+
+import {
+  Wrapper,
+  CommunityIcon,
+  Title,
+  Desc,
+  ActivitySpark,
+  Footer,
+} from './styles/community_card'
+
+type TProps = {
+  community: TCommunity
+  subscribing: boolean
+  subscribingId: TID
+}
+
+const CommunityCard: FC<TProps> = ({
+  community,
+  subscribing,
+  subscribingId,
+}) => {
+  return (
+    <Wrapper>
+      <a
+        href={`/${community.raw}/posts`}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <CommunityIcon
+          nonFill={contains(community.raw, NON_FILL_COMMUNITY)}
+          src={community.logo}
+          // loading={<CommunityHolder text={community.raw} place="discovery" />}
+        />
+      </a>
+      <Title>{community.title}</Title>
+      <Desc>{cutRest(community.desc, 20)}</Desc>
+      <ActivitySpark>
+        <TrendLine data={community.contributesDigest} />
+      </ActivitySpark>
+      <Footer>
+        <>
+          {/* TODO: number color should be different when number grow large */}
+          {prettyNum(community.subscribersCount)}{' '}
+          {community.subscribersCount < 1000 ? '人加入' : '加入'}
+        </>
+
+        <SubscribeBtn
+          community={community}
+          subscribing={subscribing}
+          subscribingId={subscribingId}
+        />
+      </Footer>
+    </Wrapper>
+  )
+}
+
+export default memo(CommunityCard)
diff --git a/src/containers/content/ExploreContent/CommunityList.tsx b/src/containers/content/ExploreContent/CommunityList.tsx
new file mode 100755
index 000000000..86051b3ed
--- /dev/null
+++ b/src/containers/content/ExploreContent/CommunityList.tsx
@@ -0,0 +1,29 @@
+import { FC, memo } from 'react'
+import type { TCommunity, TID } from '@/spec'
+
+import CommunityCard from './CommunityCard'
+
+import { Wrapper } from './styles/community_list'
+
+type TProps = {
+  entries: TCommunity[]
+  subscribing: boolean
+  subscribingId: TID
+}
+
+const CommnityList: FC<TProps> = ({ entries, subscribing, subscribingId }) => {
+  return (
+    <Wrapper>
+      {entries.map((community) => (
+        <CommunityCard
+          key={community.raw}
+          community={community}
+          subscribing={subscribing}
+          subscribingId={subscribingId}
+        />
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(CommnityList)
diff --git a/src/containers/content/DiscoveryContent/NotFound.js b/src/containers/content/ExploreContent/NotFound.tsx
similarity index 80%
rename from src/containers/content/DiscoveryContent/NotFound.js
rename to src/containers/content/ExploreContent/NotFound.tsx
index 73c4e69ac..f9e35c93c 100755
--- a/src/containers/content/DiscoveryContent/NotFound.js
+++ b/src/containers/content/ExploreContent/NotFound.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC, memo } from 'react'
 import Link from 'next/link'
 
 import { cutRest } from '@/utils/helper'
@@ -12,7 +12,11 @@ import {
   SearchValueFocus,
 } from './styles/not_found'
 
-const NotFound = ({ searchValue }) => {
+type TProps = {
+  searchValue: string
+}
+
+const NotFound: FC<TProps> = ({ searchValue }) => {
   return (
     <Wrapper>
       <EmptyCard>
@@ -31,4 +35,4 @@ const NotFound = ({ searchValue }) => {
   )
 }
 
-export default React.memo(NotFound)
+export default memo(NotFound)
diff --git a/src/containers/content/DiscoveryContent/SearchBox.js b/src/containers/content/ExploreContent/SearchBox.tsx
similarity index 78%
rename from src/containers/content/DiscoveryContent/SearchBox.js
rename to src/containers/content/ExploreContent/SearchBox.tsx
index 118cddde5..a801ff484 100755
--- a/src/containers/content/DiscoveryContent/SearchBox.js
+++ b/src/containers/content/ExploreContent/SearchBox.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { FC, memo, useRef } from 'react'
 
 import {
   Wrapper,
@@ -10,7 +10,13 @@ import {
 
 import { changeSearchStatus } from './logic'
 
-const SearchBox = ({ showSearchMask, value, onChange }) => {
+type TProps = {
+  showSearchMask: boolean
+  value: string
+  onChange: (e) => void
+}
+
+const SearchBox: FC<TProps> = ({ showSearchMask, value, onChange }) => {
   const ref = useRef(null)
 
   return (
@@ -44,4 +50,4 @@ const SearchBox = ({ showSearchMask, value, onChange }) => {
   )
 }
 
-export default React.memo(SearchBox)
+export default memo(SearchBox)
diff --git a/src/containers/content/DiscoveryContent/Sidebar.js b/src/containers/content/ExploreContent/Sidebar.tsx
similarity index 55%
rename from src/containers/content/DiscoveryContent/Sidebar.js
rename to src/containers/content/ExploreContent/Sidebar.tsx
index de944e48c..1e933861e 100644
--- a/src/containers/content/DiscoveryContent/Sidebar.js
+++ b/src/containers/content/ExploreContent/Sidebar.tsx
@@ -1,21 +1,32 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TCategory, TTag } from '@/spec'
 import Sticky from '@/components/Sticky'
 import { Br } from '@/components/Common'
 import FiltersMenu from '@/components/FiltersMenu'
+import { mockFilterMenuTags } from '@/utils/mock'
 
 import { Wrapper, Holder } from './styles/sidebar'
+import { TID } from '@/spec'
 
-const Sidebar = ({ show, onItemClick, activeid, items }) => {
+type TProps = {
+  show: boolean
+  onItemClick: (tag: TTag) => void
+  activeid: TID
+  items: TCategory[]
+}
+
+const Sidebar: FC<TProps> = ({ show, onItemClick, activeid, items }) => {
   return (
     <Wrapper show={show}>
       <Sticky offsetTop={60}>
         <FiltersMenu
-          items={items}
-          onItemClick={onItemClick}
+          tags={mockFilterMenuTags()}
+          // onSelect={onItemClick}
           activeid={activeid}
           itemBgHighlight={false}
           noFilter
+          revert
         />
         <Br bottom={150} />
       </Sticky>
@@ -26,4 +37,4 @@ const Sidebar = ({ show, onItemClick, activeid, items }) => {
   )
 }
 
-export default Sidebar
+export default memo(Sidebar)
diff --git a/src/containers/content/DiscoveryContent/SloganText.js b/src/containers/content/ExploreContent/SloganText.tsx
similarity index 82%
rename from src/containers/content/DiscoveryContent/SloganText.js
rename to src/containers/content/ExploreContent/SloganText.tsx
index 527b8c63e..35ce66631 100755
--- a/src/containers/content/DiscoveryContent/SloganText.js
+++ b/src/containers/content/ExploreContent/SloganText.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { FC, memo, useEffect, useState } from 'react'
 import { AnimateOnChange } from 'react-animation'
 
 import { SloganTextWrapper } from './styles/banner'
@@ -13,8 +13,8 @@ const SWITCH_INTERVAL = 3000
 
   当做一些升高 CPU 操作时，AnimateOnChange 的动画会卡主，这是一个 hack
  */
-const fixAnimationStockIfNeed = () => {
-  const el = document.querySelector('.animate-on-change')
+const fixAnimationStockIfNeed = (): void => {
+  const el: HTMLElement = document.querySelector('.animate-on-change')
 
   if (el.style.opacity === '0') {
     el.style.opacity = '1'
@@ -23,7 +23,7 @@ const fixAnimationStockIfNeed = () => {
   }
 }
 
-const SlogenText = () => {
+const SlogenText: FC = () => {
   const [index, setIndex] = useState(0)
 
   useEffect(() => {
@@ -50,4 +50,4 @@ const SlogenText = () => {
   )
 }
 
-export default React.memo(SlogenText)
+export default memo(SlogenText)
diff --git a/src/containers/content/ExploreContent/SubscribeBtn.tsx b/src/containers/content/ExploreContent/SubscribeBtn.tsx
new file mode 100755
index 000000000..0537e9337
--- /dev/null
+++ b/src/containers/content/ExploreContent/SubscribeBtn.tsx
@@ -0,0 +1,43 @@
+import { FC, memo } from 'react'
+
+// import { ICON_CMD } from '@/config'
+// import { HCN } from '@/constant'
+
+import type { TCommunity, TID } from '@/spec'
+
+import Button from '@/components/Buttons/Button'
+import FollowButton from '@/components/Buttons/FollowButton'
+
+import { subscribe, unSubscribe } from './logic'
+
+type TProps = {
+  subscribing: boolean
+  subscribingId: TID
+  community: TCommunity
+}
+
+const SubscribeBtn: FC<TProps> = ({
+  community,
+  subscribing,
+  subscribingId,
+}) => {
+  if (subscribing && community.id === subscribingId) {
+    return (
+      <Button size="small" type="primary">
+        加入 ..
+      </Button>
+    )
+  }
+  return (
+    <FollowButton
+      followText="加 入"
+      followingText="已加入"
+      hasFollowed={community.viewerHasSubscribed}
+      onFollow={() => subscribe(community.id)}
+      onUndoFollow={() => unSubscribe(community.id)}
+      fakeLoading
+    />
+  )
+}
+
+export default memo(SubscribeBtn)
diff --git a/src/containers/content/DiscoveryContent/index.js b/src/containers/content/ExploreContent/index.tsx
similarity index 77%
rename from src/containers/content/DiscoveryContent/index.js
rename to src/containers/content/ExploreContent/index.tsx
index f00c28167..607e98356 100755
--- a/src/containers/content/DiscoveryContent/index.js
+++ b/src/containers/content/ExploreContent/index.tsx
@@ -1,12 +1,13 @@
 /*
  *
- * DiscoveryContent
+ * ExploreContent
  *
  */
 
-import React from 'react'
+import { FC } from 'react'
 import { isEmpty } from 'ramda'
 
+import type { TMetric } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
@@ -17,6 +18,7 @@ import Sidebar from './Sidebar'
 import CommunityList from './CommunityList'
 import NotFound from './NotFound'
 
+import type { TStore } from './store'
 import {
   Wrapper,
   ContentWrapper,
@@ -26,9 +28,17 @@ import {
 import { useInit, pageOnChange, menuOnChange } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:DiscoveryContent')
+const log = buildLog('C:ExploreContent')
 
-const DiscoveryContentContainer = ({ discoveryContent: store, metric }) => {
+type TProps = {
+  exploreContent?: TStore
+  metric?: TMetric
+}
+
+const ExploreContentContainer: FC<TProps> = ({
+  exploreContent: store,
+  metric,
+}) => {
   useInit(store)
 
   const {
@@ -38,6 +48,8 @@ const DiscoveryContentContainer = ({ discoveryContent: store, metric }) => {
     activeMenuId,
     pagiInfo,
     showFilterSidebar,
+    subscribing,
+    subscribingId,
   } = store
 
   const { isSearchMode, searchValue } = searchStatus
@@ -58,7 +70,8 @@ const DiscoveryContentContainer = ({ discoveryContent: store, metric }) => {
               <>
                 <CommunityList
                   entries={pagedCommunitiesData.entries}
-                  restProps={{ ...store }}
+                  subscribing={subscribing}
+                  subscribingId={subscribingId}
                 />
                 <Pagi
                   {...pagiInfo}
@@ -78,4 +91,4 @@ const DiscoveryContentContainer = ({ discoveryContent: store, metric }) => {
   )
 }
 
-export default pluggedIn(DiscoveryContentContainer)
+export default pluggedIn(ExploreContentContainer) as FC<TProps>
diff --git a/src/containers/content/DiscoveryContent/logic.js b/src/containers/content/ExploreContent/logic.ts
similarity index 83%
rename from src/containers/content/DiscoveryContent/logic.js
rename to src/containers/content/ExploreContent/logic.ts
index 49122b1cb..6a902fdd5 100755
--- a/src/containers/content/DiscoveryContent/logic.js
+++ b/src/containers/content/ExploreContent/logic.ts
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { isEmpty } from 'ramda'
 
+import type { TID } from '@/spec'
 import { EVENT, ERR } from '@/constant'
 
 import { errRescue } from '@/utils/helper'
@@ -9,17 +10,19 @@ import asyncSuit from '@/utils/async'
 import { buildLog } from '@/utils/logger'
 import { updateEditing } from '@/utils/mobx'
 
+import type { TStore } from './store'
 import S from './schema'
 
 /* eslint-disable-next-line */
-const log = buildLog('L:DiscoveryContent')
+const log = buildLog('L:ExploreContent')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
+  // @ts-ignore
   receive: [EVENT.LOGOUT, EVENT.LOGIN],
 })
 
-let store = null
+let store: TStore | undefined
 let sub$ = null
 
 /**
@@ -27,7 +30,7 @@ let sub$ = null
  * @param {page} number
  * @ppublic
  */
-export const loadCommunities = (page = 1) => {
+export const loadCommunities = (page = 1): void => {
   const { subPath } = store.curRoute
   const category = !isEmpty(subPath) ? subPath : 'pl'
 
@@ -41,14 +44,14 @@ export const loadCommunities = (page = 1) => {
   sr71$.query(S.pagedCommunities, args)
 }
 
-export const loadCategories = () =>
+export const loadCategories = (): void =>
   sr71$.query(S.pagedCategories, { filter: {} })
 
 /**
  * search communities by current searchValue in store
  * @private
  */
-const searchCommunities = () => {
+const searchCommunities = (): void => {
   const { searchValue: title } = store
   const args = { title, userHasLogin: store.isLogin }
 
@@ -59,14 +62,14 @@ const searchCommunities = () => {
  * change search status
  * @ppublic
  */
-export const changeSearchStatus = (status) => store.mark({ ...status })
+export const changeSearchStatus = (status): void => store.mark({ ...status })
 
 /**
  * search for communities
  * @param {e} htmlEvent
  * @return {void}
  */
-export const searchOnChange = (e) => {
+export const searchOnChange = (e): void => {
   updateEditing(store, 'searchValue', e)
   searchCommunities()
 }
@@ -78,7 +81,7 @@ export const searchOnChange = (e) => {
  * @param {item.raw} string
  * @public
  */
-export const menuOnChange = ({ id, raw }) => {
+export const menuOnChange = ({ id, raw }): void => {
   store.markRoute({ subPath: raw })
   loadCommunities()
   store.mark({ activeCatalogId: id })
@@ -89,14 +92,14 @@ export const menuOnChange = ({ id, raw }) => {
  * @param {page} number
  * @public
  */
-export const pageOnChange = (page) => loadCommunities(page)
+export const pageOnChange = (page: number): void => loadCommunities(page)
 
 /**
  * subscrib / join a community
  * @param {id} string
  * @public
  */
-export const subscribe = (id) => {
+export const subscribe = (id: TID): void => {
   if (!store.isLogin) return store.authWarning()
 
   sr71$.mutate(S.subscribeCommunity, { communityId: id })
@@ -111,7 +114,7 @@ export const subscribe = (id) => {
  * @param {id} string
  * @public
  */
-export const unSubscribe = (id) => {
+export const unSubscribe = (id: TID): void => {
   if (!store.isLogin) return store.authWarning()
 
   sr71$.mutate(S.unsubscribeCommunity, { communityId: id })
@@ -174,7 +177,7 @@ const ErrSolver = [
   {
     match: asyncErr(ERR.TIMEOUT),
     action: ({ details }) => {
-      errRescue({ type: ERR.TIMEOUT, details, path: 'DiscoveryContent' })
+      errRescue({ type: ERR.TIMEOUT, details, path: 'ExploreContent' })
       cancelLoading()
     },
   },
@@ -182,7 +185,7 @@ const ErrSolver = [
     match: asyncErr(ERR.NETWORK),
     action: () => {
       cancelLoading()
-      errRescue({ type: ERR.NETWORK, path: 'DiscoveryContent' })
+      errRescue({ type: ERR.NETWORK, path: 'ExploreContent' })
     },
   },
 ]
@@ -202,7 +205,7 @@ const loadIfNeed = () => {
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     // log('effect init')
@@ -211,7 +214,7 @@ export const useInit = (_store) => {
 
     return () => {
       // log('effect uninit')
-      if (!sub$) return false
+      if (!sub$) return
       // log('===== do uninit')
       sub$.unsubscribe()
     }
diff --git a/src/containers/content/DiscoveryContent/schema.ts b/src/containers/content/ExploreContent/schema.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/schema.ts
rename to src/containers/content/ExploreContent/schema.ts
diff --git a/src/containers/content/ExploreContent/spec.ts b/src/containers/content/ExploreContent/spec.ts
new file mode 100644
index 000000000..fe60268bc
--- /dev/null
+++ b/src/containers/content/ExploreContent/spec.ts
@@ -0,0 +1,10 @@
+export type TSearchState = {
+  isSearchMode?: boolean
+  searchValue: string
+  showSearchMask: boolean
+  showCreateHint: boolean
+  showSearchHint: boolean
+  showSearchResultHint: boolean
+  searchResultCount: number
+  searchfocused?: boolean
+}
diff --git a/src/containers/content/DiscoveryContent/store.js b/src/containers/content/ExploreContent/store.tsx
similarity index 62%
rename from src/containers/content/DiscoveryContent/store.js
rename to src/containers/content/ExploreContent/store.tsx
index 5054a5698..5c28659f7 100755
--- a/src/containers/content/DiscoveryContent/store.js
+++ b/src/containers/content/ExploreContent/store.tsx
@@ -1,17 +1,32 @@
 /*
- * DiscoveryContentStore store
+ * ExploreContentStore store
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { propEq, findIndex } from 'ramda'
 
 import { ICON_CMD } from '@/config'
+import type {
+  TRootStore,
+  TCommunity,
+  TRoute,
+  TID,
+  TPagedCommunities,
+} from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 import { Trans } from '@/utils/i18n'
 import { PagedCommunities, PagedCategories, emptyPagiData } from '@/model'
 
-const DiscoveryContentStore = T.model('DiscoveryContentStore', {
+import type { TSearchState } from './spec'
+
+type TPagiInfo = {
+  pageNumber: number
+  pageSize: number
+  totalCount: number
+}
+
+const ExploreContentStore = T.model('ExploreContentStore', {
   // current active sidbar menu id
   activeCatalogId: T.maybeNull(T.string),
   pagedCommunities: T.optional(PagedCommunities, emptyPagiData),
@@ -32,16 +47,15 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
   searchfocused: T.optional(T.boolean, false),
 })
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isLogin() {
-      return self.root.account.isLogin
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.account.isLogin
     },
-    get curRoute() {
-      return self.root.curRoute
+    get curRoute(): TRoute {
+      const root = getParent(self) as TRootStore
+      return root.curRoute
     },
-    get searchStatus() {
+    get searchStatus(): TSearchState {
       const { searchValue, searchfocused } = self
       let { showSearchMask, showCreateHint, showSearchHint } = self
 
@@ -66,16 +80,17 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
         searchResultCount,
       }
     },
-    get pagedCommunitiesData() {
+    get pagedCommunitiesData(): TPagedCommunities {
       return toJS(self.pagedCommunities)
     },
-    get showFilterSidebar() {
+    get showFilterSidebar(): boolean {
       // if (self.pagedCommunitiesData.entries.length === 0) return false
       // const isSearchMode = searchValue.length !== 0
       return self.searchValue.length === 0
     },
-    get pagiInfo() {
-      const { pageNumber, pageSize, totalCount } = self.pagedCommunitiesData
+    get pagiInfo(): TPagiInfo {
+      const slf = self as TStore
+      const { pageNumber, pageSize, totalCount } = slf.pagedCommunitiesData
 
       return {
         pageNumber,
@@ -83,7 +98,7 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
         totalCount,
       }
     },
-    get activeMenuId() {
+    get activeMenuId(): TID {
       const { entries } = toJS(self.pagedCategories)
       return self.activeCatalogId || entries[0].id
     },
@@ -98,18 +113,20 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
     },
   }))
   .actions((self) => ({
-    updateEditing(sobj) {
-      self.mark(sobj)
+    updateEditing(sobj): void {
+      const slf = self as TStore
+      slf.mark(sobj)
     },
-    authWarning(options) {
-      self.root.authWarning(options)
+    authWarning(options = {}): void {
+      const root = getParent(self) as TRootStore
+      root.authWarning(options)
     },
-    toggleSubscribe(community) {
+    toggleSubscribe(community: TCommunity): void {
       const index = findIndex(
         propEq('id', community.id),
         self.pagedCommunities.entries,
       )
-      if (index === -1) return false
+      if (index === -1) return
 
       if (self.pagedCommunities.entries[index].viewerHasSubscribed) {
         self.pagedCommunities.entries[index].viewerHasSubscribed = false
@@ -119,20 +136,26 @@ const DiscoveryContentStore = T.model('DiscoveryContentStore', {
         self.pagedCommunities.entries[index].subscribersCount += 1
       }
     },
-    addSubscribedCommunity(community) {
-      self.root.account.addSubscribedCommunity(community)
-      self.root.discoveryContent.toggleSubscribe(community)
+    addSubscribedCommunity(community: TCommunity): void {
+      const root = getParent(self) as TRootStore
+
+      root.account.addSubscribedCommunity(community)
+      root.exploreContent.toggleSubscribe(community)
     },
-    removeSubscribedCommunity(community) {
-      self.root.account.removeSubscribedCommunity(community)
-      self.root.discoveryContent.toggleSubscribe(community)
+    removeSubscribedCommunity(community: TCommunity): void {
+      const root = getParent(self) as TRootStore
+
+      root.account.removeSubscribedCommunity(community)
+      root.exploreContent.toggleSubscribe(community)
     },
-    markRoute(query) {
-      self.root.markRoute(query)
+    markRoute(query): void {
+      const root = getParent(self) as TRootStore
+      root.markRoute(query)
     },
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
-export default DiscoveryContentStore
+export type TStore = Instance<typeof ExploreContentStore>
+export default ExploreContentStore
diff --git a/src/containers/content/DiscoveryContent/styles/banner.ts b/src/containers/content/ExploreContent/styles/banner.ts
similarity index 96%
rename from src/containers/content/DiscoveryContent/styles/banner.ts
rename to src/containers/content/ExploreContent/styles/banner.ts
index 9d2283f67..e157ae4c3 100755
--- a/src/containers/content/DiscoveryContent/styles/banner.ts
+++ b/src/containers/content/ExploreContent/styles/banner.ts
@@ -42,7 +42,7 @@ export const IntroDesc = styled.div`
   margin-left: -10px;
   opacity: 0.9;
 `
-export const SloganTextWrapper = styled.div<{ highlight: boolean }>`
+export const SloganTextWrapper = styled.div<{ highlight?: boolean }>`
   margin-left: 3px;
   margin-right: 3px;
 
diff --git a/src/containers/content/DiscoveryContent/styles/community_card.ts b/src/containers/content/ExploreContent/styles/community_card.ts
similarity index 90%
rename from src/containers/content/DiscoveryContent/styles/community_card.ts
rename to src/containers/content/ExploreContent/styles/community_card.ts
index efbd1aff8..5128e52fb 100755
--- a/src/containers/content/DiscoveryContent/styles/community_card.ts
+++ b/src/containers/content/ExploreContent/styles/community_card.ts
@@ -14,10 +14,10 @@ const BaseCard = styled.div`
   width: 200px;
   height: 250px;
   margin-right: 30px;
-  background: ${theme('content.cardBg')};
+  background: #0c3442; // ${theme('content.cardBg')};
   border: 1px solid;
   border-color: ${theme('content.cardBorder')};
-  border-radius: 3px;
+  border-radius: 12px;
 `
 export const Wrapper = styled(BaseCard)`
   margin-bottom: 60px;
@@ -48,21 +48,17 @@ export const CommunityIcon = styled(Img)<{ nonFill: boolean }>`
   }
 `
 export const Title = styled.div`
-  font-size: 1.2em;
+  font-size: 18px;
   font-weight: bold;
   margin-top: 5px;
   text-align: center;
   color: ${theme('thread.articleTitle')};
-
-  ${Wrapper}:hover & {
-    color: ${theme('banner.title')};
-  }
 `
 export const Desc = styled.div`
-  font-size: 1em;
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
   text-align: center;
   min-height: 50px;
-  color: ${theme('banner.desc')};
 `
 export const ActivitySpark = styled.div`
   width: 100%;
diff --git a/src/containers/content/DiscoveryContent/styles/community_list.ts b/src/containers/content/ExploreContent/styles/community_list.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/community_list.ts
rename to src/containers/content/ExploreContent/styles/community_list.ts
diff --git a/src/containers/content/DiscoveryContent/styles/hinter.ts b/src/containers/content/ExploreContent/styles/hinter.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/hinter.ts
rename to src/containers/content/ExploreContent/styles/hinter.ts
diff --git a/src/containers/content/DiscoveryContent/styles/index.ts b/src/containers/content/ExploreContent/styles/index.ts
similarity index 64%
rename from src/containers/content/DiscoveryContent/styles/index.ts
rename to src/containers/content/ExploreContent/styles/index.ts
index 7868c39ec..5363d658b 100755
--- a/src/containers/content/DiscoveryContent/styles/index.ts
+++ b/src/containers/content/ExploreContent/styles/index.ts
@@ -1,9 +1,7 @@
 import styled from 'styled-components'
 
 import type { TMetric } from '@/spec'
-import { theme } from '@/utils/themes'
 import css from '@/utils/css'
-import Img from '@/Img'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
@@ -26,19 +24,4 @@ export const ContentsWrapper = styled.div<{ center: boolean }>`
   width: ${({ center }) => (center ? '100%' : 'calc(100% - 140px)')};
   transition: all 0.25s;
 `
-export const SubscribedBox = styled.div`
-  color: ${theme('baseColor.green')};
-  font-weight: bold;
-`
-
-export const BtnWrapper = styled.div`
-  ${css.flex('align-center')};
-`
-
-export const PrefixIcon = styled(Img)<{ primary: boolean }>`
-  fill: ${({ primary }) =>
-    primary ? theme('button.primary') : theme('button.fg')};
-  ${css.size(14)};
-  margin-right: 3px;
-`
 export const Text = styled.div``
diff --git a/src/containers/content/DiscoveryContent/styles/not_found.ts b/src/containers/content/ExploreContent/styles/not_found.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/not_found.ts
rename to src/containers/content/ExploreContent/styles/not_found.ts
diff --git a/src/containers/content/DiscoveryContent/styles/search_box.ts b/src/containers/content/ExploreContent/styles/search_box.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/search_box.ts
rename to src/containers/content/ExploreContent/styles/search_box.ts
diff --git a/src/containers/content/DiscoveryContent/styles/sidebar.ts b/src/containers/content/ExploreContent/styles/sidebar.ts
similarity index 100%
rename from src/containers/content/DiscoveryContent/styles/sidebar.ts
rename to src/containers/content/ExploreContent/styles/sidebar.ts
diff --git a/src/containers/content/DiscoveryContent/tests/index.test.ts b/src/containers/content/ExploreContent/tests/index.test.ts
similarity index 63%
rename from src/containers/content/DiscoveryContent/tests/index.test.ts
rename to src/containers/content/ExploreContent/tests/index.test.ts
index 4fd142460..c27feb465 100755
--- a/src/containers/content/DiscoveryContent/tests/index.test.ts
+++ b/src/containers/content/ExploreContent/tests/index.test.ts
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import DiscoveryContent from '../index'
+// import ExploreContent from '../index'
 
-describe('TODO <DiscoveryContent />', () => {
+describe('TODO <ExploreContent />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/containers/content/ExploreContent/tests/store.test.ts b/src/containers/content/ExploreContent/tests/store.test.ts
new file mode 100755
index 000000000..53986cbce
--- /dev/null
+++ b/src/containers/content/ExploreContent/tests/store.test.ts
@@ -0,0 +1,10 @@
+/*
+ * ExploreContentStore store test
+ *
+ */
+
+// import ExploreContentStore from '../index'
+
+it('TODO: test ExploreContentStore', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/src/containers/editor/CommunityEditor/Content/DemoCommunity.js b/src/containers/editor/CommunityEditor/Content/DemoCommunity.js
index e09807191..aa85bb97b 100755
--- a/src/containers/editor/CommunityEditor/Content/DemoCommunity.js
+++ b/src/containers/editor/CommunityEditor/Content/DemoCommunity.js
@@ -21,7 +21,7 @@ import {
 // import { searchOnChange } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:NewDiscoveryContent')
+const log = buildLog('C:NewExploreContent')
 
 const DemoCommunity = ({ title, type = 'pl' }) => {
   const unit = type === 'city' ? 'svg' : 'png'
diff --git a/src/containers/editor/CommunityEditor/Content/SelectType.js b/src/containers/editor/CommunityEditor/Content/SelectType.js
index 4b5608108..d399a5b33 100755
--- a/src/containers/editor/CommunityEditor/Content/SelectType.js
+++ b/src/containers/editor/CommunityEditor/Content/SelectType.js
@@ -29,7 +29,7 @@ import {
 // import { searchOnChange } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:NewDiscoveryContent')
+const log = buildLog('C:NewExploreContent')
 
 // import { LN } from '../logic'
 
diff --git a/src/containers/editor/CommunityEditor/Content/index.js b/src/containers/editor/CommunityEditor/Content/index.js
index 27922a4a6..c13195c6f 100755
--- a/src/containers/editor/CommunityEditor/Content/index.js
+++ b/src/containers/editor/CommunityEditor/Content/index.js
@@ -16,7 +16,7 @@ import { Wrapper } from '../styles/content'
 import { LN } from '../constant'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:NewDiscoveryContent')
+const log = buildLog('C:NewExploreContent')
 
 const Content = ({
   step,
diff --git a/src/containers/editor/CommunityEditor/index.js b/src/containers/editor/CommunityEditor/index.js
index 74212fe1c..ad9a43e03 100755
--- a/src/containers/editor/CommunityEditor/index.js
+++ b/src/containers/editor/CommunityEditor/index.js
@@ -1,6 +1,6 @@
 /*
  *
- * DiscoveryContent
+ * ExploreContent
  *
  */
 
@@ -16,7 +16,7 @@ import { Wrapper, InnerWrapper, ContentWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:DiscoveryContent')
+const log = buildLog('C:ExploreContent')
 
 const CommunityEditorContainer = ({ communityEditor: store, metric }) => {
   useInit(store)
diff --git a/src/containers/editor/CommunityEditor/logic.js b/src/containers/editor/CommunityEditor/logic.js
index 9c0fb4d78..9f701a480 100755
--- a/src/containers/editor/CommunityEditor/logic.js
+++ b/src/containers/editor/CommunityEditor/logic.js
@@ -8,7 +8,7 @@ import { LN } from './constant'
 import S from './schema'
 
 /* eslint-disable-next-line */
-const log = buildLog('L:DiscoveryContent')
+const log = buildLog('L:ExploreContent')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
@@ -102,7 +102,7 @@ const ErrSolver = [
   {
     match: asyncErr(ERR.TIMEOUT),
     action: ({ details }) => {
-      errRescue({ type: ERR.TIMEOUT, details, path: 'DiscoveryContent' })
+      errRescue({ type: ERR.TIMEOUT, details, path: 'ExploreContent' })
       cancelLoading()
     },
   },
@@ -110,7 +110,7 @@ const ErrSolver = [
     match: asyncErr(ERR.NETWORK),
     action: () => {
       cancelLoading()
-      errRescue({ type: ERR.NETWORK, path: 'DiscoveryContent' })
+      errRescue({ type: ERR.NETWORK, path: 'ExploreContent' })
     },
   },
 ]
diff --git a/src/containers/editor/CommunityEditor/tests/index.test.ts b/src/containers/editor/CommunityEditor/tests/index.test.ts
index 4fd142460..c27feb465 100755
--- a/src/containers/editor/CommunityEditor/tests/index.test.ts
+++ b/src/containers/editor/CommunityEditor/tests/index.test.ts
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import DiscoveryContent from '../index'
+// import ExploreContent from '../index'
 
-describe('TODO <DiscoveryContent />', () => {
+describe('TODO <ExploreContent />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/containers/editor/CommunityEditor/tests/store.test.ts b/src/containers/editor/CommunityEditor/tests/store.test.ts
index bb3f708b6..53986cbce 100755
--- a/src/containers/editor/CommunityEditor/tests/store.test.ts
+++ b/src/containers/editor/CommunityEditor/tests/store.test.ts
@@ -1,10 +1,10 @@
 /*
- * DiscoveryContentStore store test
+ * ExploreContentStore store test
  *
  */
 
-// import DiscoveryContentStore from '../index'
+// import ExploreContentStore from '../index'
 
-it('TODO: test DiscoveryContentStore', () => {
+it('TODO: test ExploreContentStore', () => {
   expect(1 + 1).toBe(2)
 })
diff --git a/src/containers/tool/Doraemon/logic/index.js b/src/containers/tool/Doraemon/logic/index.js
index e48ba7a59..f29040e0e 100755
--- a/src/containers/tool/Doraemon/logic/index.js
+++ b/src/containers/tool/Doraemon/logic/index.js
@@ -352,7 +352,7 @@ const initSpecCmdResolver = () => {
             pathname: '/',
             query: { main: 'discovery', sub: 'all' },
           },
-          '/discovery',
+          '/explore',
         )
         hidePanel()
       },
diff --git a/src/containers/tool/Doraemon/logic/jumper.js b/src/containers/tool/Doraemon/logic/jumper.js
index d3103575f..932502ef0 100755
--- a/src/containers/tool/Doraemon/logic/jumper.js
+++ b/src/containers/tool/Doraemon/logic/jumper.js
@@ -9,7 +9,7 @@ export const jumpToCommunity = (store, communityRaw) => {
   const { mainPath, subPath } = store.curRoute
 
   if (
-    contains(mainPath, [ROUTE.USER, ROUTE.DISCOVERY]) ||
+    contains(mainPath, [ROUTE.USER, ROUTE.EXPLORE]) ||
     contains(subPath, [ROUTE.POST, ROUTE.JOB, ROUTE.REPO])
   ) {
     Global.location.href = `/${communityRaw}/posts`
diff --git a/src/containers/unit/Footer/store.ts b/src/containers/unit/Footer/store.ts
index 2edd76684..67edaa350 100755
--- a/src/containers/unit/Footer/store.ts
+++ b/src/containers/unit/Footer/store.ts
@@ -49,7 +49,7 @@ const FooterStore = T.model('FooterStore', {
     //   if (
     //     contains(self.metric, [
     //       METRIC.USER,
-    //       METRIC.DISCOVERY,
+    //       METRIC.EXPLORE,
     //       METRIC.ARTICLE,
     //       METRIC.WORKS_EDITOR,
     //       METRIC.COMMUNITY_EDITOR,
diff --git a/src/containers/unit/Header/store.ts b/src/containers/unit/Header/store.ts
index 9e5a4354a..f00ebc26b 100755
--- a/src/containers/unit/Header/store.ts
+++ b/src/containers/unit/Header/store.ts
@@ -36,7 +36,7 @@ const HeaderStore = T.model('HeaderStore', {
     },
     get hasNoBottomBorder(): boolean {
       return contains(self.metric, [
-        METRIC.DISCOVERY,
+        METRIC.EXPLORE,
         METRIC.SPONSOR,
         METRIC.SUPPORT_US,
         METRIC.SUBSCRIBE,
diff --git a/src/containers/unit/Sidebar/logic.ts b/src/containers/unit/Sidebar/logic.ts
index e7cc3435c..ed1f5b5fd 100755
--- a/src/containers/unit/Sidebar/logic.ts
+++ b/src/containers/unit/Sidebar/logic.ts
@@ -41,7 +41,7 @@ export const searchCommunityValueOnChange = (e): void =>
 export const onCommunitySelect = (community: TCommunity): void => {
   // NOTE: check page, if current it's from communities then redirect whole page
   const { mainPath } = store.curRoute
-  if (contains(mainPath, [ROUTE.DISCOVERY])) {
+  if (contains(mainPath, [ROUTE.EXPLORE])) {
     Global.location.href = `/${community.raw}/posts`
     return
   }
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 450c21762..ce9ddcd90 100755
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -151,7 +151,8 @@ const CommunityPage = (props) => {
 
   const seoConfig = {
     url: `${SITE_URL}/${community.raw}/${activeThread}`,
-    title: `${community.title} | coderplanets`,
+    title:
+      community.raw === 'home' ? 'CoderPlanets' : `${community.title} | CP`,
     description: `${community.desc}`,
   }
 
diff --git a/src/pages/create/article.js b/src/pages/create/article.js
index 9b06724eb..ead509331 100755
--- a/src/pages/create/article.js
+++ b/src/pages/create/article.js
@@ -86,7 +86,7 @@ export const getServerSideProps = async (props) => {
       isValidSession: sessionState.isValid,
       userSubscribedCommunities: subscribedCommunities,
     },
-    discoveryContent: {
+    exploreContent: {
       pagedCommunities,
       pagedCategories,
     },
diff --git a/src/pages/create/community.js b/src/pages/create/community.js
index 75e1b12f5..b6da5164d 100755
--- a/src/pages/create/community.js
+++ b/src/pages/create/community.js
@@ -86,7 +86,7 @@ export const getServerSideProps = async (props) => {
       isValidSession: sessionState.isValid,
       userSubscribedCommunities: subscribedCommunities,
     },
-    discoveryContent: {
+    exploreContent: {
       pagedCommunities,
       pagedCategories,
     },
diff --git a/src/pages/discovery/index.js b/src/pages/explore.tsx
old mode 100755
new mode 100644
similarity index 85%
rename from src/pages/discovery/index.js
rename to src/pages/explore.tsx
index b1aef1cf6..c961c1eb8
--- a/src/pages/discovery/index.js
+++ b/src/pages/explore.tsx
@@ -1,5 +1,5 @@
 /*
-   this page is for /discovery
+   this page is for /explore
  */
 import React from 'react'
 import { Provider } from 'mobx-react'
@@ -21,11 +21,11 @@ import {
 import { useStore } from '@/stores/init'
 
 import GlobalLayout from '@/containers/layout/GlobalLayout'
-import DiscoveryContent from '@/containers/content/DiscoveryContent'
+import ExploreContent from '@/containers/content/ExploreContent'
 
 import { P } from '@/schemas'
 
-const fetchData = async (props, opt) => {
+const fetchData = async (props, opt = {}) => {
   const { realname } = merge({ realname: true }, opt)
 
   const token = realname ? getJwtToken(props) : null
@@ -34,7 +34,9 @@ const fetchData = async (props, opt) => {
   const { subPath } = ssrParseURL(props.req)
   const category = subPath !== '' ? subPath : 'pl'
 
-  const filter = { ...queryStringToJSON(props.req.url, { pagi: 'number' }) }
+  const filter = {
+    ...queryStringToJSON(props.req.url, { noPagiInfo: false, pagi: 'number' }),
+  }
 
   const sessionState = gqClient.request(P.sessionState)
   const pagedCommunities = gqClient.request(P.pagedCommunities, {
@@ -87,7 +89,7 @@ export const getServerSideProps = async (props) => {
       isValidSession: sessionState.isValid,
       userSubscribedCommunities: subscribedCommunities,
     },
-    discoveryContent: {
+    exploreContent: {
       pagedCommunities,
       pagedCategories,
     },
@@ -96,13 +98,13 @@ export const getServerSideProps = async (props) => {
   return { props: { errorCode: null, ...initProps } }
 }
 
-const DiscoveryPage = (props) => {
+const ExplorePage = (props) => {
   const store = useStore(props)
 
   const { errorCode } = store
 
   const seoConfig = {
-    url: `${SITE_URL}/${ROUTE.DISCOVERY}`,
+    url: `${SITE_URL}/${ROUTE.EXPLORE}`,
     title: '社区索引 | coderplanets',
     description: 'coderplanets 所有社区节点',
   }
@@ -110,14 +112,14 @@ const DiscoveryPage = (props) => {
   return (
     <Provider store={store}>
       <GlobalLayout
-        metric={METRIC.DISCOVERY}
+        metric={METRIC.EXPLORE}
         seoConfig={seoConfig}
         errorCode={errorCode}
       >
-        <DiscoveryContent />
+        <ExploreContent />
       </GlobalLayout>
     </Provider>
   )
 }
 
-export default DiscoveryPage
+export default ExplorePage
diff --git a/src/spec/community.ts b/src/spec/community.ts
index 7e80d7700..669c35d61 100644
--- a/src/spec/community.ts
+++ b/src/spec/community.ts
@@ -17,6 +17,8 @@ export type TCommunity = {
 export type TPagedCommunities = {
   entries: TCommunity[]
   totalCount?: number
+  pageNumber?: number
+  pageSize?: number
 }
 
 export type TTag = {
@@ -57,3 +59,10 @@ export type TNaviTag = {
 export type TGroupedTags = {
   [group: string]: TTag[]
 }[]
+
+export type TCategory = {
+  title: string
+  raw: string
+  index: number
+  // author: T
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 707e4ee85..58df5ebee 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -25,6 +25,7 @@ export type {
   TNaviTag,
   TFilterTag,
   TGroupedTags,
+  TCategory,
 } from './community'
 
 export type {
diff --git a/src/spec/metric.ts b/src/spec/metric.ts
index d4c7688a2..f0005ca50 100644
--- a/src/spec/metric.ts
+++ b/src/spec/metric.ts
@@ -7,7 +7,7 @@ export type TMetric =
 
   // 版块
   | 'WORKS'
-  | 'DISCOVERY'
+  | 'EXPLORE'
   | 'SPONSOR'
   | 'SUPPORT_US'
   | 'SUBSCRIBE'
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index 1cdb84e2b..2effbc409 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -38,7 +38,7 @@ import {
   CommunityDigestStore,
   // content
   CommunityContentStore,
-  DiscoveryContentStore,
+  ExploreContentStore,
   CommunityEditorStore,
   UserContentStore,
   // footer
@@ -144,7 +144,7 @@ const rootStore = T.model({
   // content
   communityContent: T.optional(CommunityContentStore, {}),
 
-  discoveryContent: T.optional(DiscoveryContentStore, {}),
+  exploreContent: T.optional(ExploreContentStore, {}),
   communityEditor: T.optional(CommunityEditorStore, {}),
   userContent: T.optional(UserContentStore, {}),
   // content end
diff --git a/src/stores/RootStore/index2.ts b/src/stores/RootStore/index2.ts
index 90d186406..c689e1c8e 100755
--- a/src/stores/RootStore/index2.ts
+++ b/src/stores/RootStore/index2.ts
@@ -39,7 +39,7 @@ import {
   CommunityDigestStore,
   // content
   CommunityContentStore,
-  DiscoveryContentStore,
+  ExploreContentStore,
   CommunityEditorStore,
   UserContentStore,
   // footer
@@ -130,7 +130,7 @@ import {
 // // contents store
 // import CommunityContentStore from '@/containers/content/CommunityContent/store'
 
-// import DiscoveryContentStore from '@/containers/content/DiscoveryContent/store'
+// import ExploreContentStore from '@/containers/content/ExploreContent/store'
 // import UserContentStore from '@/containers/content/UserContent/store'
 
 // // footer
@@ -224,7 +224,7 @@ const rootStore = T.model({
   articleDigest: T.optional(ArticleDigestStore, {}),
   communityDigest: T.optional(CommunityDigestStore, {}),
   communityContent: T.optional(CommunityContentStore, {}),
-  discoveryContent: T.optional(DiscoveryContentStore, {}),
+  exploreContent: T.optional(ExploreContentStore, {}),
   communityEditor: T.optional(CommunityEditorStore, {}),
   userContent: T.optional(UserContentStore, {}),
   footer: T.optional(FooterStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 705cdb9c9..f270ee8e2 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -40,7 +40,7 @@ export { default as ArticleDigestStore } from '@/containers/digest/ArticleDigest
 // contents store
 export { default as CommunityContentStore } from '@/containers/content/CommunityContent/store'
 
-export { default as DiscoveryContentStore } from '@/containers/content/DiscoveryContent/store'
+export { default as ExploreContentStore } from '@/containers/content/ExploreContent/store'
 export { default as UserContentStore } from '@/containers/content/UserContent/store'
 
 // footer
diff --git a/utils/constant/metric.ts b/utils/constant/metric.ts
index 9fe153098..e0d7a981b 100644
--- a/utils/constant/metric.ts
+++ b/utils/constant/metric.ts
@@ -14,7 +14,7 @@ const METRIC = {
   COOL_GUIDE: 'COOL_GUIDE' as TMetric,
   HAVE_A_DRINK: 'HAVE_A_DRINK' as TMetric,
   RECIPES: 'RECIPES' as TMetric,
-  DISCOVERY: 'DISCOVERY' as TMetric,
+  EXPLORE: 'EXPLORE' as TMetric,
   SPONSOR: 'SPONSOR' as TMetric,
   SUPPORT_US: 'SUPPORT_US' as TMetric,
   SUBSCRIBE: 'SUBSCRIBE' as TMetric,
diff --git a/utils/constant/route.ts b/utils/constant/route.ts
index de24fb47f..acb3d4947 100755
--- a/utils/constant/route.ts
+++ b/utils/constant/route.ts
@@ -3,7 +3,7 @@ const ROUTE = {
   HOME: 'home',
   // this page is not exist on url, but serves default community page
   COMMUNITY: 'community',
-  DISCOVERY: 'discovery',
+  EXPLORE: 'discovery',
   POSTS: 'posts',
   BLOGS: 'blogs',
   JOBS: 'jobs',
diff --git a/utils/css/metric.ts b/utils/css/metric.ts
index beed1316e..ecf443141 100644
--- a/utils/css/metric.ts
+++ b/utils/css/metric.ts
@@ -25,7 +25,7 @@ export const WIDTH = {
     PAGE: '1200px',
     CONTENT: '1024px',
   },
-  DISCOVERY: {
+  EXPLORE: {
     CONTENT: '1100px',
   },
   ARTICLE: {
diff --git a/utils/mock.ts b/utils/mock.ts
index 22ecb207a..1f27fa989 100644
--- a/utils/mock.ts
+++ b/utils/mock.ts
@@ -60,7 +60,6 @@ const users = [
 const tags = [
   {
     id: '0',
-    index: 0,
     raw: 'help',
     title: '求助',
     color: 'red',
@@ -68,7 +67,6 @@ const tags = [
   },
   {
     id: '1',
-    index: 1,
     raw: 'tech',
     title: '技术',
     color: 'orange',
@@ -76,7 +74,6 @@ const tags = [
   },
   {
     id: '2',
-    index: 2,
     raw: 'maker',
     title: '创作者',
     color: 'yellow',
@@ -84,7 +81,6 @@ const tags = [
   },
   {
     id: '3',
-    index: 3,
     raw: 'geek',
     title: '极客',
     color: 'green',
@@ -92,7 +88,6 @@ const tags = [
   },
   {
     id: '4',
-    index: 4,
     raw: 'IxD',
     title: '交互设计',
     color: 'cyan',
@@ -100,63 +95,56 @@ const tags = [
   },
   {
     id: '5',
-    index: 5,
     raw: 'DF',
     title: '黑暗森林',
     color: 'blue',
     group: '技术与人文',
   },
+  {
+    id: '9',
+    raw: 'thoughts',
+    title: '迷思',
+    color: 'grey',
+    group: '技术与人文',
+  },
+  {
+    id: '8',
+    raw: 'city',
+    title: '城市',
+    color: 'green',
+    group: '生活与职场',
+  },
   {
     id: '6',
-    index: 6,
-    raw: 'career',
-    title: '职场',
+    raw: 'pantry',
+    title: '茶水间',
     color: 'purple',
-    group: '生活',
+    group: '生活与职场',
   },
   {
     id: '7',
-    index: 7,
     raw: 'afterwork',
     title: '下班后',
     color: 'pink',
-    group: '生活',
-  },
-  {
-    id: '8',
-    index: 8,
-    raw: 'nsfw',
-    title: '摸鱼',
-    color: 'pink',
-    group: '生活',
-  },
-  {
-    id: '9',
-    index: 9,
-    raw: 'thoughts',
-    title: '迷思',
-    color: 'grey',
-    group: '生活',
+    group: '生活与职场',
   },
   {
     id: '10',
     index: 10,
-    raw: 'wtf',
+    raw: 'WTF',
     title: '吐槽',
     color: 'red',
     group: '其他',
   },
   {
     id: '11',
-    index: 11,
-    raw: 'hunt',
-    title: '发现',
+    raw: 'REC',
+    title: '推荐',
     color: 'orange',
     group: '其他',
   },
   {
     id: '12',
-    index: 12,
     raw: 'idea',
     title: '脑洞',
     color: 'yellow',
@@ -164,7 +152,6 @@ const tags = [
   },
   {
     id: '13',
-    index: 13,
     raw: 'feedback',
     title: '站务',
     color: 'green',
@@ -1344,6 +1331,14 @@ export const mockNaviCatalogMenu = (): TNaviTag[] => {
         },
       ],
     },
+
+    {
+      id: uid.gen(),
+      raw: uid.gen(),
+      title: '摸鱼指南',
+      icon: `${ICON_CMD}/navi/sport.svg`,
+      childMenu: [],
+    },
   ]
 }