refactor(workbench): change default icon font directory from /assets/…

…fonts to /fonts By default, Angular now creates a `public` folder instead of an `assets` folder. To conform to Angular's standards, we have changed the default directory for icon fonts. See angular/angular-cli@6530aa1 BREAKING CHANGE: The default icon font directory has changed from `/assets/fonts` to `/fonts`. To migrate: - Move the `fonts` folder from `/src/assets` to `/public`. - Include content of the `public` folder in angular.json: ```json "assets": [ { "glob": "**/*", "input": "public" } ] ``` - Alternatively, to not change the folder structure, you can configure a custom path to the icon font directory in your `styles.scss`: ```scss use '@scion/workbench' with ( $icon-font: ( directory: 'assets/fonts' ) ); ```
SchweizerischeBundesbahnen · Jun 13, 2024 · d347dae · d347dae
1 parent 33b91bc
commit d347dae
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 29 deletions.
diff --git a/angular.json b/angular.json
@@ -42,7 +42,7 @@
  {
  "glob": "scion-workbench-icons.*",
  "input": "resources/scion-workbench-icons/fonts",
- "output": "/assets/fonts"
+ "output": "/fonts"
  }
  ],
  "polyfills": [
@@ -137,7 +137,7 @@
  {
  "glob": "scion-workbench-icons.*",
  "input": "resources/scion-workbench-icons/fonts",
- "output": "/assets/fonts"
+ "output": "/fonts"
  }
  ],
  "styles": [
@@ -232,12 +232,12 @@
  {
  "glob": "scion-workbench-icons.*",
  "input": "resources/scion-workbench-icons/fonts",
- "output": "/assets/fonts"
+ "output": "/fonts"
  },
  {
  "glob": "scion-workbench-banner.svg",
  "input": "resources/branding",
- "output": "/assets"
+ "output": "/"
  }
  ],
  "styles": [
@@ -321,7 +321,7 @@
  "apps/workbench-testing-app/src/styles-base-href-esbuild.scss"
  ],
  "externalDependencies": [
- "assets/fonts/scion-workbench-icons.*"
+ "fonts/scion-workbench-icons.*"
  ]
  },
  "development": {
@@ -338,7 +338,7 @@
  "apps/workbench-testing-app/src/styles-base-href-esbuild.scss"
  ],
  "externalDependencies": [
- "assets/fonts/scion-workbench-icons.*"
+ "fonts/scion-workbench-icons.*"
  ]
  }
  },
@@ -369,12 +369,12 @@
  {
  "glob": "scion-workbench-icons.*",
  "input": "resources/scion-workbench-icons/fonts",
- "output": "/assets/fonts"
+ "output": "/fonts"
  },
  {
  "glob": "scion-workbench-banner.svg",
  "input": "resources/branding",
- "output": "/assets"
+ "output": "/"
  }
  ],
  "styles": [
@@ -472,7 +472,7 @@
  {
  "glob": "scion-workbench-banner.svg",
  "input": "resources/branding",
- "output": "/assets"
+ "output": "/"
  }
  ],
  "styles": [

diff --git a/...ting-app/public/assets/manifest-app1.json → ...ent-testing-app/public/manifest-app1.json b/...ting-app/public/assets/manifest-app1.json → ...ent-testing-app/public/manifest-app1.json
diff --git a/...ting-app/public/assets/manifest-app2.json → ...ent-testing-app/public/manifest-app2.json b/...ting-app/public/assets/manifest-app2.json → ...ent-testing-app/public/manifest-app2.json
diff --git a/apps/workbench-testing-app/src/app/start-page/start-page.component.html b/apps/workbench-testing-app/src/app/start-page/start-page.component.html
@@ -1,4 +1,4 @@
-<img src="assets/scion-workbench-banner.svg" alt="SCION Workbench" class="banner">
+<img src="scion-workbench-banner.svg" alt="SCION Workbench" class="banner">
 
 <span class="about" *ngIf="isWelcomePage()" ngPreserveWhitespaces>
 Welcome to the SCION Workbench Playground.

diff --git a/apps/workbench-testing-app/src/environments/environment.ci.ts b/apps/workbench-testing-app/src/environments/environment.ci.ts
@@ -20,8 +20,8 @@ const microfrontendPlatformConfig: MicrofrontendPlatformConfig = {
  manifest: workbenchManifest,
  },
  applications: [
- {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'http://localhost:4201/assets/manifest-app1.json', intentionRegisterApiDisabled: false},
- {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'http://localhost:4202/assets/manifest-app2.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'http://localhost:4201/manifest-app1.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'http://localhost:4202/manifest-app2.json', intentionRegisterApiDisabled: false},
  ],
 };
 

diff --git a/apps/workbench-testing-app/src/environments/environment.ts b/apps/workbench-testing-app/src/environments/environment.ts
@@ -29,8 +29,8 @@ const microfrontendPlatformConfig: MicrofrontendPlatformConfig = {
  manifest: workbenchManifest,
  },
  applications: [
- {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'http://localhost:4201/assets/manifest-app1.json', intentionRegisterApiDisabled: false},
- {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'http://localhost:4202/assets/manifest-app2.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'http://localhost:4201/manifest-app1.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'http://localhost:4202/manifest-app2.json', intentionRegisterApiDisabled: false},
  {symbolicName: 'devtools', manifestUrl: 'https://scion-microfrontend-platform-devtools-v1-3-0.vercel.app/assets/manifest.json', intentionCheckDisabled: true, scopeCheckDisabled: true},
  ],
 };

diff --git a/apps/workbench-testing-app/src/environments/environment.vercel.ts b/apps/workbench-testing-app/src/environments/environment.vercel.ts
@@ -20,8 +20,8 @@ const microfrontendPlatformConfig: MicrofrontendPlatformConfig = {
  manifest: workbenchManifest,
  },
  applications: [
- {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'https://scion-workbench-client-testing-app1.vercel.app/assets/manifest-app1.json', intentionRegisterApiDisabled: false},
- {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'https://scion-workbench-client-testing-app2.vercel.app/assets/manifest-app2.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app1', manifestUrl: 'https://scion-workbench-client-testing-app1.vercel.app/manifest-app1.json', intentionRegisterApiDisabled: false},
+ {symbolicName: 'workbench-client-testing-app2', manifestUrl: 'https://scion-workbench-client-testing-app2.vercel.app/manifest-app2.json', intentionRegisterApiDisabled: false},
  {symbolicName: 'devtools', manifestUrl: 'https://scion-microfrontend-platform-devtools-v1-3-0.vercel.app/assets/manifest.json', intentionCheckDisabled: true, scopeCheckDisabled: true},
  ],
 };

