adds blocked page (#95)

* adds blocked page * removes unneeded script tag comments * removes cookies banner from blocked page * adds integrity attr
ObolNetwork · Dec 11, 2023 · 73c8545 · 73c8545
1 parent 5248484
commit 73c8545
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 14 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,12 +1,14 @@
 import { globalCss } from "@obolnetwork/obol-ui";
 import type { AppProps } from "next/app";
 import TopLeftBg from "../public/backgrounds/top-left-bg.svg";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
 
 const globalStyles = globalCss({
   html: {
     overflowX: "hidden",
   },
-  body: {    
+  body: {
     background: `url(${TopLeftBg.src}) left top no-repeat`,
     backgroundColor: "$bg01",
     padding: 0,
@@ -21,6 +23,28 @@ const globalStyles = globalCss({
 
 function MyApp({ Component, pageProps }: AppProps) {
   globalStyles();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.pathname !== "/blocked") {
+      const script = document.createElement("script");
+      script.src = "https://app.termly.io/embed.min.js";
+      script.type = "text/javascript";
+      script.async = true;
+      script.setAttribute("data-auto-block", "on");
+      script.setAttribute(
+        "data-website-uuid",
+        "01eadf2f-d1f3-4db1-bdce-a3cb1cd9f4d7"
+      );
+
+      script.integrity =
+        "eb05b794d3ff3828122578afacb94693563557be9036d4dc882d70ce63d17a1c";
+      script.crossOrigin = "anonymous";
+
+      document.body.appendChild(script);
+    }
+  }, [router.pathname]);
+
   return <Component {...pageProps} />;
 }
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -14,7 +14,7 @@ export default class Document extends NextDocument {
     return (
       <Html>
         <Head>
-          <script        
+          <script
             id="google-tag-manager"
             dangerouslySetInnerHTML={{
               __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -23,13 +23,6 @@ export default class Document extends NextDocument {
               'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
               })(window,document,'script','dataLayer','GTM-NZ2HGMB');`,
             }}
-          />          
-          <script
-            type="text/javascript"
-            src="https://app.termly.io/embed.min.js"
-            data-auto-block="on"
-            data-website-uuid="01eadf2f-d1f3-4db1-bdce-a3cb1cd9f4d7"
-            async
           />
           <style
             id="obol"

diff --git a/pages/blocked.tsx b/pages/blocked.tsx
@@ -0,0 +1,104 @@
+import type { NextPage } from "next";
+import { Button, Navbar, Box, Text } from "@obolnetwork/obol-ui";
+import Head from "next/head";
+
+const Blocked: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <style>{`
+          html, body, #__next {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* Prevents scrolling on the block page */
+          }
+          .navbar-wrapper a {
+            height: 48px;
+          }
+          .navbar-wrapper button {
+            display: none;
+          }
+        `}</style>
+        <title>Obol - Building Distributed Validators for Ethereum</title>
+        <meta
+          name="description"
+          content="The Obol Network is an ecosystem for trust minimized staking that allows people to create, test, run & co-ordinate distributed validators"
+        />
+        <meta name="title" content="Obol" />
+        <link rel="icon" href="/favicon.png" />
+        <meta property="og:url" content="https://obol.tech" />
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:image"
+          content="https://obol.tech/assets/og-image-v2.png"
+        />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+      </Head>
+      <div className="navbar-wrapper">
+        <Navbar />
+      </div>
+      <Box
+        css={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "90%",
+        }}
+      >
+        <Box
+          css={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "78%",
+            width: "77%",
+            background: "url(/backgrounds/mundi.svg) no-repeat center center", // replace with your SVG path
+            backgroundSize: "cover",
+            "@md": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            as="h1"
+            css={{
+              color: "$textLight",
+              fontSize: "32px",
+              marginBottom: "16px",
+              px: "30%",
+              "@sm": {
+                px: "10%",
+              },
+              textAlign: "center",
+              lineHeight: "48px",
+            }}
+          >
+            This link is not currently available in certain geolocations
+          </Text>
+          <Text
+            css={{
+              fontSize: "18px",
+              color: "$body",
+              marginBottom: "32px",
+              "@sm": {
+                px: "10%",
+                textAlign: "center",
+              },
+            }}
+          >
+            You can still learn more about Obol by visiting our website
+          </Text>
+          <Button as="a" href="https://obol.tech" css={{ alignSelf: "center" }}>
+            Obol Website
+          </Button>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default Blocked;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -24,18 +24,18 @@ const Home: NextPage = () => {
         />
         <meta name="title" content="Obol" />
         <link rel="icon" href="/favicon.png" />
-        <meta property="og:url" content="https://obol.dev" />
+        <meta property="og:url" content="https://obol.tech" />
         <meta property="og:type" content="website" />
         <meta
           property="og:image"
-          content="https://obol.dev/assets/og-image-v2.png"
+          content="https://obol.tech/assets/og-image-v2.png"
         />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
 
         <meta name="twitter:card" content="summary_large_image" />
-        <meta property="twitter:domain" content="obol.dev" />
-        <meta property="twitter:url" content="https://obol.dev/" />
+        <meta property="twitter:domain" content="obol.tech" />
+        <meta property="twitter:url" content="https://obol.tech/" />
         <meta
           name="twitter:title"
           content="Obol - Building Distributed Validators for Ethereum"
@@ -46,7 +46,7 @@ const Home: NextPage = () => {
         />
         <meta
           name="twitter:image"
-          content="https://obol.dev/assets/og-image-v2.png"
+          content="https://obol.tech/assets/og-image-v2.png"
         />
         <meta name="twitter:site" content="@ObolNetwork" />
         <meta name="twitter:creator" content="@ObolNetwork" />

diff --git a/public/backgrounds/mundi.svg b/public/backgrounds/mundi.svg