Updated metadata

[FrankiePower]

Update Metadata for Better Social Media Previews

Overview

Updated the metadata for the website to provide a custom title, description, and an eye-catching thumbnail. The updated title now appears in the browser tab.

Features

• Customized title and description for better branding
  

• Eye-catching thumbnail image for social media previews. I used the design provided by @NikolaiL and also modified the background.
  

• Edited the Logo to white to upload for the browser tab
  

Technical Implementation

• Updated the layout.tsx file to customize the title and description meta tags
• Replaced the existing thumbnail.jpg in the Next.js public folder with the new design
• Used the Open Graph Previewer Chrome Extension to ensure the metadata is displaying correctly

Components Updated

• layout.tsx file (for title and description updates)
• public/thumbnail.jpg (replaced with new visually appealing image)

Additional Information

• Ensured that the new thumbnail and metadata align with the branding from issue 3. Change the Logo / title / subtitle #10 (Logo/Title/Subtitle change)
• Verified changes using Open Graph Previewer tool

Subsequent Changes Made

• Updated ThemeProvider Component: particularly the useEffect hook to change the favicon based on the current theme.
• Added the media property to the icons to determine when each icon should be used based on the user's color scheme preference.

Related Issues

Closes #9

Your ENS/address: 0x24e765Fcd00106D7175837848ec9073f9fEb9d8e

[vercel]

@FrankiePower is attempting to deploy a commit to the BuidlGuidl Team on Vercel.

A member of the Team first needs to authorize it.

[phipsae]

Nice job of implementing the issue, thanks!

I just found a little thing. See below.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
batch12.buidlguidl.com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 31, 2025 5:19am

[FrankiePower]

After my second to last commit, as i tested , i discovered that the logic was placed in the SwitchTheme, and so the favicon wasn't changing as expected so i had to move the logic to the ThemeProvider.

In the newest changes made, i set up a MutationObserver to listen for changes to the class attribute of the element. If the class attribute changes (indicating a possible switch between dark and light modes), it checks whether the "dark" class is present and updates the favicon accordingly.

When the component is unmounted, the observer is disconnected to prevent memory leaks.

[phipsae]

Thanks for your changes!

For me your implementation in getMetadata.ts is already enough and the other code changes are not needed. So not sure why it isn't working on your computer, weird.

[phipsae]

@frankie, pls look at the other comments above as well (when you find time).

We shouldn't have changes to ThemeProvider.tsx and SwitchTheme.tsx.

[phipsae]

@FrankiePower now there are changes to the main page in the this PR. Pls hold it clean and just have code in here that is related to the metadata.

[FrankiePower]

@phipsae i've resolved the commit issues. This PR is ready to be merged.

[phipsae]

@FrankiePower can you please elaborate on that why the changes in getMetadata are not enough? For me it works totally fine. So I don't need to do any changes to ThemeProvider.tsx and SwitchTheme.tsx.

Thank you!

[FrankiePower]

@phipsae i am done with this issue. it is ready to be merged, if there are no further improvements to be made.