diff options
| -rw-r--r-- | README.md | 118 | ||||
| -rw-r--r-- | content/_data/default-nav.yaml | 6 | ||||
| -rw-r--r-- | content/_data/runner-nav.yaml | 2 | ||||
| -rw-r--r-- | content/frontend/shared/components/gl_icon.vue | 60 | ||||
| -rw-r--r-- | content/frontend/shared/constants.js | 3 | ||||
| -rw-r--r-- | lib/filters/icons.rb | 2 | ||||
| -rw-r--r-- | lib/helpers/icons_helper.rb | 2 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | rollup.config.js | 2 | ||||
| -rw-r--r-- | spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap | 7 | ||||
| -rw-r--r-- | spec/frontend/shared/components/gl_icon_spec.js | 77 | ||||
| -rw-r--r-- | yarn.lock | 19 |
12 files changed, 236 insertions, 63 deletions
@@ -83,15 +83,15 @@ One way is to use RVM: 1. [Install RVM](https://rvm.io/rvm/install) 1. Install the latest Ruby: - ```sh - rvm install 2.6.5 - ``` + ```shell + rvm install 2.6.5 + ``` 1. Use the newly installed Ruby: - ```sh - rvm use 2.6.5 - ``` + ```shell + rvm use 2.6.5 + ``` Check your Ruby version with `ruby --version`. Also check the bundled Bundler version with `bundle --version`. You will see `Bundler version 1.17.3`. @@ -106,15 +106,15 @@ One way is to use NVM: 1. [Install NVM](https://github.com/nvm-sh/nvm#installation-and-update) 1. Install the latest Node: - ```sh - nvm install node - ``` + ```shell + nvm install node + ``` 1. Use the newly installed Node: - ```sh - nvm use node - ``` + ```shell + nvm use node + ``` Check your Node version with `node -v`. @@ -128,9 +128,9 @@ Check your Yarn version with `yarn -v`. 1. Install node dependences in the `node_modules` folder: - ```sh - yarn install - ``` + ```shell + yarn install + ``` ## Install Nanoc's dependencies @@ -140,15 +140,15 @@ Now let's make Bundler deal with the dependencies defined in the 1. Open a terminal and navigate to the GitLab Docs repo 1. Switch to Ruby using RVM: - ```sh - rvm use 2.6.5 - ``` + ```shell + rvm use 2.6.5 + ``` 1. Run: - ```sh - bundle install - ``` + ```shell + bundle install + ``` ## Development when contributing to GitLab documentation @@ -170,13 +170,13 @@ create a separate directory to have them all together. For example, let's say the directory will be under your user's home directory. Open a terminal and execute: -```sh +```shell mkdir -p ~/dev/gitlab ``` Once you do that, navigate to the directory you'd like the repos to be cloned: -```sh +```shell cd ~/dev/gitlab/ ``` @@ -184,13 +184,13 @@ Then, it's time to clone the needed repositories. 1. First of all, clone the docs website repository: - ```sh - ## Using SSH (for members that have Developer access) - git clone git@gitlab.com:gitlab-org/gitlab-docs.git + ```shell + ## Using SSH (for members that have Developer access) + git clone git@gitlab.com:gitlab-org/gitlab-docs.git - ## Using HTTPS (for external contributors) - git clone https://gitlab.com/gitlab-org/gitlab-docs.git - ``` + ## Using HTTPS (for external contributors) + git clone https://gitlab.com/gitlab-org/gitlab-docs.git + ``` 1. Then, clone the repositories you wish to contribute changes to the documentation. For **GitLab contributors**, that do not have Developer access to the projects, @@ -198,26 +198,26 @@ Then, it's time to clone the needed repositories. and then clone them by using your forked version (replace `<username>` with your own username): - ```sh - ## Using HTTPS (for members that do not have Developer access) + ```shell + ## Using HTTPS (for members that do not have Developer access) - git clone https://gitlab.com/<username>/gitlab.git - git clone https://gitlab.com/<username>/gitlab-runner.git - git clone https://gitlab.com/<username>/omnibus-gitlab.git - git clone https://gitlab.com/<username>/gitlab.git charts - ``` + git clone https://gitlab.com/<username>/gitlab.git + git clone https://gitlab.com/<username>/gitlab-runner.git + git clone https://gitlab.com/<username>/omnibus-gitlab.git + git clone https://gitlab.com/<username>/gitlab.git charts + ``` - For members that have Developer access (usually the **GitLab Team members**), - clone the required repos using SSH: + For members that have Developer access (usually the **GitLab Team members**), + clone the required repos using SSH: - ```sh - ## Using SSH (for members that have Developer access) + ```shell + ## Using SSH (for members that have Developer access) - git clone git@gitlab.com:gitlab-org/gitlab.git - git clone git@gitlab.com:gitlab-org/gitlab-runner.git - git clone git@gitlab.com:gitlab-org/omnibus-gitlab.git - git clone git@gitlab.com:gitlab-org/charts/gitlab.git charts - ``` + git clone git@gitlab.com:gitlab-org/gitlab.git + git clone git@gitlab.com:gitlab-org/gitlab-runner.git + git clone git@gitlab.com:gitlab-org/omnibus-gitlab.git + git clone git@gitlab.com:gitlab-org/charts/gitlab.git charts + ``` ### Create the content symlinks @@ -231,18 +231,18 @@ the directory that holds the documentation content. 1. Open a terminal and navigate to the directory where gitlab-docs was cloned. 1. For each one of the products, create the symlink: - ```sh - ln -s ~/dev/gitlab/gitlab/doc ~/dev/gitlab/gitlab-docs/content/ee - ln -s ~/dev/gitlab/omnibus-gitlab/doc ~/dev/gitlab/gitlab-docs/content/omnibus - ln -s ~/dev/gitlab/gitlab-runner/docs ~/dev/gitlab/gitlab-docs/content/runner - ln -s ~/dev/gitlab/charts/doc ~/dev/gitlab/gitlab-docs/content/charts - ``` + ```shell + ln -s ~/dev/gitlab/gitlab/doc ~/dev/gitlab/gitlab-docs/content/ee + ln -s ~/dev/gitlab/omnibus-gitlab/doc ~/dev/gitlab/gitlab-docs/content/omnibus + ln -s ~/dev/gitlab/gitlab-runner/docs ~/dev/gitlab/gitlab-docs/content/runner + ln -s ~/dev/gitlab/charts/doc ~/dev/gitlab/gitlab-docs/content/charts + ``` 1. Check if the symlinks were successfully created: - ```sh - ls -la content/ - ``` + ```shell + ls -la content/ + ``` If they're there, we're good to go! @@ -254,7 +254,7 @@ commands above. Run the following command to bring the embedded web server up: -```sh +```shell bundle exec nanoc live ``` @@ -264,7 +264,7 @@ content of the docs, will be reloaded automatically. To preview the site on another port, use: -```sh +```shell bundle exec nanoc live -p 3004 ``` @@ -284,7 +284,7 @@ default `http://127.0.0.1` to your computer's Once you know what's your computer's private IPv4, use the flag `-o`. For example, let's say your current IPv4 address is `192.168.0.105`: -```sh +```shell bundle exec nanoc live -o 192.168.0.105 ``` @@ -302,7 +302,7 @@ If you want to just contribute to the docs website, and not the content, you can use the following command to automatically pull the docs content in order to have something to preview: -```sh +```shell bundle exec rake pull_repos ``` @@ -312,7 +312,7 @@ in `content/`. You can then [preview the website](#preview-the-docs-website). If you want to force-delete the `tmp/` and `content/` folders so the task will run without manual intervention, run: -```sh +```shell RAKE_FORCE_DELETE=true rake pull_repos ``` diff --git a/content/_data/default-nav.yaml b/content/_data/default-nav.yaml index 370ce38f..4765eac4 100644 --- a/content/_data/default-nav.yaml +++ b/content/_data/default-nav.yaml @@ -82,7 +82,7 @@ sections: - category_title: Epics category_url: 'user/group/epics/' ee_only: true - ee_tier: 'GitLab Ultimate and GitLab.com Gold' + ee_tier: 'GitLab Premium, GitLab.com Silver, and higher tiers' - category_title: Dependency proxy category_url: 'user/group/dependency_proxy/' ee_only: true @@ -147,6 +147,10 @@ sections: doc_url: 'user/application_security/license_compliance/' ee_only: true ee_tier: 'GitLab Ultimate and GitLab.com Gold' + - doc_title: Compliance Dashboard + doc_url: 'user/application_security/compliance_dashboard/' + ee_only: true + ee_tier: 'GitLab Ultimate and GitLab.com Gold' - category_title: Badges category_url: 'user/project/badges.html' - category_title: Bulk editing diff --git a/content/_data/runner-nav.yaml b/content/_data/runner-nav.yaml index 851a6606..4d47e383 100644 --- a/content/_data/runner-nav.yaml +++ b/content/_data/runner-nav.yaml @@ -142,5 +142,5 @@ sections: - category_title: Reviewing GitLab Runner category_url: 'development/reviewing-gitlab-runner.html' - - section_title: Best Practice + - section_title: Best Practices section_url: 'best_practice/' diff --git a/content/frontend/shared/components/gl_icon.vue b/content/frontend/shared/components/gl_icon.vue new file mode 100644 index 00000000..d40aded1 --- /dev/null +++ b/content/frontend/shared/components/gl_icon.vue @@ -0,0 +1,60 @@ +<script> +import data from '@gitlab/svgs/dist/icons.json'; +import iconSizeOptions from '../constants'; + +let iconValidator = () => true; + +const { icons } = data; +iconValidator = value => { + if (icons.includes(value)) { + return true; + } + // eslint-disable-next-line no-console + console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`); + return false; +}; + +/** This is a re-usable vue component for rendering a svg sprite icon + * @example + * <icon + * name="retry" + * :size="32" + * class="top" + * /> + */ +export default { + props: { + name: { + type: String, + required: true, + validator: iconValidator, + }, + size: { + type: Number, + required: false, + default: 16, + validator: value => iconSizeOptions.includes(value), + }, + className: { + type: String, + required: false, + default: '', + }, + }, + + computed: { + iconSizeClass() { + return this.size ? `s${this.size}` : ''; + }, + iconHref() { + return `#${this.name}`; + }, + }, +}; +</script> + +<template> + <svg :class="['gl-icon', iconSizeClass, className]"> + <use :href="iconHref" /> + </svg> +</template> diff --git a/content/frontend/shared/constants.js b/content/frontend/shared/constants.js new file mode 100644 index 00000000..ad764b74 --- /dev/null +++ b/content/frontend/shared/constants.js @@ -0,0 +1,3 @@ +const iconSizeOptions = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72]; + +export default iconSizeOptions; diff --git a/lib/filters/icons.rb b/lib/filters/icons.rb index 9b2292db..d695b7a2 100644 --- a/lib/filters/icons.rb +++ b/lib/filters/icons.rb @@ -28,6 +28,6 @@ class IconsFilter < Nanoc::Filter end def generate(icon, size, css_class) - sprite_icon(icon, size, css_class) + icon(icon, size, css_class) end end diff --git a/lib/helpers/icons_helper.rb b/lib/helpers/icons_helper.rb index 9920e4f5..5c8410cc 100644 --- a/lib/helpers/icons_helper.rb +++ b/lib/helpers/icons_helper.rb @@ -12,7 +12,7 @@ module Nanoc::Helpers %[<div class="d-none">#{read_file(sprite_path)}</div>] end - def sprite_icon(icon_name, size, css_class) + def icon(icon_name, size = nil, css_class = nil) unless known_sprites.include?(icon_name) exception = ArgumentError.new("#{icon_name} is not a known icon in @gitlab-org/gitlab-svg") raise exception diff --git a/package.json b/package.json index 5b9f571a..961678e6 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@gitlab/eslint-config": "^1.6.0", + "@rollup/plugin-json": "^4.0.2", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^24.9.0", diff --git a/rollup.config.js b/rollup.config.js index 8ce95b44..a53496c1 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,6 +2,7 @@ const importResolver = require('rollup-plugin-import-resolver'); const commonjs = require('rollup-plugin-commonjs'); const vue = require('rollup-plugin-vue'); const babel = require('rollup-plugin-babel'); +const json = require('@rollup/plugin-json'); const glob = require('glob'); function mapDirectory(file) { @@ -18,6 +19,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map(file => ({ plugins: [ commonjs(), babel(), + json(), vue(), importResolver({ alias: { diff --git a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap new file mode 100644 index 00000000..be478d99 --- /dev/null +++ b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GlIcon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = ` +"<svg class=\\"gl-icon s8\\"> + <use href=\\"#check-circle\\"></use> +</svg>" +`; diff --git a/spec/frontend/shared/components/gl_icon_spec.js b/spec/frontend/shared/components/gl_icon_spec.js new file mode 100644 index 00000000..81525e87 --- /dev/null +++ b/spec/frontend/shared/components/gl_icon_spec.js @@ -0,0 +1,77 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import GlIcon from '../../../../content/frontend/shared/components/gl_icon.vue'; +import iconSizeOptions from '../../../../content/frontend/shared/constants'; + +const ICONS_PATH = '/path/to/icons.svg'; +const TEST_SIZE = 8; +const TEST_NAME = 'check-circle'; + +const localVue = createLocalVue(); + +jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg'); + +describe('GlIcon component', () => { + let wrapper; + let consoleSpy; + + const createComponent = props => { + wrapper = shallowMount(GlIcon, { + propsData: { + size: TEST_SIZE, + name: TEST_NAME, + ...props, + }, + localVue, + }); + }; + + const validateSize = size => GlIcon.props.size.validator(size); + const validateName = name => GlIcon.props.name.validator(name); + + afterEach(() => { + wrapper.destroy(); + + if (consoleSpy) { + consoleSpy.mockRestore(); + } + }); + + describe('when created', () => { + beforeEach(() => { + createComponent(); + }); + + it(`shows svg class "s${TEST_SIZE}" and path "${ICONS_PATH}#${TEST_NAME}"`, () => { + expect(wrapper.html()).toMatchSnapshot(); + }); + }); + + describe('size validator', () => { + const maxSize = Math.max(...iconSizeOptions); + + it('fails with size outside options', () => { + expect(validateSize(maxSize + 10)).toBe(false); + }); + + it('passes with size in options', () => { + expect(validateSize(maxSize)).toBe(true); + }); + }); + + describe('name validator', () => { + it('fails with name that does not exist', () => { + const badName = `${TEST_NAME}-bogus-zebra`; + consoleSpy = jest.spyOn(console, 'warn').mockImplementation(); + + expect(validateName(badName)).toBe(false); + + expect(consoleSpy).toHaveBeenCalledWith( + `Icon '${badName}' is not a known icon of @gitlab/svgs`, + ); + }); + + it('passes with name that exists', () => { + expect(validateName(TEST_NAME)).toBe(true); + }); + }); +}); @@ -882,6 +882,20 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^13.0.0" +"@rollup/plugin-json@^4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.2.tgz#482185ee36ac7dd21c346e2dbcc22ffed0c6f2d6" + integrity sha512-t4zJMc98BdH42mBuzjhQA7dKh0t4vMJlUka6Fz0c+iO5IVnWaEMiYBy1uBj9ruHZzXBW23IPDGL9oCzBkQ9Udg== + dependencies: + "@rollup/pluginutils" "^3.0.4" + +"@rollup/pluginutils@^3.0.4": + version "3.0.8" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.8.tgz#4e94d128d94b90699e517ef045422960d18c8fde" + integrity sha512-rYGeAc4sxcZ+kPG/Tw4/fwJODC3IXHYDH4qusdN/b6aLw5LPUbzpecYbEJh4sVQGPFJxd2dBU4kc1H3oy9/bnw== + dependencies: + estree-walker "^1.0.1" + "@types/babel-types@*", "@types/babel-types@^7.0.0": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.7.tgz#667eb1640e8039436028055737d2b9986ee336e3" @@ -2289,6 +2303,11 @@ estree-walker@^0.6.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== +estree-walker@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" + integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== + esutils@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" |