Render AsciiDoc code callouts

Downgraded highlight.js to latest v10.
Highlight.js v11, without a custom plugin, will not render embedded
HTML in code blocks (which is was we need for our pretty
code callouts). I don't see us missing out on any v11 features.
See highlightjs/highlight.js#2889

Required CSS mostly nabbed from:
https://github.com/asciidoctor/asciidoctor/blob/main/src/stylesheets/asciidoctor.css

To get code callouts to render, the AsciiDoctor `icons` attribute must be
set to `font` (which is a little misleading, because it allow us to use
CSS and does not require any special fonts). This did also impact
rendered HTML for admonitions, so tweaked CSS so they look the same.

Closes cljdoc#321

bb.edn

@@ -1,3 +1,4 @@
 {:paths ["script"]
- :deps {lread/status-line {:git/url "https://github.com/lread/status-line.git"
+ :deps {doric/doric {:mvn/version "0.9.0"}
+        lread/status-line {:git/url "https://github.com/lread/status-line.git"
                            :sha "35ed39645038e81b42cb15ed6753b8462e60a06d"}}}

resources/asset-deps.edn

@@ -78,7 +78,8 @@
                  "jax/output/PreviewHTML/jax.js"]}}
  :highlightjs
  {:npm-name "highlight.js"
-  :version "11.5.0"
+  :note "Highlight.js v11 will require some plugin to support our AsciiDoc inline code callouts.\nSee: https://github.com/highlightjs/highlight.js/issues/2889"
+  :version "10.7.2"
   :js {:root "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@{{:version}}/build/"
        :assets ["highlight.min.js"
                 "languages/clojure.min.js"

resources/public/cljdoc.css

@@ -317,7 +317,25 @@ table.frame-sides > colgroup + * > :first-child > * {
   font-size: 1em;
 }
 
-/* Asciidoc admonition tip/note blocks */
+/* Asciidoc admonition tip/note blocks
+
+   When adoc icons attribute is set to fonts, example rendering:
+
+   <div class="admonitionblock warning">
+     <table>
+       <tbody>
+         <tr>
+           <td class="icon">
+             <i title="Warning"></i>
+           </td>
+           <td class="content">
+             Warning to the wise.
+           </td>
+        </tr>
+      </tbody>
+    </table>
+   </div>
+*/
 
 .asciidoc .admonitionblock {
   padding: 1rem;
@@ -332,10 +350,19 @@ table.frame-sides > colgroup + * > :first-child > * {
 
 .asciidoc .admonitionblock .icon {
   display: block;
-  text-transform: uppercase;
   font-size: 0.8rem;
+}
+
+.asciidoc .admonitionblock .icon i {
+  text-transform: uppercase;
   color: #777;
   font-weight: 600;
+  font-style: normal;
+  height: 1em;
+}
+
+.asciidoc .admonitionblock .icon i:after {
+  content: attr(title);
 }
 
 .asciidoc .admonitionblock table tr td {
@@ -366,6 +393,70 @@ table.frame-sides > colgroup + * > :first-child > * {
   border-color: #ff725c; /** tachyons light-red **/
 }
 
+/*
+ * Callout numbers and lists
+ */
+
+.asciidoc .literalblock + .colist,
+.listingblock + .colist {
+  margin-top: -0.5em;
+}
+
+.asciidoc .colist td:not([class]):first-child {
+  padding: 0.4em 0.75em 0;
+  line-height: 1;
+  vertical-align: top;
+}
+
+.asciidoc .colist td:not([class]):first-child img {
+  max-width: none;
+}
+
+.asciidoc .colist td:not([class]):last-child {
+  padding: 0.25em 0;
+}
+
+.asciidoc .conum[data-value] {
+  display: inline-block;
+  color: #fff !important;
+  background: rgb(0 0 0 / 0.8);
+  border-radius: 50%;
+  text-align: center;
+  font-size: 0.75em;
+  width: 1.67em;
+  height: 1.67em;
+  line-height: 1.67em;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+    monospace;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.asciidoc .conum[data-value] * {
+  color: #fff !important;
+}
+
+.asciidoc .conum[data-value] + b {
+  display: none;
+}
+
+.asciidoc .conum[data-value]::after {
+  content: attr(data-value);
+}
+
+.asciidoc pre .conum[data-value] {
+  position: relative;
+  top: -0.125em;
+}
+
+.asciidoc b.conum * {
+  color: inherit !important;
+}
+
+.asciidoc .conum:not([data-value]):empty {
+  display: none;
+}
+
 /*
  * Scroll Indicator
  */

script/outdated.clj

@@ -3,8 +3,8 @@
 (ns outdated
   (:require [babashka.fs :as fs]
             [clojure.edn :as edn]
-            [clojure.pprint :as pprint]
             [clojure.string :as string]
+            [doric.core :as doric]
             [helper.process :as ps]
             [lread.status-line :as status]))
 
@@ -48,7 +48,14 @@
                                          :current version
                                          :latest latest-version))))))]
     (if (seq outdated)
-      (pprint/print-table [:file :npm-name :current :latest :note] outdated)
+      (->> (for [o outdated
+                 :let [note-lines (when (:note o)
+                                    (string/split-lines (:note o)))]]
+             (concat [(assoc o :note (first note-lines))]
+                     (map (fn [l] {:note l}) (rest note-lines))))
+           (mapcat identity)
+           (doric/table [:file :npm-name :current :latest :note])
+           println)
       (status/line :detail "All CDN JavaScript deps seem up to date."))))
 
 (defn -main []

src/cljdoc/render/layout.clj

@@ -14,7 +14,7 @@
   [:script
    (hiccup/raw
     "hljs.registerLanguage('cljs', function (hljs) { return hljs.getLanguage('clj') });
-      hljs.highlightAll();")])
+     hljs.highlightAll();")])
 
 (defn highlight-js []
   [:div

src/cljdoc/render/rich_text.clj

@@ -20,6 +20,7 @@
 (defn asciidoc-to-html [^String file-content]
   (let [opts (doto (Options.)
                (.setAttributes (java.util.HashMap. {"env-cljdoc" true
+                                                    "icons" "font"
                                                     "outfilesuffix" ".adoc"
                                                     "showtitle" true})))]
     (-> (.convert adoc-container file-content opts)

src/cljdoc/render/sanitize.clj

@@ -203,6 +203,10 @@
       (matching-vals "wikilink")
       (on-tags "a")
 
+      ;; for code block callouts
+      (allow-attributes "data-value")
+      (on-tags "i")
+
       ;; mimic from github pipeline
       (allow-attributes "itemscope" "itemtype")
       (on-tags "div")
@@ -334,6 +338,11 @@
        ["float"])
       (on-tags "h2" "h3" "h4" "h5" "h6")
 
+      ;; for callout numbers and and potentially icons on admonitions
+      (sanitize-classes
+       ["conum" "icon-important" "icon-warning" "icon-caution" "icon-tip" "icon-note"])
+      (on-tags "i")
+
       (sanitize-classes
        ["arabic"]
        ["decimal"]