Merge pull request #12 from nblackburn/feature/dynamic-palette

Dynamic palette
nblackburn · Oct 24, 2022 · 2a811d4 · 2a811d4
2 parents c1cada2 + 2022a6e
commit 2a811d4
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.2.4",
+    "version": "1.3.0",
     "scripts": {
         "start": "astro dev",
         "build": "astro build",

diff --git a/src/components/dynamicPalette.vue b/src/components/dynamicPalette.vue
@@ -0,0 +1,19 @@
+<template>
+    <slot />
+</template>
+
+<script lang="ts">
+import { onMounted } from 'vue';
+import { getActivePalette, applyPalette } from '@utilities/paletteManager';
+
+export default {
+    setup() {
+        onMounted(() => {
+            const bodyElement = document.body;
+            const activePalette = getActivePalette();
+
+            applyPalette(activePalette, bodyElement);
+        });
+    }
+};
+</script>
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -6,16 +6,16 @@ import Main from '@components/main.vue';
 import Icons from '@components/icons.vue';
 import Header from '@components/header.vue';
 import Footer from '@components/footer.vue';
-import getPalette from '@utilities/getPalette';
+import DynamicPalette from '@components/dynamicPalette.vue';
+import { getActivePalette } from '@utilities/paletteManager';
 
 export interface Props {
     title: string;
     activePage: string;
     description?: string;
 }
 
-const { pathname } = Astro.url;
-const colorPalette = getPalette();
+const activePalette = getActivePalette();
 const { title, description, activePage } = Astro.props;
 const pirschCode = import.meta.env.PIRSCH_CODE ?? undefined;
 ---
@@ -47,7 +47,8 @@ const pirschCode = import.meta.env.PIRSCH_CODE ?? undefined;
             )
         }
     </head>
-    <body class:list={[styles.body, colorPalette]}>
+    <body class:list={[styles.body, activePalette]}>
+        <DynamicPalette client:load />
         <Icons />
         <Header activePage={activePage} />
         <Main>

diff --git a/src/styles/palettes.css.ts b/src/styles/palettes.css.ts
@@ -21,3 +21,9 @@ export const christmasPalette = style({
         [secondaryAccent]: vars.colors.seaGreen
     }
 });
+
+export const paletteClasses = [
+    defaultPalette,
+    halloweenPalette,
+    christmasPalette
+];
diff --git a/src/utilities/getPalette.ts b/src/utilities/getPalette.ts
diff --git a/src/utilities/paletteManager.ts b/src/utilities/paletteManager.ts
@@ -0,0 +1,62 @@
+import { getDate, getMonth } from 'date-fns';
+import {
+    paletteClasses,
+    defaultPalette,
+    christmasPalette,
+    halloweenPalette
+} from '@styles/palettes.css';
+
+export const getActivePalette = (): string => {
+    const now = new Date();
+    const currentDate = getDate(now);
+    const currentMonth = getMonth(now);
+
+    if (currentDate === 31 && currentMonth === 9) {
+        return halloweenPalette;
+    }
+
+    if (currentDate === 25 && currentMonth === 11) {
+        return christmasPalette;
+    }
+
+    return defaultPalette;
+};
+
+export const getAppliedPalettes = (element: HTMLElement): string[] => {
+    const appliedPalettes: string[] = [];
+    const classList = element.classList;
+
+    // Figure out what palettes are currently applied.
+    classList.forEach((elementClass) => {
+        if (paletteClasses.includes(elementClass)) {
+            appliedPalettes.push(elementClass);
+        }
+    });
+
+    return appliedPalettes;
+};
+
+export const applyPalette = (palette: string, element: HTMLElement): void => {
+    const classList = element.classList;
+    const appliedPalettes = getAppliedPalettes(element);
+
+    // Check we don't already have the target palette applied.
+    if (appliedPalettes.includes(palette)) {
+        return;
+    }
+
+    // Apply the target palette.
+    classList.add(palette);
+
+    // Figure out palettes in need of removal.
+    const otherPalettes = appliedPalettes.filter((paletteClass) => {
+        return paletteClass !== palette;
+    });
+
+    // Remove previously applied palette classes.
+    otherPalettes.forEach((paletteClass) => {
+        if (classList.contains(paletteClass)) {
+            classList.remove(paletteClass);
+        }
+    });
+};