Format assets.

livebook-dev · Oct 14, 2024 · c0d3da7 · c0d3da7
1 parent 6637652
commit c0d3da7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 45 deletions.
diff --git a/assets/packs/mermaid/main.css b/assets/packs/mermaid/main.css
@@ -1,3 +1,13 @@
+#contents button#download {
+  position: absolute;
+  display: none;
+}
+
+#contents:hover button#download {
+  display: inline;
+  right: 0;
+}
+
 #figure {
   display: flex;
   flex-direction: column;
@@ -6,22 +16,11 @@
 }
 
 #figure figcaption {
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   background-color: rgb(240 245 249);
   padding: 0.5rem;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
   color: rgb(97 117 138);
 }
-
-#contents button#download {
-  position: absolute;
-  display: none;
-}
-
-#contents:hover button#download {
-  display: inline;
-  right: 0;
-}
-
diff --git a/assets/packs/mermaid/main.js b/assets/packs/mermaid/main.js
@@ -3,56 +3,60 @@ import "./main.css";
 
 mermaid.initialize({ startOnLoad: false });
 
-export function init(ctx, {diagram, caption, download}) {
-  ctx.importCSS("main.css")
-  
+export function init(ctx, { diagram, caption, download }) {
+  ctx.importCSS("main.css");
+
   function render() {
     mermaid.render("diagram", diagram).then(({ svg, bindFunctions }) => {
       // Fix for: https://github.com/mermaid-js/mermaid/issues/1766
-      const renderedSvg = svg.replace(/<br>/gi, "<br />")
-      
+      const renderedSvg = svg.replace(/<br>/gi, "<br />");
+
       let contents = document.createElement("div");
       contents.id = "contents";
       ctx.root.appendChild(contents);
-      
+
       let figure = document.createElement("figure");
       figure.id = "figure";
       figure.innerHTML = renderedSvg;
       contents.appendChild(figure);
-      
+
       if (caption) {
         let figcaption = document.createElement("figcaption");
         figcaption.textContent = caption;
         figure.appendChild(figcaption);
       }
-      
+
       if (download) {
         let downloadButton = document.createElement("button");
-        downloadButton.id = "download"
-        downloadButton.title = `Download ${download.title}`
-        downloadButton.textContent = "⇩"
+        downloadButton.id = "download";
+        downloadButton.title = `Download ${download.title}`;
+        downloadButton.textContent = "⇩";
         contents.prepend(downloadButton);
-
-        contents.querySelector("#download").addEventListener("click", (event) => {
-          var downloadData = [];
-          downloadData.push(renderedSvg);
-          const downloadBlob = URL.createObjectURL(new Blob(downloadData, {type: "image/svg+xml"}));
-
-          const downloadLink = document.createElement("a");
-          downloadLink.href = downloadBlob;
-          downloadLink.download = download.filename;
-          contents.appendChild(downloadLink);
-
-          downloadLink.dispatchEvent(
-            new MouseEvent('click', { 
-              bubbles: true, 
-              cancelable: true, 
-              view: window 
-            })
-          );
-
-          contents.removeChild(downloadLink);
-        });
+
+        contents
+          .querySelector("#download")
+          .addEventListener("click", (event) => {
+            var downloadData = [];
+            downloadData.push(renderedSvg);
+            const downloadBlob = URL.createObjectURL(
+              new Blob(downloadData, { type: "image/svg+xml" })
+            );
+
+            const downloadLink = document.createElement("a");
+            downloadLink.href = downloadBlob;
+            downloadLink.download = download.filename;
+            contents.appendChild(downloadLink);
+
+            downloadLink.dispatchEvent(
+              new MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+              })
+            );
+
+            contents.removeChild(downloadLink);
+          });
       }
 
       if (bindFunctions) {