@hagicode/hagilight-docusaurus 0.19.1-dev.185.1.a85e2a8 → 0.19.1-dev.189.1.6e24429

package/dist/theme/Footer/FooterView.js

@@ -6,8 +6,8 @@ import { pickFooterBrandLinks, resolveFooterBrand } from '@hagicode/hagilight-co
 import { footerAvatarImageAttributes } from '@hagicode/hagilight-core/footer-avatar';
 import { randomPoolAttribute } from '@hagicode/hagilight-core/random-image';
 import { withCampaignUtm } from '@hagicode/hagilight-core/links';
-function LinkSection({ heading, navLabel, links, tagged }) {
-    return (_jsxs("section", { children: [_jsx("h2", { children: heading }), _jsx("nav", { "aria-label": navLabel, children: _jsx("ul", { children: links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, ...(tagged ? siteLinkGaAttributes(link, 'footer') : {}), children: link.label }) }, link.id))) }) })] }));
+function ColumnLink({ entry }) {
+    return (_jsx("a", { href: entry.href, target: entry.target, rel: entry.rel, "aria-label": entry.ariaLabel, ...(entry.source === 'link' ? siteLinkGaAttributes(entry, 'footer') : {}), children: entry.label }));
 }
 function FooterBrand({ locale, links, avatar, siteId, siteUrl }) {
     const brand = resolveFooterBrand(locale);
@@ -33,5 +33,5 @@ function FooterBrand({ locale, links, avatar, siteId, siteUrl }) {
 export function FooterView({ links, version, year, buildInfo, avatar, siteId, siteUrl, consentLabel }) {
     const { labels } = links;
     const buildItems = buildInfoItems(buildInfo);
-    return (_jsxs("footer", { className: "hagilight-footer", children: [_jsx(FooterBrand, { locale: links.locale, links: links.quick, avatar: avatar, siteId: siteId, siteUrl: siteUrl }), _jsxs("div", { className: "hagilight-footer__sections", children: [links.relatedSites.length > 0 && (_jsxs("section", { children: [_jsx("h2", { children: labels.relatedSites }), _jsx("nav", { "aria-label": labels.navigation.relatedSites, children: _jsx("ul", { children: links.relatedSites.map((site) => (_jsx("li", { children: _jsx("a", { href: site.href, target: site.target, rel: site.rel, children: site.name }) }, site.id))) }) })] })), _jsx(LinkSection, { heading: labels.quickLinks, navLabel: labels.navigation.quickLinks, links: links.quick, tagged: true }), _jsx(LinkSection, { heading: labels.community, navLabel: labels.navigation.community, links: links.community, tagged: true })] }), (links.filings.length > 0 || consentLabel) && (_jsxs("nav", { className: "hagilight-footer__filings", "aria-label": labels.navigation.filings, children: [links.filings.map((link) => (_jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, children: link.label }, link.id))), consentLabel && (_jsx("button", { type: "button", className: "hagilight-footer__consent", "data-consent-preferences": true, children: consentLabel }))] })), _jsxs("p", { className: "hagilight-footer__copyright", children: [_jsxs("span", { children: ["\u00A9 ", year, " HagiCode"] }), ' | ', _jsxs("span", { className: "hagilight-footer__attribution", children: ["Powered By hagilight-docusaurus@", version] }), buildItems.map((item) => (_jsxs(Fragment, { children: [' | ', _jsxs("span", { className: "hagilight-footer__build", "data-build-field": item.field, title: item.title, "data-build-commit": item.title, children: [item.label, ": ", item.datetime ? _jsx("time", { dateTime: item.datetime, children: item.text }) : item.text] })] }, item.field)))] })] }));
+    return (_jsxs("footer", { className: "hagilight-footer", children: [_jsx(FooterBrand, { locale: links.locale, links: links.quick, avatar: avatar, siteId: siteId, siteUrl: siteUrl }), _jsx("div", { className: "hagilight-footer__sections", children: _jsx("div", { className: "hagilight-cols", children: links.columns.map((column, index) => (_jsxs("nav", { className: "hagilight-col", "data-column": column.id, style: { '--hagilight-col-i': index }, "aria-labelledby": `hagilight-col-${column.id}`, children: [_jsx("h2", { id: `hagilight-col-${column.id}`, children: labels.columns[column.id] }), _jsx("ul", { children: column.entries.map((entry) => (_jsx("li", { children: _jsx(ColumnLink, { entry: entry }) }, entry.id))) })] }, column.id))) }) }), _jsxs("div", { className: "hagilight-footer__base", children: [links.feeds.length > 0 && (_jsx("nav", { className: "hagilight-footer__feeds", "aria-label": labels.navigation.feeds, children: links.feeds.map((entry) => (_jsx(ColumnLink, { entry: entry }, entry.id))) })), (links.filings.length > 0 || consentLabel) && (_jsxs("nav", { className: "hagilight-footer__filings", "aria-label": labels.navigation.filings, children: [links.filings.map((link) => (_jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, children: link.label }, link.id))), consentLabel && (_jsx("button", { type: "button", className: "hagilight-footer__consent", "data-consent-preferences": true, children: consentLabel }))] }))] }), _jsxs("p", { className: "hagilight-footer__copyright", children: [_jsxs("span", { children: ["\u00A9 ", year, " HagiCode"] }), ' | ', _jsxs("span", { className: "hagilight-footer__attribution", children: ["Powered By hagilight-docusaurus@", version] }), buildItems.map((item) => (_jsxs(Fragment, { children: [' | ', _jsxs("span", { className: "hagilight-footer__build", "data-build-field": item.field, title: item.title, "data-build-commit": item.title, children: [item.label, ": ", item.datetime ? _jsx("time", { dateTime: item.datetime, children: item.text }) : item.text] })] }, item.field)))] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-docusaurus",
-  "version": "0.19.1-dev.185.1.a85e2a8",
+  "version": "0.19.1-dev.189.1.6e24429",
   "type": "module",
   "description": "Docusaurus plugin for HagiCode site features: footer, analytics, promote card, locales, SEO, sitemap, robots.txt, and RSS",
   "repository": {
@@ -39,7 +39,7 @@
   ],
   "dependencies": {
     "@docusaurus/types": "^3.9.2",
-    "@hagicode/hagilight-core": "0.19.1-dev.185.1.a85e2a8"
+    "@hagicode/hagilight-core": "0.19.1-dev.189.1.6e24429"
   },
   "peerDependencies": {
     "@docusaurus/core": "^3.9.2",

package/styles.css

@@ -7,19 +7,17 @@
 }
 
 .hagilight-footer__sections {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-  gap: 1.5rem;
-  margin: 0 auto 1.5rem;
+  container: hagilight-cols / inline-size;
+  margin: 0 auto 1.75rem;
   max-width: 72rem;
 }
 
-.hagilight-footer section {
-  min-width: 0;
+.hagilight-footer__base {
+  margin: 0 auto;
+  max-width: 72rem;
 }
 
 .hagilight-footer h2 {
-  margin: 0 0 0.75rem;
   font-size: 0.95rem;
   font-weight: 650;
 }
@@ -49,16 +47,6 @@
   outline-offset: 0.2rem;
 }
 
-.hagilight-footer__filings {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem 1.5rem;
-  border-top: 1px solid var(--hagilight-footer-border);
-  padding-top: 1rem;
-  text-align: center;
-}
-
 .hagilight-footer__copyright {
   color: var(--hagilight-footer-muted);
   font-size: 0.8rem;
@@ -74,18 +62,184 @@
   overflow-wrap: anywhere;
 }
 
-@media (max-width: 40rem) {
-  .hagilight-footer__sections {
-    grid-template-columns: 1fr;
-    gap: 1.25rem;
+/* Footer columns: four level, purpose-based columns. Each column owns a rule that
+   draws in as it scrolls into view and runs the full width while the column is
+   used; the other columns' headings step back. */
+.hagilight-cols,
+.hagilight-footer__base {
+  --_accent: var(--hagilight-footer-accent, var(--ifm-color-primary, currentColor));
+  --_track: var(--hagilight-footer-border, color-mix(in srgb, currentColor 26%, transparent));
+}
+
+.hagilight-cols {
+  --_ease: cubic-bezier(0.16, 1, 0.3, 1);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.75rem 1.5rem;
+}
+
+@container hagilight-cols (max-width: 19rem) {
+  .hagilight-cols { grid-template-columns: minmax(0, 1fr); }
+}
+
+@container hagilight-cols (min-width: 40rem) {
+  .hagilight-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2.25rem; }
+}
+
+.hagilight-col {
+  --_seg: 0.12;
+  position: relative;
+  min-width: 0;
+  padding-top: 1.125rem;
+}
+
+.hagilight-col::before,
+.hagilight-col::after {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  pointer-events: none;
+}
+
+.hagilight-col::before { background: var(--_track); }
+
+.hagilight-col::after {
+  height: 2px;
+  margin-top: -0.5px;
+  background: var(--_accent);
+  transform-origin: left center;
+  scale: var(--_seg) 1;
+  transition: scale 0.6s var(--_ease);
+}
+
+.hagilight-col h2 {
+  margin: 0 0 0.875rem;
+  transition: opacity 0.3s ease-out;
+}
+
+.hagilight-col ul { gap: 0.4rem; }
+
+.hagilight-col a {
+  position: relative;
+  display: inline-block;
+  padding-block: 0.125rem;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25em;
+  transition: text-decoration-color 0.25s ease-out;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* The link's own rule draws in the gutter, so a hover never reflows the label. */
+.hagilight-col a::before {
+  content: '';
+  position: absolute;
+  top: 0.82em;
+  left: -0.95rem;
+  width: 0.7rem;
+  height: 1px;
+  background: var(--_accent);
+  transform-origin: left center;
+  scale: 0 1;
+  transition: scale 0.35s var(--_ease);
+}
+
+.hagilight-col a[target='_blank']::after {
+  /* Joined to the last word by no-break spaces, so the arrow never wraps onto a line of its own. */
+  content: '\00a0\00a0\00a0';
+  background: currentColor;
+  opacity: 0.5;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 0.62em 0.62em no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 0.62em 0.62em no-repeat;
+  transition: mask-position 0.3s var(--_ease), opacity 0.3s ease-out;
+}
+
+.hagilight-col a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
+.hagilight-col a:is(:hover, :focus-visible)::before { scale: 1 1; }
+.hagilight-col a[target='_blank']:is(:hover, :focus-visible)::after {
+    opacity: 0.9;
+    -webkit-mask-position: calc(100% + 0.1em) calc(50% - 0.1em);
+    mask-position: calc(100% + 0.1em) calc(50% - 0.1em);
+  }
+
+.hagilight-col:is(:hover, :focus-within) { --_seg: 1; }
+
+@media (hover: hover) {
+  .hagilight-cols:has(.hagilight-col:is(:hover, :focus-within)) .hagilight-col:not(:hover, :focus-within) h2 {
+    opacity: 0.5;
   }
+}
+
+.hagilight-cols ::selection,
+.hagilight-footer__base ::selection {
+  background: color-mix(in srgb, var(--_accent) 34%, transparent);
+  color: inherit;
+}
+
+/* The one authored moment: columns rise out of a blur, one after another, as the footer scrolls in.
+   Without scroll-driven animation support, or under reduced motion, the columns are simply there. */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .hagilight-col {
+      animation-name: hagilight-col-in;
+      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      animation-fill-mode: both;
+      animation-timeline: view();
+      animation-range: entry calc(var(--hagilight-col-i, 0) * 6%) entry calc(46% + var(--hagilight-col-i, 0) * 6%);
+    }
 
-  .hagilight-footer__filings {
-    justify-content: flex-start;
-    gap: 0.75rem 1rem;
+    .hagilight-col::after {
+      animation-name: hagilight-col-rule;
+      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      animation-fill-mode: both;
+      animation-timeline: view();
+      animation-range: entry calc(var(--hagilight-col-i, 0) * 6%) entry calc(60% + var(--hagilight-col-i, 0) * 6%);
+    }
   }
 }
 
+@keyframes hagilight-col-in {
+  from { opacity: 0; translate: 0 1.25rem; filter: blur(6px); }
+  to { opacity: 1; translate: 0 0; filter: blur(0); }
+}
+
+@keyframes hagilight-col-rule {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+/* The bottom row: feeds on the start side, filings on the end side. */
+.hagilight-footer__base {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem 2rem;
+  border-top: 1px solid var(--_track);
+  padding-top: 1rem;
+}
+
+.hagilight-footer__feeds,
+.hagilight-footer__filings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.25rem;
+}
+
+.hagilight-footer__feeds a,
+.hagilight-footer__filings a {
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25em;
+  transition: text-decoration-color 0.25s ease-out;
+}
+
+.hagilight-footer__feeds a:is(:hover, :focus-visible),
+.hagilight-footer__filings a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
+
 /* Product statement: headline, summary, calls to action, and the three pillars. */
 .hagilight-footer .hagilight-brand {
   --_heading: var(--ifm-heading-color, currentColor);