HTML generator: adding a class to distinguish external links

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

Author: panglesd

CHANGES.md

@@ -10,6 +10,8 @@
 - Add clock emoji before `@since` tag (@yawaramin, #1089)
 - Navigation for the search bar : use '/' to enter search, up and down arrows to
   select a result, and enter to follow the selected link. (@EmileTrotignon, #1088)
+- Added a class to distinguish external and internal links in the html output
+  (@panglesd, #767)
 
 ### Changed
 

src/html/generator.ml

@@ -143,7 +143,10 @@ and inline ~config ?(emph_level = 0) ~resolve (l : Inline.t) :
         let content = inline_nolink ~emph_level c in
         [ Html.span ~a content ]
     | 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 ~config ~emph_level ~resolve ~a c

test/generators/html/Bugs.html

@@ -34,8 +34,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

@@ -103,7 +103,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>
@@ -126,16 +126,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: 
@@ -307,7 +311,7 @@ <h2 id="math"><a href="#math" class="anchor"></a>Math</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

@@ -20,8 +20,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

@@ -73,7 +73,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>
@@ -484,8 +485,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>

test/xref2/github_issue_342.t/run.t

@@ -31,6 +31,6 @@ The rendered headings
   --
      <h2 id="an-url--and-with-text-in-a-title">
       <a href="#an-url--and-with-text-in-a-title" class="anchor"></a>An
-       url <a href="http://ocaml.org">http://ocaml.org</a> and 
-      <a href="http://ocaml.org">with text</a> in a title
+       url 
+      <a href="http://ocaml.org" class="external-link">http://ocaml.org</a>