-
Notifications
You must be signed in to change notification settings - Fork 54
feat: Update Contributing guidelines for writers #428
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
63480c2
34cff46
31227ea
6af3515
f260cca
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -16,7 +16,6 @@ If you're an employee of F5/NGINX, also read [For F5/NGINX Employees](./F5-NGINX | |||||
You will need to install Hugo _or_ Docker to build and preview docs in your local development environment. | ||||||
Refer to the [Hugo installation instructions](https://gohugo.io/getting-started/installing/) for more information. | ||||||
|
||||||
|
||||||
Although not a strict requirement, markdown-link-check is also used in documentation development. | ||||||
|
||||||
If you have [Docker](https://www.docker.com/get-started/) installed, there are fallbacks for all requirements in the [Makefile](Makefile), meaning you don't need to install them. | ||||||
|
@@ -32,7 +31,7 @@ The configuration files are as follows: | |||||
- *markdownlint-cli*: `.markdownlint.json` | ||||||
- *markdown-link-check* `md-linkcheck-config.json` | ||||||
|
||||||
## Local Docs Development | ||||||
## Develop documentation locally | ||||||
|
||||||
To build the documentation locally, use the `make` command in the documentation folder. First make sure you have the latest version of our Hugo theme with: | ||||||
|
||||||
|
@@ -54,18 +53,27 @@ make clean - Removes the local `public` directory, which is the default | |||||
|
||||||
## Add new documentation | ||||||
|
||||||
We provide template files for different types of documentation. The templates, including instructions to use them and examples, are located in the [templates](templates) directory. | ||||||
We use [Hugo archetypes](https://gohugo.io/content-management/archetypes/) to provide structure for new documentation pages. | ||||||
|
||||||
These archetypes include inline advice on Markdown formatting and our most common style guide conventions. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
To create a new page, run the following command: | ||||||
|
||||||
`hugo new content <product/folder/filename.md>` | ||||||
|
||||||
This new page will be created with the default how-to archetype. To use a specific archetype, add the `-k` parameter and its name, such as: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
`hugo new content <product/folder/filename.md> -k <archetype>` | ||||||
|
||||||
Our archetypes [currently include](/archetypes/) the following: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are we leaving out the other templates? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. They have not been maintained or used. They might still be adapted for use in archetypes in the future, but all of that context seems like irrelevant noise. The templates themselves are still mentioned. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Are you saying that we can't use these other templates with the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Basically, yeah. The templates do not interact in any meaningful way with Hugo archetypes. There's a minimal amount of work needed to "convert" the templates into Hugo archetypes, but the bigger issue is that the templates were worked on in a vacuum and never adopted, whereas the archetypes were rewrites of templates to reflect the actual content IA patterns in production documentation. I would personally like to remove the files, but it feels beyond the scope of the PR, though the fact nobody has interacted with them since creation means it's likely fine. |
||||||
|
||||||
- `default` (How-to instructions, general use) | ||||||
- `concept`(An explanation of one implementation detail and some use cases) | ||||||
- `tutorial` (An in-depth set of how-to instructions, referencing concepts) | ||||||
|
||||||
We have templates for the following types of documentation: | ||||||
- Concept | ||||||
- Getting started | ||||||
- How-to guide | ||||||
- Installation guide | ||||||
- Reference | ||||||
- Release notes | ||||||
- Tutorial | ||||||
These archetypes are adapted from some existing [templates](/templates/): please [file an issue](https://github.com/nginx/documentation/issues/new?template=1-feature_request.md) if you would like a new archetype. | ||||||
|
||||||
## How to format docs | ||||||
## How to format documentation | ||||||
|
||||||
### Basic Markdown formatting | ||||||
|
||||||
|
@@ -77,47 +85,32 @@ There are multiple ways to format text: for consistency and clarity, these are o | |||||
- Ordered lists: The 1 character followed by a stop - `1. Ordered list item`. | ||||||
|
||||||
> **Note**: The ordered notation automatically enumerates lists when built by Hugo. | ||||||
Close every section with a horizontal line by using three dashes: `---`. | ||||||
|
||||||
We use backticks sparingly (\`\<some-text\>\`) for `monospace text`, typically for process names or commands. More information is available in the [Add code to documentation pages](#add-code-to-documentation-pages) guidance. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This sounds like a style guide discussion. Have we decided to use backquotes sparingly? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think this is properly documented in the style guide anywhere, but I've been hesitant to attempt to update the style guide due to pushback and deliberation in the past. They're used somewhat sparingly in the sense that normal text can be used in context where we could refer directly to something like a process:
Versus...
The main offender for over-use in the past was in tables, where we made the decision to instead favour italicised text for parameters and values over monospaced text: it improved the readability considerably, and monospaced text would often break how tables were rendered. I don't think that pattern/decision is recorded anywhere, but I could be wrong. |
||||||
|
||||||
Sections can be separated with horizontal lines by using three dashes: `---`. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is currently an option, but one we're likely to move away from in the future - CSS in the newer theme design uses whitespace for meaningful delineation between sections. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This feels like TMI There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What would a more concise version of this look like? It's admittedly slightly redundant with the guidance in the new section. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. One other thing that bothers me is the use of "backtick." I know it's a common term in coding, but we are focused on writers, and I think "backquote" is more accessible to a writer audience. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since we have the linked section, why even have these lines? If this page is getting so long that we need links from the middle of a page to another part of the page, then maybe CONTRIBUTING_DOCS.md is getting too long. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't actually think it's that long, but that reinforces the point you've made that including the lines is ultimately unnecessary. I'll get rid of it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||||||
|
||||||
### How to format internal links | ||||||
|
||||||
Internal links should use Hugo shortcodes [ref](https://gohugo.io/methods/shortcode/ref/#article) (for absolute paths) and [relref](https://gohugo.io/methods/shortcode/relref/#article) (for relative paths). | ||||||
Please note that we favor absolute paths, as these are easier to maintain. | ||||||
Internal links should use the [ref](https://gohugo.io/methods/shortcode/ref/#article) shortcode with absolute paths that start with a forward slash (for clarity). | ||||||
|
||||||
- Although file extensions (such as `.md`) are optional for Hugo, we include them as best practice for page anchors. | ||||||
- We prefer relative paths. | ||||||
- Paths without a leading forward slash (`/`) are first resolved relative to the current page, then the remainder of the website. | ||||||
Although file extensions (such as `.md`) are optional for Hugo, we include them as best practice for page anchors. | ||||||
|
||||||
Here are two examples: | ||||||
|
||||||
```md | ||||||
To install <software>, refer to the [installation instructions]({{< ref "install.md" >}}). | ||||||
To install <software>, refer to the [installation instructions]({{< ref "/product/deploy/install.md" >}}). | ||||||
To install <integation>, refer to the [integration instructions]({{< ref "/integration/thing.md#section" >}}). | ||||||
``` | ||||||
|
||||||
### How to add images | ||||||
ADubhlaoich marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
Use the `img` [shortcode](#using-hugo-shortcodes) to add images into your documentation. | ||||||
|
||||||
1. Add the image to the `/static/img` directory. | ||||||
1. Add the `img` shortcode: | ||||||
`{{< img src="<img-file.png>" alt="<Alternative text>">}}` | ||||||
- **Alt text is required, and must describe in detail the content of the image.** | ||||||
- **Do not include a forward slash at the beginning of the file path.** | ||||||
- This will break the image when it's rendered: read about the [Hugo relURL Function](https://gohugo.io/functions/relurl/#input-begins-with-a-slash) to learn more. | ||||||
|
||||||
> **Note**: The `img` shortcode accepts all of the same parameters as the Hugo [figure shortcode](https://gohugo.io/content-management/shortcodes/#figure). | ||||||
|
||||||
> **Important**: We have strict guidelines regarding the use of images in our documentation. Make sure that you keep the number of images to a minimum and that they are relevant to the content. Review the guidelines in our [style guide](/templates/style-guide.md#guidelines-for-screenshots). | ||||||
|
||||||
### How to use Hugo shortcodes | ||||||
|
||||||
[Hugo shortcodes](https://github.com/nginxinc/nginx-hugo-theme/tree/main/layouts/shortcodes) are used to format callouts, add images, and reuse content across different pages. | ||||||
|
||||||
For example, to use the `note` callout: | ||||||
|
||||||
```md | ||||||
{{< note >}}Provide the text of the note here.{{< /note >}} | ||||||
{{< note >}} Provide the text of the note here .{{< /note >}} | ||||||
``` | ||||||
|
||||||
The callout shortcodes support multi-line blocks: | ||||||
|
@@ -143,7 +136,7 @@ You can also create custom callouts using the `call-out` shortcode `{{< call-out | |||||
{{<call-out "important side-callout" "JWT file required for upgrade" "fa fa-exclamation-triangle">}} | ||||||
``` | ||||||
|
||||||
By default, all custom callouts are included inline, unless you add `side-callout` which places the callout to the right of the content. | ||||||
By default, all custom callouts are displayed inline, unless you add `side-callout` which places the callout to the right of the content. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there guidance on when to use in-line vs. out-dented callouts? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, and I actually have no knowledge of any instances when this has been used. It feels like guidance on when to use one or another should probably be in the style guide as opposed to this document. Just thought I'd change the word used since "include" has a certain semantic weight with our Hugo shortcode. |
||||||
|
||||||
Here are some other shortcodes: | ||||||
|
||||||
|
@@ -158,24 +151,51 @@ Here are some other shortcodes: | |||||
- `readfile`: Include the content of another file in the current file, which can be in an arbitrary location. | ||||||
- `bootstrap-table`: formats a table using Bootstrap classes; accepts any bootstrap table classes as additional arguments, e.g. `{{< bootstrap-table "table-bordered table-hover" }}` | ||||||
|
||||||
### Add code to documentation pages | ||||||
|
||||||
For command, binary and process names, you can use a pair of backticks (\`\<some-name\>\`): `<some-name>`. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @travisamartin Was there meant to be change here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oops -- I mean to add the serial comma. Fixed now. |
||||||
|
||||||
Larger blocks of multi-line code text such as configuration files can be wrapped in triple backticks, with a language as a parameter for highlighted formatting. | ||||||
ADubhlaoich marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
You can also use the `ghcode` shortcode to embed a single file directly from GitHub: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I did not know this one! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The original issue didn't mention documenting this: I was the driver to get the shortcode in the first place, and I think I'm the only person who's been using it since it wasn't documented anywhere... |
||||||
|
||||||
`{{< ghcode "<https://raw.githubusercontent.com/some-repository-file-link>" >}}` | ||||||
|
||||||
An example of this can be seen in [content/ngf/get-started.md](https://github.com/nginx/documentation/blob/af8a62b15f86a7b7be7944b7a79f44fd5e526c15/content/ngf/get-started.md?plain=1#L233C1-L233C128), which embeds a YAML file. | ||||||
|
||||||
### Add images to documentation pages | ||||||
|
||||||
Use the `img` shortcode to add images to documentation pages. It has the same parameters as the Hugo [figure shortcode](https://gohugo.io/content-management/shortcodes/#figure). | ||||||
|
||||||
1. Add the image to the `/static/img` directory. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We include images in other directories as well (e.g. /static/nginx/images, /static/nginx-one/images, /static/nim)
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think a discussion of standardising the IA for all of our "peripheral" content would be beneficial, since we have already started to touch on it for how we organise includes. |
||||||
1. Add the `img` shortcode: | ||||||
- `{{< img src="<img-file.png>" alt="<Alternative text>">}}` | ||||||
- Do not include a forward slash at the beginning of the file path or it will [break the image](https://gohugo.io/functions/relurl/#input-begins-with-a-slash). | ||||||
|
||||||
> **Important**: We have strict guidelines for using images. Review them in our [style guide](/templates/style-guide.md#guidelines-for-screenshots). | ||||||
|
||||||
|
||||||
### How to use Hugo includes | ||||||
|
||||||
As mentioned above, [Hugo includes](https://gohugo.io/contribute/documentation/#include) are a custom shortcode that allows you to reference reusable content stored in the [`/content/includes` directory](https://github.com/nginx/documentation/tree/main/content/includes). | ||||||
Hugo includes are a custom shortcode that allows you to embed content stored in the [`/content/includes` directory](https://github.com/nginx/documentation/tree/main/content/includes). | ||||||
|
||||||
It allows for content to be defined once and display in multiple places without duplication, creating consistency and simplifying the maintenance of items such as reference tables. | ||||||
|
||||||
For example, the [`licensing-and-reporting/apply-jwt.md`](https://github.com/nginx/documentation/blob/main/content/includes/licensing-and-reporting/apply-jwt.md) file contains instructions for where to add a JWT license file to an NGINX instance. | ||||||
ADubhlaoich marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
For example, if the [`controller/add-existing-instance.md`](https://github.com/nginx/documentation/blob/main/content/includes/controller/add-existing-instance.md) file contains instructions on adding an instance to the NGINX Controller, you can reuse it on multiple pages by adding: | ||||||
To add it to a documentation page, use the path as a parameter for the `include` shortcode: | ||||||
|
||||||
```md | ||||||
{{< include "controller/add-existing-instance.md" >}} | ||||||
{{< include "licensing-and-reporting/apply-jwt.md" >}} | ||||||
``` | ||||||
|
||||||
The `controller/add-existing-instance.md` file is included in the following pages on the NGINX Docs Site: | ||||||
This particular include file is used in the following pages: | ||||||
|
||||||
- [Add an NGINX App Protect Instance](https://github.com/nginx/documentation/blob/main/content/controller/infrastructure/instances/add-nap-instance.md?plain=1#L35) | ||||||
- [Manage Your NGINX Instances](https://github.com/nginx/documentation/blob/main/content/controller/infrastructure/instances/manage-instances.md?plain=1#L29) | ||||||
- [Trial NGINX Controller with NGINX Plus](https://github.com/nginx/documentation/blob/main/content/controller/admin-guides/install/try-nginx-controller.md?plain=1#L277) | ||||||
- [Trial NGINX Controller with App Security](https://github.com/nginx/documentation/blob/main/content/controller/admin-guides/install/try-nginx-controller-app-sec.md?plain=1#L290) | ||||||
- [About subscription licenses](https://github.com/nginx/documentation/blob/77939c1f9f41ae1984ddfc43c65c3b743836057a/content/solutions/about-subscription-licenses.md?plain=1#L54) | ||||||
- [R33 pre-release guidance for automatic upgrades](https://github.com/nginx/documentation/blob/77939c1f9f41ae1984ddfc43c65c3b743836057a/content/solutions/r33-pre-release-guidance-for-automatic-upgrades.md?plain=1#L62) | ||||||
- [Installing NGINX App Protect WAF](https://github.com/nginx/documentation/blob/77939c1f9f41ae1984ddfc43c65c3b743836057a/content/nap-waf/v5/admin-guide/install.md?plain=1#L132) | ||||||
|
||||||
This ensures that content is defined once and referenced in multiple places without duplication. | ||||||
View the [Guidelines for includes](/templates/style-guide.md#guidelines-for-includes) for instructions on how to write effective include files. | ||||||
|
||||||
## Linting | ||||||
|
||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This bothers me -- it's as if we're now relying on Hugo to provide templates -- and I'd expect to find templates at https://gohugo.io/content-management/archetypes/
As our audience is mostly writers, I think they'd struggle with the word "archtypes". Can you explain why you moved in this direction?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you insist on replacing "template" with "archetype," I'd like to see an explanation that's usable by TW-level users.
My personal acceptance criteria, if you go with this langugage: a typical TW should be able to understand the relationship between archetypes and templates.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Archetype is the name of the Hugo implementation of a template. If you follow the link, this explanation is provided directly underneath the heading.
Our audience is not "mostly writers": it is mostly engineers, both as readers and actual (Internal) contributors.
These archetypes have been in use but not properly documented (The issue in the pull request description drove my original work on this PR): intent to convert the unused templates into Hugo archetypes has been discussed internally but not prioritized, which is why these changes include guidance on requesting one if desired.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In that case,