Provide ability to mark links as external using svg icon

6 files changed, 49 insertions, 1 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46efc9c..38652aa 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index e60221d..a996917 100644
--- a/assets/sass/_customize.scss
+++ b/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 */
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index a51f90a..4c3168d 100644
--- a/assets/sass/_mixins.scss
+++ b/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
+}
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index d950297..49e6df0 100644
--- a/exampleSite/content/_index.md
+++ b/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.
diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index e734e6c..ed9df8a 100644
--- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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 {
diff --git a/static/img/external-link.svg b/static/img/external-link.svg
new file mode 100644
index 0000000..2c04c7d
--- /dev/null
+++ b/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>