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
lread · Apr 21, 2022 · 79a5da2 · 79a5da2
1 parent 73ff0eb
commit 79a5da2
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 7 deletions.
diff --git a/bb.edn b/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"}}}
diff --git a/resources/asset-deps.edn b/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"

diff --git a/resources/public/cljdoc.css b/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
  */

diff --git a/script/outdated.clj b/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 []

diff --git a/src/cljdoc/render/layout.clj b/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

diff --git a/src/cljdoc/render/rich_text.clj b/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)

diff --git a/src/cljdoc/render/sanitize.clj b/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"]