fix(storybook): attempt to fix the fonts preload

.storybook/build-scripts/create-stories-from-md.mjs

@@ -9,7 +9,8 @@ import showdown from 'showdown';
 export default build;
 
 export {
- relocateStaticResources
+ hrefLinkProcessing,
+ relocateStaticResources,
 }
 
 const CONFIGS_LOOKUP_PATTERN = '+(common|components|docs)/**/stories/**/*.config.+(js|mjs)';
@@ -128,6 +129,15 @@ const
 fs.rmdirSync(AUTOGENERATED_FOLDER_ABSOLUTE, { recursive: true });
 fs.mkdirSync(AUTOGENERATED_FOLDER_ABSOLUTE, { recursive: true });
 
+function hrefLinkProcessing(input, replacePairs) {
+ let r = input;
+ for (const [hrefToFind, hrefToPlace] of replacePairs) {
+ r = r.replace(hrefToFind, `href="/${hrefToPlace}"`);
+ // r = r.replace(hrefToFind, `name onclick="window.location=window.location.href.replace(/[?].*$/, '${hrefToPlace}')"`);
+ }
+ return r;
+}
+
 function relocateStaticResources(htmlInput, srPaths, srBasePath = '') {
  if (!Array.isArray(srPaths) || !srPaths.length) {
  throw new Error(`'srPaths' MUST be a non-empty array; got '${srPaths}'`);

.storybook/manager-head.html

@@ -1,9 +1,5 @@
 <base href="/">
 
-<link rel="preload" href="//fonts.resources.vonage.com/fonts/v1/Spezia_Web_Complete_Upright.woff2" as="font"
- type="font/woff2" crossorigin>
-<link rel="prefetch" href="//fonts.resources.vonage.com/fonts/v1/Spezia_Web_Monospace_Complete.woff2" as="font"
- type="font/woff2" crossorigin>
 <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg" />
 
 <!-- Global site tag (gtag.js) - Google Analytics -->

common/context/src/partials/_theme.scss

@@ -15,6 +15,7 @@
  #{constants.$vivid-scope-class} {
  a {
  color: color-base.$purple-600;
+ cursor: pointer;
  }
 
  code,

common/fonts/readme.md

@@ -49,4 +49,4 @@ Explanation:
 While this will still be performed asyncronously, it'll prioritize our main font resource high.
 * The second link, `prefetch`, hints the browser to load our secondary, _monospace_ font, sooner than later.
 
-> Attention! We've found, that `preload` and `prefetch` are **not supported** in Safari (up and include 14) if used in **`iframe`**. Although `iframe` usage is quite rare nowadays, if there is any chance that some HTML will find itself loaded via `iframe`, please do not use the above hints as of now.
+> Attention! We've found, that `preload` and `prefetch` are **not supported** in Safari (up and include 14), specifially some inconsistensies found when browsing from and between `iframe` elements. Although `iframe` usage is quite rare nowadays, if there is any chance that some HTML will find itself loaded via `iframe`, please do not use the above hints as of now.

docs/stories/guides/guides-contribution.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../../contribution.md',
@@ -14,7 +17,10 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['assets/images/contribution.svg'], 'docs')
- .replace('href="./architecture.md"', 'href="/?path=/story/introduction-architecture--architecture"');
+ let r = relocateStaticResources(htmlText, ['assets/images/contribution.svg'], 'docs');
+ return hrefLinkProcessing(r, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid'],
+ ['href="./architecture.md"', '?path=/story/introduction-architecture--architecture']
+ ]);
  }
 };

docs/stories/guides/guides-installation.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../../installation.md',
@@ -14,6 +17,9 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['assets/images/installation.svg'], 'docs');
+ let r = relocateStaticResources(htmlText, ['assets/images/installation.svg'], 'docs');
+ return hrefLinkProcessing(r, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid']
+ ]);
  }
 };

docs/stories/introduction-architecture.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../architecture.md',
@@ -14,7 +17,9 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['assets/images/architecture.svg', 'assets/images/vivid-code-transformation-flow.svg'], 'docs')
- .replace('href="../readme.md"', 'href="/?path=/story/introduction-meet-vivid--meet-vivid"');
+ let r = relocateStaticResources(htmlText, ['assets/images/architecture.svg', 'assets/images/vivid-code-transformation-flow.svg'], 'docs');
+ return hrefLinkProcessing(r, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid']
+ ]);
  }
 };

