From dab3393ba23548ccad1c2fb159fb8cf5b6643024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 23 May 2024 12:41:21 -0500
Subject: [PATCH] feat: legal stuff

---
 package.json                      |   1 +
 src/app/components/Checks.tsx     | 103 ++++++++++++++++--------------
 src/app/legal/[document]/page.tsx |  17 +++++
 yarn.lock                         |   5 ++
 4 files changed, 77 insertions(+), 49 deletions(-)
 create mode 100644 src/app/legal/[document]/page.tsx

diff --git a/package.json b/package.json
index 694b13a44..a356f3752 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
+    "markdown-to-jsx": "^7.4.7",
     "next": "^14.1.0",
     "parse-dds": "^1.2.1",
     "pickleparser": "^0.2.1",
diff --git a/src/app/components/Checks.tsx b/src/app/components/Checks.tsx
index 4453ebb9b..6312ccfd1 100644
--- a/src/app/components/Checks.tsx
+++ b/src/app/components/Checks.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AlertDialog, Button, Flex, Heading, Text } from '@radix-ui/themes';
+import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Link } from '../../components/Link';
 import { extendAuth } from '../../core/blitz/extendAuth';
@@ -17,6 +18,8 @@ export function Checks() {
   const policiesAgreementIndex = useApp(
     (state) => state.policiesAgreementIndex,
   );
+  const pathname = usePathname();
+  const isLegal = pathname.startsWith('/legal');
 
   useEffect(() => {
     setShowDevBuildAlert(
@@ -69,68 +72,70 @@ export function Checks() {
         </AlertDialog.Content>
       </AlertDialog.Root>
 
-      {policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX && (
-        <Flex
-          align="end"
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'var(--color-overlay)',
-            zIndex: 2,
-          }}
-        >
+      {policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
+        !isLegal && (
           <Flex
-            p="8"
+            align="end"
             style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
               width: '100%',
-              background: 'var(--color-panel-solid)',
+              height: '100%',
+              background: 'var(--color-overlay)',
+              zIndex: 2,
             }}
-            justify="center"
           >
             <Flex
-              align="start"
-              gap="4"
+              p="8"
               style={{
-                maxWidth: 640 * 2,
+                width: '100%',
+                background: 'var(--color-panel-solid)',
               }}
-              direction="column"
+              justify="center"
             >
-              <Flex direction="column" gap="2">
-                <Heading>
-                  {policiesAgreementIndex === -1
-                    ? "BlitzKit's cookies"
-                    : "BlitzKit's policies have changed"}
-                </Heading>
-
-                <Text>
-                  This website utilizes cookies to perform analytics and
-                  personalize your experience. You can learn more through{' '}
-                  <Link href="/legal/privacy-policy">our privacy policy</Link>.
-                  You may opt out of personalized advertizement by visiting{' '}
-                  <Link href="https://www.google.com/settings/ads">
-                    Google Ad Settings
-                  </Link>
-                  . By using BlitzKit, you also agree to our{' '}
-                  <Link href="/legal/terms-of-service">terms of service</Link>.
-                </Text>
-              </Flex>
-
-              <Button
-                onClick={() => {
-                  useApp.setState({
-                    policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
-                  });
+              <Flex
+                align="start"
+                gap="4"
+                style={{
+                  maxWidth: 640 * 2,
                 }}
+                direction="column"
               >
-                I Agree
-              </Button>
+                <Flex direction="column" gap="2">
+                  <Heading>
+                    {policiesAgreementIndex === -1
+                      ? "BlitzKit's cookies"
+                      : "BlitzKit's policies have changed"}
+                  </Heading>
+
+                  <Text>
+                    This website utilizes cookies to perform analytics and
+                    personalize your experience. You can learn more through{' '}
+                    <Link href="/legal/privacy-policy">our privacy policy</Link>
+                    . You may opt out of personalized advertizement by visiting{' '}
+                    <Link href="https://www.google.com/settings/ads">
+                      Google Ad Settings
+                    </Link>
+                    . By using BlitzKit, you also agree to our{' '}
+                    <Link href="/legal/terms-of-service">terms of service</Link>
+                    .
+                  </Text>
+                </Flex>
+
+                <Button
+                  onClick={() => {
+                    useApp.setState({
+                      policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
+                    });
+                  }}
+                >
+                  I Agree
+                </Button>
+              </Flex>
             </Flex>
           </Flex>
-        </Flex>
-      )}
+        )}
     </>
   );
 }
diff --git a/src/app/legal/[document]/page.tsx b/src/app/legal/[document]/page.tsx
new file mode 100644
index 000000000..ccb0ff327
--- /dev/null
+++ b/src/app/legal/[document]/page.tsx
@@ -0,0 +1,17 @@
+import Markdown from 'markdown-to-jsx';
+import { use } from 'react';
+import PageWrapper from '../../../components/PageWrapper';
+
+export default function Page({ params }: { params: { document: string } }) {
+  const markdown = use(
+    fetch(
+      `https://raw.githubusercontent.com/tresabhi/blitzkit/main/docs/legal/${params.document}.md`,
+    ).then((response) => response.text()),
+  );
+
+  return (
+    <PageWrapper>
+      <Markdown>{markdown}</Markdown>
+    </PageWrapper>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 819d563e9..94ab225ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4402,6 +4402,11 @@ markdown-escape@^2.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escape/-/markdown-escape-2.0.0.tgz#44484d30d7845b91575c77fd8898f23a0a6f890c"
   integrity sha512-Trz4v0+XWlwy68LJIyw3bLbsJiC8XAbRCKF9DbEtZjyndKOGVx6n+wNB0VfoRmY2LKboQLeniap3xrb6LGSJ8A==
 
+markdown-to-jsx@^7.4.7:
+  version "7.4.7"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz#740ee7ec933865ef5cc683a0992797685a75e2ee"
+  integrity sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==
+
 media-query-parser@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29"