Skip to content

Commit

Permalink
feat: initial cookie set
Browse files Browse the repository at this point in the history
  • Loading branch information
fbuireu committed Jun 4, 2024
1 parent 79b66c7 commit c65f71b
Show file tree
Hide file tree
Showing 19 changed files with 290 additions and 329 deletions.
Binary file modified .yarn/install-state.gz
Binary file not shown.
12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"firebase-admin": "^12.1.1",
"gsap": "^3.12.5",
"markdown-it": "^14.1.0",
"million": "^3.1.7",
"million": "^3.1.10",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-globe.gl": "^2.27.2",
Expand All @@ -66,21 +66,23 @@
"react-router-dom": "^6.23.1",
"resend": "^3.2.0",
"swiper": "^11.1.4",
"three": "^0.164.1",
"three": "^0.165.0",
"vanilla-cookieconsent": "^3.0.1",
"zod": "^3.23.8"
},
"devDependencies": {
"@astrojs/ts-plugin": "^1.8.0",
"@biomejs/biome": "1.7.3",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@testing-library/react": "^15.0.7",
"@testing-library/react": "^16.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@types/add": "^2.0.3",
"@types/markdown-it": "^14.1.1",
"@types/node": "^20.12.13",
"@types/node": "^20.14.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/three": "^0.164.1",
"@types/three": "^0.165.0",
"husky": "^9.0.11",
"lint-staged": "^15.2.5",
"stylelint": "^16.6.1",
Expand Down
3 changes: 2 additions & 1 deletion src/pages/articles/[...slug].astro
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const MAX_RELATED_ARTICLES = 3;
const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/**/*.{jpeg,jpg,png,gif}");
const articles = await getCollection("articles");
const { slug } = Astro.params;
const { currentArticle } = Astro.props as ArticleProps;
const { featuredImage, author, title, publishDate, tags } = currentArticle.data;
const relatedArticles = articles
Expand All @@ -46,7 +47,7 @@ const { Content } = await currentArticle.render();
src={images[featuredImage]()}
alt={title}
class="article__featured__image"
transition:name="article-featured-image"
transition:name={`article-featured-image_${slug}`}
/>
</section>
)
Expand Down
21 changes: 11 additions & 10 deletions src/pages/articles/_article.css
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,24 @@
}
}

.related-articles__list {
gap: 1rem 0;
padding: 0 1rem;
.related-articles__item {
--items-per-row: 3;
justify-content: center;
max-width: calc(100% / var(--items-per-row) - 1rem);
width: 100%;

@media (max-width: 960px) {
margin: 2rem 0;
--items-per-row: 1;
justify-content: flex-start;
}
}

.related-articles__item {
justify-content: center;
max-width: calc(100% / 3 - 1rem);
width: 100%;
.related-articles__list {
gap: 1rem 0;
padding: 0 1rem;

@media (max-width: 960px) {
justify-content: flex-start;
max-width: 100%;
margin: 2rem 0;
}
}
}
5 changes: 3 additions & 2 deletions src/pages/articles/_articles.css
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,13 @@
}

