Fetch latest version of @gitlab/svgs package
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:
- whatever version package.json specifies, for
@gitlab/ui
components to use - 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 |
---|---|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Clear out the existing node modules directory: rm -rf node_modules
-
Run make setup
-
Run the site: make view
SVG icons should appear as expected. We include these SVGs in three different ways:
- Pages with icons in regular content, via the Hugo
icon
shortcode:
- http://localhost:1313/user/compliance/compliance_center/compliance_violations_report/#severity-levels
- http://localhost:1313/security/tokens/#available-scopes
- http://localhost:1313/user/group/epics/epic_boards/
-
Icons in Vue components (e.g, the caret in the Versions dropdown, the hamburger icon for the mobile navigation).
-
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.
-
I have evaluated the MR acceptance checklist for this merge request.