feat: add script improvements

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

biome.json

@@ -1,35 +1,40 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
-	"files": {
-		"ignore": ["src/data/*"]
-	},
-	"vcs": {
-		"enabled": true,
-		"clientKind": "git",
-		"defaultBranch": "main"
-	},
-	"formatter": {
-		"lineWidth": 120
-	},
-	"linter": {
-		"rules": {
-			"recommended": true,
-			"complexity": {
-				"noForEach": "off"
-			},
-			"correctness": {
-				"useExhaustiveDependencies": "off"
-			},
-			"style": {
-				"noUnusedTemplateLiteral": "off"
-			},
-			"suspicious": {
-				"noAssignInExpressions": "off"
-			},
-			"a11y": {
-				"useAnchorContent": "off",
-				"noSvgWithoutTitle": "off"
-			}
-		}
-	}
+    "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+    "files": {
+        "ignore": [
+            "src/data/*"
+        ]
+    },
+    "vcs": {
+        "enabled": true,
+        "clientKind": "git",
+        "defaultBranch": "main"
+    },
+    "formatter": {
+        "lineWidth": 120
+    },
+    "linter": {
+        "ignore": [
+            "*.d.ts*"
+        ],
+        "rules": {
+            "recommended": true,
+            "complexity": {
+                "noForEach": "off"
+            },
+            "correctness": {
+                "useExhaustiveDependencies": "off"
+            },
+            "style": {
+                "noUnusedTemplateLiteral": "off"
+            },
+            "suspicious": {
+                "noAssignInExpressions": "off"
+            },
+            "a11y": {
+                "useAnchorContent": "off",
+                "noSvgWithoutTitle": "off"
+            }
+        }
+    }
 }

package.json

@@ -16,7 +16,7 @@
 	"author": "Ferran Buireu <[email protected]>",
 	"version": "2.0.0",
 	"type": "module",
-	"packageManager": "yarn@4.1.1",
+	"packageManager": "yarn@4.2.2",
 	"engines": {
 		"node": ">=20.10.0"
 	},

src/assets/images/svg-components/cookie/Cookie.tsx

