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.
Links
Internal links should be made with Markdown and page-relative locations, like:
[Blocks](../user-documentation/blocks)
Internal paths with spaces in them should have their destination wrapped in angle brackets:
[Accordion Desktop](<../assets/designs/lb/Accordion Desktop.png>)
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:
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 %}}
Warning
This is a warning.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