fix: rehydration on vanilla cookie

fbuireu · Jun 4, 2024 · 818d7e5 · 818d7e5
1 parent c65f71b
commit 818d7e5
Show file tree

Hide file tree

Showing 23 changed files with 299 additions and 225 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
 		"firebase-admin": "^12.1.1",
 		"gsap": "^3.12.5",
 		"markdown-it": "^14.1.0",
-		"million": "^3.1.10",
+		"million": "^3.1.11",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-globe.gl": "^2.27.2",
@@ -72,7 +72,7 @@
 	},
 	"devDependencies": {
 		"@astrojs/ts-plugin": "^1.8.0",
-		"@biomejs/biome": "1.7.3",
+		"@biomejs/biome": "1.8.0",
 		"@commitlint/cli": "^19.3.0",
 		"@commitlint/config-conventional": "^19.2.2",
 		"@testing-library/react": "^16.0.0",

diff --git a/src/assets/images/svg-components/cookie/Cookie.tsx b/src/assets/images/svg-components/cookie/Cookie.tsx
@@ -0,0 +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>
+  );
+};
diff --git a/src/assets/images/svg-components/cookie/index.ts b/src/assets/images/svg-components/cookie/index.ts
@@ -0,0 +1 @@
+export * from "./Cookie.tsx";
diff --git a/src/assets/images/svg-components/leftArrow/LeftArrow.tsx b/src/assets/images/svg-components/leftArrow/LeftArrow.tsx
@@ -1,10 +1,13 @@
-interface LeftArrowProps {
-	fill?: string;
+import type { SVGProps } from "react";
+import clsx from "clsx";
+
+interface LeftArrowProps extends SVGProps<SVGSVGElement> {
+	classNames?: string;
 }
 
-export const LeftArrow = ({ fill = "currentColor" }: LeftArrowProps) => {
+export const LeftArrow = ({ fill = "currentColor", classNames, ...props }: LeftArrowProps) => {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" className={clsx(classNames)} {...props}>
 			<g id="Left">
 				<polygon
 					points="24 12.001 2.914 12.001 8.208 6.706 7.501 5.999 1 12.501 7.5 19.001 8.207 18.294 2.914 13.001 24 13.001 24 12.001"

diff --git a/src/assets/images/svg-components/pin/Pin.tsx b/src/assets/images/svg-components/pin/Pin.tsx
@@ -1,8 +1,15 @@
-export const Pin = () => {
+import type { SVGProps } from "react";
+import clsx from "clsx";
+
+interface PinProps extends SVGProps<SVGSVGElement> {
+	classNames?: string;
+}
+
+export const Pin = ({ fill = "currentColor", classNames, ...props }: PinProps) => {
 	return (
-		<svg viewBox="-4 0 36 36">
+		<svg viewBox="-4 0 36 36" className={clsx(classNames)} {...props}>
 			<path
-				fill="currentColor"
+				fill={fill}
 				d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"
 			/>
 			<circle fill="currentColor" cx="14" cy="14" r="7" />

diff --git a/src/pages/articles/[...slug].astro b/src/pages/articles/[...slug].astro
@@ -46,9 +46,7 @@ const { Content } = await currentArticle.render();
         <Image
           src={images[featuredImage]()}
           alt={title}
-          class="article__featured__image"
-          transition:name={`article-featured-image_${slug}`}
-        />
+          class="article__featured__image" />
       </section>
     )
   }

diff --git a/src/ui/components/atoms/scrollTop/scroll-top.css b/src/ui/components/atoms/scrollTop/scroll-top.css
@@ -3,24 +3,26 @@
         animation: pop-in 1s var(--ease-elastic) forwards;
         animation-range: 0 50dvw;
         animation-timeline: scroll();
-        box-shadow: 0.125rem 0.125rem 0.175rem var(--neutral-light-2);
         inset: auto 2rem 3rem auto;
         position: fixed;
         z-index: 100;
-        svg {
-            height: 3rem;
-            rotate: 0.25turn;
-            width: 3rem;
-        }
+
         @media (max-width: 575px) {
             inset: auto 1rem 1rem auto;
         }
     }
     .scroll-top {
         background: var(--primary-light-2);
+        box-shadow: 0.125rem 0.125rem 0.175rem var(--neutral-light-2);
         height: fit-content;
-        padding: 0.25rem;
         transition: background-color 2s;
         width: fit-content;
+
+        svg {
+            height: 3rem;
+            padding: 0.50rem;
+            rotate: 0.25turn;
+            width: 3rem;
+        }
     }
 }
diff --git a/src/ui/components/molecules/cookieConsent/CookieConsent.astro b/src/ui/components/molecules/cookieConsent/CookieConsent.astro
diff --git a/src/ui/components/molecules/cookieConsent/CookieConsent.tsx b/src/ui/components/molecules/cookieConsent/CookieConsent.tsx
@@ -0,0 +1,21 @@
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import { useEffect } from 'react';
+import { reset, showPreferences, run } from "vanilla-cookieconsent";
+import { Cookie } from '@assets/images/svg-components/cookie';
+import { config } from './utils/config.ts';
+import './cookie-consent.css'
+
+const CookieConsent = () => {
+
+  useEffect(() => {
+    run(config);
+
+    return () => reset()
+  }, [])
+
+  return <button type="button" className="cookies_consent_button flex justify-center clickable" onClick={showPreferences}>
+    <Cookie classNames={"cookie_consent_icon"} />
+  </button>
+}
+
+export default CookieConsent
diff --git a/src/ui/components/molecules/cookieConsent/cookie-consent.css b/src/ui/components/molecules/cookieConsent/cookie-consent.css
@@ -0,0 +1,18 @@
+@layer cookie-consent{
+    .cookies_consent_button {
+        background-color: var(--primary-light-2);
+        box-shadow: 0.125rem 0.125rem 0.175rem var(--neutral-light-2);
+        height: fit-content;
+        inset: auto 0 3rem 2rem;
+        position: fixed;
+        width: fit-content;
+        z-index: 100;
+
+        .cookie_consent_icon {
+            fill: var(--primary-dark-3);
+            height:3rem;
+            padding: .5rem;
+            width:3rem;
+        }
+    }
+}
diff --git a/src/ui/components/molecules/cookieConsent/cookieConsent.config.ts b/src/ui/components/molecules/cookieConsent/cookieConsent.config.ts
diff --git a/src/ui/components/molecules/cookieConsent/index.ts b/src/ui/components/molecules/cookieConsent/index.ts
@@ -0,0 +1 @@
+export * from './CookieConsent'