@@ -1,42 +1,42 @@
-import clsx from 'clsx';
-import type { SVGProps } from 'react';
-
-interface CookieProps extends SVGProps<SVGSVGElement> {
-  classNames?: string;
-}
-
-export const Cookie = ({ fill = "currentColor", classNames, ...props }: CookieProps) => {
-  return (
-    <svg
-      className={clsx(classNames)}
-      version="1.1"
-      id="Layer_1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 120.23 122.88"
-      xmlSpace="preserve"
-      fill={fill}
-      {...props}
-    >
-      <g>
-        <path
-          style={{ fillRule: "evenodd", clipRule: "evenodd" }}
-          className="st0"
-          d="M98.18,0c3.3,0,5.98,2.68,5.98,5.98c0,3.3-2.68,5.98-5.98,5.98c-3.3,0-5.98-2.68-5.98-5.98
-          C92.21,2.68,94.88,0,98.18,0L98.18,0z M99.78,52.08c5.16,7.7,11.69,10.06,20.17,4.85c0.28,2.9,0.35,5.86,0.2,8.86
-          c-1.67,33.16-29.9,58.69-63.06,57.02C23.94,121.13-1.59,92.9,0.08,59.75C1.74,26.59,30.95,0.78,64.1,2.45
-          c-2.94,9.2-0.45,17.37,7.03,20.15C64.35,44.38,79.49,58.63,99.78,52.08L99.78,52.08z M30.03,47.79c4.97,0,8.99,4.03,8.99,8.99
-          s-4.03,8.99-8.99,8.99c-4.97,0-8.99-4.03-8.99-8.99S25.07,47.79,30.03,47.79L30.03,47.79z M58.35,59.25c2.86,0,5.18,2.32,5.18,5.18
-          c0,2.86-2.32,5.18-5.18,5.18c-2.86,0-5.18-2.32-5.18-5.18C53.16,61.57,55.48,59.25,58.35,59.25L58.35,59.25z M35.87,80.59
-          c3.49,0,6.32,2.83,6.32,6.32c0,3.49-2.83,6.32-6.32,6.32c-3.49,0-6.32-2.83-6.32-6.32C29.55,83.41,32.38,80.59,35.87,80.59
-          L35.87,80.59z M49.49,32.23c2.74,0,4.95,2.22,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95c-2.74,0-4.95-2.22-4.95-4.95
-          C44.54,34.45,46.76,32.23,49.49,32.23L49.49,32.23z M76.39,82.8c4.59,0,8.3,3.72,8.3,8.3c0,4.59-3.72,8.3-8.3,8.3
-          c-4.59,0-8.3-3.72-8.3-8.3C68.09,86.52,71.81,82.8,76.39,82.8L76.39,82.8z M93.87,23.1c3.08,0,5.58,2.5,5.58,5.58
-          c0,3.08-2.5,5.58-5.58,5.58s-5.58-2.5-5.58-5.58C88.29,25.6,90.79,23.1,93.87,23.1L93.87,23.1z"
-        />
-      </g>
-    </svg>
-  );
-};
+import clsx from "clsx";
+import type { SVGProps } from "react";
+
+interface CookieProps extends SVGProps<SVGSVGElement> {
+	classNames?: string;
+}
+
+export const Cookie = ({ fill = "currentColor", classNames, ...props }: CookieProps) => {
+	return (
+		<svg
+			className={clsx(classNames)}
+			version="1.1"
+			id="Layer_1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			x="0px"
+			y="0px"
+			viewBox="0 0 120.23 122.88"
+			xmlSpace="preserve"
+			fill={fill}
+			{...props}
+		>
+			<g>
+				<path
+					style={{ fillRule: "evenodd", clipRule: "evenodd" }}
+					className="st0"
+					d="M98.18,0c3.3,0,5.98,2.68,5.98,5.98c0,3.3-2.68,5.98-5.98,5.98c-3.3,0-5.98-2.68-5.98-5.98
+          C92.21,2.68,94.88,0,98.18,0L98.18,0z M99.78,52.08c5.16,7.7,11.69,10.06,20.17,4.85c0.28,2.9,0.35,5.86,0.2,8.86
+          c-1.67,33.16-29.9,58.69-63.06,57.02C23.94,121.13-1.59,92.9,0.08,59.75C1.74,26.59,30.95,0.78,64.1,2.45
+          c-2.94,9.2-0.45,17.37,7.03,20.15C64.35,44.38,79.49,58.63,99.78,52.08L99.78,52.08z M30.03,47.79c4.97,0,8.99,4.03,8.99,8.99
+          s-4.03,8.99-8.99,8.99c-4.97,0-8.99-4.03-8.99-8.99S25.07,47.79,30.03,47.79L30.03,47.79z M58.35,59.25c2.86,0,5.18,2.32,5.18,5.18
+          c0,2.86-2.32,5.18-5.18,5.18c-2.86,0-5.18-2.32-5.18-5.18C53.16,61.57,55.48,59.25,58.35,59.25L58.35,59.25z M35.87,80.59
+          c3.49,0,6.32,2.83,6.32,6.32c0,3.49-2.83,6.32-6.32,6.32c-3.49,0-6.32-2.83-6.32-6.32C29.55,83.41,32.38,80.59,35.87,80.59
+          L35.87,80.59z M49.49,32.23c2.74,0,4.95,2.22,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95c-2.74,0-4.95-2.22-4.95-4.95
+          C44.54,34.45,46.76,32.23,49.49,32.23L49.49,32.23z M76.39,82.8c4.59,0,8.3,3.72,8.3,8.3c0,4.59-3.72,8.3-8.3,8.3
+          c-4.59,0-8.3-3.72-8.3-8.3C68.09,86.52,71.81,82.8,76.39,82.8L76.39,82.8z M93.87,23.1c3.08,0,5.58,2.5,5.58,5.58
+          c0,3.08-2.5,5.58-5.58,5.58s-5.58-2.5-5.58-5.58C88.29,25.6,90.79,23.1,93.87,23.1L93.87,23.1z"
+				/>
+			</g>
+		</svg>
+	);
+};

src/env.d.ts

