Handle serving static images and display new Mathesar logo in the header

[pavish]

This issue comprises of 2 tasks:

• Handle serving static image files - This involves some research.
• Use the new Mathesar logo in the header

Handling static files

• Static files can included by two ways:
  • Include them within the mathesar_ui folder and import them where needed. Refer Vite static asset handling docs.
    • This method requires some additional handling to perform. From the Vite backend integration docs,

      Also make sure the server is configured to serve static assets in the Vite working directory, otherwise assets such as images won't be loaded properly.

    • As per this, we need to ensure that django is capable of serving these files during development mode. How to do this is left to anyone working on this issue to research.
    • We also need to verify that the built files contain the correct url after vite build.
  • Include them as static assets in django and directly use the url in the frontend. The steps involved is left for anyone working on the issue to research.

Note: Whoever is working on this issue must present their research in the comments and get the approach approved before submitting a PR.

New mathesar logo

The Mathesar logo is currently not shown in the product header, instead a stand-in fontawesome icon is displayed.

The currently displayed stand-in icon: needs to be replaced by the new logo.

The new icon can be downloaded from here: Mathesar-logo

[naveenvarma600]

I'm interested in doing this one. as mentioned in the second way, we can simply add the image in the images folder(in static folder) and use it in the frontend. Below are the steps:

1. making a static directory which has an images directory(contains the logo and any images if added in future) inside it
2. giving the STATIC_URL in settings.py
3. Loading the static image(LOGO) into svelte file (Header.svelte)

Can you please look into this and let me know if there any mistakes or modifications, so that I can start contributing to the issue.

[pavish]

@naveenvarma600 Sounds good to me. A few notes on top of my mind:

• We already have the STATIC_URL pointing to the /static/ directory in settings.py.
• Our frontend source gets built to /static/mathesar which will get cleared everytime vite build runs on mathesar_ui. Refer build config in /mathesar_ui/vite.config.js.
• The images should not be placed within /static/mathesar. It can however be placed within another new directory such as /static/images/ as you've mentioned.
• This images folder should be included in STATICFILES_DIRS in settings.py

I've assigned the issue to you. Let us know if you need any help.

[yashpatwa60]

Hey I recently looked at this issue and tried some methods and got stuck mid-way

• First I created a folder of assets inside mathesar_ui and added a logo.
• Then I imported the logo with two methods from Vite static asset handling docs 1. Using a new URL object, it worked perfectly fine but didn't pass the test because of import.meta. 2. Using ?raw import worked fine, but we have less flexibility in styling the logo.

from the first method, I got this result

can you please look into it If I am going right, So I could contribute here.

[pavish]

@naveenvarma600 There hasn't been any update from you on this issue for a while, so I'm un-assigning you. Please feel free to pick another issue.

[pavish]

@yashpatwa60 I'm assigning this issue to you.

Using raw import worked fine, but we have less flexibility in styling the logo.

We do not need flexibility in styling the logo here. It is a static asset and is meant to be used directly. So, this is fine.

If you got it to work with dev mode, please also ensure that it works after the files are built. As mentioned in the issue description, this might require additional handling.

Inorder to build the files:

• Run vite build in the mathesar_ui directory within the container.
• Stop the server if it's running. Change MODE=DEVELOPMENT to MODE=PRODUCTION in your .env file.
• Start the server.
• Verify if the icon displays.

[manasa-sm]

can i do this

[kgodey]

@manasa-sm This is already assigned, so it's not available to be worked on.