chore(support): add zhihu & reddit

Author: mydearxym

.eslintignore

@@ -6,4 +6,5 @@ next-env.d.ts
 *.hbs
 *.svg
 *.png
+*.jpeg
 *.txt

public/icons/static/social/reddit-share.png

@@ -10,7 +10,7 @@ import QRCode from 'qrcode-react'
 import type { TMetric } from '@/spec'
 import { ICON } from '@/config'
 import { METRIC } from '@/constant'
-import { openShareWindow } from '@/utils/helper'
+import { openShareWindow, Global } from '@/utils/helper'
 
 import { Br } from '@/components/Common'
 import Tooltip from '@/components/Tooltip'
@@ -60,6 +60,16 @@ const toPlatform = (type: string): void => {
       return openShareWindow('https://shuo.douban.com/!service/share', param)
     }
 
+    case 'reddit': {
+      const param = { url, title: `${title}: ${digest}` }
+      return openShareWindow('http://www.reddit.com/submit', param)
+    }
+
+    case 'zhihu': {
+      Global.open('https://zhuanlan.zhihu.com/write', '_blank')
+      return
+    }
+
     case 'weibo': {
       const param = { url, title }
       return openShareWindow('https://service.weibo.com/share/share.php', param)
@@ -121,6 +131,14 @@ const SupportUS: FC<TProps> = ({ metric = METRIC.SUPPORT_US }) => {
             src={`${ICON}/social/douban-share.png`}
             onClick={() => toPlatform('douban')}
           />
+          <SocialIcon
+            src={`${ICON}/social/zhihu-share.jpeg`}
+            onClick={() => toPlatform('zhihu')}
+          />
+          <SocialIcon
+            src={`${ICON}/social/reddit-share.png`}
+            onClick={() => toPlatform('reddit')}
+          />
           <SocialIcon
             src={`${ICON}/social/facebook-share.png`}
             onClick={() => toPlatform('facebook')}

public/icons/static/social/zhihu-share.jpeg

@@ -59,20 +59,20 @@ export const MainDesc = styled(Desc)`
 export const FocusDesc = styled.div`
   color: ${theme('thread.articleTitle')};
   text-align: center;
-  padding-right: 20px;
+  padding-left: 10px;
   font-size: 16px;
   line-height: 1.88;
 `
 export const SocialWrapper = styled.div`
   ${css.flex('align-center')};
   margin-top: 30px;
   margin-bottom: 30px;
-  margin-left: -12px;
+  margin-left: 15px;
 `
 export const SocialIcon = styled(Img)`
   ${css.size(24)};
   margin-right: 15px;
-  filter: saturate(0.4);
+  filter: saturate(0.6);
 
   &:hover {
     filter: saturate(0.9);