@@ -19,3 +19,11 @@ interface ImportMetaEnv {
 interface ImportMeta {
 	readonly env: ImportMetaEnv;
 }
+
+declare global {
+	interface Window {
+		dataLayer: any[];
+	}
+}
+
+export {};

src/pages/index.astro

@@ -5,8 +5,7 @@ import Testimonials from "@components/organisms/testimonials/Testimonials.astro"
 import MyWork from "@components/organisms/myWork/MyWork.astro";
 import LatestArticles from "@components/organisms/latestArticles/LatestArticles.astro";
 
-// todo: cookies and acceptance (text, funcionality (localstorage, track/do not track...etc), +and privacy policy and terms)
-// todo: test dark mode in all pages (add a shared isDarkMode and test clickability of all scripts)
+// todo: (text, +and privacy policy and terms).
 // todo: add thinner svg lines
 // todo: tags page
 // todo: add resume (PDF) in about?
@@ -22,6 +21,7 @@ import LatestArticles from "@components/organisms/latestArticles/LatestArticles.
 // todo: About:
 //  -: isolate and use composition
 // todo: multilanguage*
+// todo: check GA events in consent mode
 // todo: improve isolation
 // todo: control tab visibility and remove autoloop in World Globe (check paulscanlon or create a custom hook)
 // todo: reduce XXSS module

src/ui/components/molecules/cookieConsent/CookieConsent.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { reset, showPreferences, run } from "vanilla-cookieconsent";
+import { reset, run, showPreferences } from "vanilla-cookieconsent";
 import { Cookie } from "@assets/images/svg-components/cookie";
 import { config } from "./utils/config.ts";
 import "./cookie-consent.css";

src/ui/components/molecules/cookieConsent/index.ts

@@ -1 +1 @@
-export * from './CookieConsent'
+export * from "./CookieConsent";

src/ui/components/molecules/cookieConsent/utils/config.ts

@@ -1,4 +1,5 @@
 import type { CookieConsentConfig } from "vanilla-cookieconsent";
+import { acceptedCategory, acceptedService } from "vanilla-cookieconsent";
 
 export const config: CookieConsentConfig = {
 	cookie: {
@@ -23,23 +24,21 @@ export const config: CookieConsentConfig = {
 			services: {
 				ga4: {
 					label:
-						'<a href="https://marketingplatform.google.com/about/analytics/terms/us/" target="_blank">Google Analytics 4 (dummy)</a>',
+						'<a href="https://marketingplatform.google.com/about/analytics/terms/us/" target="_blank">Google Analytics 4</a>',
 					onAccept: () => {
-						console.log("ga4 accepted");
-						// TODO: load ga4
-					},
-					onReject: () => {
-						console.log("ga4 rejected");
+						if (acceptedCategory("analytics")) {
+						}
+
+						if (acceptedService("Google Analytics", "analytics")) {
+						}
 					},
+					onReject: () => {},
 					cookies: [
 						{
 							name: /^_ga/,
 						},
 					],
 				},
-				another: {
-					label: "Another one (dummy)",
-				},
 			},
 		},
 	},

src/ui/components/organisms/siteHead/SiteHead.astro → src/ui/components/organisms/Head/Head.astro

@@ -1,5 +1,5 @@
 ---
-import "@ui/styles/index.css";
+import "@styles/index.css";
 import "@fontsource-variable/nunito-sans";
 import "@fontsource/baskervville";
 import { ViewTransitions } from "astro:transitions";
@@ -37,15 +37,17 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props as
   <meta property="twitter:description" content={description} />
   <meta property="twitter:image" content={new URL(image, Astro.url)} />
 </head>
-<script type="text/partytown" src=`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`>
-</script>
-<script define:vars={{ googleAnalyticsId }} type="text/partytown">
+<script type="text/partytown" async src=`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}` /> 
+<script define:vars={{ googleAnalyticsId }}>
   window.dataLayer = window.dataLayer || [];
 
-  function gtag() {
-    window.dataLayer.push(arguments);
+  function gtag(){
+    dataLayer.push(arguments);
   }
-
   gtag('js', new Date());
   gtag('config', googleAnalyticsId);
+  gtag('consent', 'default', {
+    analytics_storage: 'denied',
+    wait_for_update: 400,
+  });
 </script>

src/ui/components/organisms/header/components/menuButton/menuButton.css

@@ -6,10 +6,6 @@
         transition: color 0.2s;
         translate: 5% 0;
 
-        &.--has-intersected {
-            color: var(--white);
-        }
-
         @media (min-width: 575px) {
             margin-right: 1rem;
         }
@@ -23,10 +19,6 @@
         translate: 0 -25%;
         width: calc(var(--header-height) * 0.85);
         z-index: 20;
-
-        &.--has-intersected {
-            border-color: var(--white);
-        }
     }
 
     .header__menu-button {
@@ -35,12 +27,23 @@
         position: relative;
         z-index: 2;
 
+        &.--has-intersected {
+            .header__menu-button__outline {
+                border-color: var(--white);
+            }
+
+            .header__menu-text {
+                color: var(--white);
+            }
+        }
+
         &.--is-menu-open {
             .header__menu-button__outline {
                 border-color: var(--white);
                 transition: border-color;
                 transition-delay: 1s;
             }
+
             .header__menu-text {
                 color: var(--white);
                 transition: color;

src/ui/components/organisms/header/utils/backgroundObserver/backgroundObserver.ts

@@ -1,15 +1,12 @@
 const SELECTORS = {
 	HEADER: ".header",
 	LATEST_ARTICLES: ".latest-articles__wrapper",
-	SITE_LOGO_SVG: ".site__logo svg",
 	SITE_LOGO: ".site__logo",
-	HEADER_MENU_TEXT: ".header__menu-text",
-	HEADER_MENU_BUTTON: ".header__menu-button ",
-	HEADER_MENU_OUTLINES: ".header__menu-button__outline",
+	HEADER_MENU_BUTTON: ".header__menu-button",
 };
 
 function isIntersecting(element: HTMLElement): boolean {
-	const { HEADER: HEADER_SELECTOR, HEADER_MENU_BUTTON } = SELECTORS;
+	const { HEADER: HEADER_SELECTOR } = SELECTORS;
 	const headerOffsetHeight = (document.querySelector(HEADER_SELECTOR) as HTMLElement).offsetHeight / 2;
 	const threshold = element.offsetTop - headerOffsetHeight;
 	const sectionBottom = element.offsetTop + element.offsetHeight - headerOffsetHeight;
@@ -22,25 +19,20 @@ export function backgroundObserver(): void {
 		HEADER: HEADER_SELECTOR,
 		LATEST_ARTICLES: LATEST_ARTICLES_SELECTOR,
 		SITE_LOGO: SITE_LOGO_SELECTOR,
-		SITE_LOGO_SVG: SITE_LOGO_SVG_SELECTOR,
-		HEADER_MENU_TEXT: HEADER_MENU_TEXT_SELECTOR,
-		HEADER_MENU_OUTLINES: HEADER_MENU_OUTLINES_SELECTOR,
+		HEADER_MENU_BUTTON: HEADER_MENU_BUTTON_SELECTOR,
 	} = SELECTORS;
 
 	const HEADER = document.querySelector(HEADER_SELECTOR) as HTMLElement;
 	const LATEST_ARTICLES = document.querySelector(LATEST_ARTICLES_SELECTOR) as HTMLElement;
-	const SITE_LOGO_SVG = document.querySelector(SITE_LOGO_SVG_SELECTOR) as HTMLElement;
 	const SITE_LOGO = document.querySelector(SITE_LOGO_SELECTOR) as HTMLElement;
-	const HEADER_MENU_TEXT = document.querySelector(HEADER_MENU_TEXT_SELECTOR) as HTMLElement;
-	const HEADER_MENU_OUTLINES = document.querySelectorAll(HEADER_MENU_OUTLINES_SELECTOR) as unknown as HTMLElement[];
+	const HEADER_MENU_BUTTON = document.querySelector(HEADER_MENU_BUTTON_SELECTOR) as unknown as HTMLElement;
 	const isMenuOpen = SITE_LOGO.classList.contains("--is-menu-open");
 
 	if (!HEADER || !LATEST_ARTICLES || isMenuOpen) return;
+
 	const hasIntersected = isIntersecting(LATEST_ARTICLES);
 
-	HEADER_MENU_OUTLINES.forEach((element) => element.classList.toggle("--has-intersected", hasIntersected));
-	HEADER_MENU_TEXT.classList.toggle("--has-intersected", hasIntersected);
-	SITE_LOGO_SVG.classList.toggle("--has-intersected", hasIntersected);
+	HEADER_MENU_BUTTON.classList.toggle("--has-intersected", hasIntersected);
 }
 
 window.addEventListener("scroll", backgroundObserver);