New modular docs

README.md

@@ -115,86 +115,97 @@ Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?d
 
 ## Developer Guide
 
-AngularFire has a new tree-shakable API, however this is still under active development and documentation is in the works, so we suggest most developers stick with the Compatiability API for the time being. [See the v7 upgrade guide for more information.](docs/version-7-upgrade.md). 
+This developer guide assimes you're using the new tree-shakable AngularFire API, [if you're looking for the compatability API you can find the documentation here](docs/compat.md).
 
-This developer guide assumes you're using the Compatiability API (`@angular/fire/compat/*`).
+[See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
 
-### Monitor usage of your application in production
+### Firebase product integrations
 
-> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
+<table>
+  <tr>
+    <td>
 
-- [Getting started with Google Analytics](docs/analytics/getting-started.md)
-
-### Interacting with your database(s)
-
-Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
-
-#### Cloud Firestore
-
-> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
-
-- [Documents](docs/firestore/documents.md)
-- [Collections](docs/firestore/collections.md)
-- [Querying Collections](docs/firestore/querying-collections.md)
-- [Offline data](docs/firestore/offline-data.md)
-
-#### Realtime Database
-
-> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
-
-- [Objects](docs/rtdb/objects.md)
-- [Lists](docs/rtdb/lists.md)
-- [Querying lists](docs/rtdb/querying-lists.md)
-
-### Authenticate users
-
-- [Getting started with Firebase Authentication](docs/auth/getting-started.md)
-- [Route users with AngularFire guards](docs/auth/router-guards.md)
-
-### Local Emulator Suite
-
-- [Getting started with Firebase Emulator Suite](docs/emulators/emulators.md)
-
-### Upload files
-
-- [Getting started with Cloud Storage](docs/storage/storage.md)
-
-### Receive push notifications
-
-- [Getting started with Firebase Messaging](docs/messaging/messaging.md)
-
-### **BETA:** Change behavior and appearance of your application without deploying
-
-> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
-
-- [Getting started with Remote Config](docs/remote-config/getting-started.md)
-
-### Monitor your application performance in production
-
-> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).
+#### [Analytics](docs/analytics.md#analytics)
+```ts
+import { } from '@angular/fire/analytics';
+```
+</td>
+    <td>
 
-- [Getting started with Performance Monitoring](docs/performance/getting-started.md)
+#### [Authentication](docs/auth.md#authentication)
+```ts
+import { } from '@angular/fire/auth';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Directly call Cloud Functions
+#### [Cloud Firestore](docs/firestore.md#cloud-firestore)
+```ts
+import { } from '@angular/fire/firestore';
+```
+</td>
+    <td>
 
-- [Getting started with Callable Functions](docs/functions/functions.md)
+#### [Cloud Functions](docs/functions.md#cloud-functions)
+```ts
+import { } from '@angular/fire/functions';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Deploying your application
+#### [Cloud Messaging](docs/messaging.md#cloud-messaging)
+```ts
+import { } from '@angular/fire/messaging';
+```
+</td>
+    <td>
 
-> Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network (CDN) with a single command.
+#### [Cloud Storage](docs/storage.md#cloud-storage)
+```ts
+import { } from '@angular/fire/storage';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-- [Deploy your application on Firebase Hosting](docs/deploy/getting-started.md)
+#### [Performance Monitoring](docs/performance.md#performance-monitoring)
+```ts
+import { } from '@angular/fire/performance';
+```
+</td>
+    <td>
 
-#### Server-side rendering
+#### [Realtime Database](docs/database.md#realtime-database)
+```ts
+import { } from '@angular/fire/database';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-> Angular Universal is a technology that allows you to run your Angular application on a server. This allows you to generate your HTML in a process called server-side rendering (SSR). AngularFire is compatible with server-side rendering; allowing you to take advantage of the Search Engine Optimization, link previews, the performance gains granted by the technology, and more. [Learn more about Angular Universal](https://angular.io/guide/universal).
+#### [Remote Config](docs/remote-config.md#remote-config)
+```ts
+import { } from '@angular/fire/remote-config';
+```
+</td>
+    <td>
 
-- [Getting started with Angular Universal](docs/universal/getting-started.md)
-- [Deploying your Universal application on Cloud Functions for Firebase](docs/universal/cloud-functions.md)
-- [Prerendering your Universal application](docs/universal/prerendering.md)
+#### [App Check](docs/app-check.md#app-check)
+```ts
+import { } from '@angular/fire/app-check';
+```
+</td>
+  </tr>
+</table>
 
-### Ionic
+### Deploying your site
 
-- [Installation and Setup with Ionic CLI](docs/ionic/cli.md)
-- [Using AngularFire with Ionic 2](docs/ionic/v2.md)
-- [Using AngularFire with Ionic 3](docs/ionic/v3.md)
+* Deploy to Firebase Hosting
+* Angular Universal: Deploy to Cloud Functions
+* Angular Universal: Deploy to Cloud Run

docs/analytics.md

@@ -0,0 +1,27 @@
+<img align="right" width="30%" src="images/analytics-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Analytics
+</small>
+
+# Analytics
+
+What is Analytics?
+
+## Dependency Injection
+
+YADA YADA YADA
+
+## Firebase API
+
+Something something look at the offical docs
+
+## Services
+
+### ScreenTrackingService
+
+asdfij
+
+### UserTrackingService
+
+asdfsfadlkj

docs/app-check.md

@@ -0,0 +1,23 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime App Check
+</small>
+
+<img align="right" width="30%" src="images/[email protected]">
+
+# App Check
+
+What is app check?
+
+## Dependency Injection
+
+YADA YADA YADA
+
+## Firebase API
+
+Something something look at the offical docs
+
+## Convenience observables
+
+### Foo
+
+bar baz

docs/auth.md

@@ -0,0 +1,82 @@
+<img align="right" width="30%" src="images/auth-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Authentication
+</small>
+
+# Authentication
+
+Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.
+Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
+
+Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.
+
+[Learn more about Firebase Authentication](https://firebase.google.com/docs/auth)
+
+## Dependency Injection
+
+AngularFire allows you to work with Firebase Auth via Angular's Dependency Injection.
+
+First provide an auth instance to AngularFire:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getAuth, provideAuth } from '@angular/fire/auth';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAuth(() => getAuth()),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Auth } from '@angular/fire/auth';
+
+constructor(database: Auth) {
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Just change your imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the offical documentation.
+
+[Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)
+
+## Convenience observables
+
+AngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.
+
+### user
+
+TBD
+
+### authState
+
+TBD
+
+### idToken
+
+TBD
+
+
+## Connecting the the emulator suite
+
+```ts
+import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
+
+@NgModule({
+  imports: [
+    provideAuth(() => {
+      const auth = getAuth();
+      connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+      return auth;
+    }),
+  ]
+})
+```

docs/compat.md

@@ -0,0 +1,70 @@
+# AngularFire
+The official [Angular](https://angular.io/) library for [Firebase](https://firebase.google.com/).
+
+<strong><pre>ng add @angular/fire</pre></strong>
+
+## Compatibility Developer Guide
+
+AngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. [Find the new developer guide here](../README.md#developer-guide).
+
+[See the v7 upgrade guide for more information on this change.](version-7-upgrade.md).
+
+### Monitor usage of your application in production
+
+> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
+
+- [Getting started with Google Analytics](compat/analytics/getting-started.md)
+
+### Interacting with your database(s)
+
+Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
+
+#### Cloud Firestore
+
+> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
+
+- [Documents](compat/firestore/documents.md)
+- [Collections](compat/firestore/collections.md)
+- [Querying Collections](compat/firestore/querying-collections.md)
+- [Offline data](compat/firestore/offline-data.md)
+
+#### Realtime Database
+
+> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
+
+- [Objects](compat/rtdb/objects.md)
+- [Lists](compat/rtdb/lists.md)
+- [Querying lists](compat/rtdb/querying-lists.md)
+
+### Authenticate users
+
+- [Getting started with Firebase Authentication](acompat/uth/getting-started.md)
+- [Route users with AngularFire guards](compat/auth/router-guards.md)
+
+### Local Emulator Suite
+
+- [Getting started with Firebase Emulator Suite](compat/emulators/emulators.md)
+
+### Upload files
+
+- [Getting started with Cloud Storage](compat/storage/storage.md)
+
+### Receive push notifications
+
+- [Getting started with Firebase Messaging](compat/messaging/messaging.md)
+
+### **BETA:** Change behavior and appearance of your application without deploying
+
+> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
+
+- [Getting started with Remote Config](compat/remote-config/getting-started.md)
+
+### Monitor your application performance in production
+
+> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).
+
+- [Getting started with Performance Monitoring](compat/performance/getting-started.md)
+
+### Directly call Cloud Functions
+
+- [Getting started with Callable Functions](compat/functions/functions.md)

docs/analytics/getting-started.md → docs/compat/analytics/getting-started.md

@@ -2,6 +2,8 @@
 
 `AngularFireAnalytics` dynamically imports the `firebase/analytics` library and provides a promisified version of the [Firebase Analytics SDK (`firebase.analytics.Analytics`)](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html).
 
+> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
+
 ### API:
 
 ```ts

docs/auth/getting-started.md → docs/compat/auth/getting-started.md

@@ -6,6 +6,8 @@
 `firebase.auth.Auth` instance, allowing you to log users in, out, etc. [See
 the Firebase docs for more information on what methods are available.](https://firebase.google.com/docs/reference/js/firebase.auth.Auth)
 
+> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
+
 **Example app:**
 
 ```ts