Merge pull request #300 from twreporter/master

chore: release

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+
+### Features
+
+* **core:** add `defaultFallback` font-family into font ([c7a84a2](https://github.com/twreporter/twreporter-npm-packages/commit/c7a84a23f1bf001717dbf0c7be7711f132dc9b93))
+* **core:** export fonts as a constant ([c9c9cdc](https://github.com/twreporter/twreporter-npm-packages/commit/c9c9cdcb3a0c7b3368d56d09ea73780533ff9ab7))
+
+
+
+
+
 ## [1.4.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-09)
 
 **Note:** Version bump only for package @twreporter/core

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/core",
-  "version": "1.4.2",
+  "version": "1.5.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <[email protected]>",

packages/core/src/constants/font.js

@@ -1,14 +1,32 @@
+const merriweather = 'merriweather'
+const notoSerifTC = 'Noto Serif TC'
+const serif = 'serif'
+const rosario = 'rosario'
+const notoSansTC = 'Noto Sans TC'
+const sansSerif = 'sans-serif'
+
+const fonts = {
+  merriweather,
+  notoSerifTC,
+  serif,
+  rosario,
+  notoSansTC,
+  sansSerif,
+}
+
 const fontWeight = {
   extraLight: '100',
   normal: '400',
   bold: '700',
 }
 
 const fontFamily = {
-  title: 'merriweather, Noto Serif TC, serif',
-  default: 'rosario, Noto Sans TC, sans-serif',
+  title: `${merriweather}, ${notoSerifTC}, ${serif}`,
+  default: `${rosario}, ${notoSansTC}, ${sansSerif}`,
+  // use defaultFallback before ${notoSansTC} is fully loaded
+  defaultFallback: `${rosario}, ${sansSerif}`,
 }
 
-export default { fontWeight, fontFamily }
+export default { fonts, fontWeight, fontFamily }
 
-export { fontWeight, fontFamily }
+export { fonts, fontWeight, fontFamily }

packages/index-page/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.3.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
 ## [1.3.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-09)
 
 **Note:** Version bump only for package @twreporter/index-page

packages/index-page/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "1.3.1",
+  "version": "1.3.2-rc.1",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <[email protected]>",
@@ -12,8 +12,8 @@
     "prepublishOnly": "make build"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.2",
-    "@twreporter/react-components": "^8.11.1",
+    "@twreporter/core": "^1.5.0-rc.0",
+    "@twreporter/react-components": "^8.12.0-rc.1",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",

packages/react-article-components/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.3-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.6.3-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.6.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-09)
 
 **Note:** Version bump only for package @twreporter/react-article-components

packages/react-article-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.2",
+  "version": "1.6.3-rc.1",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.2",
-    "@twreporter/react-components": "^8.11.1",
+    "@twreporter/core": "^1.5.0-rc.0",
+    "@twreporter/react-components": "^8.12.0-rc.1",
     "@twreporter/redux": "^7.2.2",
-    "@twreporter/universal-header": "^2.2.12",
+    "@twreporter/universal-header": "^2.2.13-rc.1",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",

packages/react-article-components/src/components/article-page.js

@@ -17,7 +17,6 @@ import Tools from './aside/desktop-tools'
 // constants
 import themeConst from '../constants/theme'
 import colorConst from '../constants/color'
-import typography from '../constants/typography'
 import { RELATED_POST_ANCHOR_ID } from '../constants/anchor'
 // @twreporter
 import mq from '@twreporter/core/lib/utils/media-query'
@@ -29,10 +28,6 @@ const _ = {
   get,
 }
 
-const fontFamilyCss = css`
-  font-family: ${typography.font.family.default};
-`
-
 const shiftLeftCss = css`
   position: relative;
   /* 20px is border-(right|left) width of articlePage */
@@ -181,7 +176,6 @@ const RelatedBlock = styled.div`
 `
 
 const BackgroundBlock = styled(BorderBox)`
-  ${fontFamilyCss}
   ${props => getBackgroundBlockStyles(props.theme.name)}
 
   @media print {

packages/react-components/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.12.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+
+### Bug Fixes
+
+* add releaseBranch props for icon component ([bad00f5](https://github.com/twreporter/twreporter-npm-packages/commit/bad00f59878b08d15d52a58ac876f1fb210d101b))
+* address code review ([13aad8e](https://github.com/twreporter/twreporter-npm-packages/commit/13aad8ec84d702af53be830d1ecdb482c15efd3a))
+* remove DesktopTab in TitleTab component ([cde0983](https://github.com/twreporter/twreporter-npm-packages/commit/cde098305d6bdf9ebe847aebf9d70f253520608c))
+
+
+### Features
+
+* add title bar component for design guideline ([b96bdde](https://github.com/twreporter/twreporter-npm-packages/commit/b96bdde414bf068eb9521a627ce0414eb95867e2))
+
+
+
+
+
+# [8.12.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-10)
+
+
+### Bug Fixes
+
+* **react-components:** add callback as dep of use-font-observer-hook ([9f91ce9](https://github.com/twreporter/twreporter-npm-packages/commit/9f91ce928b0e94c8b29600f44438ea37f45e5c03))
+
+
+### Features
+
+* **react-components:** add NotoSansTC fontface ([046cdb5](https://github.com/twreporter/twreporter-npm-packages/commit/046cdb501b5133fb120cf66401929145ad2c79da))
+* **react-components:** add use-font-face-observer hook ([f2ffa6d](https://github.com/twreporter/twreporter-npm-packages/commit/f2ffa6d9215737046d246aa34dd468a2ff0d15f2))
+* **react-components:** export font files as `fontGCSFiles` ([a8b940c](https://github.com/twreporter/twreporter-npm-packages/commit/a8b940c796dc039cb769f09b8d6bcc0002a22bcf))
+
+
+
+
+
 ## [8.11.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/[email protected]...@twreporter/[email protected]) (2022-08-09)
 
 **Note:** Version bump only for package @twreporter/react-components

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.11.1",
+  "version": "8.12.0-rc.1",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <[email protected]>",
@@ -15,8 +15,9 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.2",
+    "@twreporter/core": "^1.5.0-rc.0",
     "@twreporter/redux": "^7.2.2",
+    "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
     "memoize-one": "^5.0.5",

packages/react-components/src/customized-link.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+const CustomizedLink = ({ isExternal, to, ...rest }) => {
+  if (isExternal) {
+    return <a href={to} {...rest} />
+  }
+  return <Link to={to} {...rest} />
+}
+
+CustomizedLink.propTypes = {
+  isExternal: PropTypes.bool,
+  to: PropTypes.string,
+}
+
+CustomizedLink.defaultProps = {
+  isExternal: true,
+  to: '',
+}
+
+export default CustomizedLink

packages/react-components/src/hook/index.js

@@ -1,7 +1,9 @@
 import useOutsideClick from './use-outside-click'
+import useFontFaceObserver from './use-font-face-observer'
 
-export { useOutsideClick }
+export { useOutsideClick, useFontFaceObserver }
 
 export default {
   useOutsideClick,
+  useFontFaceObserver,
 }

packages/react-components/src/hook/use-font-face-observer.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+import FontFaceObserver from 'fontfaceobserver-es'
+
+const useFontFaceObserver = (fontFaces = [], callback) => {
+  const [isResolved, setIsResolved] = useState(false)
+  const fontFacesString = JSON.stringify(fontFaces)
+
+  useEffect(() => {
+    const promises = JSON.parse(fontFacesString).map(
+      ({ family, weight, style, stretch }) =>
+        new FontFaceObserver(family, {
+          weight,
+          style,
+          stretch,
+        }).load('測試文字')
+    )
+
+    Promise.all(promises)
+      .then(() => {
+        if (typeof callback !== 'function') {
+          return
+        }
+        callback()
+        return setIsResolved(true)
+      })
+      .catch(e => {
+        // eslint-disable-next-line no-console
+        console.error(`An error occurred during font loading`)
+        console.log(e)
+      })
+  }, [fontFacesString, callback])
+
+  return isResolved
+}
+
+export default useFontFaceObserver

packages/react-components/src/text/utils/webfonts.js

@@ -0,0 +1,59 @@
+import { fonts, fontWeight } from '@twreporter/core/lib/constants/font'
+// lodash
+import forEach from 'lodash/forEach'
+import keys from 'lodash/keys'
+import reduce from 'lodash/reduce'
+
+const _ = {
+  forEach,
+  keys,
+  reduce,
+}
+
+const baseGCSDir = 'https://www.twreporter.org/assets/font/'
+const fileExt = '.woff2'
+
+const gcsFontFolder = {
+  [fonts.notoSansTC]: 'NotoSansTC',
+}
+
+const fontWeightKeys = _.keys(fontWeight)
+
+// add @font-face to global style to use self-hosted font for performance reasons, to be more precise please check the issue below:
+// https://twreporter-org.atlassian.net/browse/TWREPORTER-318?atlOrigin=eyJpIjoiNjg4OTQ2MWU2MGIxNGEzMGE0NDY2ZDNmZGRhOWExZDEiLCJwIjoiaiJ9
+const getFontFaces = ({ font, folder }) => {
+  const fontFaceCSSTemplate = ({ fontWeightKey }) => `
+    @font-face {
+      font-family: "${font}";
+      font-weight: ${fontWeight[fontWeightKey]};
+      font-display: swap;
+      src: url("${baseGCSDir}${folder}/${fontWeightKey}${fileExt}");
+    }
+  `
+  return _.reduce(
+    fontWeightKeys,
+    (fontFaces, fontWeightKey) => {
+      return fontFaces + fontFaceCSSTemplate({ fontWeightKey })
+    },
+    ''
+  )
+}
+
+const fontFaces = {
+  [fonts.notoSansTC]: getFontFaces({
+    font: fonts.notoSansTC,
+    folder: gcsFontFolder[fonts.notoSansTC],
+  }),
+}
+
+let fontGCSFiles = []
+
+_.forEach(fontFaces, function(fontFace, font) {
+  _.forEach(fontWeightKeys, fontWeightKey => {
+    fontGCSFiles.push(
+      `${baseGCSDir}${gcsFontFolder[font]}/${fontWeightKey}${fileExt}`
+    )
+  })
+})
+
+export default { fontFaces, fontGCSFiles }