diff --git a/docusaurus/docs/extensions/extensions-getting-started.md b/docusaurus/docs/extensions/extensions-getting-started.md index 39ee83c304..f02546f1d3 100644 --- a/docusaurus/docs/extensions/extensions-getting-started.md +++ b/docusaurus/docs/extensions/extensions-getting-started.md @@ -55,7 +55,7 @@ the parent folder. Go ahead and run the following command to create a new extension: ```sh -yarn create @rancher/pkg test +yarn create @rancher/pkg test [OPTIONS] ``` This will create a new UI Package in the `./pkg/test` folder. @@ -115,13 +115,20 @@ nothing other than that! You should now be able to run the UI again with: ```sh -yarn dev +API= yarn dev ``` -Open a web browser to https://127.0.0.1:8005 and you'll see a new 'Example' nav item in the top-level slide-in menu. +Open a web browser to https://127.0.0.1:8005 and you'll see a new 'MyProductName' nav item in the top-level slide-in menu. +
+ +![MyProductName Nav Item](./screenshots/global-nav.png) + +
> Note: You should be able to make changes to the extension and the UI will hot-reload and update in the browser. +To further develop a product, add new pages and add new types here's an [example](./usecases/top-level-product.md). + ## Building the Extension Up until now, we've run the extension inside of the skeleton application - this is the developer workflow. @@ -136,7 +143,7 @@ This will build the extension as a Vue library and the built extension will be p ## Loading Into Rancher -When we run `yarn dev`, our test extension will be automatically loaded into the application - this allows us to develop +When we run `API= yarn dev`, our test extension will be automatically loaded into the application - this allows us to develop the extension with hot-reloading. To test loading the extension dynamically, we can update configuration to tell Rancher not to include our extension. To do this, create a new `.env` file in the root `test-app` folder, and add these contents: @@ -150,7 +157,7 @@ If necessary, bring in the environment variables by running `source .env`. Now, run the UI with: ```sh -yarn dev +API= yarn dev ``` Open a web browser to https://127.0.0.1:8005 and you'll see that the Example nav item is not present - since the extension was not loaded. @@ -209,6 +216,30 @@ We have created a workflow for [Github Actions](https://docs.github.com/en/actio In order to have a Helm repository you will need to create the (`gh-pages`) on your Github repository. +1. Go to the repository of the extension and click the `Settings` tab in the top navigation bar. + +
+ +![Repo Settings Tab](./screenshots/repo-settings-tab.png) + +
+ +2. Then on the left navigation bar of the settings page click the `Pages` tab. + +
+ +![Repo Pages Tab](./screenshots/repo-pages-tab.png) + +
+ +3. Lastly, select `GitHub Actions` from the `Source` dropdown. + +
+ +![Repo Pages Dropdown](./screenshots/repo-pages-dropdown.png) + +
+ ### Adding the Release Workflow To add the workflow to your extension, use the `-w` option when running the `@rancher/pkg` script. For instance: diff --git a/docusaurus/docs/extensions/screenshots/global-nav.png b/docusaurus/docs/extensions/screenshots/global-nav.png new file mode 100644 index 0000000000..db1f7322a9 Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/global-nav.png differ diff --git a/docusaurus/docs/extensions/screenshots/repo-pages-dropdown.png b/docusaurus/docs/extensions/screenshots/repo-pages-dropdown.png new file mode 100644 index 0000000000..6d61f130f3 Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/repo-pages-dropdown.png differ diff --git a/docusaurus/docs/extensions/screenshots/repo-pages-tab.png b/docusaurus/docs/extensions/screenshots/repo-pages-tab.png new file mode 100644 index 0000000000..75088ffb36 Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/repo-pages-tab.png differ diff --git a/docusaurus/docs/extensions/screenshots/repo-settings-tab.png b/docusaurus/docs/extensions/screenshots/repo-settings-tab.png new file mode 100644 index 0000000000..1078b84e2f Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/repo-settings-tab.png differ