Help:Shortcode Ln

{{< ln "wiki/Help:Shortcode_Ln" >}}

<!-- 

  Ln Shortcode
  ============

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

  LAYOUT: /layout/shortcodes/ln.html
  STYLE:  /assets/scss/components/_shortcode_ln.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Ln.md

  Description
  -----------
  Display a box like button which shows the page name and lead, it links to

  Changelog
  =========

  Version 1 (2022-07-27)
  ----------------------

  Initial release

-->


{{ $path := (index .Params 0) }}

{{ if $path }}
  {{ with .Site.GetPage $path }}
    <div class="mp-ln">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
      </svg>
      <div class="title">
          {{ with .Title }}
            {{ . }}
          {{ end }}
      </div>
      <div class="mp-ln-info">
        {{ with .Params.lead }}
          {{ . | safeHTML | truncate 80 }}
        {{ end }}
      </div>
      <a href="{{ with .Site.GetPage $path }}{{ .RelPermalink }}{{ end }}"></a>
    </div>
  {{ else }}
      {{ errorf "Failed to process ln shortcode: %s. The link \"%s\" does not exist." $.Position $path }}
  {{ end }}
{{ else }}
      {{ errorf "Failed to process ln shortcode: %s. No link was given to ln as parameter." $.Position }}
{{ end }}

/*

  Ln Shortcode
  ============

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

  LAYOUT: /layout/shortcodes/ln.html
  STYLE:  /assets/scss/components/_shortcode_ln.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Ln.md

*/

.mp-ln {
  border: 1px solid $border-color;
  padding: 1rem;
  border-radius: 5px;
  color: $link-color;
  display: flex;
  margin: 1em 0;
  transition: 0.1s ease-in;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &:hover {
    cursor: pointer;
    border: 1px solid darken($border-color, 12%);
  }

  .title {
    padding-left: 0.5em;
  }

  .mp-ln-info {
    margin-left: auto;
    padding-right: 0.5em;
    color: $gray-500;
    font-size: $font-size-sm;
  }

  a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    &:hover {
      cursor: pointer;
      text-decoration: none;
    }
  }
}

@include color-mode(dark) {
  body .mp-ln {
    border: 1px solid $border-dark;
    color: $link-color-dark;

    &:hover {
      border: 1px solid lighten($border-dark, 5%);
    }
  }

  body .mp-ln .mp-ln-info {
    color: $gray-600;
  }
}