@gemboss/website-ui 0.6.0 → 0.7.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/AGENTS.md +15 -2
- package/CHANGELOG.md +61 -0
- package/README.md +8 -8
- package/bin/lib/check.mjs +17 -0
- package/css/base.css +12 -0
- package/css/footer.css +178 -0
- package/css/tokens.css +1 -0
- package/demo/footer.html +339 -0
- package/demo/index.html +1 -0
- package/docs/components.md +57 -5
- package/docs/markup-contract.md +59 -4
- package/docs/theming.md +8 -2
- package/js/website.js +21 -4
- package/js/website.mjs +27 -3
- package/package.json +1 -1
- package/skill/SKILL.md +3 -0
- package/system.json +2 -0
- package/templates/footer.html +108 -20
- package/templates/page.html +16 -11
- package/website.css +192 -1
- package/website.min.css +1 -1
package/demo/footer.html
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!-- Kit demo (0.7.0): the footer of gemboss.ai built from templates/footer.html, every optional part on. The switch on
|
|
3
|
+
the page shows the same footer for a GemPages-style brand: soft corners, the accent button, the GemPages accent of
|
|
4
|
+
docs/theming.md, and its own family row. A real site picks its profiles once, on <html> (docs/theming.md); here a
|
|
5
|
+
small demo script sets them when the switch moves. Sample text from gemboss.ai; "Example brand" is not GemPages. -->
|
|
6
|
+
<html lang="en">
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<title>Footer · GemBoss</title>
|
|
11
|
+
<meta name="description" content="The kit's footer as gemboss.ai has it: Ask AI links, five columns that fold on a phone, product-family rows, the theme toggle and the wordmark.">
|
|
12
|
+
<script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
|
|
13
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
14
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
15
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
|
|
16
|
+
<link rel="stylesheet" href="../website.css">
|
|
17
|
+
<!-- the GemPages-style brand's whole CSS (docs/theming.md, "A full example"); on only while the switch says so -->
|
|
18
|
+
<style id="demo-gempages" media="not all">
|
|
19
|
+
:root {
|
|
20
|
+
--gw-accent-light: #3c67ff;
|
|
21
|
+
--gw-accent-strong-light: #2f52d6;
|
|
22
|
+
--gw-accent-soft-light: #eaefff;
|
|
23
|
+
--gw-on-accent-light: #ffffff;
|
|
24
|
+
--gw-accent-dark: #7c9bff;
|
|
25
|
+
--gw-accent-strong-dark: #a9beff;
|
|
26
|
+
--gw-accent-soft-dark: #16213d;
|
|
27
|
+
--gw-on-accent-dark: #0d0d12;
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
30
|
+
</head>
|
|
31
|
+
<body class="gw-page">
|
|
32
|
+
<a class="gw-skip" href="#main">Skip to content</a>
|
|
33
|
+
|
|
34
|
+
<header class="gw-header" data-gw-header>
|
|
35
|
+
<div class="gw-wrap gw-header__bar">
|
|
36
|
+
<a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a><a class="gw-brand" href="footer.html#gempages" data-gw-show="brand:gempages" hidden><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
|
|
37
|
+
<nav class="gw-nav" aria-label="Main">
|
|
38
|
+
<ul class="gw-nav__list">
|
|
39
|
+
<li class="gw-nav__item">
|
|
40
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
|
|
41
|
+
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
42
|
+
<div class="gw-wrap gw-mega__grid">
|
|
43
|
+
<div class="gw-mega__col">
|
|
44
|
+
<p class="gw-mega__heading">Build</p>
|
|
45
|
+
<a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
|
|
46
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
|
|
47
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="gw-mega__col">
|
|
50
|
+
<p class="gw-mega__heading">Grow</p>
|
|
51
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests & personalization</b><i>You promote the winner</i></span></a>
|
|
52
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers & upsells</b><i>Bundles, gifts, bumps</i></span></a>
|
|
53
|
+
<a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics & data</b><i>First-party, yours</i></span></a>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="gw-mega__col">
|
|
56
|
+
<p class="gw-mega__heading">Connect</p>
|
|
57
|
+
<a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
|
|
58
|
+
<a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP & agents</b><i>Claude and Codex</i></span></a>
|
|
59
|
+
<a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
|
|
60
|
+
</div>
|
|
61
|
+
<a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</li>
|
|
65
|
+
<li class="gw-nav__item">
|
|
66
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
67
|
+
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
68
|
+
<div class="gw-wrap gw-mega__grid">
|
|
69
|
+
<div class="gw-mega__col">
|
|
70
|
+
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
71
|
+
<a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google & TikTok ads</b><i>A funnel for every ad angle</i></span></a>
|
|
72
|
+
<a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="gw-mega__col">
|
|
75
|
+
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
76
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
|
|
77
|
+
<a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents & AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
|
|
78
|
+
</div>
|
|
79
|
+
<a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</li>
|
|
83
|
+
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
84
|
+
<li class="gw-nav__item">
|
|
85
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
86
|
+
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
87
|
+
<div class="gw-wrap gw-mega__grid">
|
|
88
|
+
<div class="gw-mega__col">
|
|
89
|
+
<p class="gw-mega__heading">Learn</p>
|
|
90
|
+
<a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
|
|
91
|
+
<a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="gw-mega__col">
|
|
94
|
+
<p class="gw-mega__heading">Company</p>
|
|
95
|
+
<a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
|
|
96
|
+
<a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</li>
|
|
101
|
+
</ul>
|
|
102
|
+
</nav>
|
|
103
|
+
<div class="gw-header__actions">
|
|
104
|
+
<button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
|
|
105
|
+
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
106
|
+
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
107
|
+
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
108
|
+
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
112
|
+
<nav class="gw-wrap" aria-label="Main, mobile">
|
|
113
|
+
<details class="gw-mobile-menu__group">
|
|
114
|
+
<summary>Product</summary>
|
|
115
|
+
<ul class="gw-mobile-menu__list">
|
|
116
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
|
|
117
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
|
|
118
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests & personalization</a></li>
|
|
119
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers & upsells</a></li>
|
|
120
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
|
|
121
|
+
</ul>
|
|
122
|
+
</details>
|
|
123
|
+
<details class="gw-mobile-menu__group">
|
|
124
|
+
<summary>Use cases</summary>
|
|
125
|
+
<ul class="gw-mobile-menu__list">
|
|
126
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google & TikTok ads</a></li>
|
|
127
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
|
|
128
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents & AI search</a></li>
|
|
129
|
+
</ul>
|
|
130
|
+
</details>
|
|
131
|
+
<a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
|
|
132
|
+
<details class="gw-mobile-menu__group">
|
|
133
|
+
<summary>Resources</summary>
|
|
134
|
+
<ul class="gw-mobile-menu__list">
|
|
135
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
|
|
136
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
|
|
137
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
|
|
138
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
|
|
139
|
+
</ul>
|
|
140
|
+
</details>
|
|
141
|
+
<div class="gw-mobile-menu__actions">
|
|
142
|
+
<a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
143
|
+
<a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
|
|
144
|
+
<a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
145
|
+
</div>
|
|
146
|
+
</nav>
|
|
147
|
+
</div>
|
|
148
|
+
</header>
|
|
149
|
+
|
|
150
|
+
<main id="main">
|
|
151
|
+
<section class="gw-section">
|
|
152
|
+
<div class="gw-wrap">
|
|
153
|
+
<div class="gw-section__head">
|
|
154
|
+
<p class="gw-label">Footer, 0.7.0</p>
|
|
155
|
+
<h1><span class="gw-dim">The footer of gemboss.ai.</span> Now one template for every brand.</h1>
|
|
156
|
+
<p class="gw-lead">Ask AI links, five columns that fold into rows on a phone, product-family rows, a theme toggle and the wordmark. Each part is optional. Scroll down, or narrow the window below 768px.</p>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="gw-segmented" role="radiogroup" aria-label="Footer of" data-gw-segmented="brand">
|
|
159
|
+
<button type="button" role="radio" aria-checked="true" value="gemboss">GemBoss</button>
|
|
160
|
+
<button type="button" role="radio" aria-checked="false" value="gempages">GemPages-style</button>
|
|
161
|
+
</div>
|
|
162
|
+
<p class="gw-note demo-mt" data-gw-show="brand:gemboss">GemBoss: tight corners, the ink button, two family rows. The words are gemboss.ai's.</p>
|
|
163
|
+
<p class="gw-note demo-mt" data-gw-show="brand:gempages" hidden>A GemPages-style brand: soft corners, the accent button and GemPages' blue, its own family row (GemBoss, GemX, GemUpsells), the newsletter instead of Ask AI. Example brand, not GemPages' page.</p>
|
|
164
|
+
<div class="gw-actions">
|
|
165
|
+
<a class="gw-btn" href="#footer">See the footer</a>
|
|
166
|
+
<a class="gw-btn gw-btn--secondary" href="https://gemboss.ai/">Compare with gemboss.ai</a>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</section>
|
|
170
|
+
</main>
|
|
171
|
+
|
|
172
|
+
<footer class="gw-footer" id="footer">
|
|
173
|
+
<div class="gw-wrap">
|
|
174
|
+
<div class="gw-footer__grid">
|
|
175
|
+
<div class="gw-footer__brand">
|
|
176
|
+
<a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
|
|
177
|
+
<a class="gw-brand" href="footer.html#gempages" data-gw-show="brand:gempages" hidden><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example brand</span></a>
|
|
178
|
+
<p data-gw-show="brand:gemboss">The AI Conversion Engine for Shopify. Build a brand-true store, ship it blazing fast, and see what to change to sell more.</p>
|
|
179
|
+
<p data-gw-show="brand:gempages" hidden>One sentence on what the brand does for the reader. Sample text for the demo.</p>
|
|
180
|
+
<div class="gw-footer__ask" data-gw-show="brand:gemboss">
|
|
181
|
+
<p class="gw-footer__ask-label" id="footer-ask">Ask AI about GemBoss</p>
|
|
182
|
+
<ul aria-labelledby="footer-ask">
|
|
183
|
+
<li><a href="https://chatgpt.com/?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
184
|
+
<li><a href="https://claude.ai/new?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Claude<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
185
|
+
<li><a href="https://www.perplexity.ai/search/new?q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Perplexity<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
186
|
+
<li><a href="https://www.google.com/search?udm=50&q=What%20is%20GemBoss%20%28gemboss.ai%29%2C%20and%20how%20does%20it%20help%20Shopify%20brands%20turn%20ad%20clicks%20into%20sales%3F" target="_blank" rel="noopener">Google AI Mode<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
187
|
+
</ul>
|
|
188
|
+
</div>
|
|
189
|
+
<form class="gw-footer__newsletter" action="#footer" method="post" novalidate data-gw-show="brand:gempages" hidden>
|
|
190
|
+
<div class="gw-field">
|
|
191
|
+
<label class="gw-field__label" for="footer-email">Product news by email</label>
|
|
192
|
+
<div class="gw-form-inline">
|
|
193
|
+
<input class="gw-input" id="footer-email" name="email" type="email" autocomplete="email" required aria-describedby="footer-email-error footer-email-note">
|
|
194
|
+
<button class="gw-btn gw-btn--secondary" type="submit">Subscribe</button>
|
|
195
|
+
</div>
|
|
196
|
+
<p class="gw-field__error" id="footer-email-error"></p>
|
|
197
|
+
<p class="gw-field__hint" id="footer-email-note">One email a month. Unsubscribe in one click. <a href="https://gemboss.ai/privacy">Privacy policy</a></p>
|
|
198
|
+
</div>
|
|
199
|
+
</form>
|
|
200
|
+
</div>
|
|
201
|
+
<nav class="gw-footer__col" aria-label="Product">
|
|
202
|
+
<details class="gw-footer__fold">
|
|
203
|
+
<summary><h2 class="gw-footer__heading">Product</h2></summary>
|
|
204
|
+
<ul>
|
|
205
|
+
<li><a href="https://gemboss.ai/funnel">Funnel builder</a></li>
|
|
206
|
+
<li><a href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
|
|
207
|
+
<li><a href="https://gemboss.ai/ab-testing">Tests & personalization</a></li>
|
|
208
|
+
<li><a href="https://gemboss.ai/offers">Offers & upsells</a></li>
|
|
209
|
+
<li><a href="https://gemboss.ai/data">Analytics & data</a></li>
|
|
210
|
+
<li><a href="https://gemboss.ai/integrations">Integrations</a></li>
|
|
211
|
+
<li><a href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
212
|
+
</ul>
|
|
213
|
+
</details>
|
|
214
|
+
</nav>
|
|
215
|
+
<nav class="gw-footer__col" aria-label="Use cases">
|
|
216
|
+
<details class="gw-footer__fold">
|
|
217
|
+
<summary><h2 class="gw-footer__heading">Use cases</h2></summary>
|
|
218
|
+
<ul>
|
|
219
|
+
<li><a href="https://gemboss.ai/meta-ads">Meta, Google & TikTok ads</a></li>
|
|
220
|
+
<li><a href="https://gemboss.ai/klaviyo-personalized-landing-pages">Klaviyo landing pages</a></li>
|
|
221
|
+
<li><a href="https://gemboss.ai/affiliate-landing-pages">Affiliate pages</a></li>
|
|
222
|
+
<li><a href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
|
|
223
|
+
<li><a href="https://gemboss.ai/agent-ready">AI agents & AI search</a></li>
|
|
224
|
+
</ul>
|
|
225
|
+
</details>
|
|
226
|
+
</nav>
|
|
227
|
+
<nav class="gw-footer__col" aria-label="Solutions">
|
|
228
|
+
<details class="gw-footer__fold">
|
|
229
|
+
<summary><h2 class="gw-footer__heading">Solutions</h2></summary>
|
|
230
|
+
<ul>
|
|
231
|
+
<li><a href="https://gemboss.ai/beauty-skincare">Beauty & skincare</a></li>
|
|
232
|
+
<li><a href="https://gemboss.ai/wellness-supplements">Wellness</a></li>
|
|
233
|
+
<li><a href="https://gemboss.ai/fashion-apparel">Fashion</a></li>
|
|
234
|
+
<li><a href="https://gemboss.ai/home-food">Home & food</a></li>
|
|
235
|
+
<li><a href="https://gemboss.ai/electronics">Consumer electronics</a></li>
|
|
236
|
+
<li><a href="https://gemboss.ai/enterprise">Enterprise</a></li>
|
|
237
|
+
<li><a href="https://gemboss.ai/managed">Managed service</a></li>
|
|
238
|
+
</ul>
|
|
239
|
+
</details>
|
|
240
|
+
</nav>
|
|
241
|
+
<nav class="gw-footer__col" aria-label="Resources">
|
|
242
|
+
<details class="gw-footer__fold">
|
|
243
|
+
<summary><h2 class="gw-footer__heading">Resources</h2></summary>
|
|
244
|
+
<ul>
|
|
245
|
+
<li><a href="https://gemboss.ai/audit">Free store audit</a></li>
|
|
246
|
+
<li><a href="https://gemboss.ai/shopify-store-setup">Shopify store setup</a></li>
|
|
247
|
+
<li><a href="https://gemboss.ai/blog">Blog</a></li>
|
|
248
|
+
<li><a href="https://gemboss.ai/docs">Docs</a></li>
|
|
249
|
+
<li><a href="https://gemboss.ai/mcp">MCP for AI agents</a></li>
|
|
250
|
+
<li><a href="https://feedback.gemboss.ai/changelog" rel="noopener">Changelog<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
|
|
251
|
+
</ul>
|
|
252
|
+
</details>
|
|
253
|
+
</nav>
|
|
254
|
+
<nav class="gw-footer__col" aria-label="Company">
|
|
255
|
+
<details class="gw-footer__fold">
|
|
256
|
+
<summary><h2 class="gw-footer__heading">Company</h2></summary>
|
|
257
|
+
<ul>
|
|
258
|
+
<li><a href="https://gemboss.ai/company">About</a></li>
|
|
259
|
+
<li><a href="https://gemboss.ai/careers">Careers</a></li>
|
|
260
|
+
<li><a href="https://gemboss.ai/company#security">Security</a></li>
|
|
261
|
+
<li><a href="https://gemboss.ai/partners">Partners</a></li>
|
|
262
|
+
<li><a href="https://gemboss.ai/affiliates">Affiliates</a></li>
|
|
263
|
+
<li><a href="https://gemboss.ai/klaviyo-agencies">Klaviyo agencies</a></li>
|
|
264
|
+
<li><a href="https://gemboss.ai/contact">Contact</a></li>
|
|
265
|
+
</ul>
|
|
266
|
+
</details>
|
|
267
|
+
</nav>
|
|
268
|
+
</div>
|
|
269
|
+
<nav class="gw-footer__family" aria-label="More from GemBoss" data-gw-show="brand:gemboss">
|
|
270
|
+
<details class="gw-footer__fold">
|
|
271
|
+
<summary><h2 class="gw-footer__heading">More from GemBoss</h2></summary>
|
|
272
|
+
<ul>
|
|
273
|
+
<li><a href="https://gemboss.ai/custom-theme"><b>GemThemes</b> <i>Custom theme</i></a></li>
|
|
274
|
+
<li><a href="https://gemboss.ai/product#plugins"><b>Plugins</b> <i>Reviews, quiz, popups</i></a></li>
|
|
275
|
+
<li><a href="https://gemboss.ai/download"><b>Desktop app</b> <i>macOS & Windows</i></a></li>
|
|
276
|
+
<li><a href="https://community.gemboss.ai" rel="noopener"><b>Community<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Brands building with GemBoss</i></a></li>
|
|
277
|
+
<li><a href="https://news.gemboss.ai/ext" rel="noopener"><b>News for Chrome<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Daily briefing</i></a></li>
|
|
278
|
+
</ul>
|
|
279
|
+
</details>
|
|
280
|
+
</nav>
|
|
281
|
+
<nav class="gw-footer__family" aria-label="From the same team, on the Shopify App Store" data-gw-show="brand:gemboss">
|
|
282
|
+
<details class="gw-footer__fold">
|
|
283
|
+
<summary><h2 class="gw-footer__heading">From the same team, on the Shopify App Store</h2></summary>
|
|
284
|
+
<ul>
|
|
285
|
+
<li><a href="https://gemboss.ai/shopify-apps#gempages"><b>GemPages</b> <i>Landing page builder</i></a></li>
|
|
286
|
+
<li><a href="https://gemboss.ai/shopify-apps#gemx"><b>GemX</b> <i>CRO & A/B testing</i></a></li>
|
|
287
|
+
<li><a href="https://gemboss.ai/shopify-apps#gemupsells"><b>GemUpsells</b> <i>Journey builder</i></a></li>
|
|
288
|
+
<li><a href="https://gemboss.ai/shopify-apps"><b>All three apps</b> <i>And how GemBoss differs</i></a></li>
|
|
289
|
+
</ul>
|
|
290
|
+
</details>
|
|
291
|
+
</nav>
|
|
292
|
+
<nav class="gw-footer__family" aria-label="From the same team" data-gw-show="brand:gempages" hidden>
|
|
293
|
+
<details class="gw-footer__fold">
|
|
294
|
+
<summary><h2 class="gw-footer__heading">From the same team</h2></summary>
|
|
295
|
+
<ul>
|
|
296
|
+
<li><a href="https://gemboss.ai/" target="_blank" rel="noopener"><b>GemBoss<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>The AI Conversion Engine for Shopify</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
297
|
+
<li><a href="https://gemboss.ai/shopify-apps#gemx" rel="noopener"><b>GemX<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>CRO & A/B testing</i></a></li>
|
|
298
|
+
<li><a href="https://gemboss.ai/shopify-apps#gemupsells" rel="noopener"><b>GemUpsells<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Journey builder</i></a></li>
|
|
299
|
+
</ul>
|
|
300
|
+
</details>
|
|
301
|
+
</nav>
|
|
302
|
+
<div class="gw-footer__bottom">
|
|
303
|
+
<span><span data-gw-show="brand:gemboss">© 2026 GemBoss. All rights reserved.</span><span data-gw-show="brand:gempages" hidden>© 2026 Example brand. Sample text.</span></span>
|
|
304
|
+
<ul aria-label="Legal">
|
|
305
|
+
<li><a href="https://gemboss.ai/privacy">Privacy</a></li>
|
|
306
|
+
<li><a href="https://gemboss.ai/terms">Terms</a></li>
|
|
307
|
+
</ul>
|
|
308
|
+
<button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
|
|
309
|
+
<ul aria-label="Social">
|
|
310
|
+
<li><a href="https://www.linkedin.com/company/gempages" target="_blank" rel="noopener">LinkedIn<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
311
|
+
<li><a href="https://x.com/gempages" target="_blank" rel="noopener">X<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
312
|
+
<li><a href="https://www.gempages.net" target="_blank" rel="noopener">GemPages<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
|
|
313
|
+
</ul>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="gw-footer__wordmark" aria-hidden="true" data-gw-show="brand:gemboss"><svg viewBox="0 0 100 116"><polygon points="26,14 74,14 66,50 34,50" fill="currentColor"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linejoin="round"/></svg><span>GemBoss</span></div>
|
|
316
|
+
<div class="gw-footer__wordmark" aria-hidden="true" data-gw-show="brand:gempages" hidden><svg viewBox="0 0 26 26"><rect x="1" y="1" width="24" height="24" rx="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg><span>Example brand</span></div>
|
|
317
|
+
</div>
|
|
318
|
+
</footer>
|
|
319
|
+
|
|
320
|
+
<script src="../js/website.js" defer></script>
|
|
321
|
+
<script>
|
|
322
|
+
// demo only: the switch above picks a brand. A real site sets its profiles once, in the markup of <html>, and its
|
|
323
|
+
// accent in site.css (docs/theming.md); this page flips them so one file can show both. #gempages opens it so.
|
|
324
|
+
(function () {
|
|
325
|
+
var root = document.documentElement, accent = document.getElementById('demo-gempages');
|
|
326
|
+
function brand(b) {
|
|
327
|
+
var gp = b === 'gempages';
|
|
328
|
+
if (gp) { root.setAttribute('data-gw-radius', 'soft'); root.setAttribute('data-gw-action', 'accent'); }
|
|
329
|
+
else { root.removeAttribute('data-gw-radius'); root.removeAttribute('data-gw-action'); }
|
|
330
|
+
accent.media = gp ? 'all' : 'not all';
|
|
331
|
+
}
|
|
332
|
+
document.addEventListener('gw:segmented', function (e) { if (e.detail.name === 'brand') brand(e.detail.value); });
|
|
333
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
334
|
+
if (location.hash === '#gempages') { var o = document.querySelector('[data-gw-segmented="brand"] [value="gempages"]'); if (o) o.click(); }
|
|
335
|
+
});
|
|
336
|
+
})();
|
|
337
|
+
</script>
|
|
338
|
+
</body>
|
|
339
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -585,6 +585,7 @@ npx gemboss-website check --fix-list</code></pre>
|
|
|
585
585
|
</article>
|
|
586
586
|
<p class="demo-mt">The whole page for a blog post, with breadcrumbs, the meta row, contents and callouts: <a href="article.html">an article</a>, and <a href="blog.html">the blog index</a> with its post list.</p>
|
|
587
587
|
<p class="demo-mt">Fields in every state, the footer newsletter, a testimonial wall and the rating badge: <a href="forms.html">forms and ratings</a>.</p>
|
|
588
|
+
<p class="demo-mt">The footer as gemboss.ai has it, with Ask AI links, columns that fold on a phone, family rows and the wordmark: <a href="footer.html">the full footer</a>.</p>
|
|
588
589
|
</div>
|
|
589
590
|
</section>
|
|
590
591
|
|
package/docs/components.md
CHANGED
|
@@ -36,7 +36,7 @@ Don't remove the skip link, and don't leave out `id="main"`.
|
|
|
36
36
|
|
|
37
37
|
`js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
|
|
38
38
|
the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control, the
|
|
39
|
-
busy button, an article's contents list and the scroll box of its tables (0.5.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
|
|
39
|
+
busy button, an article's contents list and the scroll box of its tables (0.5.0), and the footer's folds (0.7.0). Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
|
|
40
40
|
preview) is wired by calling `init` on it, as often as needed: an element is wired once.
|
|
41
41
|
|
|
42
42
|
```js
|
|
@@ -354,18 +354,62 @@ hero pulled up under the header.
|
|
|
354
354
|
|
|
355
355
|
## Footer
|
|
356
356
|
|
|
357
|
+
The footer of gemboss.ai (0.7.0): one per site, the same on every page, from `templates/footer.html`. A brand fills
|
|
358
|
+
its rows (its columns, its family, its words) and deletes the optional parts it does not use; it never adds a footer
|
|
359
|
+
part of its own. See it in `demo/footer.html`, with a switch to the same footer for a GemPages-style brand.
|
|
360
|
+
|
|
357
361
|
| class | for |
|
|
358
362
|
|---|---|
|
|
359
363
|
| `.gw-footer` | the footer: one hairline on top, white like the page |
|
|
360
|
-
| `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px |
|
|
364
|
+
| `.gw-footer__grid` | brand block and link columns: 2 columns on phones, 3 from 768px, one row from 1080px. With folding columns (0.7.0): one track of rows below 768px, and from 1080px the brand's track as on gemboss.ai (193.5px beside 1120px), the columns sharing the rest: three to six |
|
|
361
365
|
| `.gw-footer__brand` | the brand and one sentence, full width on phones |
|
|
362
366
|
| `.gw-footer__col`, `__heading` | a `<nav>` column: a sentence-case heading and a `<ul>` of links |
|
|
367
|
+
| `.gw-footer__fold` | 0.7.0: the column's `<details>`, its `<summary>` holding the `__heading`. Below 768px a 52px row with a chevron, folded until tapped (44px links); from 768px the open column, the summary only its heading (no box, no Tab stop). Works without the script |
|
|
368
|
+
| `.gw-footer__ask`, `__ask-label` | 0.7.0, optional, in the brand block: "Ask AI about [Brand]" and links that open ChatGPT, Claude, Perplexity and Google AI Mode with one neutral question typed in |
|
|
369
|
+
| `.gw-footer__family` | 0.7.0, optional, after the grid: a `<nav>` row of products, a fold whose heading is its label, a list of `<a><b>Name</b> <i>One line</i></a>`; two a line on phones, four from 768px, from 1080px the label beside the items. Repeat it for a second family |
|
|
370
|
+
| `.gw-footer__ext` | 0.7.0: the drawn ↗ after a link that leaves the site, `aria-hidden="true"` |
|
|
363
371
|
| `.gw-footer__bottom` | copyright, legal links, social links; alone (no grid above), it drops its top rule |
|
|
372
|
+
| `.gw-footer__toggle` | 0.7.0, optional: with `.gw-theme-toggle` and `data-gw-theme-toggle`, the theme toggle in the bottom row, a 32px square with one hairline (44px on touch), before the social links |
|
|
373
|
+
| `.gw-footer__wordmark` | 0.7.0, optional, last: the brand's mark (inline SVG in `currentColor`) and name, ink at 10%, `--gw-display-wordmark`; `aria-hidden="true"`; not on phones |
|
|
364
374
|
| `.gw-footer__newsletter` | 0.6.0, optional: a `<form>` in the brand block, 24px under its sentence: a `.gw-field` with its label, a `.gw-form-inline` row (the email field and a `--secondary` button) and the note |
|
|
375
|
+
| `.gw-visually-hidden` | 0.7.0, anywhere: words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` |
|
|
376
|
+
|
|
377
|
+
```html
|
|
378
|
+
<nav class="gw-footer__col" aria-label="Product">
|
|
379
|
+
<details class="gw-footer__fold">
|
|
380
|
+
<summary><h2 class="gw-footer__heading">Product</h2></summary>
|
|
381
|
+
<ul><li><a href="/funnel">Funnel builder</a></li> …</ul>
|
|
382
|
+
</details>
|
|
383
|
+
</nav>
|
|
384
|
+
…
|
|
385
|
+
<nav class="gw-footer__family" aria-label="More from GemBoss">
|
|
386
|
+
<details class="gw-footer__fold">
|
|
387
|
+
<summary><h2 class="gw-footer__heading">More from GemBoss</h2></summary>
|
|
388
|
+
<ul>
|
|
389
|
+
<li><a href="/custom-theme"><b>GemThemes</b> <i>Custom theme</i></a></li>
|
|
390
|
+
<li><a href="https://community.gemboss.ai" rel="noopener"><b>Community<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>Brands building with GemBoss</i></a></li>
|
|
391
|
+
</ul>
|
|
392
|
+
</details>
|
|
393
|
+
</nav>
|
|
394
|
+
```
|
|
395
|
+
|
|
396
|
+
Ask AI: each link carries the same question, URL-encoded after `?q=`: `https://chatgpt.com/?q=…`,
|
|
397
|
+
`https://claude.ai/new?q=…`, `https://www.perplexity.ai/search/new?q=…`, `https://www.google.com/search?udm=50&q=…`.
|
|
398
|
+
gemboss.ai asks "What is GemBoss (gemboss.ai), and how does it help Shopify brands turn ad clicks into sales?": what the
|
|
399
|
+
brand is and what it does for the reader, never a leading question, so the answer comes from what the web says.
|
|
400
|
+
Words, not the assistants' logos (another company's mark on a page is a permission question).
|
|
401
|
+
|
|
402
|
+
Links that leave the site carry the ↗ (`.gw-footer__ext`); a link with `target="_blank"` also says so to a screen
|
|
403
|
+
reader: `<span class="gw-visually-hidden"> (opens in a new tab)</span>` inside the `<a>`. A link without
|
|
404
|
+
`target="_blank"` does not.
|
|
365
405
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
406
|
+
A GemCommerce brand lists its siblings in its family row: a GemPages site might show GemBoss, GemX and GemUpsells.
|
|
407
|
+
|
|
408
|
+
The newsletter note says how often you write and how to stop, and links to the privacy policy. Don't: uppercase
|
|
409
|
+
column headings; a footer part that is not in the template (a second logo row, a badge strip, a map); a column
|
|
410
|
+
without its heading in the `<summary>`; a wordmark a screen reader reads (`check`: `footer-markup`); the assistants'
|
|
411
|
+
logos in the Ask AI row; a newsletter form that stores nothing; a consent box ticked for the reader; a filled primary
|
|
412
|
+
button in the footer (the closing CTA above it is the page's action).
|
|
369
413
|
|
|
370
414
|
## Sections
|
|
371
415
|
|
|
@@ -732,6 +776,14 @@ not make public with the review; masonry or a carousel that moves by itself.
|
|
|
732
776
|
Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
|
|
733
777
|
the first screen, and don't animate anything but `transform` and `opacity`.
|
|
734
778
|
|
|
779
|
+
## Additions to the markup contract in 0.7.0
|
|
780
|
+
|
|
781
|
+
The footer of gemboss.ai: `.gw-footer__fold` (a `<details>` in a `.gw-footer__col` or a `.gw-footer__family`, its
|
|
782
|
+
`<summary>` holding the `.gw-footer__heading`) with the script's `fold` part (`data-gw-ready="fold"`), `.gw-footer__ask`
|
|
783
|
+
(`__ask-label`), `.gw-footer__family`, `.gw-footer__ext`, `.gw-footer__toggle` (on a `.gw-theme-toggle`),
|
|
784
|
+
`.gw-footer__wordmark`, and `.gw-visually-hidden`. One token: `--gw-display-wordmark`. No event. No markup or class of
|
|
785
|
+
0.6.0 changes: the 0.6.0 footer markup still works and looks the same.
|
|
786
|
+
|
|
735
787
|
## Additions to the markup contract in 0.6.0
|
|
736
788
|
|
|
737
789
|
Forms: `.gw-field` (`__label`, `__error`, `__hint`), `.gw-input`, `.gw-select`, `.gw-textarea`, `.gw-choices`, `.gw-check`
|
package/docs/markup-contract.md
CHANGED
|
@@ -28,7 +28,7 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
|
|
|
28
28
|
|
|
29
29
|
One script wires every part below: the mega menu, the mobile menu, the theme toggle, reveal, the header's scroll
|
|
30
30
|
state, the current page, the segmented control, the busy button, an article's contents list and the scroll box of its
|
|
31
|
-
prose tables (0.5.0). It comes in two entries built from one source
|
|
31
|
+
prose tables (0.5.0), and the footer's folds (0.7.0). It comes in two entries built from one source
|
|
32
32
|
(`js/website.mjs`; `scripts/build.mjs` writes `js/website.js` from it and `--check` fails when they differ):
|
|
33
33
|
|
|
34
34
|
| entry | file | how it starts |
|
|
@@ -43,9 +43,9 @@ prose tables (0.5.0). It comes in two entries built from one source
|
|
|
43
43
|
to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
|
|
44
44
|
- **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
|
|
45
45
|
mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
|
|
46
|
-
- **`version`**: `'0.
|
|
46
|
+
- **`version`**: `'0.7.0'`. The classic script exposes the three as `window.gwWebsite`.
|
|
47
47
|
- **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `theme`, `reveal`, `header`,
|
|
48
|
-
`segmented`, `toc`, `table`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
|
|
48
|
+
`segmented`, `toc`, `table`, `fold`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
|
|
49
49
|
is still wired.
|
|
50
50
|
- **One copy per page.** The first copy that runs owns the page (`window.gwWebsite`); another one (the classic
|
|
51
51
|
script next to a bundle, two bundles) hands its calls to it, so nothing is wired twice.
|
|
@@ -160,6 +160,60 @@ Script behaviour:
|
|
|
160
160
|
menu's links whose `href` pathname equals `location.pathname` (when the markup did not already). Each `init` takes
|
|
161
161
|
its own marks back first, so after a client-side navigation they follow the new path; a mark in the markup stays.
|
|
162
162
|
|
|
163
|
+
## Footer (0.7.0)
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<footer class="gw-footer">
|
|
167
|
+
<div class="gw-wrap">
|
|
168
|
+
<div class="gw-footer__grid">
|
|
169
|
+
<div class="gw-footer__brand">
|
|
170
|
+
<a class="gw-brand" href="/">…</a><p>One sentence.</p>
|
|
171
|
+
<div class="gw-footer__ask"> <!-- optional -->
|
|
172
|
+
<p class="gw-footer__ask-label" id="footer-ask">Ask AI about Brand</p>
|
|
173
|
+
<ul aria-labelledby="footer-ask"><li><a href="https://chatgpt.com/?q=…" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li> …</ul>
|
|
174
|
+
</div>
|
|
175
|
+
<form class="gw-footer__newsletter" …>…</form> <!-- optional (0.6.0) -->
|
|
176
|
+
</div>
|
|
177
|
+
<nav class="gw-footer__col" aria-label="Product"> <!-- three to six -->
|
|
178
|
+
<details class="gw-footer__fold"> <!-- no open: folded on phones -->
|
|
179
|
+
<summary><h2 class="gw-footer__heading">Product</h2></summary>
|
|
180
|
+
<ul><li><a href="…">…</a></li> …</ul>
|
|
181
|
+
</details>
|
|
182
|
+
</nav>
|
|
183
|
+
</div>
|
|
184
|
+
<nav class="gw-footer__family" aria-label="More from Brand"> <!-- optional, repeatable -->
|
|
185
|
+
<details class="gw-footer__fold">
|
|
186
|
+
<summary><h2 class="gw-footer__heading">More from Brand</h2></summary>
|
|
187
|
+
<ul><li><a href="…"><b>Name<span class="gw-footer__ext" aria-hidden="true"></span>?</b> <i>One line</i></a></li> …</ul>
|
|
188
|
+
</details>
|
|
189
|
+
</nav>
|
|
190
|
+
<div class="gw-footer__bottom">
|
|
191
|
+
<span>© …</span><ul aria-label="Legal">…</ul>
|
|
192
|
+
<button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme">svg</button> <!-- optional -->
|
|
193
|
+
<ul aria-label="Social">…</ul>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="gw-footer__wordmark" aria-hidden="true"><svg viewBox="…">…currentColor…</svg><span>Brand</span></div> <!-- optional -->
|
|
196
|
+
</div>
|
|
197
|
+
</footer>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
- **Folds** (`.gw-footer__fold`, a `<details>` whose `<summary>` holds the `.gw-footer__heading`): the CSS folds them
|
|
201
|
+
below 768px (52px rows, the browser opens and closes them) and draws the open column from 768px, where the summary
|
|
202
|
+
is `display: contents` and the list shows even while the `<details>` is closed (`::details-content`). The script,
|
|
203
|
+
for each fold with a summary:
|
|
204
|
+
- from 768px (`matchMedia('(min-width: 768px)')`) sets `open`, puts `tabindex="-1"` on the summary and cancels a
|
|
205
|
+
click on it (`preventDefault`), so a heading never folds its column away, in a browser without
|
|
206
|
+
`::details-content` too;
|
|
207
|
+
- below 768px gives back the markup's state: `open` as the markup had it (folded unless it said `open`), the
|
|
208
|
+
summary's own `tabindex` (none, usually); again on every change of width;
|
|
209
|
+
- `destroy`: the markup's state, its listener and the `fold` mark go. No event.
|
|
210
|
+
- **Theme toggle**: a `[data-gw-theme-toggle]` in the bottom row is wired like the header's (above); with both on the
|
|
211
|
+
page, a press on either relabels both.
|
|
212
|
+
- **Not the script's**: the Ask AI row, the family rows, the ↗ and the wordmark are markup and CSS only. The question
|
|
213
|
+
in the Ask AI links is written in the markup, URL-encoded.
|
|
214
|
+
- `check` reports a `.gw-footer__fold` that is not a `<details>`, has no `<summary>`, or whose summary does not hold
|
|
215
|
+
the `.gw-footer__heading`, and a `.gw-footer__wordmark` without `aria-hidden="true"` (`footer-markup`).
|
|
216
|
+
|
|
163
217
|
## Article: contents and prose tables (0.5.0)
|
|
164
218
|
|
|
165
219
|
```html
|
|
@@ -329,6 +383,7 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
|
|
|
329
383
|
| `.gw-table` (+ `--compare`) | data / comparison table; scrolls inside its box on phones |
|
|
330
384
|
| `.gw-faq` (`<details class="gw-faq__item"><summary>`) | FAQ accordion with no script |
|
|
331
385
|
| `.gw-prose` (+ `--sm`) | long-form reading: an article's own HTML, no classes inside; its bare tables get a `.gw-prose__table` box from the script (0.5.0) |
|
|
386
|
+
| `.gw-visually-hidden` | words for a screen reader only, " (opens in a new tab)" in a link with `target="_blank"` (0.7.0) |
|
|
332
387
|
| `.gw-tabs` (`role="tablist"`) | NOT in the kit yet (a reported gap would add it) |
|
|
333
388
|
|
|
334
389
|
## Sections
|
|
@@ -349,4 +404,4 @@ CSS only: the script does not touch a form. The page (or its server) owns valida
|
|
|
349
404
|
| `.gw-testimonials` (`.gw-card.gw-testimonial`: `__quote`, `__by`, `__avatar`) | a wall of short reviews, each linked to its source (0.6.0) |
|
|
350
405
|
| `.gw-pricing` (`.gw-plan`, `--featured`) | plan cards; the featured one has a hairline in the accent, not a fill |
|
|
351
406
|
| `.gw-cta` | closing call to action band |
|
|
352
|
-
| `.gw-footer` (`__grid`, `__col`, `__heading`, `__bottom`, `__newsletter`) | footer columns + bottom row; an optional newsletter form in the brand block (0.6.0) |
|
|
407
|
+
| `.gw-footer` (`__grid`, `__col`, `__heading`, `__bottom`, `__newsletter`, and 0.7.0: `__fold`, `__ask`, `__ask-label`, `__family`, `__ext`, `__toggle`, `__wordmark`) | footer columns + bottom row; an optional newsletter form in the brand block (0.6.0); the footer of gemboss.ai: columns that fold on phones, Ask AI, family rows, the toggle, the wordmark (0.7.0, above) |
|
package/docs/theming.md
CHANGED
|
@@ -14,8 +14,9 @@ every component follows. Everything else stays the kit's: the neutrals, the type
|
|
|
14
14
|
widths. That is what makes the sites look like one family, and why a site built by someone with no design training
|
|
15
15
|
still looks careful. `npx gemboss-website check` reports anything outside this set.
|
|
16
16
|
|
|
17
|
-
Working examples: `demo/theme-example.html` (the accent only)
|
|
18
|
-
the accent, all three profiles and the floating header).
|
|
17
|
+
Working examples: `demo/theme-example.html` (the accent only), `demo/brand-profiles.html` (a GemPages-style brand:
|
|
18
|
+
the accent, all three profiles and the floating header) and `demo/footer.html` (the footer, with a switch to the same
|
|
19
|
+
footer for a GemPages-style brand).
|
|
19
20
|
|
|
20
21
|
## 1 to 3. Accent, wash, logo
|
|
21
22
|
|
|
@@ -43,6 +44,11 @@ The logo and the favicon are files, not variables: the `<img class="gw-brand__ma
|
|
|
43
44
|
`alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
|
|
44
45
|
partials, and `<link rel="icon">` in the page head.
|
|
45
46
|
|
|
47
|
+
The footer (0.7.0, `templates/footer.html`) is the same for every brand; a brand fills it. Its family row lists the
|
|
48
|
+
brand's siblings (a GemPages site: GemBoss, GemX, GemUpsells), its Ask AI row asks about the brand, and its wordmark
|
|
49
|
+
is the brand's own mark as an inline SVG drawn in `currentColor` (so it takes the faint colour) and its name. The
|
|
50
|
+
radius profile reaches the family items and the toggle (8px, 12px in `soft`); nothing else of the footer changes.
|
|
51
|
+
|
|
46
52
|
## 4 to 6. The three profiles
|
|
47
53
|
|
|
48
54
|
Chosen once, in the page skeleton (the layout or partial every page shares). The first of each is the default and
|