Add external link icon. (#136)

srid · Dec 3, 2021 · 4ca9a92 · 4ca9a92
1 parent fd2d1cf
commit 4ca9a92
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/default/templates/base.tpl b/default/templates/base.tpl
@@ -24,13 +24,33 @@
   <tailwindCssShim />
   <!-- CSSEND -->
 
-  <!-- Heist error element -->
   <style type="text/css">
+    /* Heist error element */
     strong.error {
       color: lightcoral;
       font-size: 90%;
       font-family: monospace;
     }
+
+    /* External link icon (see https://stackoverflow.com/a/66093928/5603549)*/
+    a.emanote-external:not(.emanote-contains-image)::after
+    {
+      background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgb(156, 163, 175)' %3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z' /%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z' /%3E%3C/svg%3E") 0 0 no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+      height: 1em;
+      width: 1em;
+      content: '';
+    }
+    a.emanote-external:not(.emanote-contains-image):hover::after
+    {
+      background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(75, 85, 99)' %3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z' /%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z' /%3E%3C/svg%3E") 0 0 no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+      height: 1em;
+      width: 1em;
+      content: '';
+    }
   </style>
   <apply template="/templates/hooks/more-head" />
 
@@ -45,6 +65,10 @@
 
 <body class="${bodyClass}">
   <body-main />
+
+  <script type="text/javascript">
+    document.querySelectorAll('a.emanote-external').forEach(x => {if (x.querySelector('img')){ x.classList.add('emanote-contains-image');}} );
+  </script>
 </body>
 
 </html>
diff --git a/default/templates/components/pandoc.tpl b/default/templates/components/pandoc.tpl
@@ -98,7 +98,7 @@
   <!-- TODO: Expand the above kind of overriding (full DOM control) to other AST nodes (below) -->
   <PandocLink class="text-${theme}-600">
     <Internal class="font-bold hover:underline" />
-    <External class="hover:underline" target="_blank" rel="noopener" />
+    <External class="hover:underline emanote-external" target="_blank" rel="noopener" />
   </PandocLink>
   <CodeBlock class="py-0.5 mb-3 text-sm" />
   <Code class="py-0.5 px-1 rounded bg-gray-700 text-sm text-white" />