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, 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 top right hand corner of the page.
  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. You’ll need at least Hugo version 0.45 (we recommend using the most recent available version), and it must be the extended version, which supports SCSS.

  2. Fork the openy_docs repo into your own project, then create a local copy using git clone. Don’t forget to use --recurse-submodules or you won’t pull down some of the code you need to generate a working site.

    git clone --recurse-submodules --depth 1 https://github.com/open-y-subprojects/openy_docs

  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.

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 openy_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 %}}

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