docs: CHARTS-6059 Extract common text from SDK guides

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run build:md

examples/.markdown/compilation/chart/authenticated-custom-jwt.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/authenticated-custom-jwt/README.md",
+	"files" : ["examples/.markdown/config/chart/authenticated-custom-jwt.md"]
+}

examples/.markdown/compilation/chart/authenticated-google.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/authenticated-google/README.md",
+	"files" : ["examples/.markdown/config/chart/authenticated-google.md"]
+}

examples/.markdown/compilation/chart/authenticated-realm-deprecated.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/authenticated-realm-deprecated/README.md",
+	"files" : ["examples/.markdown/config/chart/authenticated-realm-deprecated.md"]
+}

examples/.markdown/compilation/chart/authenticated-realm-web.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/authenticated-realm-web/README.md",
+	"files" : ["examples/.markdown/config/chart/authenticated-realm-web.md"]
+}

examples/.markdown/compilation/chart/click-events-basic.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/click-events-basic/README.md",
+	"files" : ["examples/.markdown/config/chart/click-events-basic.md"]
+}

examples/.markdown/compilation/chart/click-events-filtering.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/click-events-filtering/README.md",
+	"files" : ["examples/.markdown/config/chart/click-events-filtering.md"]
+}

examples/.markdown/compilation/chart/programmatic-highlighting.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/programmatic-highlighting/README.md",
+	"files" : ["examples/.markdown/config/chart/programmatic-highlighting.md"]
+}

examples/.markdown/compilation/chart/timeline-charts.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/timeline-charts-example/README.md",
+	"files" : ["examples/.markdown/config/chart/timeline-charts-example.md"]
+}

examples/.markdown/compilation/chart/unauthenticated.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/charts/unauthenticated/README.md",
+	"files" : ["examples/.markdown/config/chart/unauthenticated.md"]
+}

examples/.markdown/compilation/dashboard/authenticated-custom-jwt.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/authenticated-custom-jwt/README.md",
+	"files" : ["examples/.markdown/config/dashboard/authenticated-custom-jwt.md"]
+}

examples/.markdown/compilation/dashboard/authenticated-google.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/authenticated-google/README.md",
+	"files" : ["examples/.markdown/config/dashboard/authenticated-google.md"]
+}

examples/.markdown/compilation/dashboard/authenticated-realm-deprecated.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/authenticated-realm-deprecated/README.md",
+	"files" : ["examples/.markdown/config/dashboard/authenticated-realm-deprecated.md"]
+}

examples/.markdown/compilation/dashboard/authenticated-realm-web.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/authenticated-realm-web/README.md",
+	"files" : ["examples/.markdown/config/dashboard/authenticated-realm-web.md"]
+}

examples/.markdown/compilation/dashboard/unauthenticated-get-chart.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/unauthenticated-get-chart/README.md",
+	"files" : ["examples/.markdown/config/dashboard/unauthenticated-get-chart.md"]
+}

examples/.markdown/compilation/dashboard/unauthenticated.json

@@ -0,0 +1,4 @@
+{
+	"build" : "examples/dashboard/unauthenticated/README.md",
+	"files" : ["examples/.markdown/config/dashboard/unauthenticated.md"]
+}

examples/.markdown/config/chart/authenticated-custom-jwt.md

