Docs: Add plugin overview (#24332)

* Docs: Add plugin overview

* Add plugin dev overview

* Fix review comments

* Fix review comments

docs/sources/developers/plugins.md

@@ -0,0 +1,71 @@
++++
+title = "Build a plugin"
+type = "docs"
+[menu.docs]
+parent = "developers"
+identifier = "plugins"
+weight = 3
++++
+
+# Build a plugin
+
+For more information on the types of plugins you can build, refer to the [Plugin Overview]({{< relref "../plugins/_index.md" >}}).
+
+## Get started
+
+The easiest way to start developing Grafana plugins is to use the [Grafana Toolkit](https://www.npmjs.com/package/@grafana/toolkit).
+
+Open the terminal, and run the following command in your [plugin directory]({{< relref "../installation/configuration/_index.md#plugins" >}}):
+
+```bash
+npx @grafana/toolkit plugin:create my-grafana-plugin
+```
+
+If you want a more guided introduction to plugin development, check out our tutorials:
+
+- [Build a panel plugin]({{< relref "../../../../tutorials/build-a-panel-plugin.md" >}})
+- [Build a data source plugin]({{< relref "../../../../tutorials/build-a-data-source-plugin.md" >}})
+
+## Go further
+
+Learn more about specific areas of plugin development.
+
+### Concepts
+
+Deepen your knowledge through a series of high-level overviews of plugin concepts.
+
+- [Data frames]({{< relref "../plugins/developing/dataframe.md" >}})
+- [Authentication for data source plugins]({{< relref "../plugins/developing/auth-for-datasources.md" >}})
+
+### UI library
+
+Explore the many UI components in our [Grafana UI library](https://developers.grafana.com/ui).
+
+### Tutorials
+
+If you're looking to build your first plugin, check out these introductory tutorials:
+
+- [Build a panel plugin]({{< relref "../../../../tutorials/build-a-panel-plugin.md" >}})
+- [Build a data source plugin]({{< relref "../../../../tutorials/build-a-data-source-plugin.md" >}})
+
+Ready to learn more? Check out our other tutorials:
+
+- [Build a panel plugin with D3.js]({{< relref "../../../../tutorials/build-a-panel-plugin-with-d3.md" >}})
+
+### API reference
+
+Learn more about Grafana options and packages.
+
+#### Metadata
+
+- [Plugin metadata]({{< relref "../plugins/developing/plugin.json.md" >}})
+
+#### Typescript
+
+- [Grafana Data]({{< relref "../packages_api/data/_index.md" >}})
+- [Grafana Runtime]({{< relref "../packages_api/runtime/_index.md" >}})
+- [Grafana UI]({{< relref "../packages_api/ui/_index.md" >}})
+
+#### Go
+
+- [Grafana Plugin SDK](https://pkg.go.dev/mod/github.com/grafana/grafana-plugin-sdk-go?tab=overview)

docs/sources/menu.yaml

@@ -282,6 +282,8 @@
 - name: Plugins
   link: /plugins/
   children:
+    - name: Overview
+      link: /plugins/
     - name: Install plugins
       link: /plugins/installation/
     - name: Develop plugins
@@ -365,6 +367,8 @@
   children:
     - name: Developer resources
       link: /developers/developer-resources/
+    - link: /developers/plugins/
+      name: Plugins
     - name: Packages reference
       link: /packages_api/
     - name: Contributor License Agreement (CLA)

docs/sources/plugins/_index.md

@@ -4,5 +4,44 @@ type = "docs"
 [menu.docs]
 name = "Plugins"
 identifier = "plugins"
-weight = 8
+weight = 1
 +++
+
+# Plugins
+
+Besides the wide range of visualizations and data sources that are available immediately after you install Grafana, you can extend your Grafana experience with _plugins_.
+
+You can [install]({{< relref "./installation.md" >}}) one of the plugins built by the Grafana community, or [build one yourself]({{< relref "./developing/development.md" >}}).
+
+Grafana supports three types of plugins: [panels](https://grafana.com/grafana/plugins?type=panel), [data sources](https://grafana.com/grafana/plugins?type=datasource), and [apps](https://grafana.com/grafana/plugins?type=app).
+
+## Panel plugins
+
+Add new visualizations to your dashboard with panel plugins, such as the [Worldmap Panel](https://grafana.com/grafana/plugins/grafana-worldmap-panel), [Clock](https://grafana.com/grafana/plugins/grafana-clock-panel), and [Pie Chart](https://grafana.com/grafana/plugins/grafana-piechart-panel).
+
+Use panel plugins when you want to:
+
+- Visualize data returned by data source queries.
+- Navigate between dashboards.
+- Control external systems, such as smart home devices.
+
+## Data source plugins
+
+Data source plugins add support for new databases, such as [Google BigQuery](https://grafana.com/grafana/plugins/doitintl-bigquery-datasource).
+
+Data source plugins communicate with external sources of data and return the data in a format that Grafana understands. By adding a data source plugin, you can immediately use the data in any of your existing dashboards.
+
+Use data source plugins when you want to import data from external systems.
+
+## App plugins
+
+Applications, or _app plugins_, bundle data sources and panels to provide a cohesive experience, such as the [Zabbix](https://grafana.com/grafana/plugins/alexanderzobnin-zabbix-app) and [Kubernetes](https://grafana.com/grafana/plugins/grafana-kubernetes-app) apps.
+
+Apps can also add custom pages for things like control panels.
+
+Use app plugins when you want to create an custom out-of-the-box monitoring experience.
+
+## Learn more
+
+- [Install plugins]({{< relref "./installation.md" >}})
+- Browse the available [Plugins](https://grafana.com/grafana/plugins)