add anti-no-adblocker banner

components/header.jsx

 import { useRouter } from "next/router";
 import Image from "next/image";
+import dynamic from "next/dynamic";
 
 import {
   ActionIcon,
@@ -13,6 +14,9 @@ import { Icon, ICONS } from "vseth-canine-ui";
 
 import parse from "html-react-parser";
 
+const NoAdblockBanner = dynamic(() => import("../components/noAdblockBanner"), {
+  ssr: false,
+});
 import { getAccentColor } from "../utilities/colors";
 
 import content from "../content/texts.json";
@@ -31,6 +35,7 @@ export default function Header() {
         justifyContent: "space-evenly",
       }}
     >
+      <NoAdblockBanner />
       <Grid style={{ display: "flex", alignItems: "center" }}>
         <Grid.Col xs={12} md={6}>
           <div>

components/noAdblockBanner.jsx

+import { useState, useEffect } from "react";
+
+import { Alert } from "@mantine/core";
+
+import { useTranslation } from "next-i18next";
+
+import parse from "html-react-parser";
+
+import { isAdblocking } from "adblock-hunter";
+
+export default function NoAdblockBanner() {
+  const { t } = useTranslation("common");
+
+  const [hasAdblock, setHasAdblock] = useState(true);
+
+  console.log(hasAdblock);
+
+  useEffect(() => {
+    isAdblocking().then((isAdblocking) => {
+      setHasAdblock(isAdblocking);
+    });
+  }, []);
+
+  return (
+    <>
+      {!hasAdblock && (
+        <Alert title={t("noAdblockTitle")} color="red">
+          {parse(t("noAdblockText"))}
+        </Alert>
+      )}
+    </>
+  );
+}

package-lock.json

@@ -11,6 +11,7 @@
         "@apollo/client": "^3.8.1",
         "@mantine/form": "^6.0.20",
         "@mantine/notifications": "^5.10.5",
+        "adblock-hunter": "^1.0.1",
         "axios": "^1.5.0",
         "eslint": "8.48.0",
         "eslint-config-next": "13.4.19",
@@ -4866,6 +4867,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adblock-hunter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/adblock-hunter/-/adblock-hunter-1.0.1.tgz",
+      "integrity": "sha512-BEhm3l2rYGs6WCZB+T7D+Je5rqp7WKOAqN8UMOmQZJSqR93IcU1aHaJ4vn6RMwLiRmc4fVkKc+clisPGcOQurA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://ko-fi.com/andriir"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",

package.json

@@ -12,6 +12,7 @@
     "@apollo/client": "^3.8.1",
     "@mantine/form": "^6.0.20",
     "@mantine/notifications": "^5.10.5",
+    "adblock-hunter": "^1.0.1",
     "axios": "^1.5.0",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",

public/locales/de/common.json

@@ -21,5 +21,7 @@
   "mailFailureText": "Etwas ist beim Versand des Formulars schiefgelaufen.",
   "addEvent": "Event Hinzufügen",
   "editEvent": "Event Bearbeiten",
-  "ENotEmpty": "Dieses Feld bitte ausfüllen"
+  "ENotEmpty": "Dieses Feld bitte ausfüllen",
+  "noAdblockTitle": "Kein Adblocker Installiert!",
+  "noAdblockText": "Du hast deinen Adblocker ausgeschaltet oder keinen installiert! Installiere jetzt einen für <a target='_blank' href='https://addons.mozilla.org/de/firefox/addon/ublock-origin/'>Firefox</a> oder <a target='_blank' href='https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=de'>Chrome</a>. Weil <a href='#philosophy'>Datenschutz</a> ein Menschenrecht ist."
 }
\ No newline at end of file

public/locales/en/common.json

@@ -21,5 +21,7 @@
   "mailFailureText": "Something went wrong when sending the form",
   "addEvent": "Add Event",
   "editEvent": "Edit Event",
-  "ENotEmpty": "Please fill out this field"
+  "ENotEmpty": "Please fill out this field",
+  "noAdblockTitle": "No Adblocker Installed",
+  "noAdblockText": "You have turned off or did not install an Adblocker! Install it now for <a target='_blank' href='https://addons.mozilla.org/de/firefox/addon/ublock-origin/'>Firefox</a> or <a target='_blank' href='https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=de'>Chrome</a>. Because <a href='#philosophy'>privacy</a> is a human right."
 }
\ No newline at end of file