[Docs] add sourcing from builder.io doc (#22650)

* [Docs] add sourcing from builder.io docs, and link to starter repo

* tags

* typo

* remove failing build files

* Update docs/docs/sourcing-from-builder-io.md

Co-Authored-By: Obinna Ekwuno  <[email protected]>

* Update docs/docs/sourcing-from-builder-io.md

Co-Authored-By: Obinna Ekwuno  <[email protected]>

* Update docs/docs/sourcing-from-builder-io.md

Co-Authored-By: Obinna Ekwuno  <[email protected]>

* prettier

* Apply suggestions from code review

Co-Authored-By: Obinna Ekwuno  <[email protected]>

* feedback: simplify content flow, clarify querying data

* fix typo

Co-authored-by: Obinna Ekwuno  <[email protected]>

Author: teleaziz

docs/docs/headless-cms.md

@@ -47,6 +47,7 @@ Here are more resources for guides, plugins, and starters for CMS systems you ca
 | [Forestry](https://forestry.io/)              | [guide](/docs/sourcing-from-forestry/)                                           |                                                      |                                                                     |
 | [Gentics Mesh](https://getmesh.io)            | [guide](/docs/sourcing-from-gentics-mesh)                                        |                                                      |                                                                     |
 | [Seams-CMS](https://seams-cms.com/)           | [guide](/docs/sourcing-from-seams-cms)                                           |                                                      |                                                                     |
+| [Builder.io](https://www.bulider.io/)         | [guide](/docs/sourcing-from-builder-io/)                                         | [docs](/packages/@builder.io/gatsby/)                | [starter](https://github.com/BuilderIO/gatsby-starter-builder)      |
 
 ## How to add new guides to this section
 

docs/docs/sourcing-from-builder-io.md

@@ -0,0 +1,69 @@
+---
+title: Sourcing from Builder.io
+---
+
+[Builder.io](https://builder.io) has all the benefits of a modern headless CMS platform, plus the power of an easy to learn drag and drop editor that enables everyone to edit more than just content. Builder + Gatsby empowers your entire team to create performant and fully customizable pages quickly.
+
+<img src="https://imgur.com/HjBWIbv.gif" alt="Editor example" />
+
+---
+
+## Quick Start
+
+### Prerequisites
+
+Make a free account over at [Builder.io](https://www.builder.io/fork-sample-org) and grab your public API key from your [organization page](https://builder.io/account/organization)
+
+### Fresh project:
+
+To start on a fresh project quickly, use the [BuilderIO Gatsby starter](/starters/BuilderIO/gatsby-starter-builder/)
+
+```shell
+gatsby new my-builder-site https://github.com/BuilderIO/gatsby-starter-builder
+```
+
+### Existing project:
+
+Use [@builder.io/gatsby plugin](/packages/@builder.io/gatsby/) which will expose Builder.io data and optionally generate pages dynamically from a provided templates.
+
+## Query Builder.io data
+
+The `@Builder.io/gatsby` plugin will add `allBuilderModels` to graphQL, under which you can specify which model you'd like to get entries from.
+
+For example to get the entries from your models `myHeader`, `myFooter`:
+
+```graphql
+{
+  allBuilderModels {
+    myHeader(limit: 1, options: { cachebust: true }) {
+      content
+    }
+    myFooter(limit: 1, options: { cachebust: true }) {
+      content
+    }
+  }
+}
+```
+
+Or you can query by urlPath for your page models:
+
+```graphql
+query($path: String!) {
+  allBuilderModels {
+    myPageModel(
+      target: { urlPath: $path }
+      limit: 1
+      options: { cachebust: true }
+    ) {
+      content
+    }
+  }
+}
+```
+
+## Learn more
+
+- [Builder.io GraphQL docs](https://www.builder.io/c/docs/graphql-api)
+- [@builder.io/gatsby plugin](/packages/@builder.io/gatsby/)
+- [Design system example](https://github.com/BuilderIO/builder/tree/master/examples/react-design-system)
+- [Official docs](https://www.builder.io/c/docs/getting-started)