Merge pull request #3489 from thematters/develop

Release: v4.22.1

lang/default.json

@@ -167,6 +167,10 @@
     "defaultMessage": "Next Step",
     "description": ""
   },
+  "8w3GEA": {
+    "defaultMessage": "mentioned you in {article}",
+    "description": "src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
+  },
   "8xPi0N": {
     "defaultMessage": "Unsubscribe Circle",
     "description": "src/views/Circle/Profile/DropdownActions/index.tsx"
@@ -567,10 +571,6 @@
     "defaultMessage": "The original login via email will be kept for you. Please note that your wallet cannot be reset once it is connected because of your account security.",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
   },
-  "UgvfcU": {
-    "defaultMessage": "You have successfully completed Ethereum wallet settings. Please confirm wallet address:",
-    "description": "src/components/Notice/CryptoNotice/CryptoWalletConnectedNotice.tsx"
-  },
   "UjKkhq": {
     "defaultMessage": "Tags added",
     "description": "src/views/TagDetail/DropdownActions/index.tsx"
@@ -1007,10 +1007,6 @@
     "defaultMessage": "Circle Name",
     "description": ""
   },
-  "qQmSxu": {
-    "defaultMessage": "Airdrop registration completed. Your NFT will be revealed on November 12. Confirm your ETH wallet address:",
-    "description": "src/components/Notice/CryptoNotice/CryptoWalletAirdropNotice.tsx"
-  },
   "qYzBk8": {
     "defaultMessage": "unsubscribed your circle",
     "description": "src/components/Notice/CircleNotice/CircleNewUserNotice.tsx"
@@ -1063,10 +1059,6 @@
     "defaultMessage": "Log in",
     "description": "src/components/Buttons/Login/index.tsx"
   },
-  "sncOwi": {
-    "defaultMessage": "mentioned you in an article",
-    "description": "src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
-  },
   "stjoBH": {
     "defaultMessage": "Now, go like the authors you support! Your Likes will become their income",
     "description": "src/components/Forms/EmailSignUpForm/Complete.tsx"

lang/en.json

@@ -423,8 +423,8 @@
     "defaultMessage": "Your work {articleTitle} has been published to decentralized network",
     "description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx"
   },
