fix(storybook): attempt to fix the fonts preload (#624)

* attempt to fix the fonts preload * fixing the crossorigin back again * fixing font A * fixing the paths of installation and contributions * fixing installation and conribution
Vonage · Feb 1, 2021 · 7cdf9ff · 7cdf9ff
1 parent 886ffad
commit 7cdf9ff
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 33 deletions.
diff --git a/.storybook/build-scripts/create-stories-from-md.mjs b/.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}'`);

diff --git a/.storybook/manager-head.html b/.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 -->

diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
@@ -15,6 +15,7 @@
 	#{constants.$vivid-scope-class} {
 		a {
 			color: color-base.$purple-600;
+			cursor: pointer;
 		}
 
 		code,

diff --git a/common/fonts/readme.md b/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.
diff --git a/docs/stories/guides/guides-contribution.config.mjs b/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']
+		]);
 	}
 };
diff --git a/docs/stories/guides/guides-installation.config.mjs b/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']
+		]);
 	}
 };
diff --git a/docs/stories/introduction-architecture.config.mjs b/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']
+		]);
 	}
 };
diff --git a/docs/stories/introduction-contact-us.config.mjs b/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 {

diff --git a/docs/stories/introduction-getting-started.config.mjs b/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']
+		]);
 	}
 };
diff --git a/docs/stories/introduction-meet-vivid.config.mjs b/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;
 	}
-};
+};
diff --git a/docs/stories/introduction-roadmap.config.mjs b/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']
+		]);
 	}
 }
diff --git a/readme.md b/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.