diff --git a/apps/workbench-testing-app/src/styles-base-href-esbuild.scss b/apps/workbench-testing-app/src/styles-base-href-esbuild.scss
@@ -1,6 +1,6 @@
 @use '@scion/workbench' with (
  $icon-font: (
- directory: 'assets/fonts'
+ directory: 'fonts'
  )
 );
 @use './styles';
diff --git a/apps/workbench-testing-app/src/styles-base-href-webpack.scss b/apps/workbench-testing-app/src/styles-base-href-webpack.scss
@@ -1,7 +1,7 @@
 // TODO [Angular 19] remove this file and build targets `workbench-testing-app:build-basehref-webpack` and `workbench-testing-app:serve:development-basehref-webpack` when `@angular-devkit/build-angular:browser` builder is deprecated
 @use '@scion/workbench' with (
  $icon-font: (
- directory: '^assets/fonts'
+ directory: '^fonts'
  )
 );
 @use './styles';
diff --git a/docs/site/getting-started.md b/docs/site/getting-started.md
@@ -91,7 +91,7 @@ The workbench requires some styles to be imported into `styles.scss`, as follows
 @use '@scion/workbench';
 ``` 
 
-Also, download the workbench icon font from <a href="https://github.com/SchweizerischeBundesbahnen/scion-workbench/raw/master/resources/scion-workbench-icons/fonts/fonts.zip">GitHub</a>, unzip the font files, and place the extracted files in the `assets/fonts` folder.
+Also, download the workbench icon font from <a href="https://github.com/SchweizerischeBundesbahnen/scion-workbench/raw/master/resources/scion-workbench-icons/fonts/fonts.zip">GitHub</a>, unzip the font files, and place the extracted files in the `/public/fonts` folder.
 
 </details>
 

diff --git a/docs/site/howto/how-to-icons.md b/docs/site/howto/how-to-icons.md
@@ -8,7 +8,7 @@
 The SCION Workbench requires some icons packed as icon font.
 
 ### Installation
-The icon font can be downloaded from [GitHub][icon-font]. Unzip the icon font and place the extracted font files in the `/assets/fonts` folder.
+The icon font can be downloaded from [GitHub][icon-font]. Unzip the icon font and place the extracted font files in the `/public/fonts` folder.
 
 ### Workbench icons
 The workbench requires the following icons with the following ligatures:
@@ -27,14 +27,14 @@ The location of the icon font can be configured via the SCSS module `@scion/work
 ```scss
 @use '@scion/workbench' with (
  $icon-font: (
- directory: '/path/to/font', // defaults to '/assets/fonts' if omitted
+ directory: '/path/to/font', // defaults to '/fonts' if omitted
  filename: 'custom-workbench-icons' // defaults to 'scion-workbench-icons' if omitted
  )
 );
 ```
 
 ### How to change icons
