Help:Shortcode Reporting Issues

{{< reporting_issues >}}

<!--

  Reporting Issues Shortcode
  ==========================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/reporting_issues.html
  STYLE:  /assets/scss/components/_shortcode_identifier.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Reporting_Issues.md

  Description
  -----------

  Use the repoting issues shortcode to let users know, how to report issues.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

<p>
  If you experience or witness unacceptable behavior — or have any other
  concerns — please report it by contacting us via email
  <div class="pill-wrapper">
    <a href="mailto://[email protected]">
    <svg
      class="pill-img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="-256 -256 1024 1024"
      width="25"
      height="25"
      fill="currentColor"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path
        d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
      ></path>
    </svg>
    <span class="pill">&nbsp;[email protected]</span>
    </a>
  </div>
  or in Matrix:
</p>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Matrix</th>
      <th>Matrix Identifier</th>
    </tr>
  </thead>
  <tbody>
    {{ range where (where (where (where .Site.Pages "Section" "contributors")
    "Params.matrix_username" "!=" nil) "Params.matrix_identifier" "!=" nil)
    "Params.matrix_moderator" "==" true -}}

      {{- $matrix_user_identifier := .Params.matrix_identifier }}

      {{- $avatar := "" -}}
      {{ if isset $.Site.Data "matrix_users" }}
        {{- range $.Site.Data.matrix_users -}}
          {{- if eq .userId $matrix_user_identifier  -}}
            {{- with .avatar -}}
              {{- $avatar = (printf "https://matrix.org/_matrix/media/r0/thumbnail/%s?width=64&height=64&method=scale" (substr  . 6)) -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}
      {{- end -}}

    <tr>
      <td>
        <a href="{{ .RelPermalink }}">

          {{- with $avatar -}}
          <img
            width="25"
            height="25"
            src="{{- . -}}">
          </img>
          {{- end -}}
          &ThickSpace; {{ .Params.title }}
        </a>
      </td>
      <td>
        <a target="_blank" rel="noopener" href="https://app.element.io/#/user/{{ .Params.matrix_identitier }}">
          {{ .Params.matrix_username }}
        </a>
      </td>
      <td>
        <a
          class="text-body"
          target="_blank"
          href="https://app.element.io/#/user/{{ .Params.matrix_identitier }}"
        >
          {{ .Params.matrix_identifier }}
        </a>
      </td>
    </tr>
    {{ end -}}
  </tbody>
</table>

<p class="text-muted fst-italic fw-light" style="margin-top:-2.5em; margin-bottom:2em">
  If you click on a moderators name or avatar, you get their profile page
</p>

<p>
  All reports will be handled with discretion. In your report please include:
</p>

<ul>
  <li>Your contact information.</li>
  <li>
    Names (usernames and nicks, real names, and/or pseudonyms) of any
    individuals involved. If there are additional witnesses, please include
    them as well. Your account of what occurred, and if you believe the
    incident is ongoing.
  </li>
  <li>The date and time of the incident (or start of incident).</li>
  <li>Any additional information that may be helpful.</li>
</ul>

<p>
  After filing a report, a representative will contact you personally, review
  the incident, follow up with any additional questions, and make a decision as
  to how to respond. If the person who is harassing you is part of the response
  team, they will recuse themselves from handling your incident. If the
  complaint originates from a member of the response team, it will be handled
  by a different member of the response team. We will respect confidentiality
  requests for the purpose of protecting victims of abuse.
</p>

/*

  Identifier Shortcode
  ====================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/identifier.html
  STYLE:  /assets/scss/components/_shortcode_identifier.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Identifier.md
  PREP:   /utils/get_matrix_rooms
  DATA:   /data/matrix_rooms.json
  PREP:   /utils/get_matrix_users
  DATA:   /data/matrix_users.json
  CI:     /gitlab-ci.yml (get-data)

  Reporting Issues Shortcode
  ==========================

  LAYOUT: /layouts/shortcodes/reporting_issues.html
  STYLE:  /assets/scss/components/_shortcode_identifier.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Reporting_Issues.md

*/

.pill {
  color: $pink-500;
  font-family: $font-family-monospace;
  font-size: $font-size-sm;
  font-weight: $badge-font-weight;
  text-align: center;
  white-space: nowrap;
}

.pill-wrapper {
  vertical-align: baseline;
  display: inline-block;
  align-items: center;
  border-radius: 6em;
  padding-right: 0.7em;
  padding-left: 0;
  background-color: $gray-200;
  gap: 0;

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }
}

.pill-img {
  background-color: darken($body-color-dark, 60%);
  color: $white;
  height: 1.5em;
  width: 1.5em;
  margin-bottom: 1px;
  border-radius: 50%;
}

@include color-mode(dark) {
  body .pill {
    color: $blue-300;
  }

  body .pill-img {
    color: $border-dark;
    background-color: $body-color-dark;
  }

  body .pill-wrapper {
    background-color: $border-dark;
  }

  .accordion-body {
    .pill-wrapper {
      background-color: $gray-900;
    }
  }
}