fix 🐛 (css): fix css for cookie stuff (#14)

Here are the branches that are currently applied:
 - fix/pipelines (refs/gitbutler/fix/pipelines)
   branch head: 07f14c2c0e202af6a8c5e0cf5c71b17a81e1a955
   - src/components/MainHead.astro
   - package.json
   - pnpm-lock.yaml
   - src/pages/index.astro
   - src/components/ThemeToggle.astro
   - astro.config.mjs
   - src/components/PortfolioPreview.astro
   - src/content/config.ts
   - src/content/blog/2016-01-11-side-loading-application-without-sccm-part-1.md
   - src/content/blog/2015-12-16-get-nexttrain.md
   - remark-modified-time.mjs
   - src/components/DateTime.astro
   - remark-reading-time.mjs

Your previous branch was: refs/heads/fix/pipelines

The sha for that commit was: 496d70f33695afe0c09a7e3f474c695a413b4d12

For more information about what we're doing here, check out our docs:
https://docs.gitbutler.com/features/virtual-branches/integration-branch

* fix 🐛 (css): fix css for cookie stuff

fix css for the cookie banner stuff

---------

Co-authored-by: GitButler <[email protected]>

astro.config.mjs

@@ -3,6 +3,7 @@ import remarkToc from "remark-toc";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import { remarkReadingTime } from "./remark-reading-time.mjs";
+import { remarkModifiedTime } from "./remark-modified-time.mjs";
 import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 
@@ -20,7 +21,84 @@ export default defineConfig({
         forward: ["dataLayer.push"],
       },
     }),
-    jopSoftwarecookieconsent(),
+    ,
+    jopSoftwarecookieconsent({
+      categories: {
+        necessary: {
+          enabled: true, // this category is enabled by default
+          readOnly: true, // this category cannot be disabled
+        },
+        analytics: {},
+      },
+      guiOptions: {
+        consentModal: {
+          layout: "bar inline",
+          position: "bottom",
+          flipButtons: true,
+          equalWeightButtons: true,
+        },
+        preferencesModal: {
+          layout: "box",
+          // position: 'left right',
+          flipButtons: false,
+          equalWeightButtons: true,
+        },
+      },
+      language: {
+        default: "fr",
+        translations: {
+          fr: {
+            consentModal: {
+              title: "J'utilise quelques cookies",
+              description: "Description de la fenêtre modale des cookies",
+              acceptAllBtn: "Tout accepter",
+              acceptNecessaryBtn: "Tout refuser",
+              showPreferencesBtn: "Gérer les préférences individuelles",
+            },
+            preferencesModal: {
+              title: "Gérer les préférences des cookies",
+              acceptAllBtn: "Tout accepter",
+              acceptNecessaryBtn: "Tout refuser",
+              savePreferencesBtn: "Accepter la sélection actuelle",
+              closeIconLabel: "Fermer la fenêtre modale",
+              sections: [
+                {
+                  title: "Performance et analyse",
+                  description:
+                    "Ces cookies collectent des informations sur votre utilisation de ce site web. Toutes les données sont anonymisées et ne peuvent pas être utilisées pour vous identifier.",
+                  linkedCategory: "analytics",
+                },
+              ],
+            },
+          },
+
+          en: {
+            consentModal: {
+              title: "We use cookies",
+              description: "Cookie modal description",
+              acceptAllBtn: "Accept all",
+              acceptNecessaryBtn: "Reject all",
+              showPreferencesBtn: "Manage Individual preferences",
+            },
+            preferencesModal: {
+              title: "Manage cookie preferences",
+              acceptAllBtn: "Accept all",
+              acceptNecessaryBtn: "Reject all",
+              savePreferencesBtn: "Accept current selection",
+              closeIconLabel: "Close modal",
+              sections: [
+                {
+                  title: "Performance and Analytics",
+                  description:
+                    "These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.",
+                  linkedCategory: "analytics",
+                },
+              ],
+            },
+          },
+        },
+      },
+    }),
   ],
   markdown: {
     shikiConfig: {
@@ -35,7 +113,7 @@ export default defineConfig({
       wrap: true,
     },
     // Example: Switch to use prism for syntax highlighting in Markdown
-    remarkPlugins: [remarkToc, remarkReadingTime],
+    remarkPlugins: [remarkToc, remarkReadingTime, remarkModifiedTime],
     rehypePlugins: [
       rehypeSlug,
       [

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/markdown-remark": "^4.2.1",
     "@astrojs/sitemap": "^3.0.5",
-    "@jop-software/astro-cookieconsent": "^2.0.0",
+    "@jop-software/astro-cookieconsent": "^3.0.0",
     "astro": "^4.3.5",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
@@ -21,11 +21,12 @@
     "rehype-slug": "^6.0.0",
     "rehype-toc": "^3.0.2",
     "remark-toc": "^9.0.0",
-    "vanilla-cookieconsent": "^2.9.2"
+    "vanilla-cookieconsent": "^3.0.0"
   },
   "devDependencies": {
     "@astrojs/partytown": "^2.0.4",
     "@typescript-eslint/parser": "^6.21.0",
+    "dayjs": "^1.11.10",
     "eslint": "^8.56.0",
     "eslint-plugin-astro": "^0.31.4",
     "eslint-plugin-jsx-a11y": "^6.8.0",

remark-modified-time.mjs

@@ -0,0 +1,11 @@
+import { execSync } from "child_process";
+
+export function remarkModifiedTime() {
+  return function (tree, file) {
+    const filepath = file.history[0];
+    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
+    console.log("lastModified", `${filepath} : ${result.toString()}`);
+
+    file.data.astro.frontmatter.lastModified = result.toString();
+  };
+}

remark-reading-time.mjs

@@ -7,6 +7,7 @@ export function remarkReadingTime() {
     const readingTime = getReadingTime(textOnPage);
     // readingTime.text will give us minutes read as a friendly string,
     // i.e. "3 min read"
+    console.log("readingTime", readingTime);
     data.astro.frontmatter.minutesRead = readingTime.text;
   };
 }

src/components/DateTime.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+  {
+    date.toLocaleDateString("fr-fr", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    })
+  }
+</time>

src/components/MainHead.astro

@@ -24,8 +24,13 @@ const {
   async="async"
   crossorigin="anonymous"
   data-cookiecategory="analytics"
+  data-service="Google Analytics"
   src="https://www.googletagmanager.com/gtag/js?id=UA-71551100-1"></script>
-<script type="text/partytown" data-cookiecategory="analytics">
+<script
+  type="text/partytown"
+  data-cookiecategory="analytics"
+  data-service="Google Analytics"
+>
   window.dataLayer = window.dataLayer || [];
   function gtag() {
     dataLayer.push(arguments);
@@ -53,12 +58,17 @@ const {
       : "light";
   };
   const isDark = getThemePreference() === "dark";
-  document.documentElement.classList[isDark ? "add" : "remove"]("theme-dark");
+  // document.documentElement.classList[isDark ? "add" : "remove"]("");
+  document.documentElement.classList[isDark ? "add" : "remove"](
+    "theme-dark",
+    "cc--darkmode"
+  );
 
   if (typeof localStorage !== "undefined") {
     // Watch the document element and persist user preference when it changes.
     const observer = new MutationObserver(() => {
       const isDark = document.documentElement.classList.contains("theme-dark");
+
       localStorage.setItem("theme", isDark ? "dark" : "light");
     });
     observer.observe(document.documentElement, {