diff options
| -rw-r--r-- | CONTRIBUTING.md | 22 | ||||
| -rw-r--r-- | docs/customization/build.md | 54 | ||||
| -rw-r--r-- | docs/guide/components/buttons/index.md | 6 | ||||
| -rw-r--r-- | docs/guide/components/file-upload/readme.md | 2 | ||||
| -rw-r--r-- | docs/guide/components/table/index.md | 4 | ||||
| -rw-r--r-- | docs/guide/components/toasts/index.md | 5 | ||||
| -rw-r--r-- | docs/guide/guidelines/colors.md | 14 | ||||
| -rw-r--r-- | docs/guide/guidelines/motion.md | 4 | ||||
| -rw-r--r-- | docs/guide/unit-testing/readme.md | 4 |
9 files changed, 56 insertions, 59 deletions
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f4027ce28..de8be02d1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -Contributing to WebUI-Vue +# Contributing to WebUI-Vue :+1::tada: First off, thanks for taking the time to contribute! :+1::tada: @@ -7,10 +7,8 @@ The following is a set of guidelines for contributing to the OpenBMC Web UI. ## Table of contents - [Project Setup](#project-setup) -- [Code of Conduct](#code-of-conduct) - [Asking Questions](#asking-questions) - [Submitting Bugs](#submitting-bugs) -- [Request a New Feature](#request-a-new-feature) - [User Research](#user-research) - [Design Reviews](#design-reviews) - [Help Wanted](#help-wanted) @@ -30,7 +28,7 @@ Since we use Gerrit to manage all the code contributions, it is not necessary to create a fork from GitHub. Read more about submitting a code review in the [Code Reviews section](#code-reviews) below. -1. Visit https://gerrit.openbmc-project.xyz/admin/repos/openbmc/webui-vue +1. Visit <https://gerrit.openbmc-project.xyz/admin/repos/openbmc/webui-vue> 2. Clone the repo using the `Clone with commit-msg hook` link - Windows users may need to separate the two commands depending on if they have installed a Bash emulator like `Git for Windows` or `CMDER` or @@ -38,7 +36,7 @@ create a fork from GitHub. Read more about submitting a code review in the ### Install Dependencies -``` +```shell npm install ``` @@ -47,29 +45,29 @@ npm install 1. Create the following file in the root directory - .env.development.local 1. Add the following environment variable - - BASE_URL="https://<BMC IP address or FQDN>"` + - `BASE_URL="https://<BMC IP address or FQDN>"` ### Compile and hot-reload for development -``` +```shell npm run serve ``` ### Run Documentation Locally (Vuepress static site generation) -``` +```shell npm run docs:serve ``` ### Run unit tests -``` +```shell npm run test:unit ``` ### Lint and fix files -``` +```shell npm run lint ``` @@ -82,8 +80,8 @@ The OpenBMC communicates using a mail list and the Discord channel. Although you could create a GitHub issue to ask a question, a better option would be to ask your question using the email list or Discord channel. -- Mail: openbmc@lists.ozlabs.org https://lists.ozlabs.org/listinfo/openbmc -- Discord: https://discord.gg/69Km47zH98 +- Mail: <openbmc@lists.ozlabs.org> <https://lists.ozlabs.org/listinfo/openbmc> +- Discord: <https://discord.gg/69Km47zH98> ### Submitting Bugs diff --git a/docs/customization/build.md b/docs/customization/build.md index 4bdbd50a4..03bccfa34 100644 --- a/docs/customization/build.md +++ b/docs/customization/build.md @@ -19,21 +19,21 @@ modifications to the Web UI. Example `.env.ibm`: -``` +```shell NODE_ENV=production VUE_APP_ENV_NAME=ibm ``` ## Store -:::tip [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain -the application's API calls. ::: +**tip** [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain +the application's API calls. 1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/store` :::danger The filename needs - to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store - import in `src/main.js` will resolve to this new file. ::: +2. Create a `<ENV_NAME>.js` file in `src/env/store` **danger** The filename + needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The + store import in `src/main.js` will resolve to this new file. 3. Import the base store 4. Import environment specific store modules 5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` @@ -42,7 +42,7 @@ the application's API calls. ::: Example `src/env/store/ibm.js`: -``` +```js import store from '@/store; //@ aliases to src directory import HmcStore from './Hmc/HmcStore'; @@ -53,17 +53,17 @@ export default store; ## Router -:::tip [Vue Router](https://router.vuejs.org/guide/) determines which pages are -accessible in the UI. ::: +**tip** [Vue Router](https://router.vuejs.org/guide/) determines which pages are +accessible in the UI. 1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/router` :::danger The filename +2. Create a `<ENV_NAME>.js` file in `src/env/router` **danger** The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The - routes import in `src/router/index.js` will resolve to this new file. ::: -3. Define new [routes](https://router.vuejs.org/api/#routes). :::tip Use static + routes import in `src/router/index.js` will resolve to this new file. +3. Define new [routes](https://router.vuejs.org/api/#routes). **tip** Use static imports (over lazy-loading routes) to avoid creating separate JS chunks. - Static imports also helps to keep the total build size down. ::: + Static imports also helps to keep the total build size down. 4. Add default export ## App navigation @@ -76,11 +76,11 @@ in src/components/AppNavigation/AppNavigation.vue. 1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env - file. The AppNavigationMixin import in +2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` + **danger** The filename needs to match the `VUE_APP_ENV_NAME` value defined + in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new - file. ::: + file. 3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each @@ -90,16 +90,15 @@ in src/components/AppNavigation/AppNavigation.vue. ## Theming -:::tip +**tip** [Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) -allows for easy visual customizations. ::: +allows for easy visual customizations. 1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file. -2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` :::danger The - filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env +2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`. **danger** + The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name. - ::: 3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about @@ -111,7 +110,7 @@ Example for adding custom colors `src/env/assets/styles/_ibm.scss` -``` +```css // Custom theme colors $primary: rebeccapurple; @@ -123,7 +122,8 @@ $success: lime; 1. Add the same `VUE_APP_ENV_NAME` key value pair to your `env.development.local` file. 2. Use serve script - ``` + + ```shell npm run serve ``` @@ -133,14 +133,14 @@ Run npm build script with vue-cli `--mode` [option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires [corresponding .env file to exist](#setup). -``` +```shell npm run build -- --mode ibm ``` -**OR** +OR pass env variable directly to script -``` +```shell VUE_APP_ENV_NAME=ibm npm run build ``` diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md index 251316ff9..9a4ed658c 100644 --- a/docs/guide/components/buttons/index.md +++ b/docs/guide/components/buttons/index.md @@ -8,12 +8,12 @@ like a link, set the variant value to `link`. [Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) -### Icon only buttons +## Icon only buttons Add `btn-icon-only` class to the button and add `title` attribute to get helper text on hover over the button. -### Enabled buttons +## Enabled buttons  @@ -36,7 +36,7 @@ text on hover over the button. </b-button> ``` -### Disabled buttons +## Disabled buttons  diff --git a/docs/guide/components/file-upload/readme.md b/docs/guide/components/file-upload/readme.md index e0819a85a..3a2d5ea2a 100644 --- a/docs/guide/components/file-upload/readme.md +++ b/docs/guide/components/file-upload/readme.md @@ -11,7 +11,7 @@ To use this component: [Learn more about the Bootstrap-vue Form File component](https://bootstrap-vue.org/docs/components/form-file) -### Optional properties +## Optional properties - `id`- Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md index 47bc51d86..03df43e27 100644 --- a/docs/guide/components/table/index.md +++ b/docs/guide/components/table/index.md @@ -379,7 +379,7 @@ export default { To add a table dropdown filter: -1. Import the `<table-filter> `component and TableFilterMixin. +1. Import the `<table-filter>` component and `TableFilterMixin`. 1. Add a filters prop to the `<table-filters>` component. This prop should be an array of filter groups–each required to have a key, label, and values prop. @@ -458,7 +458,7 @@ once. To add table batch actions: -1. Import the `<table-toolbar> `component and BVTableSelectableMixin +1. Import the `<table-toolbar>` component and `BVTableSelectableMixin` 1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the table. The table will emit a `@row-selected` event. Use the `onRowSelected` mixin method as a callback and provide the `$event` as the first argument and diff --git a/docs/guide/components/toasts/index.md b/docs/guide/components/toasts/index.md index b19643de9..94ebaf685 100644 --- a/docs/guide/components/toasts/index.md +++ b/docs/guide/components/toasts/index.md @@ -11,7 +11,7 @@ message will auto-hide after 10 seconds. The user must manually dismiss the provides a simple API that generates a toast message that meets the transition guidelines. -<img src="./toast.png" alt="Toast message examples" style="max-width:350px"> + ```js{5} // Sample method from Reboot BMC page @@ -51,8 +51,7 @@ object with a `title` property to change the default toast title. Include a application. Include a `timestamp` property, set to true, to include a timestamp in the toast. -<img src="./toast-options.png" alt="Toast message options example" -style="max-width:350px"> + ```js diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md index 6ddcfeee6..4312bf432 100644 --- a/docs/guide/guidelines/colors.md +++ b/docs/guide/guidelines/colors.md @@ -13,23 +13,23 @@ colors to override default styles set by the Bootstrap library. ## Grays -<colors-grays/> +`<colors-grays/>` ## Blues -<colors-blues/> +`<colors-blues/>` ## Greens -<colors-greens/> +`<colors-greens/>` ## Reds -<colors-reds/> +`<colors-reds/>` ## Yellows -<colors-yellows/> +`<colors-yellows/>` ## All Colors @@ -38,7 +38,7 @@ colors to override default styles set by the Bootstrap library. `theme-colors` map colors. [Learn more about the Bootstrap color maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors). -<colors-all/> +`<colors-all/>` ## Theme Colors @@ -48,4 +48,4 @@ component. [Learn more about the Bootstrap theme-colors maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors). -<colors-theme/> +`<colors-theme/>` diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md index 8ec9f5b7f..2f0564def 100644 --- a/docs/guide/guidelines/motion.md +++ b/docs/guide/guidelines/motion.md @@ -23,7 +23,7 @@ for expressive motion. ### Easing tokens -``` +```css $standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); $standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); $entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); @@ -42,7 +42,7 @@ longer the animation takes. ### Duration tokens -``` +```css $duration--fast-01: 70ms; //Micro-interactions such as button and toggle $duration--fast-02: 110ms; //Micro-interactions such as fade $duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements diff --git a/docs/guide/unit-testing/readme.md b/docs/guide/unit-testing/readme.md index 761837686..fe879f745 100644 --- a/docs/guide/unit-testing/readme.md +++ b/docs/guide/unit-testing/readme.md @@ -10,8 +10,8 @@ the internals of the component. > not too few, but just enough. Thousands of tests for a small application can > be as damaging to development time as no tests. > -> -- <cite>Ed Yerburgh, Testing Vue Applications (New York: Manning -> Publications, 2019)</cite> +> -- Ed Yerburgh, Testing Vue Applications (New York: Manning +> Publications, 2019) ## Test Libraries |