From 2faaa71f58214fe0067a1644c906ffa83291bea2 Mon Sep 17 00:00:00 2001
From: Caspian Zhao <caspian.zhao@outlook.com>
Date: Sat, 5 Oct 2024 09:40:35 +0800
Subject: [PATCH] fix: demo app can't dislay in doc site (#693)

* ci: add new CI job for testing

* chore: remove unused linting before commit

* ci: update testing CI

* ci: update yarn caching logic

* ci: refacor dependency caching logic in ci files

* ci: update CI trigger time

* docs: update example baseUrl

* fix: demo app can't dislay in doc site
---
 example/app/app/+html.tsx    |  16 +++--
 example/app/app/_layout.tsx  | 109 +++++++++++++++++++----------------
 example/app/app/index.tsx    |   2 +-
 example/website/package.json |   2 -
 4 files changed, 67 insertions(+), 62 deletions(-)

diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx
index d076575f..a88a856f 100644
--- a/example/app/app/+html.tsx
+++ b/example/app/app/+html.tsx
@@ -1,6 +1,5 @@
 import { ScrollViewStyleReset } from "expo-router/html";
 import { WebProvider } from "@/store/WebProvider";
-import { MAX_WIDTH } from "@/constants/sizes";
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -17,6 +16,12 @@ export default function Root({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
         />
 
+        {/* This CSP used to control which domain could embed this App. For now, we're using this App in doc site. */}
+        <meta
+          httpEquiv="Content-Security-Policy"
+          content="frame-ancestors 'self' https://app.rn-carousel.dev http://localhost:8002"
+        />
+
         {/*
           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
@@ -26,7 +31,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
         <style
           dangerouslySetInnerHTML={{
-            __html: viewportStyles,
+            __html: ``,
           }}
         />
 
@@ -38,10 +43,3 @@ export default function Root({ children }: { children: React.ReactNode }) {
     </html>
   );
 }
-
-const viewportStyles = `
-  html, body {
-    max-width: ${MAX_WIDTH}px;
-    margin: 0 auto;
-  }
-`;
diff --git a/example/app/app/_layout.tsx b/example/app/app/_layout.tsx
index ba2f2a42..e8acc0bd 100644
--- a/example/app/app/_layout.tsx
+++ b/example/app/app/_layout.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { I18nManager, View } from "react-native";
+import { I18nManager, Text, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { TamaguiProvider } from "tamagui";
+import { TamaguiProvider, XStack, YStack } from "tamagui";
 import { tamaguiConfig } from "../tamagui.config";
 
 import FontAwesome from "@expo/vector-icons/FontAwesome";
@@ -14,14 +14,9 @@ import { useWebContext } from "@/store/WebProvider";
 import { CaptureProvider } from "@/store/CaptureProvider";
 import { HeaderRight } from "@/components/HeaderRight";
 import { routes } from "./routes";
-import {
-  useGlobalSearchParams,
-  useLocalSearchParams,
-  useNavigation,
-  usePathname,
-} from "expo-router";
 import { useInDoc } from "@/hooks/useInDoc";
 import { IS_WEB } from "@/constants/platform";
+import { MAX_WIDTH } from "@/constants/sizes";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -79,53 +74,67 @@ function RootLayoutNav() {
     }
   }, [inDoc]);
 
+  const backgroundColor = inDoc
+    ? tamaguiConfig.themes.dark.background.val
+    : tamaguiConfig.themes.light.background.val;
+
   return (
     <TamaguiProvider
       config={tamaguiConfig}
       defaultTheme={inDoc ? "dark" : "light"}
     >
-      <View style={{ flex: 1 }}>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <ThemeProvider value={DefaultTheme}>
-            <CaptureProvider>
-              <Stack
-                initialRouteName="/"
-                screenOptions={{
-                  headerShown: !inDoc && webHeaderShown,
-                  contentStyle: {
-                    flex: 1,
-                    backgroundColor: inDoc
-                      ? tamaguiConfig.themes.dark.background.val
-                      : tamaguiConfig.themes.light.background.val,
-                  },
-                  headerRight: ({ tintColor }) => (
-                    <HeaderRight
-                      tintColor={tintColor}
-                      isRTL={isRTL}
-                      setIsRTL={setIsRTL}
-                    />
-                  ),
-                }}
-              >
-                <Stack.Screen name="index" />
-                {routes
-                  .flatMap((item) =>
-                    item.demos.map((demo) => ({ ...demo, kind: item.kind })),
-                  )
-                  .map((item) => (
-                    <Stack.Screen
-                      key={item.name}
-                      name={`demos/${item.kind}/${item.name}/index`}
-                      options={{
-                        title: item.title,
-                      }}
-                    />
-                  ))}
-              </Stack>
-            </CaptureProvider>
-          </ThemeProvider>
-        </GestureHandlerRootView>
-      </View>
+      <Providers>
+        <XStack
+          flex={1}
+          justifyContent="center"
+          backgroundColor={backgroundColor}
+        >
+          <YStack minWidth={IS_WEB ? MAX_WIDTH : "100%"} height={"100%"}>
+            <Stack
+              initialRouteName="/"
+              screenOptions={{
+                headerShown: !inDoc && webHeaderShown,
+                contentStyle: {
+                  flex: 1,
+                  backgroundColor,
+                },
+                headerRight: ({ tintColor }) => (
+                  <HeaderRight
+                    tintColor={tintColor}
+                    isRTL={isRTL}
+                    setIsRTL={setIsRTL}
+                  />
+                ),
+              }}
+            >
+              <Stack.Screen name="index" />
+              {routes
+                .flatMap((item) =>
+                  item.demos.map((demo) => ({ ...demo, kind: item.kind })),
+                )
+                .map((item) => (
+                  <Stack.Screen
+                    key={item.name}
+                    name={`demos/${item.kind}/${item.name}/index`}
+                    options={{
+                      title: item.title,
+                    }}
+                  />
+                ))}
+            </Stack>
+          </YStack>
+        </XStack>
+      </Providers>
     </TamaguiProvider>
   );
 }
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider value={DefaultTheme}>
+        <CaptureProvider>{children}</CaptureProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+};
diff --git a/example/app/app/index.tsx b/example/app/app/index.tsx
index 29b78199..4bc102c4 100644
--- a/example/app/app/index.tsx
+++ b/example/app/app/index.tsx
@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 
-import { useNavigation, usePathname, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 
 import { useColor } from "@/hooks/useColor";
 import { routes } from "./routes";
diff --git a/example/website/package.json b/example/website/package.json
index 3ec51238..cdcbc49b 100644
--- a/example/website/package.json
+++ b/example/website/package.json
@@ -2,8 +2,6 @@
   "name": "reanimated-carousel-website",
   "version": "0.0.1",
   "description": "Nextra docs template",
-  "author": "Shu Ding <g@shud.in>",
-  "license": "MIT",
   "homepage": "https://github.com/dohooo/react-native-reanimated-carousel#readme",
   "repository": {
     "type": "git",