-  "sncOwi": {
-    "defaultMessage": " mentioned you in an article",
+  "8w3GEA": {
+    "defaultMessage": "mentioned you in {article}",
     "description": "src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
   },
   "CD688y": {
@@ -435,7 +435,7 @@
     "defaultMessage": "etc. {actorsCount} users",
     "description": "src/components/Notice/ArticleNotice/ArticleNewSubscriberNotice.tsx"
   },
-  "PjT72J": {
+  "p5qZnJ": {
     "defaultMessage": "liked",
     "description": "src/components/Notice/ArticleNotice/ArticleNewAppreciationNotice.tsx"
   },

lang/zh-Hans.json

@@ -1107,8 +1107,8 @@
     "defaultMessage": "登入",
     "description": "src/components/Buttons/Login/index.tsx"
   },
-  "sncOwi": {
-    "defaultMessage": " 在作品中提及你",
+  "8w3GEA": {
+    "defaultMessage": "在作品 {article} 中提及你",
     "description": "src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
   },
   "stjoBH": {

lang/zh-Hant.json

@@ -1111,8 +1111,8 @@
     "defaultMessage": "登录",
     "description": "src/components/Buttons/Login/index.tsx"
   },
-  "sncOwi": {
-    "defaultMessage": " 在作品中提及你",
+  "8w3GEA": {
+    "defaultMessage": "在作品 {article} 中提及你",
     "description": "src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
   },
   "stjoBH": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

src/common/gql/fragmentTypes.json

@@ -19,7 +19,6 @@
           { "name": "TagNotice" },
           { "name": "TransactionNotice" },
           { "name": "CircleNotice" },
-          { "name": "CryptoNotice" },
           { "name": "OfficialAnnouncementNotice" }
         ]
       },

src/common/styles/variables/typography.css

@@ -3,11 +3,11 @@
 :root {
   /* Font Stack */
   --font-sans-tc: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
-    'Segoe UI', roboto, arial, 'PingFang TC', 'Microsoft YaHei',
-    'Source Han Sans TC', 'Noto Sans CJK TC', 'WenQuanYi Micro Hei', sans-serif;
+    'Segoe UI', roboto, arial, 'PingFang TC', 'Source Han Sans TC',
+    'Noto Sans CJK TC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
   --font-sans-sc: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
-    'Segoe UI', roboto, arial, 'PingFang SC', 'Microsoft YaHei',
-    'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+    'Segoe UI', roboto, arial, 'PingFang SC', 'Source Han Sans SC',
+    'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
   --font-serif-tc: 'Noto Serif', 'Noto Serif CJK TC', 'Source Han Serif TC',
     'Songti TC', serif;
   --font-serif-sc: 'Noto Serif', 'Noto Serif CJK SC', 'Source Han Serif SC',

src/components/DateTime/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React, { useContext } from 'react'
 
 import { datetimeFormat } from '~/common/utils'
@@ -7,6 +8,7 @@ import styles from './styles.css'
 
 interface DateTimeProps {
   date: Date | string | number
+  color?: 'grey' | 'grey-dark'
   type?: 'absolute' | 'relative' | 'standard'
 }
 
@@ -26,11 +28,18 @@ interface DateTimeProps {
  * ```
  */
 
-const BaseDateTime = ({ date, type = 'absolute' }: DateTimeProps) => {
+const BaseDateTime = ({
+  date,
+  type = 'absolute',
+  color = 'grey-dark',
+}: DateTimeProps) => {
   const { lang } = useContext(LanguageContext)
+  const timeclasses = classNames({
+    [color || '']: !!color,
+  })
 
   return (
-    <time dateTime={new Date(date).toISOString()}>
+    <time dateTime={new Date(date).toISOString()} className={timeclasses}>
       {datetimeFormat[type](date, lang)}
 
       <style jsx>{styles}</style>

src/components/DateTime/styles.css

@@ -5,3 +5,11 @@ time {
   color: var(--color-grey-dark);
   white-space: nowrap;
 }
+
+.grey {
+  color: var(--color-grey);
+}
+
+.grey-dark {
+  color: var(--color-grey-dark);
+}

src/components/Head/index.tsx

@@ -49,7 +49,7 @@ export const Head: React.FC<HeadProps> = (props) => {
       ? `${props.keywords.join(',')},matters,${
           process.env.NEXT_PUBLIC_SITE_DOMAIN
         },創作有價`
-      : 'matters,${process.env.NEXT_PUBLIC_SITE_DOMAIN},創作有價',
+      : `matters,${process.env.NEXT_PUBLIC_SITE_DOMAIN},創作有價`,
     url: props.path
       ? `https://${siteDomain}${props.path}`
       : `https://${siteDomain}${router.asPath || '/'}`,
@@ -66,7 +66,7 @@ export const Head: React.FC<HeadProps> = (props) => {
     props.jsonLdData.description = head.description
   }
 
-  const canonicalUrl = head.url?.split('?')[0]
+  const canonicalUrl = head.url?.split('#')[0].split('?')[0]
 
   return (
     <NextHead>
@@ -107,7 +107,9 @@ export const Head: React.FC<HeadProps> = (props) => {
         type="application/opensearchdescription+xml"
         key="opensearch"
       />
-      <link rel="canonical" href={canonicalUrl} key="canonical" />
+      {props.path && (
+        <link rel="canonical" href={canonicalUrl} key="canonical" />
+      )}
       {props.paymentPointer && (
         <meta name="monetization" content={props.paymentPointer} />
       )}

src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx

@@ -7,46 +7,29 @@ import { ArticleMentionedYouNoticeFragment } from '~/gql/graphql'
 import NoticeActorAvatar from '../NoticeActorAvatar'
 import NoticeActorName from '../NoticeActorName'
 import NoticeArticleCard from '../NoticeArticleCard'
+import NoticeArticleTitle from '../NoticeArticleTitle'
 import NoticeDate from '../NoticeDate'
-import NoticeHead from '../NoticeHead'
-import styles from '../styles.css'
+import NoticeDigest from '../NoticeDigest'
 
 const ArticleMentionedYouNotice = ({
   notice,
 }: {
   notice: ArticleMentionedYouNoticeFragment
 }) => {
-  if (!notice.actors) {
-    return null
-  }
-
-  const actor = notice.actors[0]
-
   return (
-    <section
-      className="container"
-      data-test-id={TEST_ID.NOTICE_ARTICLE_MENTIONED_YOU}
-    >
-      <section className="avatar-wrap">
-        <NoticeActorAvatar user={actor} />
-      </section>
-
-      <section className="content-wrap">
-        <NoticeHead>
-          <NoticeActorName user={actor} />
-          <FormattedMessage
-            defaultMessage="mentioned you in an article"
-            description="src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
-          />
-        </NoticeHead>
-
-        <NoticeArticleCard article={notice.article} />
-
-        <NoticeDate notice={notice} />
-      </section>
-
-      <style jsx>{styles}</style>
-    </section>
+    <NoticeDigest
+      notice={notice}
+      action={
+        <FormattedMessage
+          defaultMessage="mentioned you in {article}"
+          description="src/components/Notice/ArticleNotice/ArticleMentionedYouNotice.tsx"
+          values={{
+            article: <NoticeArticleTitle article={notice.article} />,
+          }}
+        />
+      }
+      testId={TEST_ID.NOTICE_ARTICLE_MENTIONED_YOU}
+    />
   )
 }