Replace CodeSandbox embeds with self-hosted examples

.github/ISSUE_TEMPLATE/bug.yml

@@ -5,7 +5,7 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thank you for reporting an issue! Create a test case for your issue by forking this template https://codesandbox.io/s/6lx6ql1w5r
+        Thank you for reporting an issue! Create a minimal repository that reproduces the issue and link it below.
   - type: checkboxes
     attributes:
       label: Is there an existing issue for this?
@@ -38,8 +38,8 @@ body:
   - type: input
     attributes:
       label: Test case
-      description: Please provide a link to a reduced test case that reproduces the issue.
-      placeholder: 'https://codesandbox.io/s/6lx6ql1w5r'
+      description: Please provide a link to a repository with a reduced test case that reproduces the issue.
+      placeholder: 'https://github.com/your-username/your-repro-repo'
     validations:
       required: true
   - type: textarea

packages/react-native-web-docs/eleventy.config.js

@@ -73,6 +73,10 @@ export default function (eleventyConfig) {
   // PASSTHROUGH -----
 
   eleventyConfig.addPassthroughCopy('src/static');
+  eleventyConfig.addPassthroughCopy({
+    'src/.nojekyll': '.nojekyll',
+    '../react-native-web-examples/dist': 'examples'
+  });
 
   // COLLECTIONS -----
 

packages/react-native-web-docs/package.json

@@ -5,8 +5,9 @@
   "description": "Documentation website for React Native for Web",
   "type": "module",
   "scripts": {
-    "dev": "eleventy --serve",
-    "build": "ELEVENTY_PRODUCTION=true eleventy",
+    "build:examples": "BASE_PATH=/react-native-web/examples npm run build -w react-native-web-examples",
+    "dev": "npm run build:examples && eleventy --serve",
+    "build": "npm run build:examples && ELEVENTY_PRODUCTION=true eleventy",
     "debug": "DEBUG=* eleventy"
   },
   "homepage": "https://github.com/necolas/react-native-web",

packages/react-native-web-docs/src/includes/fragments/macros.html

@@ -28,11 +28,14 @@
   </div>
 {% endmacro %}
 
-{% macro codesandbox(path = '/') %}
+{% macro example(path) %}
   <iframe
-  src="https://codesandbox.io/embed/github/necolas/react-native-web/tree/{{ site.packageVersion }}/packages/react-native-web-examples?codemirror=1&fontsize=12&hidedevtools=1&hidenavigation=1&initialpath=/{{ path }}&module=%2Fpages%2F{{ path }}%2Findex.js&theme=light"
+  src="{{ ('/examples/' + path + '/') | url }}"
   style="width:100%; height:500px; border:1px solid var(--docs-border-color); border-radius:4px; overflow:hidden;"
-  title="React Native for Web: {{ path}} examples"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  title="React Native for Web: {{ path}} example"
+  loading="lazy"
   ></iframe>
+  <div class="flex" style="justify-content:flex-end;">
+    <a class="text-sm py-2" style="text-decoration:none;" href="{{ site.githubUrl }}/blob/{{ site.packageVersion }}/packages/react-native-web-examples/pages/{{ path }}/index.js" target="_blank" rel="noopener noreferrer">View source</a>
+  </div>
 {% endmacro %}

packages/react-native-web-docs/src/includes/layouts/home.html

@@ -39,15 +39,13 @@ <h2 class="text my-8 text-3xl">React Native Components and APIs on the Web</h2>
 
       <h2>Try it out!</h2>
 
-      <p>You can try {{ site.name }} from your browser using the <a href="https://codesandbox.io/s/react-native-q4qymyp2l6">official template on CodeSandbox</a>.</p>
-
-      <p>Fork the template and create your own app without leaving the browser.</p>
+      <p>You can try {{ site.name }} directly in your browser with the example app below.</p>
 
       <iframe
-        src="https://codesandbox.io/embed/react-native-q4qymyp2l6?codemirror=1&fontsize=12&hidedevtools=1&hidenavigation=1&theme=light"
+        src="{{ '/examples/' | url }}"
         style="width:100%; height:500px; border:1px solid var(--docs-border-color); border-radius: 4px; overflow:hidden;"
-        title="React Native for Web preview"
-        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+        title="React Native for Web examples"
+        loading="lazy"
       ></iframe>
 
       <div class="callout">

packages/react-native-web-docs/src/pages/docs/apis/app-state.md

@@ -43,4 +43,4 @@ Add a listener to `AppState` changes. Listen to the `"change"` event type. The h
 
 ## Examples
 
-{{ macro.codesandbox('app-state') }}
+{{ macro.example('app-state') }}

packages/react-native-web-docs/src/pages/docs/apis/clipboard.md

@@ -39,4 +39,4 @@ Not properly supported on Web. Returns a Promise of an empty string.
 
 ## Examples
 
-{{ macro.codesandbox('clipboard') }}
+{{ macro.example('clipboard') }}

packages/react-native-web-docs/src/pages/docs/apis/dimensions.md

@@ -55,4 +55,4 @@ The width of the dimension.
 
 ## Examples
 
-{{ macro.codesandbox('dimensions') }}
+{{ macro.example('dimensions') }}

packages/react-native-web-docs/src/pages/docs/apis/linking.md

@@ -39,4 +39,4 @@ Try to open the given url in a secure fashion. The provided target (including `u
 
 ## Examples
 
-{{ macro.codesandbox('linking') }}
+{{ macro.example('linking') }}

packages/react-native-web-docs/src/pages/docs/apis/pan-responder.md

@@ -25,4 +25,4 @@ Please refer to the React Native documentation below:
 
 ## Examples
 
-{{ macro.codesandbox('pan-responder') }}
+{{ macro.example('pan-responder') }}

packages/react-native-web-docs/src/pages/docs/components/activity-indicator.md

@@ -49,4 +49,4 @@ Default `"small"`. Set the size of the activity indicator.
 
 ## Examples
 
-{{ macro.codesandbox('activity-indicator') }}
+{{ macro.example('activity-indicator') }}

packages/react-native-web-docs/src/pages/docs/components/image-background.md

@@ -39,4 +39,4 @@ Styles to forward to the image component.
 
 ## Examples
 
-{{ macro.codesandbox('image-background') }}
+{{ macro.example('image-background') }}

packages/react-native-web-docs/src/pages/docs/components/image.md

@@ -101,4 +101,4 @@ Performs cache interrogation. Returns a mapping from URL to cache status: "disk"
 
 ## Examples
 
-{{ macro.codesandbox('image') }}
+{{ macro.example('image') }}

packages/react-native-web-docs/src/pages/docs/components/lists.md

@@ -27,4 +27,4 @@ These components are the same JavaScript implementations as those found in React
 
 ## Examples
 
-{{ macro.codesandbox('lists') }}
+{{ macro.example('lists') }}

packages/react-native-web-docs/src/pages/docs/components/modal.md

@@ -57,4 +57,4 @@ Determines if the modal and its content is rendered.
 
 ## Examples
 
-{{ macro.codesandbox('modal') }}
+{{ macro.example('modal') }}

packages/react-native-web-docs/src/pages/docs/components/pressable.md

@@ -107,4 +107,4 @@ Whether the view is being pressed by a pointer or keyboard interaction key.
 
 ## Examples
 
-{{ macro.codesandbox('pressable') }}
+{{ macro.example('pressable') }}

packages/react-native-web-docs/src/pages/docs/components/scroll-view.md

@@ -117,4 +117,4 @@ Scrolls to the end of the scroll view.
 
 ## Examples
 
-{{ macro.codesandbox('scroll-view') }}
+{{ macro.example('scroll-view') }}

packages/react-native-web-docs/src/pages/docs/components/switch.md

@@ -65,4 +65,4 @@ The value of the switch. If `true` the switch will be turned on.
 
 Custom sizes can be created using styles.
 
-{{ macro.codesandbox('switch') }}
+{{ macro.example('switch') }}

packages/react-native-web-docs/src/pages/docs/components/text-input.md

@@ -206,4 +206,4 @@ Returns `true` if the input is currently focused; `false` otherwise.
 
 ## Examples
 
-{{ macro.codesandbox('text-input') }}
+{{ macro.example('text-input') }}

packages/react-native-web-docs/src/pages/docs/components/text.md

@@ -104,4 +104,4 @@ Set the test selector label (via `data-testid`).
 
 ## Examples
 
-{{ macro.codesandbox('text') }}
+{{ macro.example('text') }}

packages/react-native-web-docs/src/pages/docs/components/view.md

@@ -102,4 +102,4 @@ Set the test selector label (via `data-testid`).
 
 ## Examples
 
-{{ macro.codesandbox('view') }}
+{{ macro.example('view') }}

packages/react-native-web-docs/src/pages/docs/getting-started/setup.md

@@ -97,7 +97,7 @@ The project's Babel plugin (see [Installation]({{ '/docs/installation' | url }})
 
 ## Root element
 
-Full-screen React Native apps with a root `<ScrollView>` may require the following styles inlined in the HTML document shell. ([Example](https://codesandbox.io/s/52x1871vjl?file=/public/index.html:352-644).)
+Full-screen React Native apps with a root `<ScrollView>` may require the following styles inlined in the HTML document shell.
 
 ```css
 /* These styles make the body full-height */

packages/react-native-web-examples/next.config.js

@@ -1,6 +1,8 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
+const basePath = process.env.BASE_PATH ?? '';
+
 const pages = fs
   .readdirSync(path.resolve(import.meta.dirname, 'pages'), {
     withFileTypes: true
@@ -9,7 +11,14 @@ const pages = fs
   .map((dirent) => dirent.name);
 
 export default {
-  env: { pages: JSON.stringify(pages) },
+  basePath,
+  distDir: 'dist',
+  output: 'export',
+  trailingSlash: true,
+  env: {
+    basePath,
+    pages: JSON.stringify(pages)
+  },
   webpack: (config, options) => {
     config.resolve.alias['react-native'] = 'react-native-web';
     return config;

packages/react-native-web-examples/pages/image/index.js

@@ -2,13 +2,13 @@ import { Image, StyleSheet, Text, View } from 'react-native';
 import React from 'react';
 import Example from '../../shared/example';
 
-const placeholder = '/image/placeholder.svg';
+const placeholder = process.env.basePath + '/image/placeholder.svg';
 const source =
   'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb';
 const agif =
   'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif';
 const pjpeg = 'http://pooyak.com/p/progjpeg/jpegload.cgi?o=1';
-const resizesource = '/image/smallflower.jpg';
+const resizesource = process.env.basePath + '/image/smallflower.jpg';
 const dataBase64Png =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 const dataBase64Svg =
@@ -49,7 +49,7 @@ export default function ImagePage() {
           <Text style={styles.text}>Static image</Text>
           <Image
             resizeMode="cover"
-            source="/image/ladybug.jpg"
+            source={process.env.basePath + '/image/ladybug.jpg'}
             style={styles.image}
           />
         </View>

packages/react-native-web-examples/pages/lists/index.js

@@ -32,19 +32,19 @@ const VIEWABILITY_CONFIG = {
   waitForInteraction: true
 };
 const THUMB_URLS = [
-  './lists/like.png',
-  './lists/dislike.png',
-  './lists/call.png',
-  './lists/fist.png',
-  './lists/bandaged.png',
-  './lists/flowers.png',
-  './lists/heart.png',
-  './lists/liking.png',
-  './lists/party.png',
-  './lists/poke.png',
-  './lists/superlike.png',
-  './lists/victory.png'
-];
+  '/lists/like.png',
+  '/lists/dislike.png',
+  '/lists/call.png',
+  '/lists/fist.png',
+  '/lists/bandaged.png',
+  '/lists/flowers.png',
+  '/lists/heart.png',
+  '/lists/liking.png',
+  '/lists/party.png',
+  '/lists/poke.png',
+  '/lists/superlike.png',
+  '/lists/victory.png'
+].map((url) => process.env.basePath + url);
 const LOREM_IPSUM =
   'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix ' +
   'civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id ' +

packages/react-native-web-examples/shared/example.js

@@ -4,7 +4,11 @@ export default function Example(props) {
   return (
     <View style={styles.root}>
       <View style={styles.header}>
-        <Text aria-label="Back" href="/" style={styles.back}>
+        <Text
+          aria-label="Back"
+          href={process.env.basePath + '/'}
+          style={styles.back}
+        >
           <svg
             style={{ fill: '#555', height: '100%' }}
             viewBox="0 0 140 140"

packages/react-native-web/README.md

@@ -10,7 +10,7 @@ The [documentation site](https://necolas.github.io/react-native-web/) ([source](
 
 ## Example
 
-The [examples app](https://p9t5cp.sse.codesandbox.io/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-examples)) demonstrates many available features. Fork the [codesandbox](https://codesandbox.io/s/github/necolas/react-native-web/tree/master/packages/react-native-web-examples) to make changes and see the results.
+The [examples app](https://necolas.github.io/react-native-web/examples/) ([source](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web-examples)) demonstrates many available features.
 
 You'll notice that there is no reference to `react-dom` in components. The `App` component that is shown below is defined using the APIs and Components of React Native, but it can also be rendered on the web using React Native for Web.