.articles__grid__item {
max-width: calc(100% / 4 - 2rem);
--items-per-row: 4;
max-width: calc(100% / var(--items-per-row) - 2rem);
position: relative;
width: 100%;

@media (max-width: 960px) {
max-width: calc(100% / 1 - 2rem);
--items-per-row: 1;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ 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
// todo: cookies and acceptance (css, text, funcionality (localstorage...etc) and privacy policy and terms)
// todo: add thinner svg lines
// todo: tags page
// todo: add resume (PDF) in about?
// todo: dynamic content
// todo: author collection (https://docs.astro.build/en/guides/content-collections/#defining-collection-references)
// todo: check SEO (jsonld, script etc)
// todo: check SEO (jsonld, script, robots, sitemap, etc)
// todo: custom view transitions (are working) (https://www.smashingmagazine.com/2024/01/view-transitions-api-ui-animations-part2/)
// todo: slot skeleton for react scripts ( https://stackoverflow.com/questions/75257905/i-want-to-display-a-spinner-before-loading-the-react-component-in-astro)
// todo: unify articles (latst and sliders structure to reuse)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,39 @@ export enum ThemeType {
DARK = "dark",
LIGHT = "light",
}

const PREFERS_DARK_SCHEME = window.matchMedia("(prefers-color-scheme: dark)");
const THEME_TOGGLE_INPUT = document.querySelector<HTMLInputElement>('.theme-toggle input[type="checkbox"]');
const THEME_TOGGLE = document.querySelector<HTMLInputElement>(".theme-toggle");

const getInitialTheme = (): ThemeType => {
export const getInitialTheme = (): ThemeType => {
const cachedTheme = localStorage.getItem(THEME_STORAGE_KEY) as ThemeType | null;
const prefersDarkScheme = PREFERS_DARK_SCHEME.matches;

return cachedTheme ?? (prefersDarkScheme ? ThemeType.DARK : ThemeType.LIGHT);
};

const applyTheme = (theme: ThemeType) => {
document.documentElement.setAttribute(`data-${THEME_STORAGE_KEY}`, theme);
localStorage.setItem(THEME_STORAGE_KEY, theme);
export const initializeThemeSetter = () => {
const THEME_TOGGLE_INPUT = document.querySelector<HTMLInputElement>('.theme-toggle input[type="checkbox"]');
const THEME_TOGGLE = document.querySelector<HTMLInputElement>(".theme-toggle");

if (!THEME_TOGGLE || !THEME_TOGGLE_INPUT) return;
const initialTheme = getInitialTheme();

const isDarkMode = theme === ThemeType.DARK;
const handleThemeChange = (toggleSwitch: HTMLInputElement) => {
const newTheme = toggleSwitch.checked ? ThemeType.DARK : ThemeType.LIGHT;
applyTheme(newTheme);
};

THEME_TOGGLE_INPUT.checked = isDarkMode;
THEME_TOGGLE.classList.toggle("dark", isDarkMode);
THEME_TOGGLE.classList.toggle("--toggled", isDarkMode);
THEME_TOGGLE.classList.toggle("--untoggled", !isDarkMode);
};
const applyTheme = (theme: ThemeType) => {
document.documentElement.setAttribute(`data-${THEME_STORAGE_KEY}`, theme);
localStorage.setItem(THEME_STORAGE_KEY, theme);

const handleThemeChange = (toggleSwitch: HTMLInputElement) => {
const newTheme = toggleSwitch.checked ? ThemeType.DARK : ThemeType.LIGHT;
applyTheme(newTheme);
};
if (!THEME_TOGGLE || !THEME_TOGGLE_INPUT) return;

export const initializeThemeSetter = () => {
const initialTheme = getInitialTheme();
const isDarkMode = theme === ThemeType.DARK;

THEME_TOGGLE_INPUT.checked = isDarkMode;
THEME_TOGGLE.classList.toggle("dark", isDarkMode);
THEME_TOGGLE.classList.toggle("--toggled", isDarkMode);
THEME_TOGGLE.classList.toggle("--untoggled", !isDarkMode);
};
applyTheme(initialTheme);

if (!THEME_TOGGLE_INPUT) return;
Expand Down
5 changes: 5 additions & 0 deletions src/ui/components/molecules/cookieConsent/CookieConsent.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
import 'vanilla-cookieconsent/dist/cookieconsent.css';
---

<button type="button" data-cc="show-preferencesModal">Show preferences modal</button>
103 changes: 103 additions & 0 deletions src/ui/components/molecules/cookieConsent/cookieConsent.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import type { CookieConsentConfig } from 'vanilla-cookieconsent';

export const cookieConsentConfig: CookieConsentConfig = {
cookie: {
useLocalStorage: true,
},
guiOptions: {
consentModal: {
layout: 'box inline',
position: 'bottom left',
},
preferencesModal: {
layout: 'box',
position: 'right',
},
},
categories: {
necessary: {
readOnly: true,
},
functionality: {},
analytics: {
services: {
ga4: {
label:
'<a href="https://marketingplatform.google.com/about/analytics/terms/us/" target="_blank">Google Analytics 4 (dummy)</a>',
onAccept: () => {
console.log('ga4 accepted');
// TODO: load ga4
},
onReject: () => {
console.log('ga4 rejected');
},
cookies: [
{
name: /^_ga/,
},
],
},
another: {
label: 'Another one (dummy)',
},
},
},
},
language: {
default: 'en',
autoDetect: 'browser',
translations: {
en: {
consentModal: {
title: "Hello traveller, it's cookie time!",
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
showPreferencesBtn: 'Manage preferences',
footer:
'<a href="/privacy-policy">Privacy Policy</a>\n<a href="/terms-and-conditions">Terms and conditions</a>',
},
preferencesModal: {
title: 'Consent Preferences Center',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
savePreferencesBtn: 'Save preferences',
closeIconLabel: 'Close modal',
serviceCounterLabel: 'Service|Services',
sections: [
{
title: 'Cookie Usage',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
},
{
title:
'Strictly Necessary Cookies <span class="pm__badge">Always Enabled</span>',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
linkedCategory: 'necessary',
},
{
title: 'Functionality Cookies',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
linkedCategory: 'functionality',
},
{
title: 'Analytics Cookies',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
linkedCategory: 'analytics',
},
{
title: 'More information',
description:
'For any query in relation to my policy on cookies and your choices, please <a class="cc__link" href="/contact">contact me</a>.',
},
],
},
},
},
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './initCookieConsent.ts'
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { run } from 'vanilla-cookieconsent';
import { cookieConsentConfig } from '../../cookieConsent.config';
import { getInitialTheme, ThemeType } from '@components/atoms/themeToggle/utils/themeSetter';

export const initCookieConsent = async () => {
const theme = getInitialTheme()
document.body.classList.toggle('cc--elegant-black', theme === ThemeType.DARK);

await run(cookieConsentConfig);
}
5 changes: 3 additions & 2 deletions src/ui/components/organisms/cities/cities.css
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
@layer cities {
.city-card__list {
--num-columns: 2;
display: grid;
gap: 3rem;
grid-template-columns: 1fr;
grid-template-rows: repeat(var(--inline-num-cards), 400px);
list-style: none;
margin-bottom: 3rem;
max-width: calc(100% / 2);
max-width: calc(100% / var(--num-columns));
padding-bottom: calc(var(--inline-index) * 0.5rem);
view-timeline-name: --cities-scales-in-view;

@media (max-width: 960px) {
max-width:100%;
--num-columns: 1;
}
}
}
1 change: 0 additions & 1 deletion src/ui/components/organisms/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
animation: add-shadow linear both;
animation-range: 0 1cqi;
animation-timeline: scroll();
background-color: var(--background-main);
height: var(--header-height);
margin-inline: auto;
position: fixed;
Expand Down
9 changes: 6 additions & 3 deletions src/ui/components/organisms/myWork/my-work.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
}

.my-work__item {
max-width: calc(100% / 4 - 1rem);
--items-per-row: 4;
--gap: 1rem;
max-width: calc(100% / var(--items-per-row) - var(--gap));
width: 100%;

& > a {
Expand All @@ -40,7 +42,7 @@
}

@media (max-width: 1024px) {
max-width: calc(100% / 2 - 1rem);
--items-per-row: 2;

&:nth-child(1),
&:nth-child(2) {
Expand All @@ -53,7 +55,8 @@
}
}
@media (max-width: 720px) {
max-width: 100%;
--items-per-row: 1;
--gap: 0;

&:nth-child(1),
&:nth-child(2),
Expand Down
2 changes: 2 additions & 0 deletions src/ui/components/templates/baseLayout/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ReactScriptProvider from "src/ui/context/reactScriptProvider/ReactScriptP
import SiteHead from "@components/organisms/siteHead/SiteHead.astro";
import Header from "@components/organisms/header/Header.astro";
import ScrollTop from "@components/atoms/scrollTop/ScrollTop.astro";
import CookieConsent from "@components/molecules/cookieConsent/CookieConsent.astro";
interface BaseLayoutProps {
title: string;
Expand All @@ -21,6 +22,7 @@ const isProject = pathname.includes("/projects");
<ScrollTop />
<main class:list={[{ '--is-projects': isProject }]}>
<slot />
<CookieConsent />
</main>
<Footer />
<ReactScriptProvider client:only="react" />
Expand Down
2 changes: 2 additions & 0 deletions src/ui/context/reactScriptProvider/ReactScriptProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { toggleMenu } from "@components/organisms/header/utils/toggleMenu";
import { initializeParallax } from "@components/molecules/welcome/utils/initializeParallax";
import { backgroundObserver } from "@components/organisms/header/utils/backgroundObserver";
import { initializeThemeSetter } from "@components/atoms/themeToggle/utils/themeSetter";
import { initCookieConsent } from "@components/molecules/cookieConsent/utils/initCookieConsent";
import { mailTo } from "@shared/utils/mailTo";

const ReactScriptProvider = () => {
Expand All @@ -12,6 +13,7 @@ const ReactScriptProvider = () => {
backgroundObserver();
mailTo();
initializeThemeSetter();
initCookieConsent();
}, []);

return null;
Expand Down
Loading

0 comments on commit c65f71b

Please sign in to comment.