Feature: Custom Styling for Embedded Downloadable Zip Files (#50)

Adds unique appearance to embedded zip files, styling these like a download button.

`.zip` and `.7z` files will be the main filetype (and at this stage, only filetype) used for downloadable links for tutorials and the like. This makes it more obvious to users that these are meant to be clicked and downloaded.

Author: MasssiveJuice08

quartz/plugins/transformers/ofm.ts

@@ -272,6 +272,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                       type: "html",
                       value: `<iframe src="${url}"></iframe>`,
                     }
+                  // MMW - assign custom styling to .zip embed download link
+                  } else if ([".zip", ".7z"].includes(ext)) {
+                    const downloadText = alias ? alias : fp
+                    return {
+                      type: "html",
+                      value: `<a href="${url}" class="mmw-download-link" download>Download ${downloadText}</a>`,
+                    }
                   } else {
                     const block = anchor
                     return {

quartz/styles/custom.scss

@@ -1088,3 +1088,44 @@ kbd:active kbd {
   color: #db8942;
   text-align: center;
 }
+
+/* ===================== */
+
+/* --- Download Link --- */
+
+a.mmw-download-link:link, a.mmw-download-link:visited {
+  background-color: #8f9fa926; 
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.2rem;
+  width: 100%;
+  transition: .4s;
+  padding: 6px;
+}
+
+a.mmw-download-link:hover, a.mmw-download-link:active {
+  background-color: #8f9fa93d;
+}
+
+a.mmw-download-link::before {
+  /* display download icon before link text */
+  display: inherit;
+  vertical-align: middle;
+  padding-right: 5px;
+}
+
+  /*change svg stroke='' based on dark/light theme*/
+[saved-theme="light"]a.mmw-download-link::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
+}
+
+[saved-theme="dark"]a.mmw-download-link::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24' fill='none' stroke='%23ebebec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
+}
+
+a.mmw-download-link div.popover {
+  display: none;
+  /* prevent link popover from appearing */
+}