Merge pull request #3245 from thematters/develop

Release:v4.17.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.17.0",
+  "version": "4.17.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",
@@ -29,7 +29,7 @@
     "build-storybook": "build-storybook",
     "prepare": "husky install",
     "vercel-build": "set -xe; npm run gen:type && if [[ \"$NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF\" =~ release/* ]] ; then cp -va .env.prod .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-next.matters.news' | tee -a .env.local; else cp -va .env.dev .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-dev.matters.news' | tee -a .env.local ; fi && echo 'NEXT_PUBLIC_NEXT_ASSET_DOMAIN=' | tee -a .env.local && npm run build",
-    "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/en.json",
+    "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/default.json",
     "i18n:compile": "formatjs compile-folder --ast lang compiled-lang",
     "i18n": "npm run i18n:extract && npm run i18n:compile"
   },

src/common/enums/text.ts

@@ -344,7 +344,7 @@ export const TEXT = {
     analyticsNoSupporter: '尚無支持數據',
     TAG_EDITORS_REACH_LIMIT: '一個標籤最多僅可有 4 名協作者共同管理',
     TAG_NOT_FOUND: '標籤不存在',
-    TOO_MANY_TAGS_FOR_ARTICLE: '標籤添加最多至 8 個',
+    TOO_MANY_TAGS_FOR_ARTICLE: '標籤添加最多至 5 個',
     tag: '標籤',
     tags: '標籤',
     tagAddArticle: '添加我的作品',
@@ -398,7 +398,7 @@ export const TEXT = {
     viewLikers: '查看讚賞',
     viewSupporters: '查看支持者',
     waitingForPublish: '正在等待發布，星際通道有點擁擠',
-    waitingForHash: '等待写入完成...',
+    waitingForHash: '等候寫入完成...',
     walletAddress: '加密錢包地址',
     walletBalance: '錢包餘額',
     walletBalanceInsufficient: '錢包餘額不足',
@@ -749,7 +749,7 @@ export const TEXT = {
     analyticsNoSupporter: '尚无支持数据',
     TAG_EDITORS_REACH_LIMIT: '一个标签最多仅可有 4 名协作者共同管理',
     TAG_NOT_FOUND: '标签不存在',
-    TOO_MANY_TAGS_FOR_ARTICLE: '标签添加最多至 8 个',
+    TOO_MANY_TAGS_FOR_ARTICLE: '标签添加最多至 5 个',
     tag: '标签',
     tags: '标签',
     tagAddArticle: '添加我的作品',
@@ -803,7 +803,7 @@ export const TEXT = {
     viewLikers: '查看赞赏',
     viewSupporters: '查看支持者',
     waitingForPublish: '正在等待发布，星际通道有点拥挤',
-    waitingForHash: '等候寫入完成...',
+    waitingForHash: '等待写入完成...',
     walletAddress: '加密钱包地址',
     walletBalance: '钱包余额',
     walletBalanceInsufficient: '钱包余额不足',
@@ -1180,7 +1180,7 @@ export const TEXT = {
     analyticsNoSupporter: 'No data yet.',
     TAG_EDITORS_REACH_LIMIT: 'Maximum 4 editors allowed for each tag',
     TAG_NOT_FOUND: 'Tag not found',
-    TOO_MANY_TAGS_FOR_ARTICLE: 'Add up to 8 tags',
+    TOO_MANY_TAGS_FOR_ARTICLE: 'Add up to 5 tags',
     tag: 'Tag',
     tags: 'Tags',
     tagAddArticle: 'Add Article',

src/components/Buttons/Login/index.tsx

@@ -1,17 +1,12 @@
+import { FormattedMessage } from 'react-intl'
+
 import {
   CLOSE_ACTIVE_DIALOG,
   OPEN_UNIVERSAL_AUTH_DIALOG,
   PATHS,
 } from '~/common/enums'
 import { appendTarget } from '~/common/utils'
-import {
-  Button,
-  ButtonProps,
-  IconSize,
-  Media,
-  TextIcon,
-  Translate,
-} from '~/components'
+import { Button, ButtonProps, IconSize, Media, TextIcon } from '~/components'
 
 interface LoginButtonBaseProps {
   iconSize?: Extract<IconSize, 'md'>
@@ -43,12 +38,18 @@ export const LoginButton: React.FC<LoginButtonProps> = ({
       <>
         <Media at="sm">
           <Button {...smProps}>
-            <Translate id="login" />
+            <FormattedMessage
+              defaultMessage="Log in"
+              description="src/components/Buttons/Login/index.tsx"
+            />
           </Button>
         </Media>
         <Media greaterThan="sm">
           <Button aria-haspopup="dialog" {...smUpProps}>
-            <Translate id="login" />
+            <FormattedMessage
+              defaultMessage="Log in"
+              description="src/components/Buttons/Login/index.tsx"
+            />
           </Button>
         </Media>
       </>
@@ -69,7 +70,10 @@ export const LoginButton: React.FC<LoginButtonProps> = ({
   }
   const ButtonText = () => (
     <TextIcon color={textIconColor} size={textIconSize} weight="md">
-      <Translate id="login" />
+      <FormattedMessage
+        defaultMessage="Log in"
+        description="src/components/Buttons/Login/index.tsx"
+      />
     </TextIcon>
   )
 

src/components/Buttons/SignUp/index.tsx

@@ -1,10 +1,12 @@
+import { FormattedMessage } from 'react-intl'
+
 import {
   CLOSE_ACTIVE_DIALOG,
   OPEN_UNIVERSAL_AUTH_DIALOG,
   PATHS,
 } from '~/common/enums'
 import { analytics, appendTarget } from '~/common/utils'
-import { Button, ButtonProps, Media, TextIcon, Translate } from '~/components'
+import { Button, ButtonProps, Media, TextIcon } from '~/components'
 
 type SignUpButtonProps = {
   isPlain?: boolean
@@ -53,7 +55,7 @@ export const SignUpButton: React.FC<
   }
   const ButtonText = () => (
     <TextIcon color="white" weight="md">
-      <Translate id="register" />
+      <FormattedMessage defaultMessage="Register" description="" />
     </TextIcon>
   )
 

src/components/Comment/Content/index.tsx

@@ -4,7 +4,7 @@ import gql from 'graphql-tag'
 import { COMMENT_TYPE_TEXT, TEST_ID } from '~/common/enums'
 import contentCommentStyles from '~/common/styles/utils/content.comment.css'
 import { captureClicks } from '~/common/utils'
-import { CommentFormType, Expandable, Translate, useRoute } from '~/components'
+import { CommentFormType, Expandable, Translate } from '~/components'
 import {
   ContentCommentPrivateFragment,
   ContentCommentPublicFragment,
@@ -17,6 +17,11 @@ interface ContentProps {
   comment: ContentCommentPublicFragment & Partial<ContentCommentPrivateFragment>
   type: CommentFormType
   size?: 'sm' | 'md-s'
+  bgColor?: 'grey-lighter' | 'white'
+  bgActiveColor?: 'grey-lighter' | 'white'
+  limit?: number
+  textIndent?: boolean
+  isRichShow?: boolean
 }
 
 const fragments = {
@@ -40,14 +45,19 @@ const fragments = {
   },
 }
 
-const Content = ({ comment, type, size }: ContentProps) => {
+const Content = ({
+  comment,
+  type,
+  size,
+  bgColor,
+  bgActiveColor,
+  limit = 8,
+  textIndent = false,
+  isRichShow = true,
+}: ContentProps) => {
   const { content, state } = comment
   const isBlocked = comment.author?.isBlocked
 
-  // TODO: Will be removed, just for dev
-  const { getQuery } = useRoute()
-  const limit = parseInt(getQuery('limit')) || 8
-
   const contentClasses = classNames({
     content: true,
     [`size-${size}`]: !!size,
@@ -75,7 +85,14 @@ const Content = ({ comment, type, size }: ContentProps) => {
   if (state === 'active') {
     return (
       <>
-        <Expandable content={content} limit={limit} isRichShow>
+        <Expandable
+          content={content}
+          limit={limit}
+          isRichShow={isRichShow}
+          bgColor={bgColor}
+          bgActiveColor={bgActiveColor}
+          textIndent={textIndent}
+        >
           <section
             className={`${contentClasses} u-content-comment`}
             dangerouslySetInnerHTML={{

src/components/Expandable/index.tsx

@@ -32,6 +32,8 @@ interface ExpandableProps {
   spacingTop?: 'base'
   textIndent?: boolean
   isRichShow?: boolean
+  bgColor?: 'grey-lighter' | 'white'
+  bgActiveColor?: 'grey-lighter' | 'white'
 }
 
 export const Expandable: React.FC<ExpandableProps> = ({
@@ -44,6 +46,8 @@ export const Expandable: React.FC<ExpandableProps> = ({
   spacingTop,
   textIndent = false,
   isRichShow = false,
+  bgColor = 'white',
+  bgActiveColor,
 }) => {
   const [expandable, setExpandable] = useState(false)
   const [lineHeight, setLineHeight] = useState(24)
@@ -62,6 +66,12 @@ export const Expandable: React.FC<ExpandableProps> = ({
     [`textIndent`]: textIndent,
   })
 
+  const richWrapperClasses = classNames({
+    richWrapper: true,
+    [`${bgColor}`]: !!bgColor,
+    [`${bgActiveColor}-active`]: !!bgActiveColor,
+  })
+
   useEffect(() => {
     setExpandable(false)
     setExpand(true)
@@ -147,7 +157,7 @@ export const Expandable: React.FC<ExpandableProps> = ({
           {isRichShow && (
             <>
               <div
-                className="richWrapper"
+                className={richWrapperClasses}
                 style={{ maxHeight: `${limit * lineHeight}px` }}
               >
                 {children}

src/components/Expandable/styles.css

@@ -16,6 +16,40 @@
   & .richWrapper {
     overflow-y: hidden;
     overflow-y: clip;
+
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 2rem;
+      left: 0;
+      height: 80%;
+      pointer-events: none;
+      content: '';
+    }
+
+    &.white::after {
+      background: linear-gradient(
+        180deg,
+        rgb(255 255 255 / 0%) 0%,
+        var(--color-white) 100%
+      );
+    }
+
+    &.grey-lighter::after {
+      background: linear-gradient(
+        180deg,
+        rgb(247 247 247 / 0%) 0%,
+        var(--color-grey-lighter) 100%
+      );
+    }
+
+    &.grey-lighter-active::after {
+      background: linear-gradient(
+        180deg,
+        rgb(247 247 247 / 0%) 0%,
+        var(--color-grey-lighter-active) 100%
+      );
+    }
   }
 }
 

src/components/Forms/EmailLoginForm/Buttons.tsx

@@ -1,6 +1,8 @@
+import { FormattedMessage } from 'react-intl'
+
 import { PATHS } from '~/common/enums'
 import { appendTarget } from '~/common/utils'
-import { Button, Form, TextIcon, Translate } from '~/components'
+import { Button, Form, TextIcon } from '~/components'
 
 export const PasswordResetDialogButton = ({
   gotoResetPassword,
@@ -14,15 +16,22 @@ export const PasswordResetDialogButton = ({
     tabIndex={-1}
   >
     <TextIcon color="green" weight="md">
-      <Translate id="forgetPassword" />？
+      {' '}
+      <FormattedMessage
+        defaultMessage="Forget Password"
+        description="src/components/Forms/EmailLoginForm/Buttons.tsx"
+      />
     </TextIcon>
   </Button>
 )
 
 export const PasswordResetRedirectButton = () => (
   <Button spacing={['xtight', 0]} {...appendTarget(PATHS.FORGET)}>
     <TextIcon color="green" weight="md">
-      <Translate id="forgetPassword" />？
+      <FormattedMessage
+        defaultMessage="Forget Password"
+        description="src/components/Forms/EmailLoginForm/Buttons.tsx"
+      />
     </TextIcon>
   </Button>
 )
@@ -35,13 +44,12 @@ export const EmailSignUpDialogButton = ({
   <Form.List spacing="xloose">
     <Form.List.Item
       title={
-        <Translate
-          zh_hant="沒有帳戶？"
-          zh_hans="沒有帐户？"
-          en="Not Registered?"
+        <FormattedMessage
+          defaultMessage="Not Registered?"
+          description="src/components/Forms/EmailLoginForm/Buttons.tsx"
         />
       }
-      rightText={<Translate id="register" />}
+      rightText={<FormattedMessage defaultMessage="Register" description="" />}
       rightTextColor="green"
       onClick={gotoEmailSignUp}
       role="button"