Skip to content

Add shortcode for GitLab SVGs

Sarah German requested to merge 12-gitlab-svgs into main

What does this MR do and why?

Adds a shortcode for GitLab SVG icons.

Part 1 of 2 to close #12 (closed)

How to set up and validate locally

You should clone this project to a separate directory from your regular GitLab projects, as it will overwrite docs content files in the gitlab, gitlab-runner, etc directories at the same level.

  1. Check out this branch: git fetch origin 12-gitlab-svgs && git checkout 12-gitlab-svgs
  2. Configure a local GitLab Docs Hugo environment and start the preview server: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  3. Review the Shortcode reference page, it now includes Icon: http://localhost:1313/shortcodes/.
  4. Edit or add a regular page, and try creating a few icons or modifying existing ones.

For example, you could edit this page locally and make this change:

Old format:

- **Open live environment** (**{external-link}**) - Opens the URL of the application deployed in production
- **Monitoring** (**{chart}**) - Opens the metrics page where Prometheus collects data

New format:

- **Open live environment** ({{< icon name="external-link" >}}) - Opens the URL of the application deployed in production
- **Monitoring** ({{< icon name="chart" >}}) - Opens the metrics page where Prometheus collects data

View the page locally: http://localhost:1313/topics/autodevops/cloud_deployments/auto_devops_with_eks/

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 Sarah German

Merge request reports