rework the community section of the website (facebook#3338)

Co-authored-by: Luna <lunaleaps@gmail.com>

Author: kelset

.github/ISSUE_TEMPLATE/config.yml

@@ -7,7 +7,7 @@ contact_links:
     url: https://github.com/react-native-community/upgrade-support
     about: Need help upgrading to a newer React Native version? Visit the Upgrade Support repository.
   - name: 🤔 Questions and Help
-    url: https://reactnative.dev/help
+    url: https://reactnative.dev/community/support
     about: Looking for help with your app? Please refer to the React Native community's support resources.
   - name: 🚀 React Native Discussions and Feature Proposals
     url: https://github.com/react-native-community/discussions-and-proposals

docs/more-resources.md

@@ -12,7 +12,7 @@ There’s always more to learn: developer workflows, shipping to app stores, int
 - [Design and layout your app](flexbox)
 - [Debug your app](debugging)
 - [Make your app cross platform](platform-specific-code)
-- [Get involved in the React Native community](/help)
+- [Get involved in the React Native community](/community/overview)
 
 ## Dive deep
 

website/community/communities.md

@@ -0,0 +1,33 @@
+---
+title: Communities
+description: The React Native Community
+---
+
+The React Native ecosystem is far and wide, and people can be part of it in many forms; here you will find but a partial list of different ways one developer can be part of it. If you know of other, or want to help expand this page, [submit a PR](https://github.com/facebook/react-native-website/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)!
+
+### Local communities
+
+There are a lot of React Native gatherings that happen around the world. Often there is React Native content in React meetups as well, use tools like [Meetup](http://www.meetup.com/topics/react-native/) and [Eventbrite](https://www.eventbrite.co.uk/d/online/react-native/?page=1) to find out recent events in your area - or start one!
+
+### Company-based communities
+
+### Company-based communities
+
+Some companies actively involved in the React Native have also their own communication channels focused towards the projects they maintain:
+
+- [Callstack.io's](https://www.callstack.com/) [Discord server](https://discordapp.com/invite/zwR2Cdh)
+- [Invertase.io's (e.g. React Native Firebase)](https://invertase.io/) [Discord server](https://discord.gg/C9aK28N)
+- [Infinite Red's](https://infinite.red/) [Slack Group](http://community.infinite.red/)
+- [Expo's](https://expo.dev/) [Discord server](https://chat.expo.dev/)
+
+### Content sharing
+
+React Native tagged content can be found on many platforms, such as:
+
+- [DevTo community](https://dev.to/t/reactnative)
+- [Medium](https://medium.com/tag/react-native)
+- [Hashnode](https://hashnode.com/n/react-native)
+- [Hacker News](https://hn.algolia.com/?q=react-native)
+- [r/reactnative/](https://www.reddit.com/r/reactnative/)
+
+These are places where you can share React Native projects, articles and tutorials as well as start discussions and ask for feedback on React Native related topics. (but remember to give some love to the [main documentation](https://github.com/facebook/react-native-website) too!)

website/community/overview.md

@@ -0,0 +1,14 @@
+---
+title: Overview
+description: The React Native Community
+---
+
+React Native is a widely used technology, empowered by a massive community of [hundreds of thousands of developers](https://github.com/facebook/react-native/stargazers) and downloaded [over 1 million times](https://www.npmjs.com/package/react-native) every week.
+
+In this section you will find listed ways you can also be part of the React Native-related communities, depending on your wants and needs:
+
+- [Staying up to date](staying-updated)
+- [Participating in the community](communities)
+- [Needing and providing help](support)
+
+We expect all folks participating in React Native' communities to adhere to the guidelines within our [Code of Conduct](https://github.com/facebook/react-native/blob/main/CODE_OF_CONDUCT.md).

website/community/staying-updated.md

@@ -0,0 +1,60 @@
+---
+title: Staying up to date
+description: The React Native Community
+---
+
+### News
+
+Twitter is one of the main communication channels used by the team to communicate updates, news and request for participation: follow the [React Native account](https://twitter.com/reactnative) to stay up to date - the [ReactJS account](https://twitter.com/reactjs) covers both React and React Native.
+
+For long form news and announcements, keep an eye on the [blog](blog) to find out what is happening in the world of React Native.
+
+### Discussions and efforts
+
+React Native is a dynamic framework and there is always room for improvement. As an open source framework, large-scale coordination and discussion should remain publicly accessible. Here are some dedicated discussion groups you can participate in:
+
+Expect important conversations to always be public; depending on the topic, you can find them in one of these places:
+
+- [Framework discussions, proposals and RFCs](https://github.com/react-native-community/discussions-and-proposals/discussions)
+- [Release status and issues](https://github.com/reactwg/react-native-releases/discussions)
+- [New Architecture adoption and feedback](https://github.com/reactwg/react-native-new-architecture/discussions)
+- [Improvements to the Developer Experience](https://github.com/react-native-community/developer-experience-wg)
+
+### Packages & Integrations
+
+In the [React Native Directory](https://reactnative.directory/) you will be able to see many libraries that are compatible with React Native. It is a community-driven effort to help developers browse and evaluate packages, plugins, state management libraries, and more.
+
+### Conferences
+
+Over the years, many conferences organized by companies and partners have been organized around the world - it would be impossible to track them all here; moreover, often there is React Native content in React events as well.
+
+Listed here are but a few of the main React Native related conferences, with links to past editions' recordings:
+
+#### [ReactConf](https://conf.reactjs.org/), organized by Meta
+
+- [React Conf 2021](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa)
+- [React Conf 2019](https://www.youtube.com/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh)
+- [React Conf 2018](https://www.youtube.com/watch?v=WXYPpY_mElQ)
+- [React Conf 2017](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0)
+- [React Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)
+- [React Conf 2015](https://www.youtube.com/watch?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr&v=KVZ-P-ZI6W4)
+
+#### [ChainReact](https://cr.infinite.red/), organized by [InfiniteRed](https://infinite.red/)
+
+- [ChainReact 2019](https://www.youtube.com/playlist?list=PLFHvL21g9bk2bTWTCP1BueiiIz8q258z9)
+- [ChainReact 2018](https://www.youtube.com/playlist?list=PLFHvL21g9bk1skdjnKVGXREDmP_HVDj-u)
+- [ChainReact 2017](https://www.youtube.com/playlist?list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522)
+
+#### [AppJS](https://appjs.co/), organized by [Software Mansion](https://swmansion.com/)
+
+- [AppJS 2022](https://www.youtube.com/playlist?list=PLSk21zn8fFZC3UIvyRjDb4Uog3244BwM6)
+- [AppJS 2019](https://www.youtube.com/playlist?list=PLSk21zn8fFZBKEJxmkdSzzmMJrxkfyjph)
+
+#### [React Native Europe](https://www.react-native.eu/), organized by [Callstack](https://www.callstack.com/)
+
+- [React Native Europe 2022](https://www.youtube.com/playlist?list=PLZ3MwD-soTTE-qcA0MrcvZBdmkHJSIjJX)
+- [React Native Europe 2021](https://www.youtube.com/playlist?list=PLZ3MwD-soTTG-8Ix3lQ8zHvk94juXpYjl)
+- [React Native Europe 2020](https://www.youtube.com/playlist?list=PLZ3MwD-soTTEGG42-BvoqD0qK0vKV2ygm)
+- [React Native Europe 2019](https://www.youtube.com/playlist?list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-)
+- [React Native Europe 2018](https://www.youtube.com/playlist?list=PLZ3MwD-soTTEOWXU2I8Y8C3AfqvJdn3M_)
+- [React Native Europe 2017](https://www.youtube.com/playlist?list=PLZ3MwD-soTTF76yq91JdPrFshTm_ZNNsf)

website/community/support.md

@@ -0,0 +1,27 @@
+---
+title: Where to get help
+description: Where to get help
+---
+
+If you need help with your React Native app, the right place to go depends on the type of help that you need.
+
+### Repository
+
+The core of **React Native** is worked on full-time by Meta's React Native team. But there are far more people in the community who make key contributions and fix things. If the issue you are facing is code related, you should check the open issues in the [main repository](https://github.com/facebook/react-native/issues).
+
+If you cannot find an existing issue, please refer to [How to file an issue](/contributing/how-to-file-an-issue).
+
+### Upgrade support
+
+Many times, when upgrading your apps and libraries from a version of React Native to a newer one, you might need some help; the community has rallied together to create a couple of important resources:
+
+- [upgrade-helper](https://react-native-community.github.io/upgrade-helper/) is a tool that will show the full set of changes happening between any two versions to help you see what changes you need to do in your code.
+- [upgrade support](https://github.com/react-native-community/upgrade-support) is a community-driven repository to request and give help when upgrading your app.
+
+### Stack Overflow
+
+Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/react-native?sort=frequent) tagged with **react-native** or [ask your own](http://stackoverflow.com/questions/ask?tags=react-native)!
+
+### Reactiflux Chat
+
+If you need an answer right away, check out the [Reactiflux Discord](https://discord.gg/JuTwWB8rsy) community. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.

website/contributing/how-to-file-an-issue.md

@@ -14,7 +14,7 @@ To increase your chances of resolving your issue quickly, please consider includ
 
 ### Code-level help
 
-If you're looking for help with your app, please refer to the ample [list of community resources](/help). Many members of the community use Stack Overflow to [ask questions](https://stackoverflow.com/questions/tagged/react-native?sort=frequent) using the **react-native** tag.
+If you're looking for help with your app, please refer to the ample [list of community resources](/community/support). Many members of the community use Stack Overflow to [ask questions](https://stackoverflow.com/questions/tagged/react-native?sort=frequent) using the **react-native** tag.
 
 ### Existing issues
 

website/docusaurus.config.js

@@ -125,6 +125,17 @@ module.exports = {
         ...commonDocsOptions,
       }),
     ],
+    [
+      'content-docs',
+      /** @type {import('@docusaurus/plugin-content-docs').Options} */
+      ({
+        id: 'community',
+        path: 'community',
+        routeBasePath: '/community',
+        sidebarPath: require.resolve('./sidebarsCommunity.json'),
+        ...commonDocsOptions,
+      }),
+    ],
     [
       '@docusaurus/plugin-pwa',
       {
@@ -248,6 +259,13 @@ module.exports = {
             position: 'right',
             docsPluginId: 'contributing',
           },
+          {
+            type: 'doc',
+            docId: 'overview',
+            label: 'Community',
+            position: 'right',
+            docsPluginId: 'community',
+          },
           {
             to: '/showcase',
             label: 'Showcase',
@@ -282,7 +300,7 @@ module.exports = {
         style: 'dark',
         links: [
           {
-            title: 'Development',
+            title: 'Develop',
             items: [
               {
                 label: 'Guides',
@@ -303,7 +321,7 @@ module.exports = {
             ],
           },
           {
-            title: 'Community',
+            title: 'Participate',
             items: [
               {
                 label: 'Showcase',
@@ -314,11 +332,15 @@ module.exports = {
                 to: 'contributing/overview',
               },
               {
-                label: 'The React Native Community',
-                to: 'help',
+                label: 'Community',
+                to: 'community/overview',
+              },
+              {
+                label: 'Directory',
+                href: 'https://reactnative.directory/',
               },
               {
-                label: 'Ask Questions on Stack Overflow',
+                label: 'Stack Overflow',
                 href: 'https://stackoverflow.com/questions/tagged/react-native',
               },
             ],
@@ -341,7 +363,7 @@ module.exports = {
             ],
           },
           {
-            title: 'More',
+            title: 'Explore More',
             items: [
               {
                 label: 'ReactJS',

website/sidebarsCommunity.json

@@ -0,0 +1,11 @@
+{
+  "community": [
+    {
+      "type": "category",
+      "label": "Community",
+      "collapsed": false,
+      "collapsible": false,
+      "items": ["overview", "staying-updated", "communities", "support"]
+    }
+  ]
+}

website/src/css/customTheme.scss

@@ -379,11 +379,9 @@ html[data-theme="dark"] {
 div[class^="docPage"] .hash-link,
 article[itemprop="blogPost"] .hash-link,
 .mdx-page .hash-link,
-.community-page .hash-link,
 html[data-theme="dark"] div[class^="docPage"] .hash-link,
 html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
-html[data-theme="dark"].mdx-page .hash-link,
-html[data-theme="dark"].community-page .hash-link {
+html[data-theme="dark"].mdx-page .hash-link {
   @extend %hash-link-style;
 }
 
@@ -442,52 +440,6 @@ html[data-theme="dark"] .alert--secondary {
   }
 }
 
-/* Community page */
-
-.community-page {
-  h1 {
-    font-size: 2.8rem;
-  }
-
-  h2 {
-    font-size: 2rem;
-    margin-top: 36px;
-  }
-
-  h3 {
-    font-size: 1.5rem;
-    margin-top: 16px;
-    display: inline-block;
-  }
-
-  .row .col p a {
-    @extend %link-style;
-  }
-
-  .row .col.col--2 {
-    --ifm-col-width: calc(3 / 12 * 100%) !important;
-  }
-
-  .col--offset-2 {
-    --ifm-col-width: calc(9 / 12 * 100%) !important;
-    margin-left: 0 !important;
-  }
-}
-
-html[data-theme="dark"].community-page {
-  .row .col p a {
-    @extend %link-style-dark;
-  }
-}
-
-@media (max-width: 996px) {
-  .community-page {
-    .col--offset-2 {
-      --ifm-col-width: 100% !important;
-    }
-  }
-}
-
 /* Version warning */
 
 .theme-doc-version-banner {
@@ -1851,7 +1803,7 @@ html[data-theme="light"].blog-wrapper {
     padding: 24px 16px !important;
   }
 
-  html:not(.community-page) .main-wrapper {
+  .main-wrapper {
     .container.margin-vert--lg {
       max-width: 96% !important;
     }