@tilli-pro/cookieconsent-plugin 0.2.0 → 0.2.42

package/src/init/tilli-website.ts

@@ -0,0 +1,37 @@
+import type { CookieConsentConfig } from "@tilli-pro/cookieconsent";
+
+import _config from "../config";
+import { run } from "../init";
+import {
+  makeInitFn,
+  stripInvalidLinkedCategoriesFromTranslations,
+} from "./utils";
+
+const categories: CookieConsentConfig["categories"] = {
+  necessary: {
+    enabled: true, // "necessary" category is always enabled.
+    readOnly: true,
+  },
+  analytics: {},
+  marketing: {},
+};
+
+// TODO: DRY further w/ `./brf.ts`
+const language: CookieConsentConfig["language"] = {
+  ..._config.language,
+  translations: stripInvalidLinkedCategoriesFromTranslations(
+    _config.language.translations,
+    categories,
+    true, // clear cookie tables // FIXME: refactor this to actually just use the proper cookie table accoring to the categories var
+  ),
+};
+
+const config: CookieConsentConfig = {
+  ..._config,
+  categories,
+  language,
+};
+
+// console.debug({ config }, "Initializing Cookie Consent (tilli Website)...");
+const init = makeInitFn(run, config);
+void init();

package/src/init/utils.ts

@@ -0,0 +1,66 @@
+import type { CookieConsentConfig } from "@tilli-pro/cookieconsent";
+import type * as CookieConsent from "@tilli-pro/cookieconsent";
+
+import { injectReactRemoveScrollToggle } from "../config/gui-options/scripts/forceDisableReactRemoveScroll";
+import injectManageCookiePrefsButton from "../config/gui-options/scripts/injectManageCookiePrefsButton";
+
+export const makeInitFn = (
+  initFn: typeof CookieConsent.run,
+  config: CookieConsentConfig,
+) => {
+  return async () => {
+    /** inject the cookie-consent banner (pop-up) */
+    await initFn(config);
+
+    /** ...then, inject the floating cookie consent "manage preferences" icon button into the DOM (floats @ the bottom right) */
+    injectManageCookiePrefsButton();
+
+    /** ...and, force-disable "react-remove-scroll" -- only upon opening up the "manage preferences" dialog
+     *
+     *  > this handles the edge case where there's a shadcn (radix-ui) dialog open
+     *    underneath the cookie banner's "manage preferences" dialog, which prevents
+     *    the user from scrolling within the manage prefs dialog
+     */
+    injectReactRemoveScrollToggle();
+  };
+};
+
+export const stripInvalidLinkedCategoriesFromTranslations = (
+  translations: CookieConsentConfig["language"]["translations"],
+  categories: CookieConsentConfig["categories"],
+  alsoClearCookieTables: boolean = false, // FIXME: refactor this to actually just use the proper cookie table accoring to the categories var
+): CookieConsentConfig["language"]["translations"] =>
+  Object.fromEntries(
+    Object.entries(translations).map(([lang, translation]) => {
+      if (
+        translation &&
+        typeof translation === "object" &&
+        translation.preferencesModal &&
+        Array.isArray(translation.preferencesModal.sections)
+      ) {
+        /** filter out irrelevant sections */
+        const filteredSections = translation.preferencesModal.sections.filter(
+          (section: CookieConsent.Section) =>
+            !section.linkedCategory || categories[section.linkedCategory],
+        );
+
+        if (alsoClearCookieTables)
+          filteredSections.forEach(
+            (section: CookieConsent.Section) => (section.cookieTable = undefined),
+          );
+
+        return [
+          lang,
+          {
+            ...translation,
+            preferencesModal: {
+              ...translation.preferencesModal,
+              sections: filteredSections,
+            },
+          },
+        ];
+      }
+
+      return [lang, translation];
+    }),
+  );

package/src/init.ts

@@ -1,10 +1,109 @@
-import "https://rawcdn.githack.com/tilli-pro/cookieconsent/0f888b603ba1077d94776af62d2bfb7247e5ffe4/dist/cookieconsent.umd.js?min=1";
+import "https://cdn.jsdelivr.net/gh/tilli-pro/cookieconsent@0f888b603ba1077d94776af62d2bfb7247e5ffe4/dist/cookieconsent.umd.js";
 
 import type * as _CookieConsent from "@tilli-pro/cookieconsent";
