feat(jupyter): add fonts as assets to service (kubeflow/kubeflow#5691)

* cwa(front): Ignore font files in assets

* feat(jupyter): add fonts as assets to service

* CRUD: fonts in common

* CWA: Remove link to css file

* jwa(front): Remove font assets from jupyter

Co-authored-by: Wendy Gaultier <wvgaultier@gmail.com>

components/crud-web-apps/common/frontend/kubeflow-common-lib/package.json

@@ -9,7 +9,7 @@
     "test-ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "copyCSS": "cp ./projects/kubeflow/src/kubeflow.css ./dist/kubeflow && cp ./projects/kubeflow/src/styles.scss ./dist/kubeflow && cp ./projects/kubeflow/src/lib/variables.scss ./dist/kubeflow/lib",
+    "copyCSS": "cp ./projects/kubeflow/src/kubeflow.css ./dist/kubeflow && cp ./projects/kubeflow/src/styles.scss ./dist/kubeflow && cp ./projects/kubeflow/src/lib/variables.scss ./dist/kubeflow/lib && cp ./projects/kubeflow/src/lib/fonts.scss ./dist/kubeflow/lib",
     "copyAssets": "cp -r ./projects/kubeflow/src/assets ./dist/kubeflow/assets"
   },
   "private": true,

components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/lib/fonts.scss

@@ -0,0 +1,168 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-cyrillicext-normal300.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-cyrillic-normal300.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-greekext-normal300.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-greek-normal300.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-vietnamese-normal300.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-latinext-normal300.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('assets/fonts/roboto-latin-normal300.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-cyrillicext-normal400.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-cyrillic-normal400.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-greekext-normal400.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-greek-normal400.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-vietnamese-normal400.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-latinext-normal400.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('assets/fonts/roboto-latin-normal400.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-cyrillicext-normal500.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-cyrillic-normal500.woff2') format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-greekext-normal500.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-greek-normal500.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-vietnamese-normal500.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-latinext-normal500.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('assets/fonts/roboto-latin-normal500.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

components/crud-web-apps/jupyter/frontend/.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 
 # Rok files
 **/browse-in-rok*
+
+# Fonts Files
+/src/assets/fonts

components/crud-web-apps/jupyter/frontend/package.json

@@ -7,7 +7,7 @@
     "build": "npm run copyLibAssets && ng build --prod --base-href /jupyter/ --deploy-url /jupyter/static/",
     "build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
     "build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/rok/static/ --outputHashing all --configuration=rok",
-    "copyLibAssets": "cp ./node_modules/kubeflow/assets/* ./src/assets/",
+    "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
     "format:check": "prettier --check 'src/**/*.{js,ts,html,scss,css}' || node scripts/check-format-error.js",
     "format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",
     "test": "ng test",

components/crud-web-apps/jupyter/frontend/src/index.html

@@ -6,10 +6,6 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
-      rel="stylesheet"
-    />
     <script defer src="/dashboard_lib.bundle.js"></script>
   </head>
   <body>

components/crud-web-apps/jupyter/frontend/src/styles.scss

@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~kubeflow/styles.scss';
+@import '~kubeflow/lib/fonts.scss';
 
 // Give some space after each input
 mat-form-field {

components/crud-web-apps/tensorboards/frontend/.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 
 # Rok files
 **/browse-in-rok*
+
+# Fonts Files
+/src/assets/fonts

components/crud-web-apps/tensorboards/frontend/package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "build": "npm run copyLibAssets && ng build --prod --base-href /tensorboards/ --deploy-url static/",
     "build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/app/static/ --outputHashing all",
-    "copyLibAssets": "cp ./node_modules/kubeflow/assets/* ./src/assets/",
+    "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

components/crud-web-apps/tensorboards/frontend/src/index.html

@@ -6,10 +6,6 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
-      rel="stylesheet"
-    />
     <script defer src="/dashboard_lib.bundle.js"></script>
   </head>
   <body>

components/crud-web-apps/tensorboards/frontend/src/styles.scss

@@ -1,2 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~kubeflow/styles.scss';
+@import '~kubeflow/lib/fonts.scss';

components/crud-web-apps/volumes/frontend/.gitignore

@@ -49,3 +49,6 @@ Thumbs.db
 **/browse-in-rok-gray.svg
 **/browse-in-rok-grey.svg
 **/browse-in-rok-blue.svg
+
+# Fonts Files
+/src/assets/fonts

components/crud-web-apps/volumes/frontend/package.json

@@ -6,7 +6,7 @@
     "build": "npm run copyLibAssets && ng build --prod --base-href /volumes/ --deploy-url static/",
     "build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
     "build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --configuration=rok --outputPath ../backend/apps/rok/static/ --outputHashing all",
-    "copyLibAssets": "cp ./node_modules/kubeflow/assets/* ./src/assets/",
+    "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
     "format:check": "prettier --check 'src/**/*.{js,ts,html,scss,css}' || node scripts/check-format-error.js",
     "format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",
     "test": "ng test",

components/crud-web-apps/volumes/frontend/src/index.html

@@ -6,10 +6,6 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
-      rel="stylesheet"
-    />
     <script defer src="/dashboard_lib.bundle.js"></script>
   </head>
   <body>

components/crud-web-apps/volumes/frontend/src/styles.scss

@@ -1,2 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~kubeflow/styles.scss';
+@import '~kubeflow/lib/fonts.scss';