create-sitecore-jss 22.2.0-canary.1 → 22.2.0-canary.3

package/dist/templates/angular/scripts/bootstrap.ts

@@ -1,8 +1,4 @@
 import 'dotenv/config';
-import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
-import { generateConfig } from './generate-config';
-const projects = require('../angular.json').projects;
-const chalk = require('chalk');
 
 /*
   BOOTSTRAPPING
@@ -11,30 +7,15 @@ const chalk = require('chalk');
   and the global config module.
 */
 
-const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
-
-if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
-  throw new Error(chalk.red("GraphQL requests to Dictionary and Layout services are not supported in disconnected mode."))
-}
+/*
+   PLUGINS GENERATION
+*/
+require('./generate-plugins');
 
 /*
   CONFIG GENERATION
-  Generates the /src/environments/environment.js file which contains runtime configuration
-  that the app can import and use.
-
-  This is generated rather than using Angular environments because of the need to set config params
-  based on build arguments, which env files don't directly allow.
 */
-function writeConfig(configOverride: { production: boolean, sitecoreApiHost?: string }, outputPath?: string) {
-  if (disconnected) {
-    configOverride.sitecoreApiHost = `http://localhost:${projects['<%- appName %>'].architect.serve.options.port}`;
-  }
-
-  generateConfig(configOverride, outputPath);
-}
-
-writeConfig({ production: false });
-writeConfig({ production: true }, 'src/environments/environment.prod.js');
+require('./generate-config');
 
 /*
   COMPONENT FACTORY GENERATION

package/dist/templates/angular/scripts/config/index.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugins = require('scripts/temp/config-plugins');
+import { JssConfig } from 'lib/config';
+
+export interface ConfigPlugin {
+  /**
+   * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
+   */
+  order: number;
+  /**
+   * A function which will be called during config generation
+   * @param {JssConfig} config Current (accumulated) config
+   */
+  exec(config: JssConfig): Promise<JssConfig>;
+}
+
+export class JssConfigFactory {
+  public async create(defaultConfig: JssConfig = {}): Promise<JssConfig> {
+    return (Object.values(plugins) as ConfigPlugin[])
+      .sort((p1, p2) => p1.order - p2.order)
+      .reduce(
+        (promise, plugin) => promise.then((config) => plugin.exec(config)),
+        Promise.resolve(defaultConfig)
+      );
+  }
+}
+
+export const jssConfigFactory = new JssConfigFactory();

package/dist/templates/angular/scripts/config/plugins/computed.ts

