Skip to content

Fetch latest version of @gitlab/svgs package

Sarah German requested to merge 116-gitlab-svgs-latest into main

What does this MR do and why?

Closes #116 (closed).

We should always fetch the latest version of @gitlab/svgs for use in the Hugo icon shortcode. Contributors expect all SVGs to be available on the Docs site immediately when they're added to the main SVGs project.

One semi-awkward thing about this is that we still have to pull down a copy of @gitlab/svgs via package.json because it's required for @gitlab/ui. So we end up with two copies:

  1. whatever version package.json specifies, for @gitlab/ui components to use
  2. the latest version via the bash script, for use in Hugo shortcodes

This is a little weird, but I think it's the best way to solve the problem. We don't have to worry about the package.json version very much since it's not what controls what's available for contributors to use in docs content, it just needs to be in sync with gitlab/ui (and yarn does this for us).

This MR also adjusts the error message that appears when using an invalid icon. Because we now pull the latest version, we can refer people to https://gitlab-org.gitlab.io/gitlab-svgs/ rather than list all the icons we've downloaded.

Screenshots

before after
image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Clear out the existing node modules directory: rm -rf node_modules
  3. Run make setup
  4. Run the site: make view

SVG icons should appear as expected. We include these SVGs in three different ways:

  1. Pages with icons in regular content, via the Hugo icon shortcode:
  1. Icons in Vue components (e.g, the caret in the Versions dropdown, the hamburger icon for the mobile navigation).

  2. Icons used in CSS, like the icons in Alert boxes: http://localhost:1313/shortcodes/

These should all still work as they do now.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Hiru Fernando

Merge request reports

Loading