diff options
| author | Lin Jen-Shin <godfat@godfat.org> | 2020-01-20 12:47:52 +0300 |
|---|---|---|
| committer | Lin Jen-Shin <godfat@godfat.org> | 2020-01-20 12:47:52 +0300 |
| commit | d5fc7b7340f7f6db6c6da6910d329f040b20cf90 (patch) | |
| tree | b86f559a3c52648399326812d383d1a21cd0374c | |
| parent | ab082d98798d6406205e3a48b57d6bfbb43c4dba (diff) | |
| parent | 770aba2ce07d835b1d055490d87d9a458c5fe674 (diff) | |
Merge branch '384-add-gl-svgs' into 'master'
Make GL SVGs available to use in docs markup
Closes #384
See merge request gitlab-org/gitlab-docs!641
| -rw-r--r-- | .gitlab-ci.yml | 1 | ||||
| -rw-r--r-- | Rules | 1 | ||||
| -rw-r--r-- | content/assets/stylesheets/_variables.scss | 3 | ||||
| -rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 9 | ||||
| -rw-r--r-- | layouts/default.html | 1 | ||||
| -rw-r--r-- | lib/filters/icons.rb | 33 | ||||
| -rw-r--r-- | lib/helpers/icons_helper.rb | 41 | ||||
| -rw-r--r-- | lib/helpers_.rb | 1 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | yarn.lock | 5 |
10 files changed, 97 insertions, 1 deletions
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 629e2a44..1655eb0c 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -53,6 +53,7 @@ before_script: .build_base: &build_base stage: build script: + - yarn install --cache-folder .yarn-cache - bundle exec rake setup_git default - bundle exec nanoc compile -VV # Symlink all README.html to index.html so that we can have clean URLs @@ -82,6 +82,7 @@ compile '/**/*.md' do filter :md_to_html_ext filter :admonition + filter :icons filter :introduced_in if item[:layout].nil? diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 76b29eaa..fc3eca66 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -157,6 +157,9 @@ $badge-gitlab-com: $color-tanuki-light; $badge-gitlab-transparent: rgba(252, 109, 38, .1); $badge-gitlab-com-transparent: rgba(252, 163, 38, .1); +//Icons +$gl-icon-sizes: 8 10 12 14 16 18 24 32 48 72; + // Inline code colors $code-color: rgb(95, 131, 65); $code-background-color: rgba(95, 131, 65, .1); diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index b333f195..348cb947 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1810,3 +1810,12 @@ li { background: $gds-gray-50; border-bottom: 1px solid $gds-gray-200; } + +.gl-icon { + @each $size in $gl-icon-sizes { + &.s#{$size} { + width: #{$size}px; + height: #{$size}px; + } + } +} diff --git a/layouts/default.html b/layouts/default.html index f76195a1..4972bd80 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -5,6 +5,7 @@ <%= render '/canonical_urls.*' %> </head> <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90"> + <%= icons_sprite %> <%= render '/gtm.*' %> <%= render '/header.*' %> <div id="js-version-banner" <%= 'data-is-outdated' if show_version_banner? %> data-latest-version-url="<%= @item.identifier.without_ext + '.html' %>" data-archives-url="/archives/"></div> diff --git a/lib/filters/icons.rb b/lib/filters/icons.rb new file mode 100644 index 00000000..9b2292db --- /dev/null +++ b/lib/filters/icons.rb @@ -0,0 +1,33 @@ +# +# This allows us to add icons to our documentation using standard Markdown +# +# Usage: `**{<icon-name>, <optional-size>, <optional-class>}**` +# +# <icon-name> - All icons in gitlab-svgs are supported: https://gitlab-org.gitlab.io/gitlab-svgs/ +# <optional-size> - Supported sizes (default: 16) +# <optional-class> - Custom CSS class can be added for styling purposes. +# +# Examples: +# `**{admin}**` +# `**{admin, 32}**` +# `**{admin, 32, some-class}**` +# +class IconsFilter < Nanoc::Filter + identifier :icons + + ICON_PATTERN = /\{\s*([\w-]+)\s*(?:,\s*(\d+))?\s*(?:,\s*([\w-]+))?\s*\}/.freeze + ICON_HTML_PATTERN = /<strong>#{ICON_PATTERN}<\/strong>/.freeze + ICON_MARKDOWN_PATTERN = /\*\*#{ICON_PATTERN}\*\*/.freeze + + def run(content, params = {}) + content.gsub(ICON_HTML_PATTERN) { generate($1, $2, $3) } + end + + def run_from_markdown(content) + content.gsub(ICON_MARKDOWN_PATTERN) { generate($1, $2, $3) } + end + + def generate(icon, size, css_class) + sprite_icon(icon, size, css_class) + end +end diff --git a/lib/helpers/icons_helper.rb b/lib/helpers/icons_helper.rb new file mode 100644 index 00000000..9920e4f5 --- /dev/null +++ b/lib/helpers/icons_helper.rb @@ -0,0 +1,41 @@ +# frozen_string_literal: true + +require 'json' + +module Nanoc::Helpers + module IconsHelper + extend self + + def icons_sprite + sprite_path = "node_modules/@gitlab/svgs/dist/icons.svg" + + %[<div class="d-none">#{read_file(sprite_path)}</div>] + end + + def sprite_icon(icon_name, size, css_class) + unless known_sprites.include?(icon_name) + exception = ArgumentError.new("#{icon_name} is not a known icon in @gitlab-org/gitlab-svg") + raise exception + end + + svg_class = [ + 'gl-icon', + "s#{size || 16}", + *css_class + ].join(' ') + + %[<svg class="#{svg_class}"><use href="##{icon_name}" /></svg>] + end + + private + + def read_file(path) + root = File.expand_path('../../', __dir__) + File.read("#{root}/#{path}") + end + + def known_sprites + @known_sprites ||= JSON.parse(read_file('node_modules/@gitlab/svgs/dist/icons.json'))['icons'] + end + end +end diff --git a/lib/helpers_.rb b/lib/helpers_.rb index 4fa572fe..90c184f6 100644 --- a/lib/helpers_.rb +++ b/lib/helpers_.rb @@ -4,3 +4,4 @@ include Nanoc::Helpers::Rendering include Nanoc::Helpers::ChildParentBetter include Nanoc::Helpers::EditOnGitLab include Nanoc::Helpers::VersionsDropdown +include Nanoc::Helpers::IconsHelper diff --git a/package.json b/package.json index 98dda510..bb048727 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "vue-template-compiler": "^2.6.10" }, "dependencies": { - "vue": "^2.6.10" + "vue": "^2.6.10", + "@gitlab/svgs": "^1.85.0" } } @@ -830,6 +830,11 @@ eslint-plugin-promise "^4.1.1" eslint-plugin-vue "^5.0.0" +"@gitlab/svgs@^1.85.0": + version "1.88.0" + resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.88.0.tgz#0a9b72e9591264fcac592ebf9944665c70f48de2" + integrity sha512-ZgepCvZoB/lFdgttHtu8+9YlRZlVc9MnHDbbqcQCFBvrfOjY1wq12ikxnNbwKj8QNA47TRJvSS0TkHgMWYnbsA== + "@jest/console@^24.7.1", "@jest/console@^24.9.0": version "24.9.0" resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0" |