Set v4 as default docs (nativewind#1159)

* Set v4 as default docs

This includes:
• Configure docusaurus to use v4 as current
• Update README with proper instructions to run the website locally
• Add home page for v4 and set it as root directory
• Address inconsistency in sidebar names

* Prettified Code!

* Add version switcher

---------

Co-authored-by: danstepanov <[email protected]>
Co-authored-by: Mark Lawlor <[email protected]>

Author: danstepanov

apps/website/README.md

@@ -1,41 +1,30 @@
-# Website
+# NativeWind Website
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus 3](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 
 ```
-$ yarn
+$ npm i
 ```
 
 ### Local Development
 
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
+Normally, you actually want to run this project from the root of this monorepo via
 
 ```
-$ yarn build
+$ npm run website
 ```
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
+However, this is currently not working so, for now, run the following from anywhere in the monorepo 
 ```
-$ USE_SSH=true yarn deploy
+$ cd apps/website; npx docusaurus start
 ```
 
-Not using SSH:
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Structure
 
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
+Most work on the NativeWind docs will pertain to the current version of NativeWind. Version 4 is the current version of NativeWind and the docs for it live in the `./docs` folder. The sidebar is configured via `./sidebars.js`. To use Docusaurus' nomenclature, version 4 is both the current version and the latest version. For previous versions, you can look to the directories prefixed with `./versioned_` and you'll be able to modify docs pertaining to older versions of NativeWind.
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+Docusaurus takes a bit of getting used to so I'd recommend you spend a little bit of time familiarizing with [their docs](https://docusaurus.io/docs/3.0.1/versioning) if you haven't already.

apps/website/docs/home.md

@@ -0,0 +1,153 @@
+---
+title: Home
+slug: /
+pagination_prev: null
+pagination_next: null
+custom_edit_url: null
+---
+
+# Overview
+
+## What is NativeWind?
+
+NativeWind allows you to use [Tailwind CSS](https://tailwindcss.com) to style your components in React Native. Styled components can be shared between all React Native platforms, using the best style engine for that platform; CSS StyleSheet on web and StyleSheet.create for native. It's goals are to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.
+
+On native platforms, NativeWind performs two functions. First, at build time, it compiles your Tailwind CSS styles into `StyleSheet.create` objects and determines the conditional logic of styles (e.g. hover, focus, active, etc). Second, it has an efficient runtime system that applies the styles to your components. This means you can use the full power of Tailwind CSS, including media queries, container queries, and custom values, while still having the performance of a native style system.
+
+On web, NativeWind is a small polyfill for adding `className` support to React Native Web.
+
+## Key Features
+
+🌐 **Universal** Uses the best style system for each platform.
+
+🖥️ **DevUX** Plugins for simple setup and improving intellisense support
+
+✨ **Media & Container queries** Use modern mobile styling features like media and container queries [(docs)](../core-concepts/states#hover-focus-and-active)
+
+👪 **Custom values (CSS Variables)** Create themes, sub-themes and dynamic styles using custom values
+
+✨ **Pseudo classes** hover / focus / active on compatible components [(docs)](../core-concepts/states#hover-focus-and-active)
+
+👪 **Parent state styles** automatically style children based upon parent pseudo classes [(docs)](../core-concepts/states#hover-focus-and-active#styling-based-on-parent-state)
+
+🔥 **Lots of other features**
+
+- dark mode
+- arbitrary classes
+- platform selectors
+- plugins
+
+## How is this different StyleSheet.create?
+
+A full featured style system should have
+
+- Static styles
+- UI state styles (active, hover, focus, etc)
+- Responsive styles (media queries, dynamic units)
+- Container queries (styling based upon parent appearance)
+- Device state styles (orientation, color scheme)
+- Use the best rendering engine available
+
+React Native's StyleSheet system only provides static styles, with other features left for the user to implement. By using NativeWind you can focus on writing your system instead of building your own custom style system.
+
+On the web, it avoids injecting a StyleSheet at runtime by reusing the existing Tailwind CSS stylesheet, allowing you to use Server Side Rendering and much better initial page load performance.
+
+## In action
+
+NativeWind handles both the Tailwind CSS compilation and the runtime styles. It works via a JSX transform, meaning there is no need for custom wrappers/boilerplate.
+
+As all React components are transformed with JSX, it works with 3rd party modules.
+
+```tsx
+import { CustomText } from "third-party-text-component";
+
+export function BoldText(props) {
+  // You just need to write `className="<your styles>"`
+  return <CustomText className="text-bold" {...props} />;
+}
+```
+
+Styling can by dynamic and you can perform conditional logic and built up complex style objects.
+
+```tsx
+import { Text } from "react-native";
+
+export function MyText({ bold, italic, lineThrough, ...props }) {
+  const classNames = [];
+
+  if (bold) classNames.push("font-bold");
+  if (italic) classNames.push("italic");
+  if (lineThrough) classNames.push("line-through");
+
+  return <Text className={classNames.join(" ")} {...props} />;
+}
+```
+
+By default NativeWind maps `className`->`style`, but it can handle the mapping of complex components.
+
+```tsx
+remapProps(FlatList, {
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+});
+
+<FlatList
+  {...}
+  className="bg-black"
+  ListHeaderComponentClassName="bg-black text-white"
+  ListFooterComponentClassName="bg-black text-white"
+  columnWrapperClassName="bg-black"
+  contentContainerClassName="bg-black"
+  indicatorClassName="bg-black"
+/>
+```
+
+And can even work with components that expect style attributes as props
+
+```tsx
+import { Text } from "react-native";
+import { cssInterop } from "nativewind";
+import { Svg, Circle } from "react-native-svg";
+
+/**
+ * Circle uses `height`/`width` props on native and className on web
+ */
+const StyledSVG = cssInterop(Svg, {
+  className: {
+	target: "style",
+	nativeStyleToProp: {
+	  height: true,
+	  width: true,
+	},
+  },
+});
+/**
+ * Circle uses `fill`/`stroke`/`strokeWidth` props on native and className on web
+ */
+const StyledCircle = cssInterop(Circle, {
+  className: {
+	target: "style",
+	nativeStyleToProp: {
+	  fill: true,
+	  stroke: true,
+	  strokeWidth: true,
+	},
+  },
+});
+
+export function BoldText(props) {
+  return (
+	<Svg className="w-1/2 h-1/2" viewBox="0 0 100 100">
+	  <StyledCircle
+		className="fill-green-500 stroke-blue-500 stroke-2"
+		cx="50"
+		cy="50"
+		r="45"
+	  />
+	</Svg>
+  );
+}
+```

apps/website/docs/tailwind/typography/text-decoration-style.mdx

@@ -1,7 +1,7 @@
 import Compatibility from "../\_compatibility.mdx"
 import Usage from "../\_usage.mdx"
 
-# Text Decoration style
+# Text Decoration Style
 
 ## Usage
 

apps/website/docusaurus.config.js

@@ -13,7 +13,7 @@ const config = {
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",
-  organizationName: "marklawlor", // Usually your GitHub org/user name.
+  organizationName: "nativewind", // Usually your GitHub org/user name.
   projectName: "NativeWind", // Usually your repo name.
 
   clientModules: [
@@ -34,19 +34,19 @@ const config = {
       ({
         docs: {
           breadcrumbs: false,
-          editUrl: `https://github.com/marklawlor/nativewind/edit/main/apps/website/`,
+          editUrl: `https://github.com/nativewind/nativewind/edit/main/apps/website/`,
           remarkPlugins: [require("./src/remark-snackplayer")],
           routeBasePath: "/", // disable landing page
           sidebarPath: require.resolve("./sidebars.js"),
-          lastVersion: "v2",
+          lastVersion: "current",
           versions: {
             current: {
               label: "v4",
-              path: "v4",
+              path: "/",
             },
             v2: {
               label: "v2",
-              path: "",
+              path: "v2",
             },
           },
         },
@@ -83,7 +83,7 @@ const config = {
       },
       announcementBar: {
         content:
-          '<a href="/v4/overview">NativeWind v4.0 is coming soon. Click here to see the docs</a>',
+          '<a href="/v2">Looking for the NativeWind v2 docs? Click here</a>',
         isCloseable: true,
       },
       navbar: {
@@ -94,15 +94,20 @@ const config = {
         },
         items: [
           {
-            href: "https://discord.gg/ypNakAFQ65",
+            href: "https://nativewind.dev/discord",
             label: "Discord",
             position: "right",
           },
           {
-            href: "https://github.com/marklawlor/nativewind",
+            href: "https://github.com/nativewind/nativewind",
             label: "GitHub",
             position: "right",
           },
+          {
+            type: "docsVersionDropdown",
+            position: "left",
+            dropdownActiveClassDisabled: true,
+          },
         ],
       },
       footer: {
@@ -113,13 +118,12 @@ const config = {
             items: [
               {
                 label: "GitHub",
-                href: "https://github.com/marklawlor/nativewind",
+                href: "https://github.com/nativewind/nativewind",
               },
               {
                 label: "Discord",
-                href: "https://discord.gg/ypNakAFQ65",
+                href: "https://nativewind.dev/discord",
               },
-
             ],
           },
         ],

apps/website/sidebars.js

@@ -14,6 +14,11 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   docs: [
+    {
+      type: "doc",
+      id: "home",
+      className: "home"
+    },
     {
       type: "category",
       label: "Overview",

apps/website/versioned_docs/version-v2/_dependencies.mdx

@@ -27,6 +27,6 @@ yarn add --dev [email protected]
 
 :::caution
 
-NativeWind does not work with TailwindCSS >3.3.2. If you wish to use the most current version, please upgrade to [NativeWind v4](/v4/overview)
+NativeWind does not work with TailwindCSS >3.3.2. If you wish to use the most current version, please upgrade to [NativeWind v4](/overview)
 
 :::

apps/website/versioned_docs/version-v2/_start-coding-components.md

@@ -2,7 +2,7 @@
 
 Start writing code!
 
-Without the Babel transform you will need to wrap your components in the [styled higher-order component](../api/styled)
+Without the Babel transform you will need to wrap your components in the [styled higher-order component](/v2/api/styled)
 
 ```diff
 import { StatusBar } from 'expo-status-bar';

apps/website/versioned_docs/version-v2/api/StyledComponent.md

@@ -4,7 +4,7 @@ title: StyledComponent
 sidebar_label: <StyledComponent />
 ---
 
-`StyledComponent` is the component version of [`styled`](/api/styled) accepts your component as a prop.
+`StyledComponent` is the component version of [`styled`](/v2//api/styled) accepts your component as a prop.
 
 `StyledComponent` will pass all props to your component, except for `tw` and `className` which it will convert into StyledSheet objects and will pass them to your component via the `style` prop.
 

apps/website/versions.json

@@ -1 +1,4 @@
-["v2"]
+[
+  "current",
+  "v2"
+]