@netlify/spark-ui 0.0.46-alpha.2 → 0.0.46-alpha.4

package/dist/analytics/index.d.ts

@@ -1,4 +1,5 @@
 import { default as GoogleTagManager } from './GoogleTagManager.astro';
+import { default as GoogleTagManagerNoscript } from './GoogleTagManagerNoscript.astro';
 import { default as GoogleAnalytics } from './GoogleAnalytics.astro';
 import { default as Analytics } from './analytics';
-export { Analytics, GoogleAnalytics, GoogleTagManager };
+export { Analytics, GoogleAnalytics, GoogleTagManager, GoogleTagManagerNoscript };

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.d.ts

@@ -2,6 +2,7 @@ import { ComponentChildren } from 'preact';
 interface Props {
     children: ComponentChildren;
     className?: string;
+    debug?: boolean;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,42 +1,42 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as v, y as u, d as g } from "../../../../../chunks/hooks.module.CNV9mxng.js";
-import T from "../../../Modal/Modal.js";
+import { A as v, y as u, d as S } from "../../../../../chunks/hooks.module.CNV9mxng.js";
+import L from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
-import L from "../SearchWindow.js";
-import k from "../SearchInput.js";
-import { useSearch as w } from "../../hooks/useSearch.js";
-import { useSearchLogger as I } from "../../hooks/useSearchLogger.js";
+import k from "../SearchWindow.js";
+import w from "../SearchInput.js";
+import { useSearch as I } from "../../hooks/useSearch.js";
+import { useSearchLogger as b } from "../../hooks/useSearchLogger.js";
 import { useKeyboardNav as O } from "../../hooks/useKeyboardNav.js";
 import { useSearchHotkeys as P } from "../../hooks/useSearchHotkeys.js";
 import { useSearchParams as E } from "../../hooks/useSearchParams.js";
 import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
-import '../../../../../assets/SearchModal.css';function M(s) {
+import '../../../../../assets/SearchModal.css';function M(o) {
   const r = v(null);
   return u(() => {
     function t(i) {
-      r.current && !r.current.contains(i.target) && s();
+      r.current && !r.current.contains(i.target) && o();
     }
     return document.addEventListener("mousedown", t), () => {
       document.removeEventListener("mousedown", t);
     };
-  }, [s]), r;
+  }, [o]), r;
 }
