[docs] Refactor component pages

Author: romainr

docs/docs-site/content/developer/api/_index.md

@@ -1,7 +1,7 @@
 ---
 title: "API"
 draft: false
-weight: 3
+weight: 4
 ---
 
 Interact with the API via REST or Python.

docs/docs-site/content/developer/components/_index.md

@@ -8,12 +8,6 @@ Some of the UI elements in Hue are available as generic [Web Components](https:/
 
 They can be imported as classic JavaScript modules for your own development needs.
 
-## Component list
-
-* [SQL Parsers](/developer/components/parsers)
-* [ER-diagram](/developer/components/er-diagram)
-* [SQL Scratchpad](/developer/components/scratchpad)
-
 ## Importing
 
 There are two ways to get them:
@@ -56,32 +50,3 @@ In hue_dep `package.json` there is a dependency on Hue:
 Now let's import the Hive parser:
 
     import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';
-
-
-## Using
-
-Here is an example on how to use the er-diagram component once installed:
-
-### Import
-
-er-diagram can be imported into an html file using a simple script tag as follows.
-
-    <script type = "text/javascript" src="node_modules/gethue/lib/components/ErDiagram.js"></script>
-
-If you are using a bundler like webpack. They can be imported using a normal import statement.
-
-    import 'gethue/lib/components/ErDiagram';
-
-### Instantiate
-
-Once imported they can be used like a native HTML tag.
-
-    <er-diagram id="erd-id"/>
-
-Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools/examples/components) for examples on how the components can be used. You must be able to directly pass attributes, and listen to custom and native events.
-
-### Use as a Vue Component
-
-Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.
-
-    import ERDiagram from 'gethue/components/er-diagram/index.vue';

docs/docs-site/content/developer/components/parsers/_index.md

@@ -1,6 +1,7 @@
 ---
 title: "SQL Parsers"
 draft: false
+weight: 2
 ---
 
 ## Live Demo

docs/docs-site/content/developer/components/scratchpad/_index.md

@@ -1,13 +1,16 @@
 ---
 title: "SQL Scratchpad"
 draft: false
+weight: 1
 ---
 
 The lightweight SQL Editor also called "SQL Scratchpad" comes as its own `<sql-scratchpad />` Web component.
 
 The SQL Scratchpad component is in **beta** and rapidly evolving. Now is a great time to give it a try and [send feedback](https://github.com/cloudera/hue/issues)!
 
-UI:
+!["SQL Scratchpad"](https://cdn.gethue.com/uploads/2021/05/sql-scratchpad-v0.5.png)
+
+Adding into a Web page:
 
 We have the `gethue` [dependency](/developer/components/) in `packages.json` or run `npm install gethue`. Then just load it similarly to:
 
@@ -27,16 +30,14 @@ We have the `gethue` [dependency](/developer/components/) in `packages.json` or
 
     </html>
 
-Note: even simpler you could just skip npm and grab the latest via:
+Note: even simpler you could just skip `npm` and grab the latest via:
 
     <script type="text/javascript" src="https://cdn.gethue.com/components/SqlScratchpadWebComponent.js"></script>
 
 
-Above expects a running Hue or [Compose](https://github.com/gethue/compose) APIs on http://locahost:8005 as the middleware between your Data Warehouse and client.
+Above expects a running Hue or [Compose](https://github.com/gethue/compose) APIs on [http://locahost:8005](http://locahost:8005) as the middleware between your Data Warehouse and client.
 
 Note: if using Hue, it currently temporarily requires this ini settings:
 
     [desktop]
     cors_enabled=true
-
-!["SQL Scratchpad"](https://cdn.gethue.com/uploads/2021/05/sql-scratchpad-v0.5.png)

docs/docs-site/content/developer/development/_index.md

@@ -12,7 +12,7 @@ This section goes into greater detail on how to build and reuse the components o
 
 ### Dependencies
 
-* The OS specific install instructions are listed in the [install guide](/administrator/installation/dependencies/)
+* The OS specific packages are listed in the [install guide](/administrator/installation/dependencies/)
 * Python 3.6+ and Django 3 (or Python 2.7 with Django 1.11)
 * Vue.js 3
 * Node.js ([14.0+](https://deb.nodesource.com/setup_10.x))