docs: fixes ambiguous links (#24811)

docs/sources/developers/plugins/legacy/_index.md

@@ -15,7 +15,7 @@ Grafana already has a strong community of contributors and plugin developers. By
 ## Short version
 
 1. [Set up Grafana](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md)
-2. Clone an example plugin into ```/var/lib/grafana/plugins```  or `data/plugins` (relative to grafana git repo if you're running development version from source dir)
+2. Clone an example plugin into `/var/lib/grafana/plugins` or `data/plugins` (relative to grafana git repo if you're running development version from source dir)
 3. Use one of our example plugins as a starting point
 
 Example plugins
@@ -36,7 +36,7 @@ Since everything turns into JavaScript, it's up to you to choose which language
 
 ## Buildscript
 
-You can use any build system that supports systemjs. All the built content should end up in a folder named ```dist``` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
+You can use any build system that supports systemjs. All the built content should end up in a folder named `dist` and be committed to the repository. By committing the dist folder, the person who installs your plugin does not have to run any build script. All of our example plugins have a build script configured.
 
 ## Keep your plugin up to date
 
@@ -63,34 +63,30 @@ The SDK contains three different plugin classes: PanelCtrl, MetricsPanelCtrl and
 Example:
 
 ```javascript
-import {ClockCtrl} from './clock_ctrl';
+import { ClockCtrl } from './clock_ctrl';
 
-export {
-  ClockCtrl as PanelCtrl
-};
+export { ClockCtrl as PanelCtrl };
 ```
 
 The module class is also where css for the dark and light themes is imported:
 
 ```javascript
-import {loadPluginCss} from 'app/plugins/sdk';
+import { loadPluginCss } from 'app/plugins/sdk';
 import WorldmapCtrl from './worldmap_ctrl';
 
 loadPluginCss({
   dark: 'plugins/grafana-worldmap-panel/css/worldmap.dark.css',
-  light: 'plugins/grafana-worldmap-panel/css/worldmap.light.css'
+  light: 'plugins/grafana-worldmap-panel/css/worldmap.light.css',
 });
 
-export {
-  WorldmapCtrl as PanelCtrl
-};
+export { WorldmapCtrl as PanelCtrl };
 ```
 
 ## Start developing your plugin
 
 There are three ways that you can start developing a Grafana plugin.
 
-1. Set up a Grafana development environment. [(described here)](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md) and place your plugin in the ```data/plugins``` folder.
+1. Set up a Grafana development environment. [(described here)](https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md) and place your plugin in the `data/plugins` folder.
 2. Install Grafana and place your plugin in the plugins directory which is set in your [config file](/installation/configuration). By default this is `/var/lib/grafana/plugins` on Linux systems.
 3. Place your plugin directory anywhere you like and specify it grafana.ini.
 
@@ -116,11 +112,11 @@ If a panel receives data and hooks into the `data-received` event then it should
 
 We have three different examples that you can fork/download to get started developing your Grafana plugin.
 
- - [simple-json-datasource](https://github.com/grafana/simple-json-datasource) (small data source plugin for querying json data from backends)
- - [simple-app-plugin](https://github.com/grafana/simple-app-plugin)
- - [clock-panel](https://github.com/grafana/clock-panel)
- - [singlestat-panel](https://github.com/grafana/grafana/tree/master/public/app/plugins/panel/singlestat)
- - [piechart-panel](https://github.com/grafana/piechart-panel)
+- [simple-json-datasource](https://github.com/grafana/simple-json-datasource) (small data source plugin for querying json data from backends)
+- [simple-app-plugin](https://github.com/grafana/simple-app-plugin)
+- [clock-panel](https://github.com/grafana/clock-panel)
+- [singlestat-panel](https://github.com/grafana/grafana/tree/master/public/app/plugins/panel/singlestat)
+- [piechart-panel](https://github.com/grafana/piechart-panel)
 
 ## Other Articles
 
@@ -129,4 +125,4 @@ We have three different examples that you can fork/download to get started devel
 - [Grafana Plugin Code Styleguide]({{< relref "style-guide.md" >}})
 - [Grafana Apps]({{< relref "apps.md" >}})
 - [Grafana Data Sources]({{< relref "data-sources.md" >}})
-- [plugin.json Schema]({{< relref "metadata.md" >}})
+- [plugin.json Schema]({{< relref "../metadata.md" >}})

docs/sources/developers/plugins/legacy/style-guide.md

@@ -27,7 +27,7 @@ grafana-piechart-panel
 mtanda-histogram-panel
 ```
 
-The full file format for plugin.json is described [here]({{< relref "metadata.md" >}}).
+The full file format for plugin.json is described [here]({{< relref "../metadata.md" >}}).
 
 Minimal plugin.json:
 
@@ -110,11 +110,23 @@ Below is a minimal example of an editor row with one form group and two fields,
     <div class="gf-form">
       <label class="gf-form-label width-10">Label1</label>
       <div class="gf-form-select-wrapper max-width-10">
-        <select class="input-small gf-form-input" ng-model="ctrl.panel.mySelectProperty" ng-options="t for t in ['option1', 'option2', 'option3']" ng-change="ctrl.onSelectChange()"></select>
+        <select
+          class="input-small gf-form-input"
+          ng-model="ctrl.panel.mySelectProperty"
+          ng-options="t for t in ['option1', 'option2', 'option3']"
+          ng-change="ctrl.onSelectChange()"
+        ></select>
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-10">Label2</label>
-        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.myProperty" ng-change="ctrl.onFieldChange()" placeholder="suggestion for user" ng-model-onblur />
+        <input
+          type="text"
+          class="input-small gf-form-input width-10"
+          ng-model="ctrl.panel.myProperty"
+          ng-change="ctrl.onFieldChange()"
+          placeholder="suggestion for user"
+          ng-model-onblur
+        />
       </div>
     </div>
   </div>
@@ -137,43 +149,45 @@ We recommend that you use a linter for your JavaScript. For ES6, the standard li
 2. Prefer to use `let` instead `var` ([Exploring ES6](http://exploringjs.com/es6/ch_core-features.html#_from-var-to-letconst))
 3. Use arrow functions, which don’t shadow `this` ([Exploring ES6](http://exploringjs.com/es6/ch_core-features.html#_from-function-expressions-to-arrow-functions)):
 
-    ```js
-    testDatasource() {
-      return this.getServerStatus()
-      .then(status => {
-        return this.doSomething(status);
-      })
-    }
-    ```
+   ```js
+   testDatasource() {
+     return this.getServerStatus()
+     .then(status => {
+       return this.doSomething(status);
+     })
+   }
+   ```
 
-    better than
+   better than
+
+   ```js
+   testDatasource() {
+     var self = this;
+     return this.getServerStatus()
+     .then(function(status) {
+       return self.doSomething(status);
+     })
+   }
+   ```
 
-    ```js
-    testDatasource() {
-      var self = this;
-      return this.getServerStatus()
-      .then(function(status) {
-        return self.doSomething(status);
-      })
-    }
-    ```
 4. Use native _Promise_ object:
 
-    ```js
-    metricFindQuery(query) {
-      if (!query) {
-        return Promise.resolve([]);
-      }
-    }
-    ```
+   ```js
+   metricFindQuery(query) {
+     if (!query) {
+       return Promise.resolve([]);
+     }
+   }
+   ```
 
-    better than
+   better than
+
+   ```js
+   metricFindQuery(query) {
+     if (!query) {
+       return this.$q.when([]);
+     }
+   }
+   ```
 
-    ```js
-    metricFindQuery(query) {
-      if (!query) {
-        return this.$q.when([]);
-      }
-    }
-    ```
 5. If using Lodash, then be consistent and prefer that to the native ES6 array functions.