Adding runbooks reference table

/layouts/_shortcodes/engineering/support-skill-areas.html @tloughlin @mnagle2

/data/support_skill_areas.yml @tloughlin @mnagle2

/content/handbook/support/training/support_team_skill_areas.md @tloughlin @mnagle2

/data/support_runbooks.yaml @KirstyAllen @jcolyer 

/layouts/_shortcodes/support/runbooks.html @KirstyAllen @jcolyer 

/content/handbook/support/runbooks.md @KirstyAllen @jcolyer 

## Approval required pages. See also "Controlled Documents" for more from this section.

[support-required-approvals]

---

title: 'Runbooks reference table'

description: 'Documentation on runbooks'

---

{{% alert title="Note" color="warning" %}}

This should act as a reference table for runbooks, including the procedures, topics, macros, etc. tied to them.

If changes need to be made to the table, you should make a MR to the handbook modifying the `data/support_runbooks.yaml` file (which is used to generate the below table).

{{% /alert %}}

{{< support/runbooks >}}

<!-- To edit the content, see: /data/support_runbooks.yaml -->

{{ $categories := slice }}

{{ range hugo.Data.support_runbooks }}

  {{ $categories = $categories | append .category }}

{{ end }}

{{ $categories = $categories | uniq | sort }}

{{ range $categories }}

  {{ $cat := . }}

  <h2>{{ $cat }}</h2>

  <div class="responsive-table">

    <table>

      <thead>

        <tr>

          <th>Subcategory</th>

          <th>Name</th>

          <th>Runbook</th>

          <th>SOP</th>

          <th>ZD Global</th>

          <th>ZD US Gov</th>

          <th>Decagon</th>

        </tr>

      </thead>

      <tbody>

        {{ $catItems := where hugo.Data.support_runbooks "category" $cat }}

        {{ $subcats := slice }}

        {{ range $catItems }}

          {{ $subcats = $subcats | append .subcategory }}

        {{ end }}

        {{ $subcats = $subcats | uniq | sort }}

        {{ range $subcats }}

          {{ $sub := . }}

          {{ $subItems := where $catItems "subcategory" $sub }}

          {{ range $index, $element := sort $subItems "name" }}

            <tr style='vertical-align: middle;'>

              <td>{{ if eq $index 0 }}{{ $element.subcategory }}{{ end }}</td>

              <td><a href='{{ $element.zendesk_global.topic }}' target='_blank'>{{ $element.name }}</a></td>

              <td class='text-center'>

                {{ with $element.runbook }}<a href='{{ . }}' target='_blank'>Link</a>{{ end }}

              </td>

              <td class='text-center'>

                {{ with $element.sop }}<a href='{{ . }}' target='_blank'>Link</a>{{ end }}

              </td>

              <td class='text-center'>

                {{ with $element.zendesk_global.procedure }}<a href='{{ . }}' target='_blank'>Procedure</a><br />{{ end }}

                {{ with $element.zendesk_global.articles }}{{ len . }} Article(s)<br />{{ end }}

                {{ with $element.zendesk_global.macros }}{{ len . }} Macro(s){{ end }}

              </td>

              <td class='text-center'>

                {{ with $element.zendesk_usgov.procedure }}<a href='{{ . }}' target='_blank'>Procedure</a><br />{{ end }}

                {{ with $element.zendesk_usgov.articles }}{{ len . }} Article(s)<br />{{ end }}

                {{ with $element.zendesk_usgov.macros }}{{ len . }} Macro(s){{ end }}

              </td>

              <td class='text-center'>

                {{ with $element.decagon.aop }}<a href='{{ . }}' target='_blank'>Link</a>{{ end }}

              </td>

            </tr>

          {{ end }}

        {{ end }}

      </tbody>

    </table>

  </div>

{{ end }}