Various documentation fixes

Fix #1948
Close #1906
Close #1918
Close #1922
Close #1956
Close #1960

Co-authored-by: Nishan <nishanbende@gmail.com>
Co-authored-by: Michel Couillard <mcouillard@hortau.com>
Co-authored-by: David Calhoun <dpcalhoun@gmail.com>
Co-authored-by: burakgormek <burak.gormek@gmail.com>
Co-authored-by: Evan Charlton <evancharlton@microsoft.com>

.github/CONTRIBUTING.md

@@ -71,7 +71,7 @@ yarn compile --watch
 To run the documentation website:
 
 ```
-yarn docs:dev
+yarn docs
 ```
 
 ## Examples
@@ -79,7 +79,7 @@ yarn docs:dev
 To run the examples app:
 
 ```
-yarn examples:dev
+yarn examples
 ```
 
 When you're also making changes to the 'react-native-web' source files, run this command in another process:
@@ -93,7 +93,7 @@ yarn compile --watch
 To run the benchmarks locally:
 
 ```
-yarn benchmarks:dev
+yarn benchmarks
 open ./packages/benchmarks/dist/index.html
 ```
 

packages/docs/src/includes/fragments/footer.html

@@ -6,7 +6,7 @@
   {% endif %}
 
   <div class="text text-sm text-color-faint">
-    <a class="no-underline" href="/">{{ site.name }}</a> –
+    <a class="no-underline" href="{{ "/" | url }}">{{ site.name }}</a> –
     {% if site.footer %}
       <span>{{ site.footer | safe }}</span>
     {% endif %}

packages/docs/src/includes/layouts/page.html

@@ -27,7 +27,7 @@ section: page
       <div class="flex mt-4">
         <div class="inline-block w-auto text-sm pt-1 pb-1 mr-2 rounded text-color-faint">Updated <time datetime="{{ page.date | machineDate }}">{{ page.date | readableDate }}</time></div>
         {% if site.enableEditButton == true %}
-          <a class="no-underline inline-block w-auto text-sm hover:bg-gray-200 py-1 px-3 rounded text-color-faint" href="{{ site.githubUrl }}/edit/{{ site.githubBranch }}/packages/www/{{ page.inputPath }}" target="_blank">Edit</a>
+          <a class="no-underline inline-block w-auto text-sm hover:bg-gray-200 py-1 px-3 rounded text-color-faint" href="{{ site.githubUrl }}/edit/{{ site.githubBranch }}/packages/docs/{{ page.inputPath }}" target="_blank">Edit</a>
         {% endif %}
         </div>
         {% include "fragments/footer.html" %} 

packages/docs/src/pages/docs/components/image.md

@@ -60,7 +60,7 @@ Called when the image loading starts.
 {% endcall %}
 
 {% call macro.prop('resizeMode', '?("center" | "cover" | "contain" | "none" | "stretch") = "cover"') %}
-The image source. The string can be a path to an external resource or a base64 encoded resource.
+Determines how the image source is resized to fit the layout of the image element.
 {% endcall %}
 
 {% call macro.prop('source', '?(string | Source)') %}

packages/docs/src/pages/docs/components/touchables.md

@@ -21,5 +21,5 @@ Please refer to the React Native documentation below:
 * [TouchableWithoutFeedback](https://reactnative.dev/docs/touchablewithoutfeedback)
 
 :::callout
-**Did you know?** The [Pressable]({{ '/docs/pressable' }}) component is a more accessible, flexible, and future-proof way to handle tap and click interactions with React Native.
+**Did you know?** The [Pressable]({{ '/docs/pressable' | url }}) component is a more accessible, flexible, and future-proof way to handle tap and click interactions with React Native.
 :::

packages/docs/src/pages/docs/concepts/interactions.md

@@ -85,7 +85,7 @@ NOTE: For historical reasons (originating from React Native), mouse interactions
 
 A view can become the responder by using the negotiation callbacks. During the capture phase the deepest node is called last. During the bubble phase the deepest node is called first. The capture phase should be used when a view wants to prevent a descendant from becoming the responder. The first view to return `true` from any of the `on*ShouldSetResponderCapture` / `on*ShouldSetResponder` callbacks will either become the responder or enter into negotiation with the existing responder.
 
-N.B. If `stopPropagation` is called on the event for any of the negotiation callbakcs, it only stops further negotiation within the Responder System. It will not stop the propagation of the native event (which has already bubbled to the `document` by this time.)
+N.B. If `stopPropagation` is called on the event for any of the negotiation callbacks, it only stops further negotiation within the Responder System. It will not stop the propagation of the native event (which has already bubbled to the `document` by this time.)
 
 {% call macro.prop('onStartShouldSetResponder', '?(event: ResponderEvent) => boolean') %}
 On `pointerdown`, should this view attempt to become the responder? If the view is not the responder, this callback may be called for every pointer start on the view.

packages/docs/src/pages/docs/getting-started/installation.md

@@ -30,7 +30,7 @@ npm install --save-dev babel-plugin-react-native-web
 
 ### Expo
 
-[Expo](https://expo.io) is a framework and a platform for universal React applications. [Expo for Web](https://docs.expo.io/workflow/web/) uses React Native for Web, provides dozens of additional cross-platform APIs, includes web build optimizations, and is compatibile with the broder React Native ecosystem.
+[Expo](https://expo.io) is a framework and a platform for universal React applications. [Expo for Web](https://docs.expo.io/workflow/web/) uses React Native for Web, provides dozens of additional cross-platform APIs, includes web build optimizations, and is compatibile with the broader React Native ecosystem.
 
 ```shell
 npx expo-cli init my-app

packages/examples/pages/app-state/index.js

@@ -3,10 +3,11 @@ import { AppState, Text } from 'react-native';
 import Example from '../../shared/example';
 
 export default function AppStatePage() {
+  const appState = React.useRef(AppState.currentState);
   const [state, setState] = React.useState({
     active: 0,
     background: 0,
-    currentState: AppState.currentState
+    currentState: appState.current
   });
 
   React.useEffect(() => {