docs/stories/introduction-contact-us.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../contact-us.md',
@@ -14,8 +17,10 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- let result = relocateStaticResources(htmlText, ['assets/images/contact-us.svg', 'assets/images/logo-slack.svg', 'assets/images/logo-github.svg', 'assets/images/logo-workplace.svg'], 'docs')
- .replace('href="../readme.md"', 'href="/?path=/story/introduction-meet-vivid--meet-vivid"');
+ let result = relocateStaticResources(htmlText, ['assets/images/contact-us.svg', 'assets/images/logo-slack.svg', 'assets/images/logo-github.svg', 'assets/images/logo-workplace.svg'], 'docs');
+ result = hrefLinkProcessing(result, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid']
+ ]);
  result += `
  <style>
  h3 > img {

docs/stories/introduction-getting-started.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../getting-started.md',
@@ -14,7 +17,9 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['assets/images/getting-started.svg'], 'docs')
- .replace('href="../readme.md"', 'href="/?path=/story/introduction-meet-vivid--meet-vivid"');
+ let r = relocateStaticResources(htmlText, ['assets/images/getting-started.svg'], 'docs');
+ return hrefLinkProcessing(r, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid']
+ ]);
  }
 };

docs/stories/introduction-meet-vivid.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../../readme.md',
@@ -18,12 +21,15 @@ export default {
  .replace(/^[^#]*/, '');
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['docs/assets/images/meet-vivid.svg'])
- .replace('href="docs/getting-started.md"', 'href="/?path=/story/introduction-getting-started--getting-started"')
- .replace('href="docs/architecture.md"', 'href="/?path=/story/introduction-architecture--architecture"')
- .replace('href="docs/roadmap.md"', 'href="/?path=/story/introduction-roadmap--roadmap"')
- .replace('href="docs/contact-us.md"', 'href="/?path=/story/introduction-contact-us--contact-us"')
- .replace('href="docs/installation.md"', 'href="/?path=/story/introduction-installation--installation"')
- .replace('href="docs/contribution.md"', 'href="/?path=/story/introduction-contribution--contribution"');
+ let r = relocateStaticResources(htmlText, ['docs/assets/images/meet-vivid.svg']);
+ r = hrefLinkProcessing(r, [
+ ['href="docs/getting-started.md"', '?path=/story/introduction-getting-started--getting-started'],
+ ['href="docs/architecture.md"', '?path=/story/introduction-architecture--architecture'],
+ ['href="docs/roadmap.md"', '?path=/story/introduction-roadmap--roadmap'],
+ ['href="docs/contact-us.md"', '?path=/story/introduction-contact-us--contact-us'],
+ ['href="docs/installation.md"', '?path=/story/guides-installation--installation'],
+ ['href="docs/contribution.md"', '?path=/story/guides-contribution--contribution']
+ ]);
+ return r;
  }
-};
+};

docs/stories/introduction-roadmap.config.mjs

@@ -1,4 +1,7 @@
-import { relocateStaticResources } from '../../.storybook/build-scripts/create-stories-from-md.mjs';
+import {
+ hrefLinkProcessing,
+ relocateStaticResources
+} from '../../.storybook/build-scripts/create-stories-from-md.mjs';
 
 export default {
  sourcePath: '../roadmap.md',
@@ -14,7 +17,9 @@ export default {
  }
  },
  htmlPostProcess: htmlText => {
- return relocateStaticResources(htmlText, ['assets/images/roadmap.svg'], 'docs')
- .replace('href="../readme.md"', 'href="/?path=/story/introduction-meet-vivid--meet-vivid"');
+ let r = relocateStaticResources(htmlText, ['assets/images/roadmap.svg'], 'docs')
+ return hrefLinkProcessing(r, [
+ ['href="../readme.md"', '?path=/story/introduction-meet-vivid--meet-vivid']
+ ]);
  }
 }

readme.md

@@ -31,7 +31,7 @@ For your convenience, we've organized all our documentation under the following
 * [Installation](docs/installation.md)
 * [Contribution](docs/contribution.md)
 
-#### Support
+#### Browsers support matrix
 
 We are continuously running our tests on 3 major browsers: Chrome, FireFox and Safari.
 The below matrix reflects a thoroughtly verified browsers / versions.