@stacklist-app/brandkit 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/changelog.html +5 -0
- package/dist/changelog.js +13 -1
- package/dist/engine.js +25 -7
- package/dist/index.html +10 -1
- package/package.json +1 -1
package/dist/changelog.html
CHANGED
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Changelog</title>
|
|
7
|
+
<!-- FOUC gate (mirrors index.html): hide the page until changelog.js finishes
|
|
8
|
+
its first render so the default theme never flashes. Inline so it applies
|
|
9
|
+
before first paint; changelog.js adds html.bk-ready (with a failsafe against
|
|
10
|
+
a failed config fetch). Reduced-motion users get an instant reveal. -->
|
|
11
|
+
<style>.changelog-page{opacity:0;pointer-events:none}html.bk-ready .changelog-page{opacity:1;pointer-events:auto;transition:opacity 120ms ease-out}@media (prefers-reduced-motion:reduce){html.bk-ready .changelog-page{transition:none}}</style>
|
|
7
12
|
<link rel="stylesheet" href="styles.css">
|
|
8
13
|
</head>
|
|
9
14
|
<body>
|
package/dist/changelog.js
CHANGED
|
@@ -13,12 +13,24 @@
|
|
|
13
13
|
var BASE = (typeof window !== 'undefined' && window.__BRANDKIT_BASE__)
|
|
14
14
|
? (String(window.__BRANDKIT_BASE__).replace(/\/+$/, '') || '.') : '.';
|
|
15
15
|
|
|
16
|
+
// Reveal the FOUC-gated page. changelog.html hides .changelog-page (opacity:0)
|
|
17
|
+
// until this runs, so the default theme never flashes before the real brand
|
|
18
|
+
// paints. Idempotent. See the matching gate in engine.js.
|
|
19
|
+
function reveal() { document.documentElement.classList.add('bk-ready'); }
|
|
20
|
+
// Failsafe registered BEFORE the fetch: never leave the page permanently blank
|
|
21
|
+
// if config.json is slow or fails — reveal after 1.5s regardless.
|
|
22
|
+
var revealFailsafe = setTimeout(reveal, 1500);
|
|
23
|
+
function done() { clearTimeout(revealFailsafe); reveal(); }
|
|
24
|
+
|
|
16
25
|
fetch(BASE + '/config.json')
|
|
17
26
|
// Guard before parsing: a non-200 response (e.g. a CDN/error page served
|
|
18
27
|
// with a JSON body) is routed to the error state instead of init().
|
|
19
28
|
.then(function (res) { if (!res.ok) throw new Error(res.status); return res.json(); })
|
|
20
29
|
.then(function (config) { init(config); })
|
|
21
|
-
.catch(function () { renderError(); })
|
|
30
|
+
.catch(function () { renderError(); })
|
|
31
|
+
// Reveal after render (success) or after the error state is drawn (failure),
|
|
32
|
+
// so the page is always shown rather than stuck blank.
|
|
33
|
+
.then(done, done);
|
|
22
34
|
|
|
23
35
|
/* ================================================================
|
|
24
36
|
Helpers (kept in sync with dist/engine.js — no module system here)
|
package/dist/engine.js
CHANGED
|
@@ -12,13 +12,31 @@
|
|
|
12
12
|
// Default '.' keeps the original page-relative behavior (dev + root serving).
|
|
13
13
|
var BASE = (typeof window !== 'undefined' && window.__BRANDKIT_BASE__)
|
|
14
14
|
? (String(window.__BRANDKIT_BASE__).replace(/\/+$/, '') || '.') : '.';
|
|
15
|
-
|
|
16
|
-
//
|
|
17
|
-
//
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
|
|
16
|
+
// Reveal the FOUC-gated shell. index.html hides .layout (opacity:0) until this
|
|
17
|
+
// runs, so the default theme never flashes before the real brand paints. The
|
|
18
|
+
// class is added once the first render pass below completes. Idempotent.
|
|
19
|
+
function reveal() { document.documentElement.classList.add('bk-ready'); }
|
|
20
|
+
// Failsafe registered BEFORE the fetch: if config.json is slow or fails, never
|
|
21
|
+
// leave the page permanently blank — reveal after 1.5s no matter what. The
|
|
22
|
+
// finally below clears this on the normal path so it doesn't fire twice.
|
|
23
|
+
var revealFailsafe = setTimeout(reveal, 1500);
|
|
24
|
+
|
|
25
|
+
try {
|
|
26
|
+
var res = await fetch(BASE + '/config.json');
|
|
27
|
+
// Guard before parsing: a non-200 response (e.g. a CDN/error page served
|
|
28
|
+
// with a JSON body) would otherwise flow straight into init() and render
|
|
29
|
+
// confusing output instead of failing cleanly.
|
|
30
|
+
if (!res.ok) throw new Error('Failed to load config.json: ' + res.status);
|
|
31
|
+
var config = await res.json();
|
|
32
|
+
init(config);
|
|
33
|
+
} finally {
|
|
34
|
+
// Reveal after init()'s synchronous render pass (or on error, so a failed
|
|
35
|
+
// load shows the page rather than a blank frame). The throw still surfaces
|
|
36
|
+
// as an unhandled rejection for debugging — finally doesn't swallow it.
|
|
37
|
+
clearTimeout(revealFailsafe);
|
|
38
|
+
reveal();
|
|
39
|
+
}
|
|
22
40
|
|
|
23
41
|
function init(cfg) {
|
|
24
42
|
var copyFormat = localStorage.getItem('brandkit-copy-format') || 'hex';
|
package/dist/index.html
CHANGED
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Brand Guide</title>
|
|
7
|
+
<!-- FOUC gate: hide the shell until engine.js finishes its first render, so the
|
|
8
|
+
default theme never flashes before the real brand paints. Inline so it
|
|
9
|
+
applies before first paint (an external sheet would itself flash). engine.js
|
|
10
|
+
adds html.bk-ready once rendered (with a failsafe so a failed config fetch
|
|
11
|
+
can't leave the page permanently blank). Reduced-motion users get an instant
|
|
12
|
+
reveal (gate kept, fade dropped). -->
|
|
13
|
+
<style>.layout{opacity:0;pointer-events:none}html.bk-ready .layout{opacity:1;pointer-events:auto;transition:opacity 120ms ease-out}@media (prefers-reduced-motion:reduce){html.bk-ready .layout{transition:none}}</style>
|
|
7
14
|
<link rel="stylesheet" href="styles.css">
|
|
8
15
|
</head>
|
|
9
16
|
<body>
|
|
@@ -12,7 +19,9 @@
|
|
|
12
19
|
|
|
13
20
|
<!-- Sidebar -->
|
|
14
21
|
<nav class="sidebar">
|
|
15
|
-
|
|
22
|
+
<!-- Filled from config.brand (name/sidebarLogo) by renderShell(); left empty
|
|
23
|
+
so the pre-render frame carries no default brand identity. -->
|
|
24
|
+
<div class="sidebar-brand"></div>
|
|
16
25
|
<ul class="sidebar-nav" id="nav"></ul>
|
|
17
26
|
<div class="sidebar-agent" id="agent-callout" hidden></div>
|
|
18
27
|
<a class="sidebar-changelog" id="sidebar-changelog" href="changelog.html" hidden></a>
|