From 718452728f48293473a00fa454a185cb779f8ccc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 18 Mar 2024 17:33:26 +0100
Subject: [PATCH] Detect Rocket Loader and advert about it on docs (#295)

---
 src/app/(space)/(content)/layout.tsx       |  3 +++
 src/components/RocketLoaderDetector.tsx    | 16 ++++++++++++++++
 src/components/SpaceLayout/SpaceLayout.tsx |  4 +++-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/RocketLoaderDetector.tsx

diff --git a/src/app/(space)/(content)/layout.tsx b/src/app/(space)/(content)/layout.tsx
index 2f4bd962d..abe0b80e4 100644
--- a/src/app/(space)/(content)/layout.tsx
+++ b/src/app/(space)/(content)/layout.tsx
@@ -6,6 +6,7 @@ import * as ReactDOM from 'react-dom';
 import { AdminToolbar } from '@/components/AdminToolbar';
 import { CookiesToast } from '@/components/Cookies';
 import { LoadIntegrations } from '@/components/Integrations';
+import { RocketLoaderDetector } from '@/components/RocketLoaderDetector';
 import { SpaceLayout } from '@/components/SpaceLayout';
 import { buildVersion } from '@/lib/build';
 import { getContentSecurityPolicyNonce } from '@/lib/csp';
@@ -76,6 +77,8 @@ export default async function ContentLayout(props: { children: React.ReactNode }
                 </React.Suspense>
             ) : null}
 
+            <RocketLoaderDetector />
+
             <AdminToolbar space={space} content={content} />
         </ClientContexts>
     );
diff --git a/src/components/RocketLoaderDetector.tsx b/src/components/RocketLoaderDetector.tsx
new file mode 100644
index 000000000..ccc534134
--- /dev/null
+++ b/src/components/RocketLoaderDetector.tsx
@@ -0,0 +1,16 @@
+export function RocketLoaderDetector() {
+    return (
+        <script data-cfasync="false">
+            {`
+if (Array.from(document.scripts).find(script => script.src.includes('rocket-loader.min.js'))) {
+  document.getElementById('gitbook-main-content').innerHTML = \`
+    <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 max-w-screen-lg mt-10 mx-auto" role="alert">
+      <strong>Error in site configuration:</strong>
+      It looks like \${window.location.hostname} has been incorrectly configured in Cloudflare. This may lead to unexpected behavior or issues with the page loading. If you are the owner of this site, please refer to <a href="https://docs.gitbook.com/published-documentation/custom-domain/configure-dns#are-you-using-cloudflare">GitBook's documentation</a> for steps to fix the problem.
+    </div>
+  \`;
+}
+            `}
+        </script>
+    );
+}
diff --git a/src/components/SpaceLayout/SpaceLayout.tsx b/src/components/SpaceLayout/SpaceLayout.tsx
index 3b2593c17..b4623bae1 100644
--- a/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/src/components/SpaceLayout/SpaceLayout.tsx
@@ -96,7 +96,9 @@ export function SpaceLayout(props: {
                     }
                     withHeaderOffset={withTopHeader}
                 />
-                <div className={tcls('flex-1', 'flex', 'flex-col')}>{children}</div>
+                <div id="gitbook-main-content" className={tcls('flex-1', 'flex', 'flex-col')}>
+                    {children}
+                </div>
             </div>
 
             {customization.themes.toggeable ||