2018-11-08 19:23:39 +05:30
---
2021-01-03 14:25:43 +05:30
stage: none
group: Documentation Guidelines
2022-11-25 23:54:43 +05:30
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
2018-11-08 19:23:39 +05:30
description: Learn how to contribute to GitLab Documentation.
---
2022-10-11 01:57:18 +05:30
# GitLab documentation
2018-11-08 19:23:39 +05:30
2022-05-07 20:08:51 +05:30
The GitLab documentation is [intended as the single source of truth (SSOT) ](https://about.gitlab.com/handbook/documentation/ ) for information about how to configure, use, and troubleshoot GitLab. The documentation contains use cases and usage instructions for every GitLab feature, organized by product area and subject. This includes topics and workflows that span multiple GitLab features and the use of GitLab with other applications.
2018-11-08 19:23:39 +05:30
2020-05-24 23:13:21 +05:30
In addition to this page, the following resources can help you craft and contribute to documentation:
2019-02-15 15:39:39 +05:30
2021-01-29 00:20:46 +05:30
- [Style Guide ](styleguide/index.md ) - What belongs in the docs, language guidelines, Markdown standards to follow, links, and more.
2023-03-04 22:38:38 +05:30
- [Topic types ](topic_types/index.md ) - Learn about the different types of topics.
2019-12-21 20:55:43 +05:30
- [Documentation process ](workflow.md ).
- [Markdown Guide ](../../user/markdown.md ) - A reference for all Markdown syntax supported by GitLab.
- [Site architecture ](site_architecture/index.md ) - How < https: // docs . gitlab . com > is built.
2020-05-24 23:13:21 +05:30
- [Documentation for feature flags ](feature_flags.md ) - How to write and update documentation for GitLab features deployed behind feature flags.
2018-11-08 19:23:39 +05:30
2019-07-31 22:56:46 +05:30
## Source files and rendered web locations
2018-11-08 19:23:39 +05:30
2022-06-21 17:19:12 +05:30
Documentation for GitLab, GitLab Runner, GitLab Operator, Omnibus GitLab, and Charts is published to < https: // docs . gitlab . com > . Documentation for GitLab is also published within the application at `/help` on the domain of the GitLab instance.
2019-12-21 20:55:43 +05:30
At `/help` , only help for your current edition and version is included. Help for other versions is available at < https: // docs . gitlab . com / archives /> .
2018-11-08 19:23:39 +05:30
2019-07-31 22:56:46 +05:30
The source of the documentation exists within the codebase of each GitLab application in the following repository locations:
2018-11-08 19:23:39 +05:30
2019-02-15 15:39:39 +05:30
| Project | Path |
| --- | --- |
2021-09-04 01:27:46 +05:30
| [GitLab ](https://gitlab.com/gitlab-org/gitlab/ ) | [`/doc` ](https://gitlab.com/gitlab-org/gitlab/-/tree/master/doc ) |
| [GitLab Runner ](https://gitlab.com/gitlab-org/gitlab-runner/ ) | [`/docs` ](https://gitlab.com/gitlab-org/gitlab-runner/-/tree/main/docs ) |
2020-07-28 23:09:34 +05:30
| [Omnibus GitLab ](https://gitlab.com/gitlab-org/omnibus-gitlab/ ) | [`/doc` ](https://gitlab.com/gitlab-org/omnibus-gitlab/tree/master/doc ) |
2019-12-21 20:55:43 +05:30
| [Charts ](https://gitlab.com/gitlab-org/charts/gitlab ) | [`/doc` ](https://gitlab.com/gitlab-org/charts/gitlab/tree/master/doc ) |
2022-06-21 17:19:12 +05:30
| [GitLab Operator ](https://gitlab.com/gitlab-org/cloud-native/gitlab-operator ) | [`/doc` ](https://gitlab.com/gitlab-org/cloud-native/gitlab-operator/-/tree/master/doc ) |
2018-11-08 19:23:39 +05:30
2019-02-15 15:39:39 +05:30
Documentation issues and merge requests are part of their respective repositories and all have the label `Documentation` .
2020-01-01 13:55:28 +05:30
### Branch naming
The [CI pipeline for the main GitLab project ](../pipelines.md ) is configured to automatically
run only the jobs that match the type of contribution. If your contribution contains
2021-02-22 17:27:13 +05:30
**only** documentation changes, then only documentation-related jobs run, and
the pipeline completes much faster than a code contribution.
2020-01-01 13:55:28 +05:30
2022-10-11 01:57:18 +05:30
If you are submitting documentation-only changes to Omnibus, Charts, or Operator,
2020-01-01 13:55:28 +05:30
the fast pipeline is not determined automatically. Instead, create branches for
docs-only merge requests using the following guide:
| Branch name | Valid example |
|:----------------------|:-----------------------------|
| Starting with `docs/` | `docs/update-api-issues` |
| Starting with `docs-` | `docs-update-api-issues` |
| Ending in `-docs` | `123-update-api-issues-docs` |
2019-02-15 15:39:39 +05:30
## Contributing to docs
2018-11-08 19:23:39 +05:30
2019-02-15 15:39:39 +05:30
[Contributions to GitLab docs ](workflow.md ) are welcome from the entire GitLab community.
2018-11-08 19:23:39 +05:30
2022-05-07 20:08:51 +05:30
To ensure that the GitLab docs are current, there are special processes and responsibilities for all [feature changes ](workflow.md ), that is development work that impacts the appearance, usage, or administration of a feature.
2019-02-15 15:39:39 +05:30
2022-05-07 20:08:51 +05:30
However, anyone can contribute [documentation improvements ](workflow.md ) that are not associated with a feature change. For example, adding a new document on how to accomplish a use case that's already possible with GitLab or with third-party tools and GitLab.
2018-11-08 19:23:39 +05:30
## Markdown and styles
2019-09-30 21:07:59 +05:30
[GitLab docs ](https://gitlab.com/gitlab-org/gitlab-docs ) uses [GitLab Kramdown ](https://gitlab.com/gitlab-org/gitlab_kramdown )
2020-06-23 00:09:42 +05:30
as its Markdown rendering engine. See the [GitLab Markdown Guide ](https://about.gitlab.com/handbook/markdown-guide/ ) for a complete Kramdown reference.
2018-11-08 19:23:39 +05:30
2021-01-29 00:20:46 +05:30
Adhere to the [Documentation Style Guide ](styleguide/index.md ). If a style standard is missing, you are welcome to suggest one via a merge request.
2018-11-08 19:23:39 +05:30
2019-07-31 22:56:46 +05:30
## Folder structure and files
2022-04-04 11:22:00 +05:30
See the [Folder structure ](site_architecture/folder_structure.md ) page.
2019-07-31 22:56:46 +05:30
2020-06-23 00:09:42 +05:30
## Metadata
To provide additional directives or useful information, we add metadata in YAML
2020-07-28 23:09:34 +05:30
format to the beginning of each product documentation page (YAML front matter).
All values are treated as strings and are only used for the
[docs website ](site_architecture/index.md ).
### Stage and group metadata
Each page should ideally have metadata related to the stage and group it
belongs to, as well as an information block as described below:
2021-02-22 17:27:13 +05:30
- `stage` : The [Stage ](https://about.gitlab.com/handbook/product/categories/#devops-stages )
2020-07-28 23:09:34 +05:30
to which the majority of the page's content belongs.
- `group` : The [Group ](https://about.gitlab.com/company/team/structure/#product-groups )
to which the majority of the page's content belongs.
- `info` : The following line, which provides direction to contributors regarding
2022-05-07 20:08:51 +05:30
how to contact the Technical Writer associated with the page's stage and
group:
2020-07-28 23:09:34 +05:30
```plaintext
To determine the technical writer assigned to the Stage/Group
associated with this page, see
2022-11-25 23:54:43 +05:30
https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
2020-07-28 23:09:34 +05:30
```
2020-06-23 00:09:42 +05:30
2021-03-11 19:13:27 +05:30
For example:
2020-06-23 00:09:42 +05:30
```yaml
---
2021-03-11 19:13:27 +05:30
stage: Example Stage
group: Example Group
2022-11-25 23:54:43 +05:30
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
2020-06-23 00:09:42 +05:30
---
```
2021-03-11 19:13:27 +05:30
If you need help determining the correct stage, read [Ask for help ](workflow.md#ask-for-help ).
2020-07-28 23:09:34 +05:30
### Redirection metadata
The following metadata should be added when a page is moved to another location:
2020-06-23 00:09:42 +05:30
- `redirect_to` : The relative path and filename (with an `.md` extension) of the
location to which visitors should be redirected for a moved page.
2021-11-11 11:23:49 +05:30
[Learn more ](redirects.md ).
2020-06-23 00:09:42 +05:30
- `disqus_identifier` : Identifier for Disqus commenting system. Used to keep
2022-05-07 20:08:51 +05:30
comments with a page that has been moved to a new URL.
2021-11-11 11:23:49 +05:30
[Learn more ](redirects.md#redirections-for-pages-with-disqus-comments ).
2020-06-23 00:09:42 +05:30
2020-07-28 23:09:34 +05:30
### Comments metadata
The [docs website ](site_architecture/index.md ) has comments (provided by Disqus)
enabled by default. In case you want to disable them (for example in index pages),
set it to `false` :
```yaml
---
comments: false
---
```
### Additional page metadata
2020-11-24 15:15:51 +05:30
Each page can have additional, optional metadata (set in the
2020-07-28 23:09:34 +05:30
[default.html ](https://gitlab.com/gitlab-org/gitlab-docs/-/blob/fc3577921343173d589dfa43d837b4307e4e620f/layouts/default.html#L30-52 )
2021-10-27 15:23:28 +05:30
Nanoc layout), which is displayed at the top of the page if defined.
2020-07-28 23:09:34 +05:30
2021-11-18 22:05:49 +05:30
### Deprecated metadata
The `type` metadata parameter is deprecated but still exists in documentation
pages. You can safely remove the `type` metadata parameter and its values.
2022-07-23 23:45:48 +05:30
### Batch updates for TW metadata
2023-01-13 00:05:48 +05:30
The [`CODEOWNERS` ](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/CODEOWNERS )
file contains a list of files and the associated technical writers.
2022-07-23 23:45:48 +05:30
2023-01-13 00:05:48 +05:30
When a merge request contains documentation, the information in the `CODEOWNERS` file determines:
2022-07-23 23:45:48 +05:30
2023-01-13 00:05:48 +05:30
- The list of users in the **Approvers** section.
- The technical writer that the GitLab Bot pings for community contributions.
2022-07-23 23:45:48 +05:30
2023-01-13 00:05:48 +05:30
You can use a Rake task to update the `CODEOWNERS` file.
2022-07-23 23:45:48 +05:30
2023-01-13 00:05:48 +05:30
#### Update the `CODEOWNERS` file
2022-07-23 23:45:48 +05:30
2023-01-13 00:05:48 +05:30
To update the `CODEOWNERS` file:
2022-07-23 23:45:48 +05:30
2023-03-04 22:38:38 +05:30
1. Review the [TW team assignments ](https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments )
in the [`codeowners.rake` ](https://gitlab.com/gitlab-org/gitlab/blob/master/lib/tasks/gitlab/tw/codeowners.rake )
file. If any assignments have changed:
1. Update the `codeowners.rake` file with the changes.
1. Assign the merge request to a technical writing manager for review and merge.
1. After the changes to `codeowners.rake` are merged, go to the root of the `gitlab` repository.
1. Run the Rake task with this command: `bundle exec rake tw:codeowners`
1. Review the command output for any pages that need attention to
their metadata. Handle any needed changes in a separate merge request.
1. Add the changes to the CODEOWNERS file to Git: `git add .gitlab/CODEOWNERS`
1. Commit your changes to your branch, and push your branch up to `origin` .
2023-01-13 00:05:48 +05:30
1. Create a merge request and assign it to a technical writing manager for review.
2022-07-23 23:45:48 +05:30
2021-11-18 22:05:49 +05:30
## Move, rename, or delete a page
2021-01-03 14:25:43 +05:30
2021-11-11 11:23:49 +05:30
See [redirects ](redirects.md ).
2018-11-08 19:23:39 +05:30
## Merge requests for GitLab documentation
Before getting started, make sure you read the introductory section
"[contributing to docs](#contributing-to-docs)" above and the
2019-02-15 15:39:39 +05:30
[documentation workflow ](workflow.md ).
2018-11-08 19:23:39 +05:30
2021-09-04 01:27:46 +05:30
- Use the current [merge request description template ](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/merge_request_templates/Documentation.md )
2020-05-24 23:13:21 +05:30
- Label the MR `Documentation` (can only be done by people with `developer` access, for example, GitLab team members)
- Assign the correct milestone per note below (can only be done by people with `developer` access, for example, GitLab team members)
2018-11-08 19:23:39 +05:30
2021-02-22 17:27:13 +05:30
Documentation is merged if it is an improvement on existing content,
2019-02-15 15:39:39 +05:30
represents a good-faith effort to follow the template and style standards,
and is believed to be accurate.
Further needs for what would make the doc even better should be immediately addressed
2021-01-03 14:25:43 +05:30
in a follow-up merge request or issue.
2019-02-15 15:39:39 +05:30
2018-11-08 19:23:39 +05:30
If the release version you want to add the documentation to has already been
2020-05-24 23:13:21 +05:30
frozen or released, use the label `~"Pick into X.Y"` to get it merged into
2018-11-08 19:23:39 +05:30
the correct release. Avoid picking into a past release as much as you can, as
it increases the work of the release managers.
2019-02-15 15:39:39 +05:30
## GitLab `/help`
2021-12-11 22:18:48 +05:30
Every GitLab instance includes documentation at `/help` (`https://gitlab.example.com/help`)
that matches the version of the instance. For example, < https: / / gitlab . com / help > .
The documentation available online at < https: / / docs . gitlab . com > is deployed every
2022-10-11 01:57:18 +05:30
hour from the default branch of [GitLab, Omnibus, Runner, and Charts ](#source-files-and-rendered-web-locations ).
2021-12-11 22:18:48 +05:30
After a merge request that updates documentation is merged, it is available online
2022-10-11 01:57:18 +05:30
in an hour or less.
2021-12-11 22:18:48 +05:30
However, it's only available at `/help` on self-managed instances in the next released
version. The date an update is merged can impact which self-managed release the update
is present in.
For example:
1. A merge request in `gitlab` updates documentation. It has a milestone of 14.4,
with an expected release date of 2021-10-22.
1. It is merged on 2021-10-19 and available online the same day at < https: // docs . gitlab . com > .
1. GitLab 14.4 is released on 2021-10-22, based on the `gitlab` codebase from 2021-10-18
(one day *before* the update was merged).
1. The change shows up in the 14.5 self-managed release, due to missing the release cutoff
for 14.4.
2022-05-07 20:08:51 +05:30
The exact cutoff date for each release is flexible, and can be sooner or later
than expected due to holidays, weekends or other events. In general, MRs merged
2021-12-11 22:18:48 +05:30
by the 17th should be present in the release on the 22nd, though it is not guaranteed.
If it is important that a documentation update is present in that month's release,
merge it as early as possible.
2019-02-15 15:39:39 +05:30
### Linking to `/help`
2021-03-11 19:13:27 +05:30
When you're building a new feature, you may need to link to the documentation
from the GitLab application. This is normally done in files inside the
`app/views/` directory, with the help of the `help_page_path` helper method.
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
The `help_page_path` contains the path to the document you want to link to,
with the following conventions:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
- It's relative to the `doc/` directory in the GitLab repository.
- It omits the `.md` extension.
2022-05-07 20:08:51 +05:30
- It doesn't end with a forward slash (`/`).
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
The help text follows the [Pajamas guidelines ](https://design.gitlab.com/usability/helping-users/#formatting-help-content ).
2019-02-15 15:39:39 +05:30
2021-11-18 22:05:49 +05:30
#### Linking to `/help` in HAML
Use the following special cases depending on the context, ensuring all link text
is inside `_()` so it can be translated:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
- Linking to a doc page. In its most basic form, the HAML code to generate a
link to the `/help` page is:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
```haml
= link_to _('Learn more.'), help_page_path('user/permissions'), target: '_blank', rel: 'noopener noreferrer'
```
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
- Linking to an anchor link. Use `anchor` as part of the `help_page_path`
method:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
```haml
= link_to _('Learn more.'), help_page_path('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer'
```
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
- Using links inline of some text. First, define the link, and then use it. In
this example, `link_start` is the name of the variable that contains the
link:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
```haml
- link_start = '< a href = "%{url}" target = "_blank" rel = "noopener noreferrer" > '.html_safe % { url: help_page_path('user/permissions') }
%p= _("This is a text describing the option/feature in a sentence. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '< / a > '.html_safe }
```
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
- Using a button link. Useful in places where text would be out of context with
the rest of the page layout:
2019-02-15 15:39:39 +05:30
2021-03-11 19:13:27 +05:30
```haml
= link_to _('Learn more.'), help_page_path('user/permissions'), class: 'btn btn-info', target: '_blank', rel: 'noopener noreferrer'
```
2019-02-15 15:39:39 +05:30
2021-03-08 18:12:59 +05:30
#### Linking to `/help` in JavaScript
To link to the documentation from a JavaScript or a Vue component, use the `helpPagePath` function from [`help_page_helper.js` ](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/helpers/help_page_helper.js ):
```javascript
import { helpPagePath } from '~/helpers/help_page_helper';
helpPagePath('user/permissions', { anchor: 'anchor-link' })
// evaluates to '/help/user/permissions#anchor-link' for GitLab.com
```
This is preferred over static paths, as the helper also works on instances installed under a [relative URL ](../../install/relative_url.md ).
2021-11-18 22:05:49 +05:30
#### Linking to `/help` in Ruby
To link to the documentation from within Ruby code, use the following code block as a guide, ensuring all link text is inside `_()` so it can
be translated:
```ruby
docs_link = link_to _('Learn more.'), help_page_url('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer'
_('This is a text describing the option/feature in a sentence. %{docs_link}').html_safe % { docs_link: docs_link.html_safe }
```
In cases where you need to generate a link from outside of views/helpers, where the `link_to` and `help_page_url` methods are not available, use the following code block
as a guide where the methods are fully qualified:
```ruby
docs_link = ActionController::Base.helpers.link_to _('Learn more.'), Rails.application.routes.url_helpers.help_page_url('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer'
_('This is a text describing the option/feature in a sentence. %{docs_link}').html_safe % { docs_link: docs_link.html_safe }
```
Do not use `include ActionView::Helpers::UrlHelper` just to make the `link_to` method available as you might see in some existing code. Read more in
[issue 340567 ](https://gitlab.com/gitlab-org/gitlab/-/issues/340567 ).
2019-02-15 15:39:39 +05:30
### GitLab `/help` tests
2021-09-04 01:27:46 +05:30
Several [RSpec tests ](https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/features/help_pages_spec.rb )
2021-09-30 23:02:18 +05:30
are run to ensure GitLab documentation renders and works correctly. In particular, that [main docs landing page ](../../index.md ) works correctly from `/help` .
2019-02-15 15:39:39 +05:30
For example, [GitLab.com's `/help` ](https://gitlab.com/help ).
## Docs site architecture
2022-04-04 11:22:00 +05:30
For information on how we build and deploy < https: // docs . gitlab . com > , see [Docs site architecture ](site_architecture/index.md ).
2019-02-15 15:39:39 +05:30
### Global navigation
See the [Global navigation ](site_architecture/global_nav.md ) doc for information
on how the left-side navigation menu is built and updated.
2019-01-03 12:48:30 +05:30
## Previewing the changes live
2021-11-11 11:23:49 +05:30
See how you can use review apps to [preview your changes live ](review_apps.md ).
2019-01-03 12:48:30 +05:30
2019-02-15 15:39:39 +05:30
## Testing
2018-11-08 19:23:39 +05:30
2021-04-29 21:17:54 +05:30
For more information about documentation testing, see the [Documentation testing ](testing.md )
guide.
2020-05-24 23:13:21 +05:30
2019-02-15 15:39:39 +05:30
## Danger Bot
2018-11-08 19:23:39 +05:30
2019-02-15 15:39:39 +05:30
GitLab uses [Danger ](https://github.com/danger/danger ) for some elements in
code review. For docs changes in merge requests, whenever a change to files under `/doc`
is made, Danger Bot leaves a comment with further instructions about the documentation
2020-05-24 23:13:21 +05:30
process. This is configured in the `Dangerfile` in the GitLab repository under
2021-09-04 01:27:46 +05:30
[/danger/documentation/ ](https://gitlab.com/gitlab-org/gitlab/-/tree/master/danger/documentation ).
2020-11-24 15:15:51 +05:30
2022-10-11 01:57:18 +05:30
## Help and feedback section
This section ([introduced](https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/319) in GitLab 11.4)
is displayed at the end of each document and can be omitted by adding a key into
the front matter:
```yaml
---
feedback: false
---
```
The default is to leave it there. If you want to omit it from a document, you
must check with a technical writer before doing so.
## Disqus
We have integrated the docs site with Disqus (introduced by
[!151 ](https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/151 )),
allowing our users to post comments.
To omit only the comments from the feedback section, use the following key in
the front matter:
```yaml
---
comments: false
---
```
We're hiding comments only in main index pages, such as [the main documentation index ](../../index.md ),
since its content is too broad to comment on. Before omitting Disqus, you must
check with a technical writer.
Note that after adding `feedback: false` to the front matter, it will omit
Disqus, therefore, don't add both keys to the same document.
The click events in the feedback section are tracked with Google Tag Manager.
The conversions can be viewed on Google Analytics by navigating to
**Behavior > Events > Top events > docs**.
2020-11-24 15:15:51 +05:30
## Automatic screenshot generator
2022-05-07 20:08:51 +05:30
You can now set up an automatic screenshot generator to take and compress screenshots with the
2020-11-24 15:15:51 +05:30
help of a configuration file known as **screenshot generator** .
### Use the tool
To run the tool on an existing screenshot generator, take the following steps:
2021-06-08 01:23:25 +05:30
1. Set up the [GitLab Development Kit (GDK) ](https://gitlab.com/gitlab-org/gitlab-development-kit/blob/main/doc/howto/gitlab_docs.md ).
2020-11-24 15:15:51 +05:30
1. Navigate to the subdirectory with your cloned GitLab repository, typically `gdk/gitlab` .
1. Make sure that your GDK database is fully migrated: `bin/rake db:migrate RAILS_ENV=development` .
2021-03-11 19:13:27 +05:30
1. Install `pngquant` , see the tool website for more information: [`pngquant` ](https://pngquant.org/ )
2020-11-24 15:15:51 +05:30
1. Run `scripts/docs_screenshots.rb spec/docs_screenshots/<name_of_screenshot_generator>.rb <milestone-version>` .
1. Identify the location of the screenshots, based on the `gitlab/doc` location defined by the `it` parameter in your script.
1. Commit the newly created screenshots.
### Extending the tool
To add an additional **screenshot generator** , take the following steps:
- Locate the `spec/docs_screenshots` directory.
- Add a new file with a `_docs.rb` extension.
- Be sure to include the following bits in the file:
```ruby
require 'spec_helper'
RSpec.describe '< What I am taking screenshots of > ', :js do
include DocsScreenshotHelpers # Helper that enables the screenshots taking mechanism
before do
page.driver.browser.manage.window.resize_to(1366, 1024) # length and width of the page
end
```
- In addition, every `it` block must include the path where the screenshot is saved
```ruby
it 'user/packages/container_registry/img/project_image_repositories_list'
```
#### Full page screenshots
2022-11-25 23:54:43 +05:30
To take a full page screenshot, `visit the page` and perform any expectation on real content (to have capybara wait till the page is ready and not take a white screenshot).
2020-11-24 15:15:51 +05:30
#### Element screenshot
To have the screenshot focuses few more steps are needed:
- **find the area**: `screenshot_area = find('#js-registry-policies')`
- **scroll the area in focus**: `scroll_to screenshot_area`
- **wait for the content**: `expect(screenshot_area).to have_content 'Expiration interval'`
- **set the crop area**: `set_crop_data(screenshot_area, 20)`
2021-02-22 17:27:13 +05:30
In particular, `set_crop_data` accepts as arguments: a `DOM` element and a
padding. The padding is added around the element, enlarging the screenshot area.
2020-11-24 15:15:51 +05:30
#### Live example
Please use `spec/docs_screenshots/container_registry_docs.rb` as a guide and as an example to create your own scripts.