From 7cdf9ff55f1dc010052173fabddd5954df30eb9a Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Mon, 1 Feb 2021 18:52:18 +0200 Subject: [PATCH] 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 --- .../build-scripts/create-stories-from-md.mjs | 12 +++++++++- .storybook/manager-head.html | 4 ---- common/context/src/partials/_theme.scss | 1 + common/fonts/readme.md | 2 +- .../guides/guides-contribution.config.mjs | 12 +++++++--- .../guides/guides-installation.config.mjs | 10 ++++++-- .../introduction-architecture.config.mjs | 11 ++++++--- .../introduction-contact-us.config.mjs | 11 ++++++--- .../introduction-getting-started.config.mjs | 11 ++++++--- .../introduction-meet-vivid.config.mjs | 24 ++++++++++++------- docs/stories/introduction-roadmap.config.mjs | 11 ++++++--- readme.md | 2 +- 12 files changed, 78 insertions(+), 33 deletions(-) diff --git a/.storybook/build-scripts/create-stories-from-md.mjs b/.storybook/build-scripts/create-stories-from-md.mjs index 23ac9fc7a..bd79c73e8 100644 --- 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 index e47b492d8..28cf72bdc 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,9 +1,5 @@ - - diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss index 39fa4348e..c0dfcbfee 100644 --- 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 index fe3b028bd..a4e82031c 100644 --- 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 index 23ad1e8fe..ca146b94c 100644 --- 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'] + ]); } }; \ No newline at end of file diff --git a/docs/stories/guides/guides-installation.config.mjs b/docs/stories/guides/guides-installation.config.mjs index 101bb0280..c1709ca56 100644 --- 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'] + ]); } }; \ No newline at end of file diff --git a/docs/stories/introduction-architecture.config.mjs b/docs/stories/introduction-architecture.config.mjs index e6925770f..3aa003f4b 100644 --- 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'] + ]); } }; \ No newline at end of file diff --git a/docs/stories/introduction-contact-us.config.mjs b/docs/stories/introduction-contact-us.config.mjs index 7b59915df..2a78aa245 100644 --- 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 += `