@@ -0,0 +1,21 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set computed config props.
+ * The "graphQLEndpoint" is an example of making a _computed_ config setting
+ * based on other config settings.
+ */
+class ComputedPlugin implements ConfigPlugin {
+  // should come after other plugins (but before fallback)
+  order = 10;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      graphQLEndpoint:
+        config.graphQLEndpoint || `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
+    });
+  }
+}
+
+export const computedPlugin = new ComputedPlugin();

package/dist/templates/angular/scripts/config/plugins/fallback.ts

@@ -0,0 +1,23 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This config will set fallback values for properties that were left empty
+ * If neither env, nor other places had a proper value, this will ensure a fallback is set
+ */
+class FallbackPlugin implements ConfigPlugin {
+  // should always come last
+  order = 100;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      defaultLanguage: config.defaultLanguage || 'en',
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
+      <% if (!locals.xmcloud) { -%>
+      layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
+      <% } -%>
+    });
+  }
+}
+
+export const fallbackPlugin = new FallbackPlugin();

package/dist/templates/angular/scripts/config/plugins/package-json.ts

@@ -0,0 +1,22 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import packageConfig from 'package.json';
+
+/**
+ * This plugin will set config props based on package.json.
+ */
+class PackageJsonPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    if (!packageConfig.config) return config;
+
+    return Object.assign({}, config, {
+      sitecoreSiteName: config.sitecoreSiteName || packageConfig.config.appName,
+      graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
+      defaultLanguage: config.defaultLanguage || packageConfig.config.language,
+    });
+  }
+}
+
+export const packageJsonPlugin = new PackageJsonPlugin();

package/dist/templates/angular/scripts/config/plugins/scjssconfig.ts

@@ -0,0 +1,29 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set config props based on scjssconfig.json.
+ * scjssconfig.json may not exist if you've never run `jss setup` (development)
+ * or are depending on environment variables instead (production).
+ */
+class ScJssConfigPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    let scJssConfig;
+    try {
+      scJssConfig = require('scjssconfig.json');
+    } catch (e) {
+      return config;
+    }
+
+    if (!scJssConfig) return config;
+
+    return Object.assign({}, config, {
+      sitecoreApiKey: config.sitecoreApiKey || scJssConfig.sitecore?.apiKey,
+      sitecoreApiHost: config.sitecoreApiHost || scJssConfig.sitecore?.layoutServiceHost,
+    });
+  }
+}
+
+export const scjssconfigPlugin = new ScJssConfigPlugin();

package/dist/templates/angular/scripts/generate-config.ts

@@ -1,7 +1,8 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
-const packageConfig = require('../package.json');
+import { jssConfigFactory } from './config';
+import { JssConfig } from 'lib/config';
 
 /**
  * Generate config
@@ -10,91 +11,70 @@ const packageConfig = require('../package.json');
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
-export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
-  const defaultConfig = {
-    production: false,
-    sitecoreApiHost: '',
-    sitecoreApiKey: 'no-api-key-set',
-    sitecoreSiteName: process.env.SITECORE_SITE_NAME,
-    sitecoreLayoutServiceConfig: 'jss',
-    defaultLanguage: 'en',
-    defaultServerRoute: '/',
-    layoutServiceConfigurationName: 'default',
-  };
 
-  if (!outputPath) {
-    outputPath = 'src/environments/environment.js';
-  }
+const defaultConfigValue: JssConfig = {
+  production: false,
+  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
+  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
+  sitecoreSiteName: process.env[`${constantCase('sitecoreSiteName')}`],
+  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
+  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
+  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
+  defaultServerRoute: '/',
+};
 
-  // require + combine config sources
-  const scjssConfig = transformScJssConfig();
-  const packageJson = transformPackageConfig();
+generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
+generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
 
-  // optional:
-  // do any other dynamic config source (e.g. environment-specific config files)
-  // Object.assign merges the objects in order, so the
-  // package.json config can override the calculated config,
-  // scjssconfig.json overrides it,
-  // and finally config passed in the configOverrides param wins.
-  const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
+/**
+ * Generates the JSS config based on config plugins (under ./config/plugins)
+ * and then writes the config to disk.
+ * @param {string} outputPath the output path of the generated config.
+ * @param {JssConfig} [defaultConfig] Default configuration.
+ * @param {[key: string]:unknown} [configOverrides] configuration values that override the generated ones.
+ */
+export function generateConfig(
+  outputPath: string,
+  defaultConfig: JssConfig = defaultConfigValue,
+  configOverrides?: { [key: string]: unknown }
+) {
+  jssConfigFactory
+    .create(defaultConfig)
+    .then((config) => {
+      writeConfig(Object.assign(config, configOverrides), outputPath);
+    })
+    .catch((e) => {
+      console.error('Error generating config');
+      console.error(e);
+      process.exit(1);
+    });
+}
 
-  // The GraphQL endpoint is an example of making a _computed_ config setting
-  // based on other config settings.
-  const computedConfig: { [key: string]: string } = {};
-  computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
+/**
+ * Writes the config object to disk with support for environment variables.
+ * @param {JssConfig} config JSS configuration to write.
+ * @param {string} outputPath the outputh path of the generated config.
+ */
+export function writeConfig(config: JssConfig, outputPath?: string) {
+  if (!outputPath) {
+    outputPath = 'src/environments/environment.js';
+  }
 
   let configText = `/* eslint-disable */
-// Do not edit this file, it is auto-generated at build time!
-// See scripts/bootstrap.ts to modify the generation of this file.
-const config = {};\n`;
+  // Do not edit this file, it is auto-generated at build time!
+  // See scripts/bootstrap.ts to modify the generation of this file.
+  const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]?.toString().trim()}";\n`;
-  });
-  // Set computed values, allowing override with environment variables
-  Object.keys(computedConfig).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
-      computedConfig[prop]?.toString().trim()
-    };\n`;
+    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]
+      ?.toString()
+      .trim()}";\n`;
   });
+
   configText += `module.exports.environment = config;`;
 
   const configPath = path.resolve(outputPath);
   console.log(`Writing runtime config to ${configPath}`);
   fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
 }
-
-function transformScJssConfig() {
-  // scjssconfig.json may not exist if you've never run setup
-  // so if it doesn't we substitute a fake object
-  let config;
-  try {
-    config = require('../scjssconfig.json');
-  } catch (e) {
-    return {};
-  }
-
-  if (!config) {
-    return {};
-  }
-
-  return {
-    sitecoreApiKey: config.sitecore.apiKey,
-    sitecoreApiHost: config.sitecore.layoutServiceHost,
-  };
-}
-
-function transformPackageConfig() {
-  const packageAny = packageConfig;
-
-  if (!packageAny.config) {
-    return {};
-  }
-
-  return {
-    sitecoreSiteName: packageAny.config.appName,
-    defaultLanguage: packageAny.config.language || 'en',
-    graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
-  };
-}

