infinitered · frankcalise · Dec 13, 2023 · May 24, 2023 · Jun 14, 2023 · Jun 29, 2023
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,6 +10,14 @@ defaults: &defaults
   working_directory: /mnt/ramdisk/repo
 
 version: 2.1
+
+parameters:
+  "force-release-docs":
+    type: boolean
+    default: false
+
+orbs:
+  publish-docs: infinitered/publish-docs@0.4.9
 jobs:
   tests:
     <<: *defaults
@@ -81,6 +89,19 @@ jobs:
           name: Publish to npm
           command: yarn ci:publish # this will be added to your package.json scripts
 
+# Publishing docs details
+publish-details: &publish-details
+  description: "Infinite Red's hottest boilerplate for React Native."
+  git_email: "ci@infinite.red"
+  git_username: "Infinite Red CI"
+  label: "Ignite"
+  project_name: "ignite-cli"
+  source_docs_dir: docs
+  source_repo_directory: "source"
+  target_docs_dir: "docs"
+  target_repo: "git@github.com:infinitered/ir-docs.git"
+  target_repo_directory: "target"
+
 workflows:
   version: 2
   test_and_release:
@@ -93,3 +114,23 @@ workflows:
           filters:
             branches:
               only: master
+  release-docs:
+    when:
+      and:
+        - not: << pipeline.parameters.force-release-docs >>
+        - true # Placeholder for correct YAML structure
+    jobs:
+      - publish-docs/publish_docs:
+          <<: *publish-details
+          filters:
+            branches:
+              only:
+                - master
+            tags:
+              only:
+                - '*v[0-9]+\.[0-9]+\.[0-9]+'
+  force-release-docs:
+    when: << pipeline.parameters.force-release-docs >>
+    jobs:
+      - publish-docs/publish_docs:
+          <<: *publish-details
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ This is the React Native boilerplate that the [Infinite Red](https://infinite.re
 
 Check out the [Getting Started with Ignite](https://www.youtube.com/watch?v=KOSvDlFyg20) video for a 13 minute overview!
 
-## [Full Documentation](https://github.com/infinitered/ignite/blob/master/docs)
+## [Full Documentation](https://github.com/infinitered/ignite/blob/master/docs/README.md)
 
 We've put great effort into the documentation as a team, please [read through it here](https://github.com/infinitered/ignite/blob/master/docs). If you're unsure why a certain decision was made related to this boilerplate or how to proceed with a particular feature, it's likely documented. If it still isn't clear, go through the proper [help channels](#reporting-bugs--getting-help) and we always welcome PRs to improve the docs!
 
@@ -47,7 +47,7 @@ Nothing makes it into Ignite unless it's been proven on projects that Infinite R
 | date-fns          | Date library         | v2      | Excellent date library                         |
 | FlashList         | FlatList replacement | v1      | A performant drop-in replacement for FlatList  |
 
-Ignite also comes with a [component library](https://github.com/infinitered/ignite/blob/master/docs/Components.md) that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more.
+Ignite also comes with a [component library](./docs/boilerplate/components/Components.md) that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more.
 
 ## Quick Start
 
@@ -66,7 +66,7 @@ npx ignite-cli@latest new PizzaApp
 npx ignite-cli@latest new PizzaApp --yes
 ```
 
-Once you're up and running, check out our new [Getting Started Guide](https://github.com/infinitered/ignite/blob/master/docs/Guide.md) guide or the rest of our [docs](https://github.com/infinitered/ignite/blob/master/docs).
+Once you're up and running, check out our new [Getting Started Guide](/docs/Guide.md) guide or the rest of our [docs](https://github.com/infinitered/ignite/blob/master/docs).
 
 If you'd like to follow a tutorial, check out [this one from Robin Heinze](https://shift.infinite.red/creating-a-trivia-app-with-ignite-bowser-part-1-1987cc6e93a1). _Note that this was created for a previous version of Ignite -- we are working on updating it!_
 
@@ -78,7 +78,7 @@ _The hidden gem of Ignite._ Generators help you scaffold your app very quickly,
 npx ignite-cli generate --help
 ```
 
-...will give you information on what generators are present. To learn more, check out our [Generators](https://github.com/infinitered/ignite/blob/master/docs/Generators.md) documentation.
+...will give you information on what generators are present. To learn more, check out our [Generators](/docs/concept//Generators.md) documentation.
 
 ### Troubleshooting
 

diff --git a/boilerplate/package.json b/boilerplate/package.json
@@ -110,7 +110,7 @@
     }
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=16"
   },
   "prettier": {
     "printWidth": 100,

diff --git a/docs/Guide.md b/docs/Guide.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+---
+
 # Getting Started Guide
 
 ## What is Ignite?
@@ -16,24 +20,24 @@ npx ignite-cli@latest new PizzaApp
 
 It'll walk you through several questions.
 
-Once it's up and running, you can use the Ignite CLI to [generate](./Generators.md) components, screens, MST models, and more.
+Once it's up and running, you can use the Ignite CLI to [generate](./concept/Generators.md) components, screens, MST models, and more.
 
-Running into errors? have a look at [upgrading Ignite CLI](./Upgrading-Ignite.md)
+Running into errors? have a look at [upgrading Ignite CLI](./cli/Upgrading-Ignite.md)
 
 ### Ignite Boilerplate
 
 Your new Ignite project (whether you start with Expo or not) comes with a full stack of useful libraries, pre-set up for you so you can start coding.
 
 - React Native
 - React Navigation
-- MobX-State-Tree [(Why not Redux?)](https://github.com/infinitered/ignite/blob/master/docs/MobX-State-Tree.md)
+- MobX-State-Tree [(Why not Redux?)](./concept/MobX-State-Tree.md)
 - MobX-React-Lite
 - TypeScript
 - AsyncStorage (integrated with MST for restoring state)
 - apisauce (to talk to REST servers)
 - Reactotron-ready (and pre-integrated with MST)
 - Supports Expo (and Expo web) out of the box
-- About a dozen prebuilt [components](./Components.md) to build out your UI with
+- About a dozen prebuilt [components](./boilerplate/components/Components.md) to build out your UI with
 - And more!
 
 ## Where do I start?
@@ -48,23 +52,23 @@ We use React Navigation v6 in the current version of Ignite. You'll find any nav
 
 There's also a `navigationUtilities.ts` file which provides some utility functions we find useful in building apps, such as `getActiveRouteName`, `useBackButtonHandler` and `useNavigationPersistence`.
 
-Learn more in our [Navigation](./Navigation.md) documentation.
+Learn more in our [Navigation](./concept/Navigation.md) documentation.
 
 ### Components
 
 Ignite comes with some prebuilt, flexible, and customizable components. Unlike most component libraries, it's not built to drop in out of the box, but rather with custom design in mind (you do have a nice, custom design, don't you?)
 
 Ignite works fine with other component libraries, but the built-in component system works the best for custom-designed apps.
 
-Check out the [Components](./Components.md) documentation.
+Check out the [Components](./boilerplate/components/Components.md) documentation.
 
 ### Testing
 
 Ignite is pre-configured to use Jest for unit tests.
 
 Ignite includes samples of UI end-to-end tests using [Maestro](https://maestro.mobile.dev/). See our [Ignite Cookbook recipe](https://ignitecookbook.com/docs/recipes/MaestroSetup) for setup and walkthrough of the test samples or check out Maestro's docs on [Installing Maestro](https://maestro.mobile.dev/getting-started/installing-maestro) to run the flows.
 
-You can learn more about why we chose these tests and how to use them in the [Testing](./Testing.md) docs.
+You can learn more about why we chose these tests and how to use them in the [Testing](./concept/Testing.md) docs.
 
 ### Styling
 
@@ -88,6 +92,6 @@ const MyComponent = () => {
 }
 ```
 
-Very often, we use [components with presets](./Components.md) to share styles across our whole app.
+Very often, we use [components with presets](./boilerplate/components/Components.md) to share styles across our whole app.
 
-Read more about styling in the [Styling](./Styling.md) docs.
+Read more about styling in the [Styling](./concept/Styling.md) docs.
diff --git a/docs/README.md b/docs/README.md
@@ -1,39 +1,72 @@
+---
+sidebar_position: 1
+---
+
 # Welcome to Ignite documentation!
 
-Check out this list of topics:
-
-- [Getting Started Guide](./Guide.md) - If you're new to Ignite, start here
-- [Components](./Components.md) - Ignite's built-in UI components
-  - [AutoImage](./Components-AutoImage.md)
-  - [Button](./Components-Button.md)
-  - [Card](./Components-Card.md)
-  - [EmptyState](./Components-EmptyState.md)
-  - [Header](./Components-Header.md)
-  - [Icon](./Components-Icon.md)
-  - [ListItem](./Components-ListItem.md)
-  - [ListView](./Components-ListView.md)
-  - [Screen](./Components-Screen.md)
-  - [Text](./Components-Text.md)
-  - [TextField](./Components-TextField.md)
-- [Utils](./Utils.md) - Collection of helpful utilities
-  - [useSafeAreaInsetsStyle](./Utils-useSafeAreaInsetsStyle.md)
-  - [useHeader](./Utils-useHeader.md)
-- [Theming](./Theming.md) - How to customize the look and feel of your app
-  - [Colors & Palettes](./Theming-Colors-And-Palettes.md) - Explanation of our palette-based approach to colors
-  - [Fonts & Typography](./Theming-Fonts-And-Typography.md) - How we define fonts in a semantic way
-  - [Spacing](./Theming-Spacing.md) - How to approach consistent spacing throughout your Ignite app
-- [Styling](./Styling.md) - How we approach styling components in Ignite
-- [Navigation](./Navigation.md) - How [React Navigation](https://reactnavigation.org/docs/getting-started/) is used to navigate through your screens
-- [Testing](./Testing.md) - How to test your Ignite app
-- [Generators](./Generators.md) - Everything you need to know about Ignite generators
-  - [Generator Templates](./Generator-Templates.md) - Writing your own generator templates
-- [Folder-Structure](./Folder-Structure.md) - An explanation of the Ignite folder structure
-- [Why MobX-State-Tree?](./MobX-State-Tree.md) - All about MobX-State-Tree, and why we use it instead of Redux
-- [Expo and Ignite](./Expo-and-Ignite.md) - How Expo fits in with Ignite, and whether you should use it
-- [TypeScript](./TypeScript.md) - An explanation of TypeScript in Ignite and lots of resources
-- [Upgrading Ignite](./Upgrading-Ignite.md) - How to upgrade your app to the latest and greatest Ignite patterns
-- [Tour of Ignite](./Tour-of-Ignite.md) - Tour of the Ignite code base for interested contributors
-- [Releasing Ignite](./Releasing-Ignite.md) - How we release Ignite
-- [Internationalization](./Internationalization.md) — How to Internationalize your app
-- [Backend API Integration](./Backend-API-Integration.md) - An explanation of Ignite's basic API setup
-- [Remove Demo Code](./Remove-Demo-Code.md) - A quick guide on how to remove Ignite's demo code via command line
+## Getting Started
+
+### Quick Start
+
+```terminal
+npx ignite-cli@latest new pizza-app --yes
+```
+
+### Full Guide
+
+If you're new to Ignite, start by reading our [Getting Started Guide](./Guide.md)!
+
+### Intro Video
+
+Check out the [Getting Started with Ignite](https://www.youtube.com/watch?v=KOSvDlFyg20) video for a 13 minute overview!
+
+## Proven React Native boilerplate
+
+The culmination of over seven years of constant React Native development, Ignite is the most popular React Native app boilerplate for both Expo and bare React Native.
+
+This is the React Native boilerplate that the [Infinite Red](https://infinite.red) team uses on a day-to-day basis to build client apps. Developers who use Ignite report that it saves them two to four weeks of time on average off the beginning of their React Native project!
+
+## Usage
+
+- [Command-line Interface (CLI)](./cli/Ignite-CLI.md)
+  - [Remove Demo Code](./cli/Remove-Demo-Code.md) - A quick guide on how to remove Ignite's demo code via command line
+  - [Troubleshooting](./cli/Troubleshooting.md)
+- [Components](./boilerplate/components/Components.md) - Ignite's built-in UI components
+  - [AutoImage](./boilerplate/components/AutoImage.md)
+  - [Button](./boilerplate/components/Button.md)
+  - [Card](./boilerplate/components/Card.md)
+  - [EmptyState](./boilerplate/components/EmptyState.md)
+  - [Header](./boilerplate/components/Header.md)
+  - [Icon](./boilerplate/components/Icon.md)
+  - [ListItem](./boilerplate/components/ListItem.md)
+  - [ListView](./boilerplate/components/ListView.md)
+  - [Screen](./boilerplate/components/Screen.md)
+  - [Text](./boilerplate/components/Text.md)
+  - [TextField](./boilerplate/components/TextField.md)
+- [Concepts](./concept/Concepts.md) - An overview of the concepts behind developing with Ignite
+
+  - [Backend API Integration](./concept/Backend-API-Integration.md) - An explanation of Ignite's basic API setup
+  - [Expo and Ignite](./concept/Expo-and-Ignite.md) - How Expo fits in with Ignite, and whether you should use it
+  - [Folder-Structure](./concept/Folder-Structure.md) - An explanation of the Ignite folder structure
+  - [Generators](./concept/Generators.md) - Everything you need to know about Ignite generators
+  - [Generator Templates](./concept/Generator-Templates.md) - Writing your own generator templates
+  - [Internationalization](./concept/Internationalization.md) — How to Internationalize your app
+  - [Why MobX-State-Tree?](./concept/MobX-State-Tree.md) - All about MobX-State-Tree, and why we use it instead of Redux
+  - [Navigation](./concept/Navigation.md) - How [React Navigation](https://reactnavigation.org/docs/getting-started/) is used to navigate through your screens
+  - [Styling](./concept/Styling.md) - How we approach styling components in Ignite
+  - [Testing](./concept/Testing.md) - How to test your Ignite app
+  - [TypeScript](./concept/TypeScript.md) - An explanation of TypeScript in Ignite and lots of resources
+  - [Upgrades](./concept/Upgrades.md) - How to upgrade your app to the latest and greatest Ignite patterns
+
+- [Theming](./boilerplate/theming/Theming.md) - How to customize the look and feel of your app
+  - [Colors & Palettes](./boilerplate/theming/Colors-And-Palettes.md) - Explanation of our palette-based approach to colors
+  - [Fonts & Typography](./boilerplate/theming/Fonts-And-Typography.md) - How we define fonts in a semantic way
+  - [Spacing](./boilerplate/theming/Spacing.md) - How to approach consistent spacing throughout your Ignite app
+- [Utils](./boilerplate/utility/Utils.md) - Collection of helpful utilities
+  - [useSafeAreaInsetsStyle](./boilerplate/utility/useSafeAreaInsetsStyle.md)
+  - [useHeader](./boilerplate/utility/useHeader.md)
+
+## Contributing
+
+- [Tour of Ignite](./contributing/Tour-of-Ignite.md) - Tour of the Ignite code base for interested contributors
+- [Releasing Ignite](./contributing/Releasing-Ignite.md) - How we release Ignite
diff --git a/docs/_category_.json b/docs/_category_.json
@@ -0,0 +1,12 @@
+{
+  "label": "Ignite",
+  "link": null,
+  "customProps": {
+    "description": "The battle-tested React Native boilerplate",
+    "projectName": "ignite",
+    "sidebar": {
+      "type": "autogenerated",
+      "dirName": "ignite"
+    }
+  }
+}
diff --git a/docs/Folder-Structure.md → docs/boilerplate/Boilerplate.md b/docs/Folder-Structure.md → docs/boilerplate/Boilerplate.md
@@ -1,4 +1,4 @@
-# Explanation of folder structure
+# Explanation of the Ignite folder structure
 
 A new Ignite boilerplate project's structure looks similar to this:
 
@@ -57,19 +57,19 @@ app
 
 This is where your components will live, the reusable building blocks to create your screens. A handful of built-in components come with Ignite that are adaptable to any custom design system you wish to implement. Below are links to further documentation about each component:
 
-- [Component Overview](./Components.md)
-- [AutoImage](./Components-AutoImage.md)
-- [Button](./Components-Button.md)
-- [Card](./Components-Card.md)
-- [EmptyState](./Components-EmptyState.md)
-- [Header](./Components-Header.md)
-- [Icon](./Components-Icon.md)
-- [ListItem](./Components-ListItem.md)
-- [ListView](./Components-ListView.md)
-- [Screen](./Components-Screen.md)
-- [Text](./Components-Text.md)
-- [TextField](./Components-TextField.md)
-- [Toggle](./Components-Toggle.md)
+- [Component Overview](../)
+- [AutoImage](../boilerplate/components/AutoImage.md)
+- [Button](../boilerplate/components/Button.md)
+- [Card](../boilerplate/components/Card.md)
+- [EmptyState](../boilerplate/components/EmptyState.md)
+- [Header](../boilerplate/components/Header.md)
+- [Icon](../boilerplate/components/Icon.md)
+- [ListItem](../boilerplate/components/ListItem.md)
+- [ListView](../boilerplate/components/ListView.md)
+- [Screen](../boilerplate/components/Screen.md)
+- [Text](../boilerplate/components/Text.md)
+- [TextField](../boilerplate/components/TextField.md)
+- [Toggle](../boilerplate/components/Toggle.md)
 
 **i18n**
 
@@ -95,7 +95,7 @@ Any services that interface with the outside world will live here (think REST AP
 
 **theme**
 
-Here lives the theme for your application, including spacing, colors, and typography. For help with adding custom fonts to your application, [check out the readme in ./assets/fonts/](./boilerplate/assets/fonts/custom-fonts.md).
+Here lives the theme for your application, including spacing, colors, and typography. For help with adding custom fonts to your application, [check out the readme in Fonts & Typography/](../boilerplate/theming/Fonts-And-Typography.md).
 
 **utils**
 

diff --git a/docs/boilerplate/_category_.json b/docs/boilerplate/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Boilerplate",
+  "position": 2,
+  "link": {
+    "type": "doc",
+    "id": "Boilerplate"
+  }
+}
diff --git a/docs/Components-AutoImage.md → docs/boilerplate/components/AutoImage.md b/docs/Components-AutoImage.md → docs/boilerplate/components/AutoImage.md
@@ -1,6 +1,8 @@
-# AutoImage Component
+---
+sidebar_position: 30
+---
 
-[Back to all components](./Components.md)
+# AutoImage
 
 Ignite's `AutoImage` Component is an enhanced version of the built-in React Native [Image](https://reactnative.dev/docs/image) component. It automatically resizes the image view to fit a max width or height constraint
 

diff --git a/docs/Components-Button.md → docs/boilerplate/components/Button.md b/docs/Components-Button.md → docs/boilerplate/components/Button.md
@@ -1,8 +1,10 @@
-# Button Component
+---
+sidebar_position: 31
+---
 
-[Back to all components](./Components.md)
+# Button
 
-The `Button` component is a wrapper around the [`Pressable`](https://reactnative.dev/docs/pressable) component. Any prop that can be passed to `Pressable` can be passed to `Button` and it will be forwarded. `Button` renders a button with given text in a [`Text`](./Components-Text.md) component or children. It allows you to specify the preset style of the button, you can override both the `Pressable` and `Text` styles.
+The `Button` component is a wrapper around the [`Pressable`](https://reactnative.dev/docs/pressable) component. Any prop that can be passed to `Pressable` can be passed to `Button` and it will be forwarded. `Button` renders a button with given text in a [`Text`](./Text.md) component or children. It allows you to specify the preset style of the button, you can override both the `Pressable` and `Text` styles.
 
 ```tsx
 <Button