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
dohooo · Oct 5, 2024 · 2faaa71 · 2faaa71
1 parent 4f24b18
commit 2faaa71
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2,8 +2,6 @@
   "name": "reanimated-carousel-website",
   "version": "0.0.1",
   "description": "Nextra docs template",
-  "author": "Shu Ding <[email protected]>",
-  "license": "MIT",
   "homepage": "https://github.com/dohooo/react-native-reanimated-carousel#readme",
   "repository": {
     "type": "git",