Stack Toolbar

Overview

Stack Toolbar is a lightweight web component injected into a hosting application’s DOM. It provides two different functionalities

1. Context switching. Using the currently logged in user, the toolbar will gather your claims from SSO (which should be a list of subscription ids representing the sites/application accessible to you) and render a list of links.

2. A marketing profile. This profile contains recommendations based on the sites currently accessible to you.

Technologies

1. StencilJs - Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser. Additionally, we use @stencil/store for a lightweight state store.
2. TailwindCss - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup

Setup

Cloning the Repository

git clone https://gitlab.bluestarsports.io/marketplace/stack-toolbar
cd stack-toolbar
npm install
npm run start

After a moment, a browser window should open at the following address: http://localhost:3333. From here, Stencil will continue to build and eventually render a test page hosting the toolbar. This will also enable hot-loading, so your changes will be immediately available upon saving.

Local Integration/Debugging

I prefer to doIf you need to test this package locally on an integrated solution, do the following:

Install

1. From the toolbar root run: npm link

2. From the integrated solution run: npm link marketplace-toolbar

Uninstall

1. From the integrated solution run: npm unlink --no-save marketplace-toolbar

2. From the toolbar root run: npm unlink

Configuration

stencil.config.ts contains a basic mechanism for loading environment dependent configuration data. All configuration related assets can be found here: src/global

export default function () {
  // or export default async function()

  const url = 'https://cdn.jsdelivr.net/npm/marketplace-toolbar@latest/dist/x-stack-toolbar/assets';
  setupConfig({
    assetBasePath: url,
    production: true,
    apiPath: 'https://ipa.stacksports.com',
    apiKey: 'VgB2hppXpQ',
  });
}

assetBasePath: points to a public CDN network for internal assets.

apiPath: points to the Marketplace API host. You can modify this value for local development.

apiKey: if you are hitting the Marketplace API through Kong, you will need to supply an apiKey.

Production Build

Run the following command to build for production. Make sure you bump the package number in package.json prior to building. stencil.config.ts contains a function that sets the build version number from package.json

npm run build-prod

Deploying The Package

Currently we publish to the public NPM repository. I would like to change this at some point.

Simply run

npm publish

Deploying to internal NPM (Stack) - Currently not used

npm set registry http://npm-cache.bluestarsports.io:4873
npm adduser --registry http://npm-cache.bluestarsports.io:4873

npm publish --registry

Making Your Package Visible

To make your package visible, you need to clear the toolbar version cache in Marketplace . This can be done using the Marketplace REST API through the StackHub Postman workspace.

Stack Hub Workspace/Marketplace/Toolbar/Delete Toolbar Cache.

Currently we don’t employ a distributed cache in Marketplace; therefore, cached data is local to it’s containing server. This means for x number of pods, you will need to call “Delete Toolbar Cache” x times. In staging, you must call it 3 times. I don’t like it anymore than you do.

*At some point we need to deploy a Redis cluster.

Google Tag Manager Integration Code

the code below should be copied+pasted into GTM. The only parameters that need to be set are

1. subscriptionId

2. defaultBackgroundColor

3. isProduction

<!--
    this chunk assumes you have a dedicated container rendering within your application.
    you must place the following <div id='mp-toolbar-host'></div> adjacent to your main application toolbar.
 -->
<script type="module">

  var config = {
    subscriptionId : "5fce52b3d40f60002ecc637c",
    defaultBackgroundColor  : "#0f0f0f",
    isProduction : false
  }
var marketplaceModuleLoader =  isProduction =>
{
  var productionUrl = 'https://api.stacksports.com/marketplace/toolbar/import';
  var stagingUrl = 'https://ipa.stacksports.com/marketplace/toolbar/import';
  var response = await fetch(isProduction ? productionUrl : stagingUrl);
  var settings = await response.json();
  var factoryModule = await import(settings.toolbarFactoryUrl);
  var loaderModule = await import(settings.toolbarLoaderUrl);
  loaderModule.defineCustomElements();
  return {
    injector: (subscriptionId, backgroundColor, interationOverrides) => {
      return factoryModule.marketplaceToolbarInjector(settings.versionKey,
                                                      subscriptionId,
                                                      settings.userProfileEndpoint, backgroundColor,
                                                      interationOverrides);
    }
  };

};
  //now inject the toolbar
  var loader = await marketplaceModuleLoader(config.isProduction);
           loader.injector(
               config.subscriptionId,
               config.defaultBackgroundColor);


</script>

Images