Sensu Docs: Hugo Experimentation

sensu-q3.md

Sensu Docs: Hugo Experimentation

April 25, 2018

New Version

This commit adds version 4.10 to the Sensu Core docs.

New content for https://github.com/sensu/sensu-docs/wiki/Hugo-Formatting-and-Layouts:

Adding Versions

1. Create a copy of the latest version directory (ex: content/sensu-core/1.3) and rename it with the new version number (ex: content/sensu-core/2.0).
2. To update the necessary frontmatter, do a find-and-replace within your new directory for the version number in the formats “x.x” and "sensu-core-x.x".
3. In config.toml, list the new version (and applicable platforms) under the product parameters. For example: add "2.0" = ["Ubuntu/Debian", "RHEL/CentOS"] under [params.products.sensu_core.versions]. When you're ready to promote the new version as the latest version, update the version number for the latest parameter (ex: latest = "2.0").

Theme Changes

This commit changes a few theme accents to Sensu-Extensions-purple, including:

• h2, h3, and h4 headings styles
• hover styles for links in paragraphs and lists
• the name of the project in the sidebar menu

I wasn't able to apply the respective theme color for each product. Based on my experimentation, all products within the site use the same theme. In order to assign an accent color based on the product (purple for Extensions, green for Enterprise), I'd need to create a separate layout for each product and apply a product-specific class to the article tag. Those product-specific classes could then be differentiated to apply the correct accent color in CSS.

A more lightweight (although still messy) option is to use the logic in the partial nav layout to apply the correct accent color to only the product title. Although I wasn't able to get this to work in my short time experimenting with the site, here's my attempt:

layouts/partials/nav.html

...
<!-- ex. Sensu Core -->
{{ $url := replace $.Params.product " " "-" }}
{{ $url := lower $url }}

<!-- Apply respective theme color to title -->
{{ if $url "sensu-enterprise" }}
  <li><a class="menu-title" style="color:#448E2D;" href="/{{ $url }}/{{ $.Params.version }}">{{ $niceName }}</a><ul class="toc-menu-container">
  {{ else if $url "sensu-enterprise-dashboard" }}
    <li><a class="menu-title" style="color:#7B4496;" href="/{{ $url }}/{{ $.Params.version }}">{{ $niceName }}</a><ul class="toc-menu-container">
  {{ else }}
    <li><a class="menu-title" style="color:#2C3458;" href="/{{ $url }}/{{ $.Params.version }}">{{ $niceName }}</a><ul class="toc-menu-container">
{{ end }}
...