package/dist/templates/angular/scripts/generate-plugins.ts

@@ -0,0 +1,28 @@
+import {
+  generatePlugins,
+  ModuleType,
+  PluginDefinition,
+} from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/*
+  PLUGINS GENERATION
+  NOTE: pluginName: the name of the plugin in the src/lib folder
+  Generates the `/src/temp/{pluginName}-plugins.ts` file, which exports list of plugins
+
+  Generating the plugins is optional, and it can be maintained manually if preferred.
+
+  The default convention uses the plugin's filename (without the extension) as the first part of the component
+  name. For example, the file `/lib/page-props-factory/plugins/exampleName.ts` would map to plugin `exampleNamePlugin`.
+*/
+
+const pluginDefinitions: PluginDefinition[] = [
+  {
+    distPath: 'scripts/temp/config-plugins.ts',
+    rootPath: 'scripts/config/plugins',
+    moduleType: ModuleType.ESM,
+  },
+];
+
+pluginDefinitions.forEach((definition) => {
+  generatePlugins(definition);
+});

package/dist/templates/angular/scripts/temp/gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/dist/templates/angular/scripts/update-graphql-fragment-data.ts

@@ -9,7 +9,7 @@ import { generateConfig } from './generate-config';
 //
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-generateConfig();
+generateConfig('src/environments/environment.js');
 
 let jssConfig;
 
