This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Contribution Guidelines

How to contribute to the docs

We use:

  • Hugo to format and generate our website,
  • the Docsy theme for styling and site structure,
  • Netlify for PR previews, and
  • GitHub Actions to manage the deployment of the site to GitHub Pages.

Hugo is an open-source static site generator that provides us with templates, content organisation in a standard directory structure, and a website generation engine. You write the pages in Markdown (or HTML if you want), and Hugo wraps them up into a website.

All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. Consult GitHub Help for more information on using pull requests.

Updating a single page

If you’ve just spotted something you’d like to change while using the docs, Docsy has a shortcut for you:

  1. Click Edit this page in the right (second) sidebar.
  2. If you don’t already have an up-to-date fork of the project repo, you are prompted to get one - click Fork this repository and propose changes or Update your Fork to get an up-to-date version of the project to edit. The appropriate page in your fork is displayed in edit mode.
  3. Make your changes and open a Pull Request. The maintainers will review, provide feedback, and merge.

Previewing your changes locally

If you want to run your own local Hugo server to preview your changes as you work:

  1. Follow the instructions in Getting started to install Hugo and any other tools you need.
  2. Fork the yusaopeny_docs repo into your own project, then create a local copy using git clone.
  3. Run hugo server in the site root directory. By default, your site will be available at http://localhost:1313/. Now that you’re serving your site locally, Hugo will watch for changes to the content and automatically refresh your site.
  4. Continue with the usual GitHub workflow to edit files, commit them, push the changes up to your fork, and create a pull request.

Common options

Hugo has a number of flags you can use to change local server behavior, here are a few we like:

  • --tlsAuto generate and use locally-trusted certificates to run the site over https
  • --buildDrafts include content marked as draft
  • --buildFuture include content with publishdate in the future

With all of these, you might end up with something like:

hugo serve --tlsAuto --buildDrafts --buildFuture

Creating an issue

If you’ve found a problem in the docs, but you’re not sure how to fix it yourself, please create an issue in the yusaopeny_docs repo. You can also create an issue about a specific page by clicking the Create Issue button in the top right hand corner of the page.

Useful resources

1 - Documentation Tips & Tricks

In addition to the full documentation, here are some commonly used functions in the YMCA Website Services Docs.

General Styles

The YMCA Website Services Docs are written in Markdown, an easy-to read and write formatting language.

The old documentation made heavy use of horizontal rules --- and slashes in headings ## // Heading. We try to use standard Markdown headings for organization and remove those visual indicators for better accessibility.

Headings with a page should start with level 2 ## in order to properly build the in-page navigation.

Internal links should be made with Markdown and page-relative locations, like:

[Blocks](../user-documentation/blocks)

Blocks

Internal paths with spaces in them should have their destination wrapped in angle brackets:

[Accordion Desktop](<../assets/designs/lb/Accordion Desktop.png>)

Accordion Desktop

Images

Image files should be placed in the /assets/img directory at the root of the project, then they can be embedded with relative paths with Markdown:

![Alt text](../../../../assets/img/llama.png "This is a caption.")

A very adorable llama.
A very adorable llama

Image processing is brought to you by Hugo Markdown Render Hooks, editable in layouts/_default/_markup.

Video Embeds

Videos can be embedded using Hugo’s youtube or vimeo shortcodes. These take the form:

{{< youtube w7Ft2ymGmfc >}}
{{< vimeo 146022717 >}}

To replace regular YouTube links with the shortcode you can use the following regex:

find: https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w-]+)
replacement: {{< youtube w7Ft2ymGmfc >}}

Tips

The old community documentation used headings inside blockquotes (starting each line with >). That formatting doesn’t work in Hugo. We can use Docsy alerts instead.

{{% alert title="Warning" %}}
This is a warning.
{{% /alert %}}

Although blockquotes sometimes work just as well:

> **Warning:** This is a warning.

Warning: This is a warning.

Color swatches

The color shortcode can be used to display a small color swatch after a hex or RGB color value. Pass one quoted value for hex, or three numeric values for RGB.

When using this shortcode in code fences, use <> instead of %% as the shortcode delimiter so that the code is not further rendered.

```scss
color: {{< color "#a92b31" >}}
color: {{< color 169 43 49 >}}
```
color: #a92b31
color: 169, 43, 49

2 - Linting

As with code, it’s good practice to run automated checks on our docs too.

lint•er : noun

  • a machine for removing the short fibers from cotton seeds after ginning
  • a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs

Using linkcheck:

Linkcheck has some issues with localhost that we’re working on resolving. Until then, you can set up your local site to run through Cloudflare Tunnel and then run it.

  • linkcheck -e https://your-site-url.example.com/docs/some/path --skip-file .linkcheck_skip.txt - run the linkchecker on internal (default) and external (-e) links with our custom ignore file (--skip-file).

Checking markdown

Using markdownlint:

  • markdownlint-cli2 --fix "content/en/docs/user-documentation/paragraphs/**/*.md" - lint and fix the Paragraphs directory