astro-theme-popular 0.9.1 → 0.10.0
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/package.json
CHANGED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
/** PreviewBar: fixed banner rendered ONLY when the config sets
|
|
3
|
+
* `SITE.previewMode` (a generator's throwaway build, shown in an iframe). The
|
|
4
|
+
* config written into an adopter's own repo never sets it, so the banner is
|
|
5
|
+
* structurally incapable of reaching a real site.
|
|
6
|
+
*
|
|
7
|
+
* Informational only, no controls: a preview is served with
|
|
8
|
+
* `sandbox="allow-scripts"` and no allow-same-origin, so a button here could
|
|
9
|
+
* not drive the surrounding page. Actions belong in the chrome outside the
|
|
10
|
+
* iframe. Unlike DemoBar this renders in dev too: someone running the same
|
|
11
|
+
* config locally is previewing as well. Twin of Hugo's preview-bar.html.
|
|
12
|
+
*
|
|
13
|
+
* previewMode accepts `true` or `{ note: 'Expires in 60 minutes.' }`, and
|
|
14
|
+
* POPULAR_PREVIEW_NOTE in the environment does the same for a build whose
|
|
15
|
+
* config someone else owns.
|
|
16
|
+
*/
|
|
17
|
+
import * as cfg from 'popular:config';
|
|
18
|
+
const { SITE, STRINGS } = cfg;
|
|
19
|
+
/* A generator owns the build but not the adopter's config, so the banner can
|
|
20
|
+
also be switched on from the environment: the counterpart of Hugo's
|
|
21
|
+
HUGO_PARAMS_PREVIEWMODE_NOTE. Read at build time, never shipped to the
|
|
22
|
+
client, and absent from any build that did not ask for it. */
|
|
23
|
+
const fromEnv = process.env.POPULAR_PREVIEW_NOTE;
|
|
24
|
+
const preview = (SITE as Record<string, any>).previewMode
|
|
25
|
+
?? (fromEnv ? { note: fromEnv } : null);
|
|
26
|
+
const note = typeof preview === 'object' && preview ? preview.note : undefined;
|
|
27
|
+
/* The demo bar occupies the same corner, and a previewed demo has both on, so
|
|
28
|
+
sit above it rather than on top of it. Matches DemoBar's own rule: it does
|
|
29
|
+
not render in dev. */
|
|
30
|
+
const stacked = !import.meta.env.DEV && !!((cfg as Record<string, any>).DEMO_BAR ?? null);
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
{preview && (
|
|
34
|
+
<>
|
|
35
|
+
<style>
|
|
36
|
+
.g-previewbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
|
|
37
|
+
display: flex; align-items: center; gap: 8px; padding: 8px 16px; max-width: calc(100vw - 28px);
|
|
38
|
+
background: color-mix(in srgb, var(--ink-900) 92%, transparent); color: var(--ink-200);
|
|
39
|
+
border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: var(--text-xs);
|
|
40
|
+
font-family: var(--font-sans); backdrop-filter: blur(8px); }
|
|
41
|
+
.g-previewbar__label { color: var(--ink-400); font-weight: var(--weight-semibold);
|
|
42
|
+
letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.65rem; }
|
|
43
|
+
.g-previewbar__note { color: var(--ink-400); }
|
|
44
|
+
@media (max-width: 640px) { .g-previewbar__label { display: none; } }
|
|
45
|
+
/* Reserve space so the fixed bar never covers the footer credit. */
|
|
46
|
+
.g-footer__bottom { padding-bottom: 72px; }
|
|
47
|
+
/* Both bars on the same site: stack, and reserve for both. */
|
|
48
|
+
.g-previewbar--stacked { bottom: 62px; }
|
|
49
|
+
</style>
|
|
50
|
+
{stacked && <style>.g-footer__bottom {'{'} padding-bottom: 120px; {'}'}</style>}
|
|
51
|
+
<div class={`g-previewbar${stacked ? ' g-previewbar--stacked' : ''}`} role="status">
|
|
52
|
+
<i class="fa-solid fa-eye" aria-hidden="true"></i>
|
|
53
|
+
<span class="g-previewbar__label">{STRINGS.previewLabel}</span>
|
|
54
|
+
<span>{STRINGS.previewBanner}</span>
|
|
55
|
+
{note && <span class="g-previewbar__note">{note}</span>}
|
|
56
|
+
</div>
|
|
57
|
+
</>
|
|
58
|
+
)}
|
|
@@ -10,6 +10,7 @@ import '../styles/components.css';
|
|
|
10
10
|
import Header from 'popular:component/Header';
|
|
11
11
|
import Footer from 'popular:component/Footer';
|
|
12
12
|
import DemoBar from '../components/DemoBar.astro';
|
|
13
|
+
import PreviewBar from '../components/PreviewBar.astro';
|
|
13
14
|
import Notice from '../components/Notice.astro';
|
|
14
15
|
import { SITE, BRAND, STRINGS } from 'popular:config';
|
|
15
16
|
import { withBase, absoluteUrl } from '../lib/url';
|
|
@@ -111,5 +112,6 @@ const brandCss = `html:root{${vars.join(';')}}`;
|
|
|
111
112
|
</main>
|
|
112
113
|
<Footer />
|
|
113
114
|
<DemoBar />
|
|
115
|
+
<PreviewBar />
|
|
114
116
|
</body>
|
|
115
117
|
</html>
|