-function z(s = { className: "", children: null }) {
-  const [r, t] = g(!1);
+function B(o = { className: "", children: null, debug: !1 }) {
+  const [r, t] = S(!1);
   u(() => {
     let c;
-    const S = () => {
+    const g = () => {
       window.pagefind && (t(!0), c && clearInterval(c));
     };
-    return S(), c = setInterval(S, 100), () => clearInterval(c);
+    return g(), c = setInterval(g, 100), () => clearInterval(c);
   }, []);
-  const { children: i, className: f, ...N } = s, { state: a, actions: h } = w(), [n, p] = g(!1), m = () => p(!0), l = () => p(!1), o = v(null), y = M(l);
-  return I(a), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, o, n, l), u(() => {
-    o.current && (n ? o.current.showModal() : o.current.close());
-  }, [n]), /* @__PURE__ */ e(T, { ref: o, className: `n-search-modal ${f || ""}`, ...N, children: /* @__PURE__ */ e("div", { ref: y, className: "n-search-container", children: [
-    /* @__PURE__ */ e(k, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
+  const { children: i, className: f, debug: N, ...y } = o, { state: a, actions: h } = I(), [n, p] = S(!1), m = () => p(!0), l = () => p(!1), s = v(null), T = M(l);
+  return b(a, N), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, s, n, l), u(() => {
+    s.current && (n ? s.current.showModal() : s.current.close());
+  }, [n]), /* @__PURE__ */ e(L, { ref: s, className: `n-search-modal ${f || ""}`, ...y, children: /* @__PURE__ */ e("div", { ref: T, className: "n-search-container", children: [
+    /* @__PURE__ */ e(w, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
     /* @__PURE__ */ e(
-      L,
+      k,
       {
         searchLoading: a.isLoading,
         searchTerm: a.searchTerm,
@@ -59,5 +59,5 @@ function z(s = { className: "", children: null }) {
   ] }) });
 }
 export {
-  z as default
+  B as default
 };

package/dist/components/preact/SearchModal/hooks/useSearchLogger.d.ts

@@ -12,6 +12,7 @@ import { SearchState } from '../types/search.types';
  * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
  *   - `state.searchTerm`: The current search query string.
  *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  *
  * @returns {Object} - An object with the following function:
  *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
@@ -22,6 +23,6 @@ import { SearchState } from '../types/search.types';
  * // In your component, attach handleClick to the search result links
  * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
-export declare function useSearchLogger(state?: SearchState): {
+export declare function useSearchLogger(state?: SearchState, debug?: boolean): {
     handleClick: (e: Event) => void;
 };

package/dist/components/preact/SearchModal/hooks/useSearchLogger.js

@@ -1,33 +1,37 @@
-import { A as k, y as u, q as f } from "../../../../chunks/hooks.module.CNV9mxng.js";
-class g {
+import { A as g, y as f, q as k } from "../../../../chunks/hooks.module.CNV9mxng.js";
+class y {
   /**
    * Pushes an event payload into the dataLayer.
    * @param eventName e.g. 'www:search_query_changed'
    * @param payload   additional key/value data
    */
-  track(n, c = {}) {
-    gtag("event", n, { ...c });
+  track(e, o = {}) {
+    typeof gtag == "function" ? gtag("event", e, { ...o }) : console.error("gtag is not defined. Tracking event failed.", e);
   }
 }
-function T(r) {
-  const c = k(new g()).current;
-  return u(() => {
-    r != null && r.searchTerm && c.track("spark_search:query_changed", { query: r == null ? void 0 : r.searchTerm });
-  }, [r == null ? void 0 : r.searchTerm]), u(() => {
-    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && c.track("spark_search:no_results", { query: r == null ? void 0 : r.searchTerm });
+function s(r, e) {
+  const n = g(new y()).current;
+  return f(() => {
+    if (!(r != null && r.searchTerm)) return;
+    const c = { query: r == null ? void 0 : r.searchTerm };
+    e && (c.debug_mode = !0), n.track("spark_search:query_changed", c);
+  }, [r == null ? void 0 : r.searchTerm]), f(() => {
+    if (!(r != null && r.results)) return;
+    const c = { query: r == null ? void 0 : r.searchTerm };
+    e && (c.debug_mode = !0), r != null && r.searchTerm && r.results.length === 0 && n.track("spark_search:no_results", c);
   }, [r == null ? void 0 : r.results]), {
-    handleClick: f((h) => {
-      var e;
-      const l = h.target.closest("a");
+    handleClick: k((c) => {
+      var i;
+      const l = c.target.closest("a");
       if (!l) return;
-      const i = (e = l.querySelector(".n-search-link-label")) == null ? void 0 : e.innerHTML, o = l.getAttribute("href");
-      c.track("spark_search:result_clicked", {
-        resultTitle: i,
-        resultUrl: o
-      });
+      const h = (i = l.querySelector(".n-search-link-label")) == null ? void 0 : i.innerHTML, d = l.getAttribute("href"), u = {
+        resultTitle: h,
+        resultUrl: d
+      };
+      e && (u.debug_mode = !0), n.track("spark_search:result_clicked", u);
     }, [])
   };
 }
 export {
-  T as useSearchLogger
+  s as useSearchLogger
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.46-alpha.2",
+  "version": "0.0.46-alpha.4",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/analytics/GoogleAnalytics.astro

@@ -1,9 +1,14 @@
+---
+const { gaId } = Astro.props;
+
+if (!gaId) console.error ('[GoogleTagManager] no GTM id provided')
+---
 <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script>
-<script>
+<script async src=`https://www.googletagmanager.com/gtag/js?id=${gaId}`></script>
+<script define:vars={{id: gaId}}>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
-  gtag('config', 'G-X2FMMZSSS9');
+  gtag('config', id);
 </script>

package/packages/analytics/GoogleTagManager.astro

@@ -1,5 +1,11 @@
+---
+const { gtmId, gaId } = Astro.props;
+
+if (!gtmId) console.error ('[GoogleTagManager] no GTM id provided')
+if (!gaId) console.error ('[GoogleTagManager] no GA id provided')
+---
 <!-- Google Tag Manager -->
-<script>
+<script define:vars={{id: gtmId}}>
   (function (w, d, s, l, i) {
     w[l] = w[l] || [];
     w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
@@ -9,15 +15,15 @@
     j.async = true;
     j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
     f.parentNode.insertBefore(j, f);
-  })(window, document, 'script', 'dataLayer', 'GTM-T7WNFLD');
+  })(window, document, 'script', 'dataLayer', id);
 </script>
 <!-- End Google Tag Manager -->
 
 <!-- Google Analytics (gtag.js) -->
-<script>
+<script define:vars={{id: gaId}}>
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
-  gtag('config', 'G-X2FMMZSSS9');
+  gtag('config', id);
 </script>
 <!-- End Google Analytics (gtag.js) -->

package/packages/analytics/GoogleTagManagerNoscript.astro

@@ -0,0 +1,9 @@
+<noscript>
+  <iframe
+    src=`https://www.googletagmanager.com/ns.html?id=${Astro.props.gtmId}`
+    height="0"
+    width="0"
+    style="display:none;visibility:hidden"
+  >
+  </iframe>
+</noscript>

package/packages/analytics/analytics.ts

@@ -1,10 +1,16 @@
 export default class Analytics {
+
   /**
    * Pushes an event payload into the dataLayer.
    * @param eventName e.g. 'www:search_query_changed'
    * @param payload   additional key/value data
    */
   track(eventName: string, payload: Record<string, any> = {}): void {
-    gtag('event', eventName, { ...payload });
+    // Ensures that gtag is available before pushing events
+    if (typeof gtag === 'function') {
+      gtag('event', eventName, { ...payload });
+    } else {
+      console.error(`gtag is not defined. Tracking event failed.`, eventName);
+    }
   }
-}
+}

package/packages/analytics/index.ts

@@ -1,5 +1,6 @@
 import GoogleTagManager from "./GoogleTagManager.astro";
+import GoogleTagManagerNoscript from "./GoogleTagManagerNoscript.astro";
 import GoogleAnalytics from "./GoogleAnalytics.astro";
 import Analytics from "./analytics"
 
-export { Analytics, GoogleAnalytics, GoogleTagManager }
+export { Analytics, GoogleAnalytics, GoogleTagManager, GoogleTagManagerNoscript }

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -20,9 +20,10 @@ import './SearchModal.css';
 interface Props {
   children: ComponentChildren;
   className?: string;
+  debug?: boolean
 }
 
-function SearchModal(props: Props = {className: '', children: null}) {
+function SearchModal(props: Props = {className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
   // Poll for the existence of window.pagefind.
@@ -45,7 +46,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   }, []);
 
 
-  const { children, className, ...rest } = props;
+  const { children, className, debug, ...rest } = props;
   const { state, actions } = useSearch();
   const [searchOpen, setSearchOpen] = useState(false);
 
@@ -55,7 +56,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchLogger(state)
+  useSearchLogger(state, debug)
   useSearchToggles(isPagefindLoaded,  openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);

package/packages/components/preact/SearchModal/hooks/useSearchLogger.ts

@@ -15,52 +15,69 @@ import Analytics from '../../../../analytics/analytics';
  * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
  *   - `state.searchTerm`: The current search query string.
  *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
- *
+ * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
+ * 
  * @returns {Object} - An object with the following function:
  *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
  *
  * @example
  * const { handleClick } = useSearchLogger(searchState);
- * 
+ *
  * // In your component, attach handleClick to the search result links
  * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 
-export function useSearchLogger(state?: SearchState) {
+export function useSearchLogger(state?: SearchState, debug?: boolean) {
   const ref = useRef<Analytics>(new Analytics());
   const analytics = ref.current;
 
   // Log search query
   useEffect(() => {
-    if (!state?.searchTerm) return 
-    analytics.track('spark_search:query_changed', { query: state?.searchTerm });
+    if (!state?.searchTerm) return;
+    const payload = { query: state?.searchTerm };
+
+    if (debug) {
+      payload.debug_mode = true;
+    }
+
+    analytics.track('spark_search:query_changed', payload);
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
   useEffect(() => {
-    if (!state?.results) return 
+    if (!state?.results) return;
+
+    const payload = { query: state?.searchTerm };
+
+    if (debug) {
+      payload.debug_mode = true;
+    }
 
     if (state?.searchTerm && state.results.length === 0) {
-      analytics.track('spark_search:no_results', { query: state?.searchTerm });
+      analytics.track('spark_search:no_results', payload);
     }
   }, [state?.results]);
 
   const handleResultClick = useCallback((e: Event) => {
     const anchor = (e.target as HTMLElement).closest('a');
-    
-    if (!anchor) return
 
-    const label = anchor.querySelector('.n-search-link-label')?.innerHTML
-    const url = anchor.getAttribute('href')
+    if (!anchor) return;
 
-    analytics.track('spark_search:result_clicked', {
+    const label = anchor.querySelector('.n-search-link-label')?.innerHTML;
+    const url = anchor.getAttribute('href');
+    const payload = {
       resultTitle: label,
       resultUrl: url,
-    });
-  }, []);
+    };
 
+    if (debug) {
+      payload.debug_mode = true;
+    }
+
+    analytics.track('spark_search:result_clicked', payload);
+  }, []);
 
   return {
-    handleClick: handleResultClick
+    handleClick: handleResultClick,
   };
 }