Provide ability to mark links as external using svg icon

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Provide search feature.
 - Provide ability to specify semantic page type in Front Matter
   (will be used for Schema.org)
+- Provide ability to mark links as external using svg icon
 
 ### Changed
 

assets/sass/_customize.scss

@@ -201,6 +201,18 @@ ul.pager li {
   border-color: transparent $text-light-color transparent transparent;
 }
 
+a.external:after {
+  background-color: #ac4142;
+  content: "";
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  width: 10px;
+
+  @include mask-size (cover);
+  @include mask-image (url("/img/external-link.svg"));
+}
+
 /* Themes */
 
 /* Red */

assets/sass/_mixins.scss

@@ -175,3 +175,20 @@ $break-desktop: 1600px;
       -ms-box-decoration-break: $value;
           box-decoration-break: $value;
 }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Mask
+
+
+// Usage: @include @include mask-image (url("/img/external-link.svg"));
+
+@mixin mask-image($value) {
+  -webkit-mask-image: $value; // Chrome, iOS, Safari
+          mask-image: $value; // None yet / Non-standard
+}
+
+// Usage: @include mask-size (cover);
+
+@mixin mask-size($value) {
+  -webkit-mask-size: $value; // Chrome, iOS, Safari
+          mask-size: $value; // None yet / Non-standard
+}

exampleSite/content/_index.md

@@ -4,4 +4,4 @@ title: "Ed."
 
 # hi.
 
-Ed is a [Hugo](http://gohugo.io) theme designed for textual editors based on [minimal computing principles](http://go-dh.github.io/mincomp/), and focused on legibility, durability, ease and flexibility. Our underlying technology is easy to learn and teach, and can produce beautifully rendered scholarly or reading editions of texts meant to last. To start using Ed, please see [our documentation]({{< relref "/documentation" >}}) for installation instructions and more. To learn more about the ideas behind Ed and a list of current features see our [about]({{< relref "/about" >}}) section. To see Ed in action, we've provided some sample minimal editions for you below.
+Ed is a {{< link src="http://gohugo.io" class="external" target="_blank" rel="noopener noreferrer" >}}Hugo{{< /link >}} theme designed for textual editors based on {{< link src="http://go-dh.github.io/mincomp/" class="external" target="_blank" rel="noopener noreferrer" >}}minimal computing principles{{< /link >}}, and focused on legibility, durability, ease and flexibility. Our underlying technology is easy to learn and teach, and can produce beautifully rendered scholarly or reading editions of texts meant to last. To start using Ed, please see [our documentation]({{< relref "/documentation" >}}) for installation instructions and more. To learn more about the ideas behind Ed and a list of current features see our [about]({{< relref "/about" >}}) section. To see Ed in action, we've provided some sample minimal editions for you below.

resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -1052,6 +1052,18 @@ ul.pager li {
 .post-tags a:hover:before {
   border-color: transparent #676767 transparent transparent; }
 
+a.external:after {
+  background-color: #ac4142;
+  content: "";
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  width: 10px;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  -webkit-mask-image: url("/img/external-link.svg");
+  mask-image: url("/img/external-link.svg"); }
+
 /* Themes */
 /* Red */
 .theme-base-red .post-tags a {

static/img/external-link.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3.5V14.5H12.5V10H14V15C14 15.5523 13.5523 16 13 16H1C0.447716 16 0 15.5523 0 15V3C0 2.44772 0.447715 2 1 2H6V3.5H1.5Z" fill="#FBFBFE"/>
+<path d="M15.9217 1.17828L7.01473 10.0853L5.95407 9.02462L14.8611 0.117624L15.9217 1.17828Z" fill="#FBFBFE"/>
+<path d="M7.5 0H16V1.5H7.5V0Z" fill="#FBFBFE"/>
+<path d="M16 0L16 8.5L14.5 8.5L14.5 -6.55671e-08L16 0Z" fill="#FBFBFE"/>
+</svg>