From ead074951421775ac7f223d4f74afebb019af0dd Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 16 Jun 2026 00:41:37 +0200 Subject: [PATCH 1/4] feat: add SVG logo and enhance toolbar styles and functionality --- .trunk/configs/svgo.config.mjs | 14 ++++++++++ .trunk/trunk.yaml | 15 ++++++---- src/view/frontend/web/css/toolbar.css | 28 ++++++++++++++++++- .../frontend/web/images/mageforge-logo.svg | 3 ++ src/view/frontend/web/js/toolbar/ui.js | 17 +++++------ 5 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 .trunk/configs/svgo.config.mjs create mode 100644 src/view/frontend/web/images/mageforge-logo.svg diff --git a/.trunk/configs/svgo.config.mjs b/.trunk/configs/svgo.config.mjs new file mode 100644 index 00000000..55b4a7a1 --- /dev/null +++ b/.trunk/configs/svgo.config.mjs @@ -0,0 +1,14 @@ +export default { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeViewBox: false, // https://github.com/svg/svgo/issues/1128 + sortAttrs: true, + removeOffCanvasPaths: true, + }, + }, + }, + ], +}; diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml index 4e078e1b..6fd2231e 100644 --- a/.trunk/trunk.yaml +++ b/.trunk/trunk.yaml @@ -7,14 +7,14 @@ cli: plugins: sources: - id: trunk - ref: v1.7.4 + ref: v1.10.2 uri: https://github.com/trunk-io/plugins # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes) runtimes: enabled: - go@1.21.0 - node@22.16.0 - - python@3.10.8 + - python@3.14.4 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration) lint: ignore: @@ -27,13 +27,16 @@ lint: paths: - .ddev/** enabled: - - checkov@3.2.499 - - actionlint@1.7.10 + - pinact@4.0.0 + - svgo@4.0.1 + - taplo@0.10.0 + - checkov@3.3.1 + - actionlint@1.7.12 - git-diff-check - hadolint@2.14.0 - - markdownlint@0.47.0 + - markdownlint@0.48.0 - oxipng@10.1.0 - - prettier@3.8.1 + - prettier@3.8.4 - shellcheck@0.11.0 - shfmt@3.6.0 - trufflehog@3.92.5 diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index 07ae1830..d3b015fd 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -130,6 +130,20 @@ flex-shrink: 0; } +.mageforge-toolbar-burger-logo { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.mageforge-toolbar-burger-logo-img { + height: 20px; + width: auto; + object-fit: contain; + filter: brightness(0) invert(1); +} + .mageforge-toolbar-burger-bar { display: block; width: 14px; @@ -141,7 +155,7 @@ .mageforge-toolbar-burger-label { font-family: var(--mageforge-font-family); - font-size: 12px; + font-size: 14px; font-weight: 600; letter-spacing: 0.03em; color: var(--mageforge-color-white); @@ -236,6 +250,18 @@ display: block; } +.mageforge-toolbar-menu-logo { + display: flex; + align-items: center; + padding-bottom: 8px; +} + +.mageforge-toolbar-menu-logo-img { + height: 24px; + width: auto; + object-fit: contain; +} + .mageforge-toolbar-menu-close { background: none; border: 1px solid var(--mageforge-border-color); diff --git a/src/view/frontend/web/images/mageforge-logo.svg b/src/view/frontend/web/images/mageforge-logo.svg new file mode 100644 index 00000000..12b2b308 --- /dev/null +++ b/src/view/frontend/web/images/mageforge-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 34eb25a1..f7066512 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -4,6 +4,9 @@ export const uiMethods = { createToolbar() { + const logoSvgOrange = ``; + const logoSvgWhite = ``; + this.container = document.createElement("div"); this.container.className = "mageforge-toolbar"; @@ -31,8 +34,10 @@ export const uiMethods = { const menuTitle = document.createElement("div"); menuTitle.className = "mageforge-toolbar-menu-title"; + menuTitle.innerHTML = ` - MageForge Toolbar + + MageForge @@ -273,15 +278,11 @@ export const uiMethods = { this.burgerButton.title = "Audit tools"; this.burgerButton.setAttribute("role", "button"); this.burgerButton.setAttribute("tabindex", "0"); - this.burgerButton.setAttribute("aria-label", "MageForge Toolbar"); + this.burgerButton.setAttribute("aria-label", "MageForge"); this.burgerButton.setAttribute("aria-expanded", "false"); this.burgerButton.innerHTML = ` - - - - - - MageForge Toolbar + + MageForge `; this.burgerButton.onclick = (e) => { e.preventDefault(); From 9041c2e0b15a762101a6d44b91cf7d16f0007c99 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 16 Jun 2026 00:51:51 +0200 Subject: [PATCH 2/4] feat: update toolbar styles and SVG logo integration --- src/view/frontend/web/css/toolbar.css | 18 ++++++++++++------ .../frontend/web/images/mageforge-logo.svg | 4 +--- src/view/frontend/web/js/toolbar/ui.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index d3b015fd..2e33a53f 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -137,11 +137,17 @@ flex-shrink: 0; } -.mageforge-toolbar-burger-logo-img { - height: 20px; +.mageforge-toolbar-burger-logo { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.mageforge-toolbar-burger-logo svg { + height: 25px; width: auto; - object-fit: contain; - filter: brightness(0) invert(1); + fill: white; } .mageforge-toolbar-burger-bar { @@ -256,10 +262,10 @@ padding-bottom: 8px; } -.mageforge-toolbar-menu-logo-img { +.mageforge-toolbar-menu-logo svg { height: 24px; width: auto; - object-fit: contain; + fill: var(--mageforge-color-orange); } .mageforge-toolbar-menu-close { diff --git a/src/view/frontend/web/images/mageforge-logo.svg b/src/view/frontend/web/images/mageforge-logo.svg index 12b2b308..ac345991 100644 --- a/src/view/frontend/web/images/mageforge-logo.svg +++ b/src/view/frontend/web/images/mageforge-logo.svg @@ -1,3 +1 @@ - - - + diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index f7066512..38ff1e89 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -2,10 +2,16 @@ * MageForge Toolbar - DOM construction and menu controls */ +const LOGO_SVG_PATH = 'M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z'; + +function createLogoSvg(fill) { + return ``; +} + export const uiMethods = { createToolbar() { - const logoSvgOrange = ``; - const logoSvgWhite = ``; + const logoSvgOrange = createLogoSvg("#E5622A"); + const logoSvgWhite = createLogoSvg("white"); this.container = document.createElement("div"); this.container.className = "mageforge-toolbar"; From bf78f847b3915eb5555eaf81ec7bea134a63cf8b Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 16 Jun 2026 00:53:20 +0200 Subject: [PATCH 3/4] feat: remove unnecessary styles for toolbar burger logo --- src/view/frontend/web/css/toolbar.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index 2e33a53f..d905e4d1 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -137,13 +137,6 @@ flex-shrink: 0; } -.mageforge-toolbar-burger-logo { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - .mageforge-toolbar-burger-logo svg { height: 25px; width: auto; From 4318fa6db76b0715c740f44d2476a7c7a8e087bf Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 16 Jun 2026 01:01:06 +0200 Subject: [PATCH 4/4] feat: refactor toolbar styles and update SVG logo integration --- src/view/frontend/web/css/toolbar.css | 25 ------------------- .../frontend/web/images/mageforge-logo.svg | 2 +- src/view/frontend/web/js/toolbar/ui.js | 5 ++-- 3 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index d905e4d1..527aedc0 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -121,15 +121,6 @@ background: var(--mageforge-color-green); } -.mageforge-toolbar-burger-icon { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4px; - flex-shrink: 0; -} - .mageforge-toolbar-burger-logo { display: flex; align-items: center; @@ -137,21 +128,6 @@ flex-shrink: 0; } -.mageforge-toolbar-burger-logo svg { - height: 25px; - width: auto; - fill: white; -} - -.mageforge-toolbar-burger-bar { - display: block; - width: 14px; - height: 2px; - background: var(--mageforge-color-white); - border-radius: 1px; - transition: all 0.2s ease; -} - .mageforge-toolbar-burger-label { font-family: var(--mageforge-font-family); font-size: 14px; @@ -258,7 +234,6 @@ .mageforge-toolbar-menu-logo svg { height: 24px; width: auto; - fill: var(--mageforge-color-orange); } .mageforge-toolbar-menu-close { diff --git a/src/view/frontend/web/images/mageforge-logo.svg b/src/view/frontend/web/images/mageforge-logo.svg index ac345991..fceb875e 100644 --- a/src/view/frontend/web/images/mageforge-logo.svg +++ b/src/view/frontend/web/images/mageforge-logo.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 38ff1e89..f5cd3a8c 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -2,7 +2,8 @@ * MageForge Toolbar - DOM construction and menu controls */ -const LOGO_SVG_PATH = 'M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z'; +const LOGO_SVG_PATH = + "M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z"; function createLogoSvg(fill) { return ``; @@ -284,7 +285,7 @@ export const uiMethods = { this.burgerButton.title = "Audit tools"; this.burgerButton.setAttribute("role", "button"); this.burgerButton.setAttribute("tabindex", "0"); - this.burgerButton.setAttribute("aria-label", "MageForge"); + this.burgerButton.setAttribute("aria-label", "Open audit tools menu"); this.burgerButton.setAttribute("aria-expanded", "false"); this.burgerButton.innerHTML = `