-import config from "./config";
+import type { CookieConsentConfig } from "@tilli-pro/cookieconsent";
+
+import { cookieConsentTheme } from "./_utils";
+import _config from "./config";
+import { makeInitFn } from "./init/utils";
+import styles from "./styles";
 
 declare module CookieConsent {
   const run: typeof _CookieConsent.run;
 }
 
-CookieConsent.run(config);
+declare global {
+  interface Window {
+    cookieConsentTheme: typeof cookieConsentTheme;
+  }
+}
+
+const GIT_SHA = "5d10d218837ca7ecd0362b35a3333eaf07efe92d";
+const GIT_REPO = "tilli-pro/cookieconsent";
+const GIT_CDN_BASE_URL = "https://cdn.jsdelivr.net/gh";
+const GIT_CDN_URL = `${GIT_CDN_BASE_URL}/${GIT_REPO}@${GIT_SHA}`;
+const GIT_DIST_URL = `${GIT_CDN_URL}/dist`;
+const makeRemoteURL = (path: string) => `${GIT_DIST_URL}/${path}`;
+export const makeRemotePluginURL = (path: string) =>
+  makeRemoteURL(`plugin/${path}`);
+
+const CC_CSS_URL = makeRemoteURL("cookieconsent.css");
+
+const getFilenameWithPathFromRemoteURL = (url: string) => {
+  const urlObj = new URL(url);
+  const path = urlObj.pathname;
+  const file = path.split("/").pop();
+  return file;
+};
+
+function loadCSS(url: string) {
+  if (
+    document.querySelector(
+      `link[href*="${getFilenameWithPathFromRemoteURL(url)}"]`,
+    )
+  ) {
+    // console.debug(`CSS already loaded: ${url}`);
+    return; // prevent duplication
+  }
+
+  const link = document.createElement("link");
+  Object.assign(link, {
+    rel: "stylesheet",
+    type: "text/css",
+    href: url,
+  });
+  document.head.appendChild(link);
+}
+
+function loadNestedPluginCSS(basePath: string, obj: any): void {
+  for (const [key, value] of Object.entries(obj))
+    if (typeof value === "string") {
+      const url = makeRemotePluginURL(`${basePath}/${value}`);
+      // console.debug(`Loading plugin CSS from ${url}`);
+      loadCSS(url);
+    } else if (value && typeof value === "object") {
+      // console.debug(`Loading nested plugin CSS from ${basePath}/${key}`);
+      loadNestedPluginCSS(`${basePath}/${key}`, value);
+    }
+}
+
+async function always() {
+  loadCSS(CC_CSS_URL);
+  loadNestedPluginCSS("styles", styles); // TODO: make dynamic (only import dependent styles - aka if a certain `init` config is specified)
+  window.cookieConsentTheme = cookieConsentTheme; // used to fetch the correct classname to apply a specified theme | THIS SHOULD BE INJECTED INTO THE <HTML> TAG!!! // TODO: auto-inject (?)
+}
+
+void always();
+
+export const run = async (
+  config: CookieConsentConfig = _config,
+): ReturnType<typeof CookieConsent.run> => await CookieConsent.run(config);
+
+// ⚠️ NOTE: DISABLED THIS ENTRY MODULE SINCE ALL INITS SHOULD BE USING A SPECIFICALLY-CONFIGURED ENTRY MODULE INSTEAD (e.g. `init/brf.ts`, `init/tilli-website.ts`) !!!
+
+// function isEntryModule(): boolean {
+//   if (typeof document === "undefined") return false;
+//   try {
+//     const currentModuleUrl = new URL(import.meta.url, document.baseURI).href;
+//     const scripts = Array.from(
+//       document.querySelectorAll('script[type="module"]'),
+//     );
+//     return scripts.some((script) => {
+//       const src = script.getAttribute("src");
+//       if (!src) return false;
+//       return new URL(src, document.baseURI).href === currentModuleUrl;
+//     });
+//   } catch (err) {
+//     console.error("Error checking module entry:", err);
+//     return false;
+//   }
+// }
+
+// if (isEntryModule()) {
+//   // console.debug(
+//   //   { config: _config },
+//   //   "Initializing Cookie Consent (entry module)...",
+//   // );
+//   const init = makeInitFn(run, _config);
+//   void init();
+// }

package/src/react-components/CookieConsentInit.client.tsx

@@ -1,34 +1,9 @@
 "use client";
 
