Disable external link icon if link text contains an image (#136)

srid · Jul 5, 2022 · 829c974 · 829c974
1 parent cadfe3b
commit 829c974
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/default/templates/base.tpl b/default/templates/base.tpl
@@ -32,17 +32,16 @@
     }
 
     /* External link icon (see https://stackoverflow.com/a/66093928/5603549)*/
-    a.emanote-external:not(.emanote-contains-image)::after
-    {
+    a.emanote-external:not(.emanote-external-no-icon)::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
-    {
+
+    a.emanote-external:not(.emanote-external-no-icon):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;
@@ -64,10 +63,6 @@
 
 <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
@@ -91,7 +91,9 @@
   <!-- TODO: Expand the above kind of overriding (full DOM control) to other AST nodes (below) -->
   <PandocLink class="text-${theme}-600">
     <Internal class="mavenLinkBold hover:underline" />
-    <External class="hover:underline" target="_blank" rel="noopener" />
+    <External class="hover:underline emanote-external" target="_blank" rel="noopener">
+      <NoIcon class="emanote-external-no-icon" />
+    </External>
   </PandocLink>
   <CodeBlock class="py-0.5 mb-3 text-sm" />
   <Code class="py-0.5 px-0.5 bg-gray-100" />

diff --git a/src/Heist/Extra/Splices/Pandoc/Ctx.hs b/src/Heist/Extra/Splices/Pandoc/Ctx.hs
@@ -17,6 +17,7 @@ import Heist.Extra.Splices.Pandoc.Attr (concatAttr)
 import Heist.Interpreted qualified as HI
 import Relude
 import Text.Pandoc.Builder qualified as B
+import Text.Pandoc.Walk qualified as W
 import Text.XmlHtml qualified as X
 
 -- | The configuration context under which we must render a `Pandoc` document
@@ -115,16 +116,34 @@ inlineLookupAttr node = \case
   B.Code {} -> childTagAttr node "Code"
   B.Note _ ->
     childTagAttr node "Note"
-  B.Link _ _ (url, _) ->
-    fromMaybe B.nullAttr $ do
-      link <- X.childElementTag "PandocLink" node
-      let innerTag = if "://" `T.isInfixOf` url then "External" else "Internal"
-      pure $ attrFromNode link `concatAttr` childTagAttr link innerTag
+  link@(B.Link _ _ (url, _)) ->
+    let isExternal = "://" `T.isInfixOf` url
+        containsImage = getAny $ W.query (\case B.Image {} -> Any True; _ -> Any False) link
+     in fromMaybe B.nullAttr $ do
+          linkNode <- X.childElementTag "PandocLink" node
+          let linkTypeNode =
+                X.childElementTag
+                  ( if isExternal
+                      then "External"
+                      else "Internal"
+                  )
+                  linkNode
+          let noIconNode =
+                if isExternal && containsImage
+                  then linkTypeNode >>= X.childElementTag "NoIcon"
+                  else Nothing
+          pure $
+            attrFromNode linkNode
+              `concatAttr` attrFromMaybeNode linkTypeNode
+              `concatAttr` attrFromMaybeNode noIconNode
   _ -> B.nullAttr
 
+attrFromMaybeNode :: Maybe X.Node -> B.Attr
+attrFromMaybeNode = maybe B.nullAttr attrFromNode
+
 childTagAttr :: X.Node -> Text -> B.Attr
 childTagAttr x name =
-  maybe B.nullAttr attrFromNode $ X.childElementTag name x
+  attrFromMaybeNode $ X.childElementTag name x
 
 attrFromNode :: X.Node -> B.Attr
 attrFromNode node =