@@ -47,7 +47,9 @@ fetch(jssConfig.graphQLEndpoint, {
   .then((result) => result.json())
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter((type: { possibleTypes: Array<string>; }) => type.possibleTypes !== null);
+    const filteredData = result.data.__schema.types.filter(
+      (type: { possibleTypes: Array<string> }) => type.possibleTypes !== null
+    );
 
     const filteredResult = { ...result };
     filteredResult.data.__schema.types = filteredData;

package/dist/templates/angular/server.bundle.ts

@@ -6,6 +6,9 @@ import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';
+import { clientFactory } from './src/app/lib/graphql-client-factory';
+import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
+import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
 
 export * from './src/main.server';
 
@@ -99,5 +102,20 @@ function parseRouteUrl(url: string) {
 
 const apiKey = environment.sitecoreApiKey;
 const siteName = environment.sitecoreSiteName;
+const defaultLanguage = environment.defaultLanguage;
+const graphQLEndpointPath = environment.graphQLEndpointPath;
+const graphQLEndpoint = environment.graphQLEndpoint;
 
-export { renderView, parseRouteUrl, setUpDefaultAgents, apiKey, siteName };
+export {
+  renderView,
+  parseRouteUrl,
+  setUpDefaultAgents,
+  apiKey,
+  siteName,
+  clientFactory,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+  defaultLanguage,
+  graphQLEndpointPath,
+  graphQLEndpoint,
+};

package/dist/templates/angular/src/app/app.module.ts

@@ -10,7 +10,6 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { JssTranslationClientLoaderService } from './i18n/jss-translation-client-loader.service';
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
-import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssMetaService } from './jss-meta.service';
 
 @NgModule({
@@ -31,7 +30,6 @@ import { JssMetaService } from './jss-meta.service';
     // The token is needed in cases when multiple applications are bootstrapped on a page
     { provide: APP_ID, useValue: 'my-app' },
     JssContextService,
-    JssDataFetcherService,
     JssLayoutService,
     JssMetaService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.

package/dist/templates/angular/src/app/components/app-components.shared.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
-import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /*
@@ -14,22 +13,8 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [
-    CommonModule,
-    TranslateModule,
-    RouterModule,
-    JssModule,
-    FormsModule,
-  ],
-  exports: [
-    CommonModule,
-    TranslateModule,
-    RouterModule,
-    FormsModule,
-    StyleguideSpecimenComponent
-  ],
-  declarations: [
-    StyleguideSpecimenComponent
-  ],
+  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
+  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
+  declarations: [],
 })
-export class AppComponentsSharedModule { }
+export class AppComponentsSharedModule {}

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -2,7 +2,6 @@ import { Injectable, Inject, TransferState } from '@angular/core';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
-import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssLayoutService } from './layout/jss-layout.service';
 
 /**
@@ -15,7 +14,6 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
-    protected dataFetcher: JssDataFetcherService,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {

package/dist/templates/angular/src/app/lib/config.ts

@@ -0,0 +1,16 @@
+/*
+ * Represents the type of config object available within the generated /environments/environment.js
+ */
+export interface JssConfig extends Record<string, string | boolean | undefined> {
+  production?: false;
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  graphQLEndpointPath?: string;
+  <% if (!locals.xmcloud) { -%>
+  layoutServiceConfigurationName?: string;
+  <% } -%>
+  defaultServerRoute?: string;
+}

package/dist/templates/angular/src/app/lib/dictionary-service-factory.ts

@@ -1,30 +1,38 @@
 import {
   DictionaryService,
   GraphQLDictionaryService,
+  <% if (!locals.xmcloud) { -%>
   RestDictionaryService,
   constants,
+  <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import { clientFactory } from './graphql-client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLDictionaryService({
-          clientFactory,
-          siteName: env.sitecoreSiteName,
-          /*
-            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
-            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
-            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-            rootItemId: '{GUID}'
-          */
-        })
-      : new RestDictionaryService({
+    const service =
+    <% if (!locals.xmcloud) { -%>
+     process.env.FETCH_WITH === constants.FETCH_WITH.REST
+      ? new RestDictionaryService({
           apiHost: env.sitecoreApiHost,
           apiKey: env.sitecoreApiKey,
           siteName: env.sitecoreSiteName,
+        })
+      : 
+    <% } -%>
+      new GraphQLDictionaryService({
+          clientFactory,
+          siteName: env.sitecoreSiteName,
+          /*
+        The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
+        app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+        otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+        rootItemId: '{GUID}'
+      */
         });
+
+    return service;
   }
 }
 

package/dist/templates/angular/src/app/lib/layout-service-factory.ts

@@ -1,25 +1,33 @@
 import {
   LayoutService,
   GraphQLLayoutService,
+  <% if (!locals.xmcloud) { -%>
   RestLayoutService,
   constants,
+   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import { clientFactory } from './graphql-client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLLayoutService({
-          clientFactory,
-          siteName: environment.sitecoreSiteName,
-        })
-      : new RestLayoutService({
-          apiHost: environment.sitecoreApiHost,
-          apiKey: environment.sitecoreApiKey,
-          siteName: environment.sitecoreSiteName,
-          configurationName: environment.layoutServiceConfigurationName,
-        });
+    const service =
+    <% if (!locals.xmcloud) { -%>
+      process.env.FETCH_WITH === constants.FETCH_WITH.REST
+        ? new RestLayoutService({
+            apiHost: environment.sitecoreApiHost,
+            apiKey: environment.sitecoreApiKey,
+            siteName: environment.sitecoreSiteName,
+            configurationName: environment.layoutServiceConfigurationName,
+          })
+        : 
+    <% } -%>
+        new GraphQLLayoutService({
+            clientFactory,
+            siteName: environment.sitecoreSiteName,
+          });
+
+    return service;
   }
 }
 

package/dist/templates/angular/src/app/routing/layout/layout.component.html

@@ -1,7 +1,7 @@
 <app-navigation></app-navigation>
 <div class="container">
   <ng-container *ngIf="state === LayoutState.Layout">
-    <app-visitor-identification></app-visitor-identification>
+    <app-scripts></app-scripts>
     <sc-placeholder
       name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
       [rendering]="route"

package/dist/templates/angular/src/app/routing/layout/layout.component.ts

@@ -71,9 +71,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onPlaceholderLoaded(placeholderName: string) {
+  onPlaceholderLoaded(_placeholderName: string) {
     // you may optionally hook to the loaded event for a placeholder,
     // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
-    console.debug(`layout.component.ts: placeholder component fired loaded event for the ${placeholderName} placeholder`);
   }
 }

package/dist/templates/angular/src/app/routing/navigation/navigation.component.html

@@ -1,4 +1,6 @@
-<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
+<div
+  class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom"
+>
   <h5 class="my-0 me-md-auto fw-normal">
     <a routerLink="/" class="text-dark" class="logo"></a>
   </h5>
@@ -11,11 +13,8 @@
     >
       {{ 'Documentation' | translate }}
     </a>
-    <a routerLink="/styleguide" class="p-2 text-dark">
-      {{ 'Styleguide' | translate }}
-    </a>
-    <a routerLink="/graphql" class="p-2 text-dark">
-      {{ 'GraphQL' | translate }}
+    <a href="https://github.com/Sitecore/jss" class="p-2 text-dark">
+      {{ 'JSS Repository' | translate }}
     </a>
   </nav>
 </div>

package/dist/templates/angular/src/app/routing/navigation/navigation.component.ts

@@ -4,5 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
 })
-export class NavigationComponent {
-}
+export class NavigationComponent {}