@@ -0,0 +1,42 @@
+# MongoDB Charts Embedding Example - Authenticated Embedded Chart
+
+## Background
+
+#include "examples/.markdown/docs/chart/embed-sdk-introduction.md"
+
+This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via a custom jwt authentication. The sample app has its own authentication and token issuing logic. You may want to follow a similar approach if you are not integrating with an external authentication mechanism or your authentication is not based on JWTs. Alternatively, if you are using an existing authentication mechanism that issues JWTs, you can use those tokens to authenticate your chart rendering requests after configuring a Charts authentication provider that can validate the JWT.
+
+#include "examples/.markdown/docs/chart/authenticated-common-features.md"
+- 🔑 Custom JWT authentication via `jsonwebtoken`
+
+## Quickstart
+
+#include "examples/.markdown/docs/quickstart.md" Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`.
+
+## Preparing your Chart for Embedding
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md"
+
+    - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_
+    - Provider: `Custom JSON Web Token`
+    - Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_
+    - Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_
+
+## Running this Sample with your data
+
+#include "examples/.markdown/docs/chart/using-own-data-general-steps.md"
+
+The hard coded credentials used in this demo are:
+
+- Username: `admin`
+- Password: `password`
+
+## Next Steps
+
+#include "examples/.markdown/docs/chart/next-steps-common-text.md"
+- Change the login logic to adapt to your project's security workflow.
+- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further.
+
+#include "examples/.markdown/docs/footer.md"

examples/.markdown/config/chart/authenticated-google.md

