Add documentation on how to use Lens Extension Generator (#1411)

* Add generator docs

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

* 'Welcome' > 'You are welcome to ...'

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

* Add missing backslash

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

* Move Generator section to Extension Guides

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

docs/extensions/get-started/your-first-extension.md

@@ -1,5 +1,11 @@
 # Your First Extension
 
+We recommend to always use [Yeoman generator for Lens Extension](https://github.com/lensapp/generator-lens-ext) to start new extension project. [Read the generator guide here](../guides/generator.md).
+
+If you want to setup the project manually, please continue reading.
+
+## First Extension
+
 In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.
 
 ## Install the Extension

docs/extensions/guides/generator.md

@@ -0,0 +1,65 @@
+# New Extension Project with Generator
+
+The [Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) scaffolds a project ready for development. Install Yeoman and Lens Extension Generator with:
+
+```bash
+npm install -g yo generator-lens-ext
+```
+
+Run the generator and fill out a few fields for a TypeScript project:
+
+```bash
+yo lens-ext
+# ? What type of extension do you want to create? New Extension (TypeScript)
+# ? What's the name of your extension? my-first-lens-ext
+# ? What's the description of your extension? My hello world extension
+# ? What's your extension's publisher name? @my-org/my-first-lens-ext
+# ? Initialize a git repository? Yes
+# ? Install dependencies after initialization? Yes
+# ? Which package manager to use? yarn
+# ? symlink created extension folder to ~/.k8slens/extensions (mac/linux) or :User
+s\<user>\.k8slens\extensions (windows)? Yes
+```
+
+Start webpack, which watches the `my-first-lens-ext` folder.
+
+```bash
+cd my-first-lens-ext
+npm start # start the webpack server in watch mode
+```
+
+Then, open Lens, you should see a Hello World item in the menu:
+
+![Hello World](images/hello-world.png)
+
+## Developing the Extension
+
+Try to change `my-first-lens-ext/renderer.tsx` to "Hello Lens!":
+
+```tsx
+clusterPageMenus = [
+    {
+        target: { pageId: "hello" },
+        title: "Hello Lens",
+        components: {
+            Icon: ExampleIcon,
+        }
+    }
+]
+```
+
+Then, Reload Lens by CMD+R (Mac) / Ctrl+R (Linux/Windows), you should see the menu item text changes:
+
+![Hello World](images/hello-lens.png)
+
+## Debugging the Extension
+
+[Testing](../testing-and-publishing/testing.md)
+
+## Next steps
+
+You can take a closer look at [Common Capabilities](../capabilities/common-capabilities.md) of extension, how to [style](../capabilities/styling.md) the extension. Or the [Extension Anatomy](anatomy.md).
+
+You are welcome to raise an [issue](https://github.com/lensapp/generator-lens-ext/issues) for Lens Extension Generator, if you find problems, or have feature requests.
+
+The source code of the generator is hosted at [Github](https://github.com/lensapp/generator-lens-ext)

mkdocs.yml

@@ -32,6 +32,7 @@ nav:
       - Overview: extensions/guides/README.md
       - Main Extension: extensions/guides/main-extension.md
       - Renderer Extension: extensions/guides/renderer-extension.md
+      - Generator: extensions/guides/generator.md
     - Testing and Publishing:
       - Testing Extensions: extensions/testing-and-publishing/testing.md
       - Publishing Extensions: extensions/testing-and-publishing/publishing.md