Updated app.vue for adding favicon to all pages.

Neel-07 commented 1 year ago

What issue is this referencing?

fixers issue #260

Does the following command run without warnings or errors?

[ ] yes! npm run pr-checks

Have you taken a look at our contributing guidelines?

[ ] yes!

My node version matches the one suggested when running `nvm use`?

[ ] yes!

MandyMeindersma commented 1 year ago

We prefer just one commit if you wanted to squash all those :)

also if you click "deploy preview" in the build section you will be able to see you live changes and I don't actually see the favicon there...

Also we use image kit to how our images so you should just be able to link to it and not download it

MandyMeindersma commented 1 year ago

The link for the favicon is in the ticket :)

Neel-07 commented 1 year ago

@MandyMeindersma I didn't know where things went wrong, but I'm determined to figure it out. I'll do my best to solve this, and I appreciate your patience and support along the way. Thank you for being understanding!" Once i figure out i will squash all the commits made into one.

MandyMeindersma commented 1 year ago

No worries! If you have any questions, let me know :) or if you need a push in a right direction :)

Neel-07 commented 1 year ago

@MandyMeindersma , I think i am making changes to the wrong files can you guide me in this. I’ve been working on adding a favicon to our Vue.js application and I’ve run into some confusion. I understand that in a typical Vue.js project created with Vue CLI, the favicon should be specified in the public/index.html file. However, I couldn’t find an index.html file in our public directory.

I’m wondering if we’re using a setup where the HTML file is generated dynamically, possibly with a tool like vue-router. Could you please confirm if this is the case? And if so, could you provide some guidance on how we’re handling the generation of the main HTML file?

Any help would be greatly appreciated. Thank you!

DerrykBoyd commented 1 year ago

@MandyMeindersma , I think i am making changes to the wrong files can you guide me in this. I’ve been working on adding a favicon to our Vue.js application and I’ve run into some confusion. I understand that in a typical Vue.js project created with Vue CLI, the favicon should be specified in the public/index.html file. However, I couldn’t find an index.html file in our public directory.

I’m wondering if we’re using a setup where the HTML file is generated dynamically, possibly with a tool like vue-router. Could you please confirm if this is the case? And if so, could you provide some guidance on how we’re handling the generation of the main HTML file?

Any help would be greatly appreciated. Thank you!

@Neel-07 you probably want to look into adding this in the nuxt.config.js file rather than adding a link to every page. Add a link to the head.link array for it to show on every page.

On a general note, favicons can be tricky. Browsers can be picky about the format and sizes, if we want consistent results we would need to serve several sizes

Neel-07 commented 1 year ago

@DerrykBoyd made the changes in the nuxt.config.js file then also the favicon is not shown int the deploy preview. Can you help me out.

DerrykBoyd commented 1 year ago

@Neel-07 I pushed some changes to this to your branch. The favicon should be working now. I noticed in the nuxt.config you were doing something like this

   link: [{ rel: "icon", type: "image/x-icon", href: "http://...imagekit..." }]

That didn't work for a few reasons:

the type of "image/x-icon" will only work for a .ico file, when linking to images you want to use the type "image/png"
Imagekit was automatically converting the images to webp format, I'm not sure if browsers would accept that format for favicons. We can force imagekit to serve pngs at the right size using transforms in imagekit, but for something like a favicon it's usually easiest to keep them in the repo. So I added a few images to the public folder.

You can review my changes, but here are the steps I took

Used favicon.io to convert the image provided in the issue into the correct sizes and formats. That service also provides a manifest for the site. It's really handy.
Added the files to the public folder
Added the correct links to the nuxt.config.js file

The deploy preview now correctly shows the favicon. So I will go ahead and merge this in.

Thank you so much for taking this on!

Neel-07 commented 1 year ago

@DerrykBoyd yes you were right i overlooked the the type of "image/x-icon" while adding the imagekit link that's my mistake, but can you explain me like before that i was adding the favicon present in the repo from the static folder, then also the favicon was not visible when checking the deploy preview. If you can explain a bit further it will be helpful for me to understand were was the issue.

DerrykBoyd commented 1 year ago

@DerrykBoyd yes you were right i overlooked the the type of "image/x-icon" while adding the imagekit link that's my mistake, but can you explain me like before that i was adding the favicon present in the repo from the static folder, then also the favicon was not visible when checking the deploy preview. If you can explain a bit further it will be helpful for me to understand were was the issue.

Right, so files served at the server root need to go in the public directory, not in the static directory. See https://nuxt.com/docs/guide/directory-structure/public

That changed when we upgraded to Nuxt3, and I guess that was missed as part of the upgrade. That's probably when we lost our favicon. I will probably open an issue to remove the static directory since I don't think it's needed anymore

Neel-07 commented 1 year ago

oh okay, thanks @DerrykBoyd for explaining me and making me understand.

devedmonton / DES-Website