Help:Shortcode Alert

{{< alert >}}
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum
sint consectetur cupidatat.
{{< /alert >}}

{{< alert title="Primary" type="primary" >}}
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum
sint consectetur cupidatat.
{{< /alert >}}

{{< alert preset="coc" >}}{{< /alert >}}
{{< alert preset="contrib-legal" >}}{{< /alert >}}
{{< alert preset="todo" >}}{{< /alert >}}
{{< alert preset="license-code" >}}{{< /alert >}}

<!-- 

  Alert Shortcode
  ===============

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

  LAYOUT: /layouts/shortcodes/alert.html
  STYLE:  /assets/scss/components/_shortcode_alert.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Alert.md

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

  Use the alert shortcode to display a message in a box. Either a predefined
  one, or one, which is written on the fly. 

  Changelog
  =========

  Version 1
  ---------

  Initial release

  Version 2 (2020-07-16)
  ----------------------

  Rewrite to merge the different types into a single shortcode

-->

{{ $type := .Get "type" | default "primary" }}
{{ $title := .Get "title" | default "" }}
{{ $preset := .Get "preset" | default "" }}

{{ $content := "" }}

{{ if $preset }}
  {{ if eq $preset "contrib-legal" }}
    {{ $type = "warning" }}
    {{ $title = i18n "alert-contrib-legal-title" }}
    {{ $content = i18n "alert-contrib-legal-content" }}
  {{ else if eq $preset "coc" }}
    {{ $type = "success" }}
    {{ $content = printf "%s <a href=\"%s\">%s</a>." (i18n "alert-coc-content") (relref . "/docs/code_of_conduct") (i18n "coc") }}
  {{ else if eq $preset "license-code" }}
    {{ $type = "success" }}
    {{ $content = printf "%s <a href=\"%s/blob/%s/LICENSE.md\" target=\"_blank\" rel=\"noopener\">MIT %s</a>." (i18n "alert-license-code-content") .Site.Params.docsRepo .Site.Params.docsRepoBranch (i18n "license")}}
  {{ else if eq $preset "todo" }}
    {{ $title = "Coming Soon"}}
    {{ $content = "This part of our new Website is not ready yet.<br /><br /><code><span class=\"hljs-keyword\">raise</span> NotImplementedError(<span class=\"hljs-string\">\"Stay Tuned\"</span>)</code>" }}
  {{ else }}
    {{ errorf "Failed to process alert shortcode: %s. %q is unknown preset in \"alert\" shortcode. The available presets are: \"contrib-legal\", \"coc\", \"license-code\"  and \"todo\"." $.Position $type }}
  {{ end }}
{{ end }}

<div class="mp-alert mp-alert-{{ $type }}">
  <div class="icon">
    {{ if eq $type "primary"}}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mp-alert-svg mp-alert-primary-svg feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
    {{ else if eq $type "success" }}
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mp-alert-svg mp-alert-success-svg feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
    {{ else if eq $type "danger" }}    
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mp-alert-svg mp-alert-danger-svg feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
    {{ else if eq $type "warning" }}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mp-alert-svg mp-alert-warning-svg feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
    {{ else if eq $type "secondary" }}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mp-alert-svg mp-alert-secondary-svg feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>            
    {{ else }}
      {{ errorf "Failed to process alert shortcode: %s. %s is unknown type in \"alert\" shortcode. The available types are \"primary\", \"success\", \"alert\", \"danger\" and \"secondary\"." $.Position $type }}
    {{ end }}
  </div>
  <div class="content">
    {{ with $title }}      
        <p class="mp-alert-title">{{ . }}</p>
    {{ end }}
    <div class="body">
      {{ with $content }} 
        {{ print . | safeHTML }}
      {{ else }}
        {{ if len .Inner }}
          {{ print .Inner | markdownify }}
        {{ else }}
          {{ errorf "Failed to process alert shortcode: %s. When using the alert shortcode .Inner (the context of a nested statement) is mandatory, when the \"named\" argument is not used instead." $.Position }}
        {{ end }}
      {{ end }}
    </div>
  </div>
</div>

/*

  Alert Shortcode
  ===============

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

  LAYOUT: /layouts/shortcodes/alert.html
  STYLE:  /assets/scss/components/_shortcode_alert.scss
  DOCS:   /content/<language>/wiki/Contribute:Shortcode_Download/index.md

*/

.mp-alert {
  border: 1px solid $gray-200;
  padding: 1rem;
  border-radius: 5px;
  display: flex;
  margin: 1em 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 50%);

  .content {
    padding-left: 1em;

    .mp-alert-title {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 0.5em;
    }

    p {
      margin-bottom: 0;
    }

    br {
      display: block;
      margin-bottom: 0.25em;
      content: " ";
    }
  }
}

.mp-alert-primary {
  border-left: 5px solid $primary;
}

.mp-alert-success {
  border-left: 5px solid $success;
}

.mp-alert-danger {
  border-left: 5px solid $danger;
}

.mp-alert-warning {
  border-left: 5px solid $warning;
}

.mp-alert-secondary {
  border-left: 5px solid;
}

.mp-alert-svg {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mp-alert-primary-svg {
  stroke: $primary;
}

.mp-alert-success-svg {
  stroke: $success;
}

.mp-alert-danger-svg {
  stroke: $danger;
}

.mp-alert-warning-svg {
  stroke: $warning;
}

.mp-alert-secondary-svg {
  stroke: $secondary;
}

@include color-mode(dark) {
  .mp-alert {
    border: 1px solid $border-dark;
  }

  .mp-alert-primary {
    border-left: 5px solid $primary;
  }

  .mp-alert-success {
    border-left: 5px solid $success;
  }

  .mp-alert-danger {
    border-left: 5px solid $danger;
  }

  .mp-alert-warning {
    border-left: 5px solid $warning;
  }

  .mp-alert-secondary {
    border-left: 5px solid $secondary;
  }
}