Improve notebook link appearance, add inline

Author: dragonstyle

src/format/html/format-html-bootstrap.ts

@@ -431,7 +431,7 @@ const fileBsIconName = (format: Format) => {
   } else if (isPdfOutput(format.pandoc)) {
     return "file-pdf";
   } else if (isIpynbOutput(format.pandoc)) {
-    return "journal-arrow-down";
+    return "journal-code";
   } else if (isMarkdownOutput(format.pandoc)) {
     return "file-code";
   } else if (isPresentationOutput(format.pandoc)) {
@@ -518,15 +518,47 @@ function processNotebookEmbeds(
 ) {
   const notebookDivNodes = doc.querySelectorAll("[data-notebook]");
   if (notebookDivNodes.length > 0) {
-    const nbPaths: { path: string; title: string | null }[] = [];
+    const nbPaths: { path: string; title: string; filename: string }[] = [];
+    let count = 1;
     notebookDivNodes.forEach((nbDivNode) => {
       const nbDivEl = nbDivNode as Element;
-      const nbPath = nbDivEl.getAttribute("data-notebook");
-      if (nbPath) {
-        nbPaths.push({
-          path: nbPath,
-          title: nbDivEl.getAttribute("data-notebook-title"),
-        });
+      nbDivEl.classList.add("quarto-notebook");
+      const notebookPath = nbDivEl.getAttribute("data-notebook");
+      if (notebookPath) {
+        const title = nbDivEl.getAttribute("data-notebook-title");
+        const filename = basename(notebookPath);
+
+        const nbPath = {
+          path: notebookPath,
+          title: title || filename,
+          filename,
+        };
+        nbPaths.push(nbPath);
+
+        // Add a decoration to this div node
+        const id = "nblink-" + count++;
+
+        const nbLinkEl = doc.createElement("a");
+        nbLinkEl.classList.add("quarto-notebook-link");
+        nbLinkEl.setAttribute("id", `${id}`);
+        nbLinkEl.setAttribute("href", nbPath.path);
+        nbLinkEl.setAttribute("download", nbPath.filename);
+        nbLinkEl.appendChild(doc.createTextNode(`Source: ${nbPath.title}`));
+
+        const nbParentEl = nbDivEl.parentElement;
+        if (nbParentEl?.tagName.toLocaleLowerCase() === "figure") {
+          const figCapEl = nbDivEl.parentElement?.querySelector("figcaption");
+          if (figCapEl) {
+            figCapEl.after(nbLinkEl);
+          } else {
+            nbDivEl.appendChild(nbLinkEl);
+          }
+        } else {
+          nbDivEl.appendChild(nbLinkEl);
+        }
+
+        // Try to place it after the figure caption, if possible
+        // For tables, place after the table caption if they are on the bottom
       }
     });
 
@@ -544,19 +576,18 @@ function processNotebookEmbeds(
     ld.uniqBy(nbPaths, (nbPath: { path: string; title?: string }) => {
       return nbPath.path;
     }).forEach((nbPath) => {
-      const filename = basename(nbPath.path);
       const li = doc.createElement("li");
 
       const link = doc.createElement("a");
       link.setAttribute("href", nbPath.path);
-      link.setAttribute("download", filename);
+      link.setAttribute("download", nbPath.filename);
 
       const icon = doc.createElement("i");
       icon.classList.add("bi");
-      icon.classList.add(`bi-journal-arrow-down`);
+      icon.classList.add(`bi-journal-code`);
       link.appendChild(icon);
       link.appendChild(
-        doc.createTextNode(`${nbPath.title || filename}`),
+        doc.createTextNode(nbPath.title),
       );
 
       li.appendChild(link);

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -977,11 +977,56 @@ td code:not(.sourceCode) {
   }
 }
 
+figure .quarto-notebook-link {
+  margin-top: 0.5em;
+}
+
+.quarto-notebook-link {
+  font-size: 0.75em;
+  color: $text-muted;
+  margin-bottom: 1em;
+  text-decoration: none;
+  display: block;
+}
+
+.quarto-notebook-link:hover {
+  text-decoration: underline;
+  color: $link-color;
+}
+
+.quarto-notebook-link::before {
+  display: inline-block;
+  height: 0.75rem;
+  width: 0.75rem;
+  margin-bottom: 0em;
+  margin-right: 0.25em;
+  content: "";
+  vertical-align: -0.125em;
+
+  @if variable-exists(text-muted) {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
+  } @else {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
+  }
+  background-repeat: no-repeat;
+  background-size: 0.75rem 0.75rem;
+}
+
 .quarto-alternate-notebooks i.bi,
 .quarto-alternate-formats i.bi {
   margin-right: 0.4em;
 }
 
+.sidebar .quarto-alternate-formats a,
+.sidebar .quarto-alternate-notebooks a {
+  text-decoration: none;
+}
+
+.sidebar .quarto-alternate-formats a:hover,
+.sidebar .quarto-alternate-notebooks a:hover {
+  color: $link-color;
+}
+
 .sidebar .quarto-alternate-notebooks h2,
 .sidebar .quarto-alternate-formats h2,
 .sidebar nav[role="doc-toc"] > h2 {