From 15b998ff0cc4164a30abe44dfaca1718426111c4 Mon Sep 17 00:00:00 2001 From: Brad Smith Date: Mon, 30 Sep 2024 13:01:22 -0400 Subject: [PATCH 1/2] chore: ds-783 remove unused empty logo assets Relates to JIRA: DISCOVERY-783 --- src/images/logo.svg | 10 ---------- src/images/logoBrand.svg | 10 ---------- 2 files changed, 20 deletions(-) delete mode 100644 src/images/logo.svg delete mode 100644 src/images/logoBrand.svg diff --git a/src/images/logo.svg b/src/images/logo.svg deleted file mode 100644 index 14a73135..00000000 --- a/src/images/logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - diff --git a/src/images/logoBrand.svg b/src/images/logoBrand.svg deleted file mode 100644 index 5bdf544c..00000000 --- a/src/images/logoBrand.svg +++ /dev/null @@ -1,10 +0,0 @@ - - From 0ce5efbed1a801047233d2ffff84d41b8c7231b9 Mon Sep 17 00:00:00 2001 From: Brad Smith Date: Mon, 30 Sep 2024 15:27:05 -0400 Subject: [PATCH 2/2] fix: ds-783 update title SVG assets Long explanation ahead. TLDR: I had to make SVG files in a very particular way to prevent patternfly/react/webpack from crashing on them. `titleBrand.svg` and `title.svg` were created using the `Red Hat Display` font in Inkscape which is, at the time of this writing, the official font for signage like this. Text objects were converted to paths before saving. The path objects produced for the text (e.g. "Discovery") were also broken into separate objects using the "Break apart" command. All objects include a faint hairline stroke (`rgba(00000033)`) so the white shapes are still visible on all-white backgrounds. The files were saved as "Plain SVG". These instructions are **VERY IMPORTANT** to follow precisely if you want to make future changes to SVGs in quipucords-ui like this. **DO NOT SAVE AS "Optimized SVG" OR POST-PROCESS THESE FILES THROUGH `scour`.** Although optimized files *are* perfectly valid and display correctly in all modern web browsers like Firefox, Chrome, and Safari as well as other popular SVG viewers, there are problems in how quipucords-ui invokes patternfly/react/webpack to "import" those SVG files (instead of simply copying them as static assets and referring to their paths in `src`/`srcset` attributes) that result in the UI failing to display them in the generated output. When "Quipucords" (`title.svg`) is saved as "Plain SVG", patternfly/react/webpack produces the following DOM, which correctly displays the image in the web browser, as seen by Firefox's inspector: Quipucords logo However, when that same SVG is "optimized", patternfly/react/webpack produces a `srcset` attribute containing the full contents of the file. This is very bad and wrong, and the web browser does not display the image. Here is an example of the DOM produced in that case, with the much longer `srcset` shortened for sake of display here: Quipucords logo When saving the files, why must we "Break apart" the path? This is to work around a similar issue in how the patternfly/react/webpack wrongly interprets or packs the file data. Some shapes cause patternfly/react/webpack parsing to fail and produce a `srcset` containing the full file just like it does when the SVG file is "optimized". For example, when the word "Discovery" (`titleBrand.svg`) starts with the capital letter `D` set in the `Red Hat Display` font and is a saved as a single shape object, patternfly/react/webpack fails to process that file. However, if you change that `D` to a different font *or* force the single path object (containing all letters' shapes) into separate path objects, patternfly/react/webpack seems to be okay with that, and it generates a working `srcset` attribute. The current solution works within the limitations of the framework, but we encourage you to research working alternatives (like old-school JS) and update the related UI code. --- src/images/title.svg | 67 +++++++++----------- src/images/titleBrand.svg | 129 +++++++++++++++++++++----------------- 2 files changed, 102 insertions(+), 94 deletions(-) diff --git a/src/images/title.svg b/src/images/title.svg index d5e00acb..09a80c68 100644 --- a/src/images/title.svg +++ b/src/images/title.svg @@ -1,40 +1,31 @@ - - - - - + + + + + + - Quipucords - - - - - - - - - - + + + diff --git a/src/images/titleBrand.svg b/src/images/titleBrand.svg index 15a5df39..7c2ad2af 100644 --- a/src/images/titleBrand.svg +++ b/src/images/titleBrand.svg @@ -1,58 +1,75 @@ - - - - - + + + + + + - prodisco - - - - - - - - - - - - - - - - + + + + + + + + + + + +