@hagicode/hagilight-docusaurus 0.14.1-dev.150.1.68cde77 → 0.14.1-dev.152.1.1b8dd12
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/** Deals the footer avatar's cat fan once per page view, on the first load and after each client-side route change. */
|
|
2
2
|
export declare function onRouteDidUpdate(): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
/**
|
|
1
|
+
import { mountRandomFans } from '@hagicode/hagilight-core/random-image';
|
|
2
|
+
/** Deals the footer avatar's cat fan once per page view, on the first load and after each client-side route change. */
|
|
3
3
|
export function onRouteDidUpdate() {
|
|
4
|
-
void
|
|
4
|
+
void mountRandomFans(document);
|
|
5
5
|
}
|
|
@@ -11,7 +11,7 @@ function LinkSection({ heading, navLabel, links, tagged }) {
|
|
|
11
11
|
function FooterBrand({ locale, links, avatar }) {
|
|
12
12
|
const brand = resolveFooterBrand(locale);
|
|
13
13
|
const { primary, secondary } = pickFooterBrandLinks(links);
|
|
14
|
-
return (_jsxs("section", { className: "hagilight-brand", lang: brand.locale, "aria-labelledby": "hagilight-brand-title", children: [_jsxs("div", { className: "hagilight-brand__lead", children: [_jsxs("div", { className: "hagilight-brand__title", children: [avatar && (_jsxs("picture", { className: "hagilight-brand__avatar", "data-random-
|
|
14
|
+
return (_jsxs("section", { className: "hagilight-brand", lang: brand.locale, "aria-labelledby": "hagilight-brand-title", children: [_jsxs("div", { className: "hagilight-brand__lead", children: [_jsxs("div", { className: "hagilight-brand__title", children: [avatar && (_jsxs("picture", { className: "hagilight-brand__avatar", "data-random-fan": avatar.randomPool && randomPoolAttribute(avatar.randomPool), children: [_jsx("source", { type: "image/avif", srcSet: avatar.avif }), _jsx("source", { type: "image/webp", srcSet: avatar.webp }), _jsx("img", { src: avatar.webp, ...footerAvatarImageAttributes() })] })), _jsx("h2", { className: "hagilight-brand__headline", id: "hagilight-brand-title", children: brand.headline })] }), _jsxs("div", { className: "hagilight-brand__body", children: [_jsx("p", { className: "hagilight-brand__summary", children: brand.summary }), (primary || secondary) && (_jsxs("div", { className: "hagilight-brand__actions", children: [primary && (_jsxs("a", { className: "hagilight-brand__primary", href: primary.href, target: primary.target, rel: primary.rel, "aria-label": primary.ariaLabel, ...siteLinkGaAttributes(primary, 'footer_brand'), children: [_jsx("span", { children: primary.label }), _jsx("svg", { className: "hagilight-brand__arrow", viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), secondary && (_jsx("a", { className: "hagilight-brand__secondary", href: secondary.href, target: secondary.target, rel: secondary.rel, "aria-label": secondary.ariaLabel, ...siteLinkGaAttributes(secondary, 'footer_brand'), children: secondary.label }))] }))] })] }), _jsx("dl", { className: "hagilight-brand__pillars", children: brand.pillars.map((pillar, index) => (_jsxs("div", { className: "hagilight-brand__pillar", "data-pillar": pillar.id, style: { '--hagilight-brand-i': index }, children: [_jsx("dt", { children: pillar.label }), _jsx("dd", { children: pillar.description })] }, pillar.id))) })] }));
|
|
15
15
|
}
|
|
16
16
|
export function FooterView({ links, version, year, buildInfo, avatar }) {
|
|
17
17
|
const { labels } = links;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hagicode/hagilight-docusaurus",
|
|
3
|
-
"version": "0.14.1-dev.
|
|
3
|
+
"version": "0.14.1-dev.152.1.1b8dd12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Docusaurus plugin for HagiCode site features: footer, analytics, promote card, locales, SEO, sitemap, robots.txt, and RSS",
|
|
6
6
|
"repository": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@docusaurus/types": "^3.9.2",
|
|
41
|
-
"@hagicode/hagilight-core": "0.14.1-dev.
|
|
41
|
+
"@hagicode/hagilight-core": "0.14.1-dev.152.1.1b8dd12"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@docusaurus/core": "^3.9.2",
|
package/styles.css
CHANGED
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
min-width: 0;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
/* The decorative avatar keeps a fixed
|
|
122
|
+
/* The decorative avatar keeps a fixed box, so neither the fan nor a swap ever moves the headline. */
|
|
123
123
|
.hagilight-footer .hagilight-brand__avatar {
|
|
124
124
|
display: block;
|
|
125
125
|
flex: none;
|
|
@@ -135,6 +135,81 @@
|
|
|
135
135
|
object-fit: cover;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
/*
|
|
139
|
+
* The fan: three 56 px cards pivot on a point below the stack, so the side cards open like a hand of cards.
|
|
140
|
+
* The vendored default is the first centre card and fades out as the random cards are dealt over it. Each
|
|
141
|
+
* turn the left card leaves, the others shift left and a card waiting off stage enters on the right.
|
|
142
|
+
*/
|
|
143
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] {
|
|
144
|
+
--_card-ring: var(--ifm-background-color, Canvas);
|
|
145
|
+
position: relative;
|
|
146
|
+
width: 112px;
|
|
147
|
+
height: 76px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] img,
|
|
151
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: 10px;
|
|
154
|
+
left: 28px;
|
|
155
|
+
width: 56px;
|
|
156
|
+
height: 56px;
|
|
157
|
+
box-shadow: 0 0 0 2px var(--_card-ring), 0 3px 8px -2px rgb(0 0 0 / 0.35);
|
|
158
|
+
transform-origin: 50% 140%;
|
|
159
|
+
transition: opacity 320ms ease-out, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan {
|
|
163
|
+
position: absolute;
|
|
164
|
+
inset: 0;
|
|
165
|
+
display: block;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] img[data-fan-out] {
|
|
169
|
+
opacity: 0;
|
|
170
|
+
transform: scale(0.9);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card {
|
|
174
|
+
z-index: 0;
|
|
175
|
+
opacity: 0;
|
|
176
|
+
transform: scale(0.6);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="0"] {
|
|
180
|
+
z-index: 1;
|
|
181
|
+
opacity: 1;
|
|
182
|
+
transform: translate(-6px, 1px) rotate(-17deg);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="1"] {
|
|
186
|
+
z-index: 3;
|
|
187
|
+
opacity: 1;
|
|
188
|
+
transform: none;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="2"] {
|
|
192
|
+
z-index: 2;
|
|
193
|
+
opacity: 1;
|
|
194
|
+
transform: translate(6px, 1px) rotate(17deg);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="3"],
|
|
198
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="4"] {
|
|
199
|
+
transform: translate(10px, 0) rotate(34deg) scale(0.7);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card[data-slot="5"] {
|
|
203
|
+
transform: translate(-10px, 0) rotate(-36deg) scale(0.7);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@media (prefers-reduced-motion: reduce) {
|
|
207
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] img,
|
|
208
|
+
.hagilight-footer .hagilight-brand__avatar[data-random-fan] .hagilight-fan__card {
|
|
209
|
+
transition: none;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
138
213
|
/* Hidden in a brand block narrower than 360 px, where the headline needs the full width. */
|
|
139
214
|
@container hagilight-brand (max-width: 359.98px) {
|
|
140
215
|
.hagilight-footer .hagilight-brand__avatar {
|