-import { useEffect } from "react";
-
-import { run } from "@tilli-pro/cookieconsent";
-
-import { COOKIE_CONSENT_ENABLED } from "../_consts";
-import config from "../config";
-import { injectReactRemoveScrollToggle } from "../config/gui-options/scripts/forceDisableReactRemoveScroll";
-import injectManageCookiePrefsButton from "../config/gui-options/scripts/injectManageCookiePrefsButton";
+import useCookieConsent from "./hooks/useCookieConsent";
 
 export default function CookieConsentInit() {
-  useEffect(() => {
-    if (!COOKIE_CONSENT_ENABLED) return;
-
-    void (async () => {
-      /** inject the cookie-consent banner (pop-up) */
-      await run(config);
-
-      /** ...then, inject the floating cookie consent "manage preferences" icon button into the DOM (floats @ the bottom right) */
-      injectManageCookiePrefsButton();
-
-      /** ...and, force-disable "react-remove-scroll" -- only upon opening up the "manage preferences" dialog
-       *
-       *  > this handles the edge case where there's a shadcn (radix-ui) dialog open
-       *    underneath the cookie banner's "manage preferences" dialog, which prevents
-       *    the user from scrolling within the manage prefs dialog
-       */
-      injectReactRemoveScrollToggle();
-    })();
-  }, []);
+  useCookieConsent();
 
   return null;
 }

package/src/react-components/CookieConsentInit.server.tsx

@@ -4,8 +4,8 @@ import { COOKIE_CONSENT_ENABLED } from "../_consts";
 import CookieConsentInitClient from "./CookieConsentInit.client";
 
 import "@tilli-pro/cookieconsent/dist/cookieconsent.css";
-import "./styles/tenants/freeman.css";
-import "./styles/tenants/frontier.css";
+import "../styles/tenants/freeman.css";
+import "../styles/tenants/frontier.css";
 
 /** we use a server component to handle dynamic injection of the script all together
  * > basically, there's no need to inject the client-side cookie-consent script if it's not in scope */

package/src/react-components/hooks/useCookieConsent.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect } from "react";
+
+import type * as _CookieConsent from "@tilli-pro/cookieconsent";
+
+import { COOKIE_CONSENT_ENABLED } from "../../_consts";
+import config from "../../config";
+import { makeInitFn } from "../../init/utils";
+
+declare const CookieConsent:
+  | {
+      run?: typeof _CookieConsent.run;
+    }
+  | undefined;
+
+export const run =
+  typeof CookieConsent !== "undefined" &&
+  typeof CookieConsent.run === "function"
+    ? CookieConsent.run
+    : (await import("@tilli-pro/cookieconsent")).run;
+
+export default function useCookieConsent() {
+  useEffect(() => {
+    if (!COOKIE_CONSENT_ENABLED) return;
+
+    const init = makeInitFn(run, config);
+    void init();
+  }, []);
+}

package/src/styles/index.ts

@@ -0,0 +1,6 @@
+export default {
+  tenants: {
+    freeman: "freeman.css",
+    frontier: "frontier.css",
+  },
+} as const;

package/src/styles/tenants/freeman.css

@@ -0,0 +1,63 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/** `tenant:freeman` color-scheme **/
+.cc--tenant\:freeman-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #00bdf6 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #5ed6ff !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #e2e8f0 !important;
+  --cc-btn-secondary-color: #334155 !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #f1f5f9 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f3f8fc !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f3f8fc !important;
+  --cc-cookie-category-block-border: #f3f8fc !important;
+  --cc-cookie-category-block-hover-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-border: #f0f4f7 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #f3f8fc !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+/** font */
+.cc--tenant\:freeman-light #cc-main {
+  font-family: var(--font-inter), var(--cc-font-family) !important;
+}

package/src/styles/tenants/frontier.css

@@ -0,0 +1,71 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/** `tenant:frontier` color-scheme **/
+.cc--tenant\:frontier-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #ff0037 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #141928 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #eaeff2 !important;
+  --cc-btn-secondary-color: var(--cc-primary-color) !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #d4dae0 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f0f4f7 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-border: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-bg: #e9eff4 !important;
+  --cc-cookie-category-block-hover-border: #e9eff4 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: var(--cc-btn-secondary-bg) !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+.cc--tenant\:frontier-light button.cm__btn,
+.cc--tenant\:frontier-light button.pm__btn {
+  border-radius: 9999px !important;
+  text-transform: uppercase !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.025em !important;
+}
+
+/** font */
+.cc--tenant\:frontier-light #cc-main {
+  font-family: var(--font-frontier-pp-object-sans), var(--cc-font-family) !important;
+}