-The icons can be replaced using the [IcoMoon][ico-moon] web application. Open [IcoMoon][ico-moon] in your browser and import the icon font definition from [scion-workbench-icons.json][icon-font-definition]. After changing the icons, regenerate the icon font, download it and place it in the `/assets/fonts` directory.
+The icons can be replaced using the [IcoMoon][ico-moon] web application. Open [IcoMoon][ico-moon] in your browser and import the icon font definition from [scion-workbench-icons.json][icon-font-definition]. After changing the icons, regenerate the icon font, download it and place it in the `/public/fonts` directory.
 
 We recommend incrementing the version when modifying the icon font, enabling browser cache invalidation when icons change.
 ```scss
@@ -55,7 +55,7 @@ Configure the `@scion/workbench` SCSS module to load the icon font relative to t
 ```scss
 @use '@scion/workbench' with (
  $icon-font: (
- directory: 'path/to/font' // no leading slash, typically `assets/fonts`
+ directory: 'path/to/font' // no leading slash, typically `fonts`
  )
 );
 ```
@@ -72,7 +72,7 @@ Configure the `@scion/workbench` SCSS module to load the icon font relative to t
 ```scss
 @use '@scion/workbench' with (
  $icon-font: (
- directory: '^path/to/font' // no leading slash but with a caret (^), typically `^assets/fonts`
+ directory: '^path/to/font' // no leading slash but with a caret (^), typically `^fonts`
  )
 );
 ```

diff --git a/docs/site/howto/how-to-install-workbench.md b/docs/site/howto/how-to-install-workbench.md
@@ -92,7 +92,7 @@ The workbench requires some styles to be imported into `styles.scss`, as follows
 @use '@scion/workbench';
 ``` 
 
-Also, download the workbench icon font from <a href="https://github.com/SchweizerischeBundesbahnen/scion-workbench/raw/master/resources/scion-workbench-icons/fonts/fonts.zip">GitHub</a>, unzip the font files, and place the extracted files in the `assets/fonts` folder.
+Also, download the workbench icon font from <a href="https://github.com/SchweizerischeBundesbahnen/scion-workbench/raw/master/resources/scion-workbench-icons/fonts/fonts.zip">GitHub</a>, unzip the font files, and place the extracted files in the `/public/fonts` folder.
 
 > Deploying the application in a subdirectory requires the additional steps described [here][link-how-to-configure-icons-if-deploying-app-in-subdirectory].
 

diff --git a/projects/scion/workbench/_index.scss b/projects/scion/workbench/_index.scss
@@ -99,7 +99,7 @@
  * ```scss
  * @use '@scion/workbench' with (
  * $icon-font: (
- * directory: '/path/to/font', // defaults to '/assets/fonts' if omitted
+ * directory: '/path/to/font', // defaults to '/fonts' if omitted
  * filename: 'scion-workbench-icons' // defaults to 'scion-workbench-icons' if omitted
  * version: '1.0.0' // appended to the HTTP request to load the icon font, enabling browser cache invalidation when icons change
  * );
@@ -116,7 +116,7 @@
  * ```scss
  * @use '@scion/workbench' with (
  * $icon-font: (
- * directory: 'path/to/font' // no leading slash, typically `assets/fonts`
+ * directory: 'path/to/font' // no leading slash, typically `fonts`
  * )
  * );
  * ```
@@ -134,7 +134,7 @@
  * ```scss
  * @use '@scion/workbench' with (
  * $icon-font: (
- * directory: '^path/to/font' // no leading slash but with a caret (^), typically `^assets/fonts`
+ * directory: '^path/to/font' // no leading slash but with a caret (^), typically `^fonts`
  * )
  * );
  * ```

diff --git a/projects/scion/workbench/design/_workbench-icon-font.scss b/projects/scion/workbench/design/_workbench-icon-font.scss
@@ -21,7 +21,7 @@ $-default-icon-font-config: (
  // To keep the workbench configuration minimal for Angular projects deployed in the context root, we reference font files by
  // their root relative path. Consequently, applications deployed in a subdirectory require additional configuration depending
  // on whether the application is built with esbuild or webpack.
- directory: '/assets/fonts',
+ directory: '/fonts',
  filename: 'scion-workbench-icons',
  version: $-version,
 );