Merge pull request #3567 from thematters/develop

Release: v4.24.0

.github/workflows/deploy.yml

@@ -80,7 +80,7 @@ jobs:
 
       - name: Upload Assets (develop - R2)
         if: github.base_ref == 'develop'
-        uses: wei/rclone@v1
+        uses: andreiio/rclone-action@v1
         env:
           RCLONE_CONFIG_R2_TYPE: s3
           RCLONE_CONFIG_R2_PROVIDER: Cloudflare
@@ -107,7 +107,7 @@ jobs:
 
       - name: Upload Assets (production - R2)
         if: github.base_ref == 'master'
-        uses: wei/rclone@v1
+        uses: andreiio/rclone-action@v1
         env:
           RCLONE_CONFIG_R2_TYPE: s3
           RCLONE_CONFIG_R2_PROVIDER: Cloudflare

next.config.js

@@ -60,12 +60,6 @@ const nextConfig = {
   reactStrictMode: true,
   compress: false,
   poweredByHeader: false,
-  i18n: {
-    locales: ['zh-Hant', 'zh-Hans', 'en', '__defaultLocale'],
-    // FIXME: Disable Next.js auto detection and prefixing since we have a fallback strategy based on user request and browser perference in `<LanguageContext>`
-    defaultLocale: '__defaultLocale',
-    localeDetection: false,
-  },
 }
 
 const withBundleAnalyzer = require('@next/bundle-analyzer')({

package.json

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

src/common/enums/csp.ts

@@ -67,11 +67,8 @@ const IMG_SRC = [
     site_domain_tld_old
   ),
 
-  // get server hostname, for img-cache redirected url
-  // NEXT_PUBLIC_API_HOSTNAME as string,
-  process.env.NEXT_PUBLIC_API_URL
-    ? new URL(process.env.NEXT_PUBLIC_API_URL).hostname
-    : undefined,
+  // Alchemy NFT CDN
+  'nft-cdn.alchemy.com',
 
   // for some old articles were using this s3 urls directly
   'matters-server-production.s3-ap-southeast-1.amazonaws.com',

src/common/enums/lang.ts

@@ -35,5 +35,3 @@ export const CONTENT_LANG_TEXT_MAP = {
     la: 'Latin',
   },
 }
-
-export const DEFAULT_LOCALE = '__defaultLocale'

src/common/utils/language.ts

@@ -25,12 +25,16 @@ export const toLocale = (lang: string) => {
   lang = lang.toLowerCase()
 
   // zh_hans
-  if (['zh-cn', 'zh-hans', 'zh_hans'].indexOf(lang) >= 0) {
+  if (['zh-cn', 'zh_cn', 'zh-hans', 'zh_hans'].indexOf(lang) >= 0) {
     return 'zh-Hans'
   }
 
   // zh_hant
-  if (['zh', 'zh-tw', 'zh-hk', 'zh-hant', 'zh_hant'].indexOf(lang) >= 0) {
+  if (
+    ['zh', 'zh_tw', 'zh-tw', 'zh_hk', 'zh-hk', 'zh-hant', 'zh_hant'].indexOf(
+      lang
+    ) >= 0
+  ) {
     return 'zh-Hant'
   }
 
@@ -41,3 +45,24 @@ export const toLocale = (lang: string) => {
 
   return ''
 }
+
+export const toOGLanguage = (lang: string) => {
+  lang = lang.toLowerCase()
+
+  // zh_hans
+  if (['zh-cn', 'zh-hans', 'zh_hans'].indexOf(lang) >= 0) {
+    return 'zh_CN'
+  }
+
+  // zh_hant
+  if (['zh', 'zh-tw', 'zh-hk', 'zh-hant', 'zh_hant'].indexOf(lang) >= 0) {
+    return 'zh_TW'
+  }
+
+  // en
+  if (['en', 'en-us', 'en-au', 'en-za', 'en-gb'].indexOf(lang) >= 0) {
+    return 'en'
+  }
+
+  return ''
+}

src/common/utils/withApollo.ts

@@ -83,6 +83,7 @@ const httpLink = ({ host, headers }: { host: string; headers: any }) => {
     headers: {
       ...headers,
       host: hostname,
+      'Apollo-Require-Preflight': 'true',
     },
     fetchOptions: {
       agent,

src/components/Avatar/styles.module.css

@@ -164,7 +164,7 @@
 
 .ring {
   &.civicLiker {
-    background-image: var(--avatar-ring-civic-ciker);
+    background-image: var(--avatar-ring-civic-liker);
   }
 
   &.architect {

src/components/Context/Language/LanguageContext.tsx

@@ -1,15 +1,15 @@
 import gql from 'graphql-tag'
-import { useRouter } from 'next/router'
 import { createContext, useContext, useState } from 'react'
 
-import { ADD_TOAST, COOKIE_LANGUAGE, DEFAULT_LOCALE } from '~/common/enums'
+import { ADD_TOAST, COOKIE_LANGUAGE } from '~/common/enums'
 import {
   getCookie,
   getIsomorphicCookie,
   setCookies,
+  toLocale,
   toUserLanguage,
 } from '~/common/utils'
-import { Translate, useMutation, ViewerContext } from '~/components'
+import { Translate, useMutation, useRoute, ViewerContext } from '~/components'
 import { UpdateLanguageMutation, UserLanguage } from '~/gql/graphql'
 
 const UPDATE_VIEWER_LANGUAGE = gql`
@@ -49,11 +49,7 @@ export const LanguageProvider = ({
   const viewerLang = viewer.isAuthed ? viewer.settings.language : ''
 
   // read from URL subpath
-  const router = useRouter()
-  const routerLang =
-    router.locale && router.locale !== DEFAULT_LOCALE
-      ? toUserLanguage(router.locale)
-      : ''
+  const { routerLang } = useRoute()
 
   // read from cookie (both server-side and client-side)
   let cookieLang = getIsomorphicCookie(headers?.cookie, COOKIE_LANGUAGE)
@@ -85,8 +81,16 @@ export const LanguageProvider = ({
   const setLang = async (language: UserLanguage) => {
     // update local cookie
     setCookies({ [COOKIE_LANGUAGE]: language })
+
     // update local cache
     setLocalLang(language)
+
+    // update <html lang> attribute
+    const html = document.querySelector('html')
+    if (html) {
+      html.setAttribute('lang', toLocale(language))
+    }
+
     // anonymous
     if (!viewer.isAuthed) {
       return

src/components/Dialogs/ShareDialog/Content.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames'
 
 import { TextId } from '~/common/enums'
-import { toLocale } from '~/common/utils'
 import { Dialog, ShareButtons, Translate } from '~/components'
 
 import Copy from './Copy'
@@ -31,9 +30,7 @@ const ShareDialogContent: React.FC<ShareDialogContentProps> = ({
   footerButtons,
 }) => {
   const url = new URL(shareLink)
-  const pathnames = url.pathname.split('/')
-  const showTranslation = toLocale(pathnames[1]) !== ''
-  if (showTranslation) {
+  if (url.searchParams.get('locale')) {
     description = (
       <Translate
         zh_hant="分享這篇文章的翻譯版本"

src/components/Forms/PaymentForm/AddCredit/index.tsx

@@ -34,7 +34,11 @@ import {
   useMutation,
 } from '~/components'
 import WALLET_BALANCE from '~/components/GQL/queries/walletBalance'
-import { AddCreditMutation, WalletBalanceQuery } from '~/gql/graphql'
+import {
+  AddCreditMutation,
+  UserLanguage,
+  WalletBalanceQuery,
+} from '~/gql/graphql'
 
 import ConfirmTable from '../ConfirmTable'
 import StripeCheckout from '../StripeCheckout'
@@ -296,7 +300,7 @@ const AddCreditForm: React.FC<FormProps> = (props) => {
   return (
     <Elements
       stripe={stripePromise}
-      options={{ locale: lang === 'zh_hans' ? 'zh' : 'en' }}
+      options={{ locale: lang === UserLanguage.ZhHans ? 'zh' : 'en' }}
     >
       <BaseAddCredit {...props} />
     </Elements>

src/components/Forms/PaymentForm/SubscribeCircle/CardPayment.tsx

@@ -22,6 +22,7 @@ import {
   DigestRichCirclePrivateFragment,
   DigestRichCirclePublicFragment,
   SubscribeCircleMutation,
+  UserLanguage,
 } from '~/gql/graphql'
 
 import StripeCheckout from '../StripeCheckout'
@@ -180,7 +181,7 @@ const CardPayment: React.FC<CardPaymentProps> = (props) => {
   return (
     <Elements
       stripe={stripePromise}
-      options={{ locale: lang === 'zh_hans' ? 'zh' : 'en' }}
+      options={{ locale: lang === UserLanguage.ZhHans ? 'zh' : 'en' }}
     >
       <BaseCardPayment {...props} />
     </Elements>

src/components/Head/index.tsx

@@ -6,7 +6,12 @@ import IMAGE_FAVICON_16 from '@/public/static/favicon-16x16.png'
 import IMAGE_FAVICON_32 from '@/public/static/favicon-32x32.png'
 import IMAGE_FAVICON_64 from '@/public/static/favicon-64x64.png'
 import IMAGE_INTRO from '@/public/static/images/intro.jpg'
-import { toLocale, translate, TranslateArgs } from '~/common/utils'
+import {
+  toLocale,
+  toOGLanguage,
+  translate,
+  TranslateArgs,
+} from '~/common/utils'
 import { LanguageContext, useRoute } from '~/components'
 import { UserLanguage } from '~/gql/graphql'
 
@@ -58,8 +63,8 @@ export const Head: React.FC<HeadProps> = (props) => {
 
   const i18nUrl = (language: string) => {
     return props.path
-      ? `https://${siteDomain}/${language}${props.path}`
-      : `https://${siteDomain}/${language}${router.asPath || '/'}`
+      ? `https://${siteDomain}/${props.path}?locale=${language}`
+      : `https://${siteDomain}/${router.asPath || '/'}?locale=${language}`
   }
 
   if (props.jsonLdData && !props.jsonLdData.description) {
@@ -134,6 +139,7 @@ export const Head: React.FC<HeadProps> = (props) => {
         key="og:description"
         content={head.description}
       />
+      <meta property="og:locale" key="og:locale" content={toOGLanguage(lang)} />
       <meta name="twitter:url" key="twitter:url" content={head.url} />
       <meta
         name="twitter:card"

src/components/Hook/useRoute.ts

@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router'
 
 import { PATHS } from '~/common/enums'
+import { toUserLanguage } from '~/common/utils'
+import { UserLanguage } from '~/gql/graphql'
 
 /**
  * Utilities for route
@@ -19,6 +21,7 @@ type QueryKey =
   | 'q'
   | 'type'
   | 'provider'
+  | 'locale'
   | string
 
 export const useRoute = () => {
@@ -59,5 +62,17 @@ export const useRoute = () => {
     router.replace({ query })
   }
 
-  return { isInPath, isPathStartWith, getQuery, setQuery, replaceQuery, router }
+  // i18n
+  const locale = getQuery('locale')
+  const routerLang = toUserLanguage(locale) as UserLanguage
+
+  return {
+    isInPath,
+    isPathStartWith,
+    getQuery,
+    setQuery,
+    replaceQuery,
+    router,
+    routerLang,
+  }
 }

src/components/Layout/SideNav/Items.tsx

@@ -0,0 +1,60 @@
+import { FormattedMessage } from 'react-intl'
+
+import { PATHS } from '~/common/enums'
+import { toPath } from '~/common/utils'
+import {
+  IconNavHome32,
+  IconNavHomeActive32,
+  IconNavSearch32,
+  IconNavSearchActive32,
+  useRoute,
+} from '~/components'
+
+import NavListItem from './NavListItem'
+
+export const NavListItemHome = ({ isMdUp }: { isMdUp: boolean }) => {
+  const { isInPath } = useRoute()
+  const isInHome = isInPath('HOME')
+
+  return (
+    <NavListItem
+      name={<FormattedMessage defaultMessage="Discover" description="" />}
+      icon={<IconNavHome32 size="lg" />}
+      activeIcon={<IconNavHomeActive32 size="lg" />}
+      active={isInHome}
+      href={PATHS.HOME}
+      isMdUp={isMdUp}
+    />
+  )
+}
+
+export const NavListItemSearch = ({ isMdUp }: { isMdUp: boolean }) => {
+  const { isInPath, router } = useRoute()
+  const isInSearch = isInPath('SEARCH')
+
+  return (
+    <NavListItem
+      name={<FormattedMessage defaultMessage="Search" description="" />}
+      icon={<IconNavSearch32 size="lg" />}
+      activeIcon={<IconNavSearchActive32 size="lg" />}
+      active={isInSearch}
+      href={PATHS.SEARCH}
+      onClick={(e) => {
+        e?.preventDefault()
+
+        const path = toPath({
+          page: 'search',
+        })
+
+        if (isInSearch) {
+          router.replace(path.href)
+        } else {
+          router.push(path.href)
+        }
+
+        return false
+      }}
+      isMdUp={isMdUp}
+    />
+  )
+}