@@ -0,0 +1,61 @@
+# MongoDB Charts Embedding Example - Google Authentication
+
+## Background
+
+#include "examples/.markdown/docs/chart/embed-sdk-introduction.md"
+
+This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Google** as an authentication provider. The sample app is already set up to authenticate with a Google Client ID hosted by the Charts Development team.
+
+#include "examples/.markdown/docs/chart/authenticated-common-features.md"
+- 𝗚 Google authentication
+
+## Quickstart
+
+#include "examples/.markdown/docs/quickstart.md" Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account.
+
+Logging in with any valid Google account will allow you to render the chart.
+
+## Getting a Google Client ID
+
+This sample is pre-configured with a MongoDB-owned test Client ID. To use Google Sign-In in your own apps, you must create your own Client ID.
+
+Steps on how to configure a Project with Google and attain a Google Client ID can be found [here](https://developers.google.com/identity/sign-in/web/sign-in). You'll need to set the Origin and Redirect URIs to whatever you use in your application. In our sample, that is http://localhost:3000.
+
+## Preparing your Chart for Embedding
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md"
+
+    - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_
+    - Provider: `Google`
+    - Google Client ID: _See above for
+      - This should be the entire string `<encodedData>.apps.googleusercontent.com`
+
+## Running this Sample with your data
+
+#include "examples/.markdown/docs/chart/using-own-data-general-steps.md"
+- **Optional:** Replace the `<meta content="YourClientIDHere">` with your own Google Client ID. (look for "\~REPLACE\~" in the comments)
+
+## Next Steps
+
+#include "examples/.markdown/docs/chart/next-steps-common-text.md"
+- Use Incognito Mode to see a pure login experience
+- Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure.
+
+  - For example, consider the following injected filter
+
+  ```javascript
+  // Reject tokens that aren't from example.com domain
+  if (context.token.hd != "yourCompany.com") {
+    return false;
+  }
+  return true;
+  ```
+
+  - ![Screen Shot 2020-04-21 at 1 47 54 pm](https://user-images.githubusercontent.com/19422770/79823279-b9b35880-83d6-11ea-8370-774bcde80252.png)
+  - This will only allow users from your company domain to view the chart data 🔒
+
+- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further.
+
+#include "examples/.markdown/docs/footer.md"

examples/.markdown/config/chart/authenticated-realm-deprecated.md

@@ -0,0 +1,49 @@
+# MongoDB Charts Embedding Example - App Services Authentication [DEPRECATED]
+
+🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-deprecated)_
+
+> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example.
+
+## Background
+
+#include "examples/.markdown/docs/chart/embed-sdk-introduction.md"
+
+This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team.
+
+This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results!
+
+#include "examples/.markdown/docs/chart/authenticated-common-features.md"
+- 🔑 App Services authentication
+- 🙋‍♂️ Data filtering by App Services User Role
+
+## Quickstart
+
+#include "examples/.markdown/docs/quickstart.md"
+
+#include "examples/.markdown/docs/realm-credentials.md"
+
+## Authenticate with your App Services App
+
+#include "examples/.markdown/docs/chart/realm-app-preparation-steps.md"
+
+## Preparing your Chart for Embedding
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md"
+
+## Running this Sample with your data
+
+#include "examples/.markdown/docs/chart/using-own-data-general-steps.md"
+- Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments)
+- Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('<your-app-id>')`
+
+## Next Steps
+
+#include "examples/.markdown/docs/chart/next-steps-common-text.md"
+- Play with App Services Rules system, and change how different accounts see your Chart.
+- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further.
+
+#include "examples/.markdown/docs/footer.md"

examples/.markdown/config/chart/authenticated-realm-web.md

@@ -0,0 +1,46 @@
+# MongoDB Charts Embedding Example - App Services Authentication
+
+🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)_
+
+## Background
+
+#include "examples/.markdown/docs/chart/embed-sdk-introduction.md"
+
+This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team.
+
+This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results!
+
+#include "examples/.markdown/docs/chart/authenticated-common-features.md"
+- 🔑 App Services authentication
+- 🙋‍♂️ Data filtering by App Services User Role
+
+## Quickstart
+
+#include "examples/.markdown/docs/quickstart.md"
+
+#include "examples/.markdown/docs/realm-credentials.md"
+
+## Authenticate with your App Services App
+
+#include "examples/.markdown/docs/chart/realm-app-preparation-steps.md"
+
+## Preparing your Chart for Embedding
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md"
+
+## Running this Sample with your data
+
+#include "examples/.markdown/docs/chart/using-own-data-general-steps.md"
+- Replace the Realm App ID string. `Realm.App({id: '<your-app-id>'})`
+
+## Next Steps
+
+#include "examples/.markdown/docs/chart/next-steps-common-text.md"
+- Play with App Services Rules system, and change how different accounts see your Chart.
+- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further.
+
+#include "examples/.markdown/docs/footer.md"

examples/.markdown/config/chart/click-events-basic.md

@@ -0,0 +1,94 @@
+# MongoDB Charts Embedding Example - Click Events
+
+🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)_
+
+## Background
+
+#include "examples/.markdown/docs/chart/embed-sdk-introduction.md"
+
+#include "examples/.markdown/docs/chart/click-events-description.md"
+
+This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering).
+
+#### The features included in this demo are as follows:
+
+- Adding a click event handler to a chart, using code similar to:
+
+```javascript
+chart.addEventListener("click", callback);
+```
+
+- Highlighting the element clicked on the chart, using the following code:
+
+```javascript
+chart.setHighlight(payload.selectionFilter)
+```
+
+- Parsing the payload returned to the callback event. A typical click event's payload will look something like this:
+
+```json
+{
+  "chartId": "c0774a27-3432-4207-b795-afeb56243652",
+  "event": {
+    "type": "click",
+    "altKey": false,
+    "ctrlKey": false,
+    "shiftKey": false,
+    "metaKey": false,
+    "offsetX": 152,
+    "offsetY": 176,
+    "clientX": 172,
+    "clientY": 241,
+    "pageX": 172,
+    "pageY": 241,
+    "screenX": 172,
+    "screenY": 312
+  },
+  "data": {
+    "y": {
+      "label": "unwind array 'genres'",
+      "value": "Adventure"
+    },
+    "x": {
+      "label": "count ( _id )",
+      "value": 659
+    },
+    "color": {
+      "label": "year",
+      "value": "2000 - 2010",
+      "lowerBound": 2000,
+      "upperBound": 2010
+    }
+  },
+  "target": {
+    "type": "rect",
+    "role": "mark",
+    "fill": "#8CB6F2"
+  },
+  "apiVersion": 1
+}
+```
+
+More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/).
+
+## Quickstart
+
+#include "examples/.markdown/docs/quickstart.md"
+
+## Preparing your Chart for Embedding
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md"
+
+#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md"
+
+## Running this Sample with your data
+
+#include "examples/.markdown/docs/chart/using-own-data-general-steps.md"
+
+## Next Steps
+
+#include "examples/.markdown/docs/chart/next-steps-common-text.md"
+- Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our
+  [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example.
+
+#include "examples/.markdown/docs/footer.md"