Download SVG on assets page 404s in non-English languages about ethereum-org-website

[minimalsm]

@kamuik16 I think you're right.

The bug looks like it was introduced in this commit during the migration from Gatsby to NextJS.

For context, our English links before the migration had the en prefix (e.g., https://ethereum.org/en/), but during the migration, we removed them for English but kept them in all other languages (e.g., https://ethereum.org for English, https://ethereum.org/fr/ for French).

In this PR (which was merged yesterday, and will go live soon), we re-added the en prefix for English, so this bug is now also present in English (see deploy preview from that PR: https://deploy-preview-12134--ethereumorg.netlify.app/en/assets/).

To solve this, I think we need to add the lang prefix to the src in the AssetDownloadImage component.

cc: @pettinarip @wackerow

[kamuik16]

I think the problem here is the path definition.
When English is selected as a language the path to any svg i.e. is https://ethereum.org/assets/svgs/eth-diamond-glyph.svg while if any other language is selected the svg's path link adds the language abbreviation in it.
For e.g. for French it becomes https://ethereum.org/fr/assets/svgs/eth-diamond-glyph.svg and for Italian it becomes https://ethereum.org/it/assets/svgs/eth-diamond-glyph.svg. Notice fr and it gets added in the link. This problem is with all the svg links on the page.

I looked around but couldn't figure it out how to solve this.

[FaybianB]

@minimalsm May I be assigned this issue?

[minimalsm]

Hey @FaybianB thanks for offering to help!

Sure, all yours :)!

[FaybianB]

The scope of this seems to include all image files, not just SVGs.

This setting seems to be the root cause of the issue because it adds the language prefix to the src urls for the images as well:

https://github.com/ethereum/ethereum-org-website/blob/dev/next-i18next.config.js#L14

I haven't found the exact location that's prepending the language to the image's href but that's what's happening.

We need to remove this language prefix from the href. I think this is happening within the next-i18next framework.

My approach right now is going to be to hack this middleware.ts function to include a fix to the href:

https://github.com/ethereum/ethereum-org-website/blob/dev/src/middleware.ts#L28

[wackerow]

@kamuik16 I think you're right.

The bug looks like it was introduced in this commit during the migration from Gatsby to NextJS.

The thing I see changed here is we're using a StaticImageData for our image... this is when we import an image as a component (ie. import SomeImage from "./some/path")... we then use const imgSrc = (image as StaticImageData).src inside AssetDownload to get the "source path"... but this is not an accessible path for downloading the image (both png's or svg's).

To get a "source path" that links to a downloadable image we may need to manually add this as a string prop for AssetDownload... ie:

import learnHero from "@/public/heroes/learn-hub-hero.png"

// ...

          <AssetDownload
            title={t("page-assets-learn-hero-name")}
            alt={t("page-assets-learn-hero-name")}
            image={learnHero}
            imgSrc="./heroes/learn-hub-hero.png"
            artistName="Liam Cobb"
            artistUrl="https://liamcobb.com/"
          />

...and then update AssetDownload to accept this prop and use it for the link href

@FaybianB Does that make sense? Using the .src property of a statically imported an image will break inside an href, but a string relative to the public directory should be available at https://ethereum.org/path/file.ext (for example, http://ethereum.org/heroes/learn-hub-hero.png)

[wackerow]

@pettinarip Not sure if you have a better suggestion here aside from just manually adding the src path string (relative to public) as a prop for AssetDownload