adding a font-awesome icon for external links

Signed-off-by: Paul-Elliot <[email protected]>

Author: panglesd

src/html/generator.ml

@@ -113,7 +113,10 @@ and inline ?(emph_level = 0) ~resolve (l : Inline.t) : phrasing Html.elt list =
         let emph_level, app_style = styled style ~emph_level in
         [ app_style @@ inline ~emph_level ~resolve c ]
     | Link (href, c) ->
-        let a = (a :> Html_types.a_attrib Html.attrib list) in
+        let a =
+          (class_ ("external-link" :: t.attr)
+            :> Html_types.a_attrib Html.attrib list)
+        in
         let content = inline_nolink ~emph_level c in
         [ Html.a ~a:(Html.a_href href :: a) content ]
     | InternalLink c -> internallink ~emph_level ~resolve ~a c

src/odoc/etc/odoc.css

@@ -298,7 +298,16 @@ a.anchor {
 .xref-unresolved:hover {
   box-shadow: 0 1px 0 0 var(--xref-shadow);
 }
-
+.external-link::after {
+    display: inline-block;
+    content: "";
+    mask-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='up-right-from-square' class='svg-inline--fa fa-up-right-from-square' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z'></path></svg>");
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='up-right-from-square' class='svg-inline--fa fa-up-right-from-square' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z'></path></svg>");
+    width: 0.75em;
+    height: 0.75em;
+    background-color: currentColor;
+    margin-left: 0.1em;
+}
 /* Section and document divisions.
    Until at least 4.03 many of the modules of the stdlib start at .h7,
    we restart the sequence there like h2  */

test/generators/html/Bugs.html

@@ -33,8 +33,8 @@ <h1>Module <code><span>Bugs</span></code></h1>
     </div>
     <div class="spec-doc">
      <p>Triggers an assertion failure when 
-      <a href="https://github.com/ocaml/odoc/issues/101">
-       https://github.com/ocaml/odoc/issues/101
+      <a href="https://github.com/ocaml/odoc/issues/101"
+       class="external-link">https://github.com/ocaml/odoc/issues/101
       </a> is not fixed.
      </p>
     </div>

test/generators/html/Markup.html

@@ -78,7 +78,7 @@ <h6 id="subparagraph"><a href="#subparagraph" class="anchor"></a>
       italics.
     </i> 
     <i>It also work the same in 
-     <a href="#">links in italics with 
+     <a href="#" class="external-link">links in italics with 
       <em>emphasis <em class="odd">in</em> emphasis</em>.
      </a>
     </i>
@@ -101,16 +101,20 @@ <h6 id="subparagraph"><a href="#subparagraph" class="anchor"></a>
    <h2 id="links-and-references">
     <a href="#links-and-references" class="anchor"></a>Links and references
    </h2>
-   <p>This is a <a href="#">link</a>. It sends you to the top of this
-     page. Links can have markup inside them: <a href="#"><b>bold</b></a>
-    , <a href="#"><i>italics</i></a>, <a href="#"><em>emphasis</em></a>
-    , <a href="#">super<sup>script</sup></a>, 
-    <a href="#">sub<sub>script</sub></a>, and 
-    <a href="#"><code>code</code></a>. Links can also be nested 
-    <em><a href="#">inside</a></em> markup. Links cannot be nested inside
-     each other. This link has no replacement text: <a href="#">#</a>
-    . The text is filled in by odoc. This is a shorthand link: 
-    <a href="#">#</a>. The text is also filled in by odoc in this case.
+   <p>This is a <a href="#" class="external-link">link</a>. It sends 
+    you to the top of this page. Links can have markup inside them: 
+    <a href="#" class="external-link"><b>bold</b></a>, 
+    <a href="#" class="external-link"><i>italics</i></a>, 
+    <a href="#" class="external-link"><em>emphasis</em></a>, 
+    <a href="#" class="external-link">super<sup>script</sup></a>, 
+    <a href="#" class="external-link">sub<sub>script</sub></a>, and 
+    <a href="#" class="external-link"><code>code</code></a>. Links can
+     also be nested <em><a href="#" class="external-link">inside</a></em>
+     markup. Links cannot be nested inside each other. This link has 
+    no replacement text: <a href="#" class="external-link">#</a>. The
+     text is filled in by odoc. This is a shorthand link: 
+    <a href="#" class="external-link">#</a>. The text is also filled 
+    in by odoc in this case.
    </p>
    <p>This is a reference to <a href="#val-foo"><code>foo</code></a>.
      References can have replacement text: 
@@ -209,7 +213,7 @@ <h2 id="modules"><a href="#modules" class="anchor"></a>Modules</h2>
    </ul>
    <ul class="at-tags">
     <li class="see"><span class="at-tag">see</span> 
-     <a href="#" class="value">#</a> <p>this url</p>
+     <a href="#" class="external-link value">#</a> <p>this url</p>
     </li>
    </ul>
    <ul class="at-tags">

test/generators/html/Module.html

@@ -19,8 +19,8 @@ <h1>Module <code><span>Module</span></code></h1><p>Foo.</p>
     <div class="spec-doc">
      <p>The module needs at least one signature item, otherwise a bug
        causes the compiler to drop the module comment (above). See 
-      <a href="https://caml.inria.fr/mantis/view.php?id=7701">
-       https://caml.inria.fr/mantis/view.php?id=7701
+      <a href="https://caml.inria.fr/mantis/view.php?id=7701"
+       class="external-link">https://caml.inria.fr/mantis/view.php?id=7701
       </a>.
      </p>
     </div>

test/generators/html/Ocamlary.html

@@ -72,7 +72,8 @@ <h1>Module <code><span>Ocamlary</span></code></h1>
   <div class="odoc-content">
    <p>You may find more information about this HTML documentation renderer
      at 
-    <a href="https://github.com/dsheets/ocamlary">github.com/dsheets/ocamlary
+    <a href="https://github.com/dsheets/ocamlary" class="external-link">
+     github.com/dsheets/ocamlary
     </a>.
    </p><p>This is some verbatim text:</p><pre>verbatim</pre>
    <p>This is some verbatim text:</p><pre>[][df[]]}}</pre>
@@ -455,8 +456,9 @@ <h4 id="basic-type-and-value-stuff-with-advanced-doc-comments">
     <div class="spec-doc">
      <ul class="at-tags">
       <li class="see"><span class="at-tag">see</span> 
-       <a href="http://ocaml.org/" class="value">http://ocaml.org/</a>
-        <p>The OCaml Web site</p>
+       <a href="http://ocaml.org/" class="external-link value">
+        http://ocaml.org/
+       </a> <p>The OCaml Web site</p>
       </li>
      </ul>
     </div>