From cdc63d82fa85d0b32643758b3b0e5b25f56e7114 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Thu, 20 Jun 2024 22:08:24 +1200 Subject: [PATCH 1/4] Add initial TS for identifying `.zip` files --- .../download button test.md | 1 + quartz/plugins/transformers/ofm.ts | 6 +++++ quartz/styles/custom.scss | 25 +++++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 content/MMW Design & Planning/download button test.md diff --git a/content/MMW Design & Planning/download button test.md b/content/MMW Design & Planning/download button test.md new file mode 100644 index 00000000..3177993a --- /dev/null +++ b/content/MMW Design & Planning/download button test.md @@ -0,0 +1 @@ +![[Assets/Guides/Patches/Tutorial - Create an ESP Replacer Patch/MMW_Patches_ESP-Replacer_1.0.zip|alt text]] \ No newline at end of file diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index 0c8a2764..12659df3 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -272,6 +272,12 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin type: "html", value: ``, } + // MMW - assign custom styling to .zip embed download link + } else if ([".zip"].includes(ext)) { + return { + type: "html", + value: ``, + } } else { const block = anchor return { diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index fd3b58c2..7c757174 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1088,3 +1088,28 @@ kbd:active kbd { color: #db8942; text-align: center; } + +/* ===================== */ + +/* --- Download Link --- */ + +button.mmw-download-button { + background-color: --highlight; /*#393639*/ + border: none; + color: white; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; +} + +button.mmw-download-button .a.internal::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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.internal.tag-link:before {*/ + /*content: "#"*/ From 8cea37716bb35f2dc1647ef73470851c5b488c35 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Fri, 21 Jun 2024 21:49:46 +1200 Subject: [PATCH 2/4] Update download button - removed ``, + value: `Download ${alias}`, } } else { const block = anchor diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 7c757174..b08b9ba2 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1093,23 +1093,35 @@ kbd:active kbd { /* --- Download Link --- */ -button.mmw-download-button { - background-color: --highlight; /*#393639*/ +a.mmw-download-link:link, a.mmw-download-link:visited { + background-color: #8f9fa926; + color: var(--dark); /*#ebebec*/ border: none; - color: white; - padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; - font-size: 16px; - margin: 4px 2px; - transition-duration: 0.4s; - cursor: pointer; + font-size: 1.2rem; + width: 100%; + transition: .4s; + padding: 6px; +} + +a.mmw-download-link:hover, a.mmw-download-link:active { + /* color: #ebebec !important; */ + /* override Quartz behaviour of highlighting text when hovering */ + background-color: #8f9fa94a; } -button.mmw-download-button .a.internal::before { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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::before { + /* display download icon before link text */ + 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='currentColor' 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"); + display: inherit; + vertical-align: middle; + padding-right: 5px; + color: var(--dark); } -/*a.internal.tag-link:before {*/ - /*content: "#"*/ +a.mmw-download-link div.popover { + display: none; + /* prevent link popover from appearing */ +} From a2dd39e8e74be18a834e292555d919092c708446 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Sat, 22 Jun 2024 21:50:13 +1200 Subject: [PATCH 3/4] Update: add ` const {downloadText` for title, and light/dark mode for svg icon - download title displays alias if alias is present; otherwise displays filename (controlled by `${downloadText}`) - svg `stroke=' '` changes depending on `[saved-theme=""]` --- .../download button test.md | 16 ---------------- quartz/plugins/transformers/ofm.ts | 3 ++- quartz/styles/custom.scss | 16 ++++++++++------ 3 files changed, 12 insertions(+), 23 deletions(-) delete mode 100644 content/MMW Design & Planning/download button test.md diff --git a/content/MMW Design & Planning/download button test.md b/content/MMW Design & Planning/download button test.md deleted file mode 100644 index beab016e..00000000 --- a/content/MMW Design & Planning/download button test.md +++ /dev/null @@ -1,16 +0,0 @@ -![[Assets/Guides/Patches/Tutorial - Create an ESP Replacer Patch/MMW_Patches_ESP-Replacer_1.0.zip|Interesting File Name]] - - -> [!NOTE|right wmed] Title -> -> Contents -> -> ![[Assets/Guides/Patches/Tutorial - Create an ESP Replacer Patch/MMW_Patches_ESP-Replacer_1.0.zip]] - - -> [!infobox] Title -> -> ![[PuzzleBoxOnly.png]] -> -> ![[Assets/Guides/Patches/Tutorial - Create an ESP Replacer Patch/MMW_Patches_ESP-Replacer_1.0.zip|alt text]] - diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index c4cbf8b9..99bde128 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -274,9 +274,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin } // MMW - assign custom styling to .zip embed download link } else if ([".zip"].includes(ext)) { + const downloadText = alias ? alias : fp return { type: "html", - value: `Download ${alias}`, + value: `Download ${downloadText}`, } } else { const block = anchor diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index b08b9ba2..c87e080a 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1095,7 +1095,6 @@ kbd:active kbd { a.mmw-download-link:link, a.mmw-download-link:visited { background-color: #8f9fa926; - color: var(--dark); /*#ebebec*/ border: none; text-align: center; text-decoration: none; @@ -1107,18 +1106,23 @@ a.mmw-download-link:link, a.mmw-download-link:visited { } a.mmw-download-link:hover, a.mmw-download-link:active { - /* color: #ebebec !important; */ - /* override Quartz behaviour of highlighting text when hovering */ - background-color: #8f9fa94a; + background-color: #8f9fa93d; } a.mmw-download-link::before { /* display download icon before link text */ - 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='currentColor' 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"); display: inherit; vertical-align: middle; padding-right: 5px; - color: var(--dark); +} + + /*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 { From 12dfeeb5f11d1cf696eec04a3761497784152292 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Sat, 22 Jun 2024 21:59:25 +1200 Subject: [PATCH 4/4] Add ".7z" in addition to ".zip" file type --- quartz/plugins/transformers/ofm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index 99bde128..0fa41a4d 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -273,7 +273,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin value: ``, } // MMW - assign custom styling to .zip embed download link - } else if ([".zip"].includes(ext)) { + } else if ([".zip", ".7z"].includes(ext)) { const downloadText = alias ? alias : fp return { type: "html",