Fix dark mode

astro.config.mjs

@@ -1,5 +1,4 @@
 import { defineConfig } from 'astro/config';
-
 import solidJs from "@astrojs/solid-js";
 import prefetch from "@astrojs/prefetch";
 import sitemap from "@astrojs/sitemap";
@@ -9,6 +8,8 @@ import compressor from "astro-compressor";
 //import deno from '@astrojs/deno';
 import nodejs from '@astrojs/node';
 
+import partytown from "@astrojs/partytown";
+
 // https://astro.build/config
 export default defineConfig({
   //adapter: deno(),
@@ -20,10 +21,14 @@ export default defineConfig({
       defaultLocale: "en",
       locales: {
         en: 'en-US',
-        de: 'de-DE',
-      },
-    },
-  }), compressor()],
+        de: 'de-DE'
+      }
+    }
+  }), compressor(), partytown({
+    config: {
+      forward: ["dataLayer.push"]
+    }
+  })],
   experimental: {
     //assets: true,
     //viewTransitions: true
@@ -32,5 +37,5 @@ export default defineConfig({
   //  service: sharpImageService(),
   //},
   output: "server",
-  site: "https://lindnerit.io/",
+  site: "https://lindnerit.io/"
 });

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/deno": "^4.3.0",
     "@astrojs/node": "^5.3.2",
+    "@astrojs/partytown": "^1.2.3",
     "@astrojs/prefetch": "^0.2.3",
     "@astrojs/rss": "^2.4.3",
     "@astrojs/sitemap": "^1.4.0",
@@ -33,6 +34,7 @@
     "astro": "^2.10.1",
     "astro-compressor": "^0.4.0",
     "astro-webmanifest": "^0.6.0",
+    "clarity-js": "^0.7.10",
     "contentful": "^10.4.0",
     "lucide-solid": "^0.241.0",
     "nanostores": "^0.9.3",

src/clarity.ts

@@ -0,0 +1,37 @@
+import { clarity } from "clarity-js";
+import { performanceCookiesEnabledAtom } from './localStorage';
+
+let clarityEnabled = performanceCookiesEnabledAtom.get();
+
+if (clarityEnabled) {
+    clarity.consent();
+    clarity.start({
+        projectId: "g6lwwaht01",
+        upload: "https://m.clarity.ms/collect",
+        track: true,
+        content: true
+    });
+    console.info("Since performance cookies are enabled, Microsoft Clarity has been enabled.")
+}
+else {
+    console.info("Since performance cookies are disabled, Microsoft Clarity has not been enabled.")
+}
+
+performanceCookiesEnabledAtom.listen((value: boolean) => {
+    if (value === clarityEnabled) return;
+    if (value) {
+        clarity.consent();
+        clarity.start({
+            projectId: "g6lwwaht01",
+            upload: "https://m.clarity.ms/collect",
+            track: true,
+            content: true
+        });
+        console.info("Microsoft Clarity has been enabled.")
+    }
+    else {
+        clarity.stop();
+        console.info("Microsoft Clarity has been disabled.")
+    }
+    clarityEnabled = value;
+});

src/components/BlogCard.astro

@@ -18,7 +18,7 @@ try {
 
 let imageUrl: string;
 
-if (asset.fields.file && contentfulUrl) {
+if (asset?.fields?.file && contentfulUrl) {
   const parts = contentfulUrl.pathname.split("/");
   if (parts?.length !== 5) {
     console.error("Invalid Contentful URL");

src/components/BlogSection.astro

@@ -16,6 +16,8 @@ const t = useTranslations(currentLanguage);
 ---
 
 <style lang="scss">
+  @use "src/scss/typography";
+  @use "src/scss/colors";
   .blog-section {
     display: flex;
     flex-direction: row;
@@ -45,7 +47,7 @@ const t = useTranslations(currentLanguage);
 
   a,
   a:link {
-    color: black;
+    color: colors.$foreground;
   }
 </style>
 <div class="blog-section">

src/components/Header.astro

@@ -11,8 +11,29 @@ const currentLanguage = language === "de" ? "de" : "en";
 const t = useTranslations(currentLanguage);
 ---
 
+<style is:global lang="scss">
+  @media (prefers-color-scheme: dark) {
+    :root {
+      #branding {
+        content: url("/wordmark-white.svg");
+      }
+    }
+  }
+
+  :root[data-theme="dark"] {
+    #branding {
+      content: url("/wordmark-white.svg");
+    }
+  }
+  :root[data-theme="light"] {
+    #branding {
+      content: url("/wordmark.svg");
+    }
+  }
+</style>
 <PageHeader language={language as string}>
   <img
+    id="branding"
     slot="branding"
     width="119"
     height="39"

src/components/Heading.astro

@@ -39,7 +39,7 @@ const ht: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = headingType ?? "h2";
 
   .lindner-heading-description {
     font-size: typography.$font-size-m;
-    color: colors.$neutral-700;
+    color: colors.$foreground-muted2;
   }
 
   .lindner-heading-underline {

src/components/PageFooter/style.scss

@@ -44,7 +44,7 @@ footer {
     a {
       font-family: typography.$font-family;
       font-size: typography.$font-size-xl;
-      color: colors.$black;
+      color: colors.$foreground;
       text-decoration: none;
       cursor: pointer;
       border-bottom-style: solid;
@@ -74,7 +74,7 @@ footer {
   a {
     font-family: typography.$font-family;
     font-size: typography.$font-size-xl;
-    color: colors.$black;
+    color: colors.$foreground;
     text-decoration: none;
     cursor: pointer;
   }
@@ -109,7 +109,7 @@ footer {
 
 .lindner-copyright-notice {
   font-size: typography.$font-size-m;
-  color: colors.$neutral-650;
+  color: colors.$foreground-muted;
   text-align: center;
 }
 
@@ -137,7 +137,7 @@ footer {
     a {
       font-family: typography.$font-family;
       font-size: typography.$font-size-xl;
-      color: colors.$black;
+      color: colors.$foreground;
       text-decoration: none;
     }
   }
@@ -159,7 +159,7 @@ footer {
   a:link,
   a:hover,
   a:active {
-    color: black;
+    color: colors.$foreground;
 
     &.active {
       text-decoration: none;

src/components/ThemeToggle/ThemeToggle.tsx

@@ -33,7 +33,7 @@ export const ThemeToggle = () => {
         }
     });
 
-    return <Button.Root class="lindner-theme-toggle" title="Toggle theme" onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>
+    return <Button.Root class="lindner-theme-toggle" title="Toggle theme" data-state={theme()} onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>
         <div class="lindner-icon-container">
             <Presence>
                 {theme() === "light" &&
@@ -43,16 +43,16 @@ export const ThemeToggle = () => {
                         initial={{ opacity: 0 }}
                         exit={{ opacity: 0 }}
                         transition={{ duration: 0.3 }}>
-                        <Sun />
+                        <div><Sun /></div>
                     </Motion.div>}
-                {theme() !== "light" &&
+                {theme() === "dark" &&
                     <Motion.div
                         class="lindner-icon"
                         animate={{ opacity: 1 }}
                         initial={{ opacity: 0 }}
                         exit={{ opacity: 0 }}
                         transition={{ duration: 0.3 }}>
-                        <MoonStar class="lindner-icon" />
+                        <div><MoonStar /></div>
                     </Motion.div>}
             </Presence>
         </div>

src/components/ThemeToggle/style.scss

@@ -6,7 +6,7 @@
   padding: 0.5rem;
   border-style: none;
   border-width: 0;
-  color: colors.$primary-500;
+  color: colors.$theme-switch;
   background: transparent;
   transition: all 500ms;
   cursor: pointer;

src/layouts/BaseLayout.astro

@@ -367,6 +367,16 @@ const langTag = language == "de" ? "de" : "en";
       }
     </style>
     <script src="../pageTransitions.ts"></script>
+    <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-T8GDWTZ831"></script>
+    <script type="text/partytown">
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      // For GDPR compliance
+      gtag('config', 'G-T8GDWTZ831', { 'anonymize_ip': true });
+    </script>
+    <script src="../clarity.ts"></script>
   </head>
   <body>
     <div id="swup"><slot /></div>

src/pages/[language]/blog/index.astro

@@ -91,7 +91,7 @@ const meta = metaBuilder.create();
             <h2>{category.displayName}</h2>
             <div class="blog-cards">
               {blogPosts
-                .filter((post) => post.category.fields.slug === category.slug)
+                .filter((post) => post?.category?.fields?.slug === category.slug)
                 .map((post) => (
                   <BlogCard {post}/>
                 ))}

src/pages/[language]/legal-details.astro

@@ -49,6 +49,8 @@ const meta = metaBuilder.create();
   .block {
     border-radius: 20px;
     padding: 1rem;
+    color: black;
+
     &.block-secondary {
       background-color: colors.$secondary-100;
     }