From 73783f7841abc91570ba956ee29f416078f28fc7 Mon Sep 17 00:00:00 2001
From: Tai-Jiun Fang <taylorfang@twreporter.org>
Date: Fri, 29 Jul 2022 20:09:06 +0800
Subject: [PATCH] feat(react-components): add NotoSansTC fontface

This change adds get-fontfaces utility function to get the fontfaces by
font-family and font-weight specified in @twreporter/core.
---
 .../src/text/utils/get-fontfaces.js           | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 packages/react-components/src/text/utils/get-fontfaces.js

diff --git a/packages/react-components/src/text/utils/get-fontfaces.js b/packages/react-components/src/text/utils/get-fontfaces.js
new file mode 100644
index 000000000..2824f32d1
--- /dev/null
+++ b/packages/react-components/src/text/utils/get-fontfaces.js
@@ -0,0 +1,44 @@
+import { fonts, fontWeight } from '@twreporter/core/lib/constants/font'
+// lodash
+import keys from 'lodash/keys'
+import reduce from 'lodash/reduce'
+
+const _ = {
+  keys,
+  reduce,
+}
+
+const baseGCSDir = 'https://www.twreporter.org/assets/font/'
+
+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}.otf");
+    }
+  `
+  return _.reduce(
+    fontWeightKeys,
+    (fontFaces, fontWeightKey) => {
+      return fontFaces + fontFaceCSSTemplate({ fontWeightKey })
+    },
+    ''
+  )
+}
+
+export default {
+  [fonts.notoSansTC]: getFontFaces({
+    font: fonts.notoSansTC,
+    folder: gcsFontFolder[fonts.notoSansTC],
+  }),
+}