Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog Enhancements and Fixes #8

Merged
merged 26 commits into from
Jan 29, 2024
Merged

Blog Enhancements and Fixes #8

merged 26 commits into from
Jan 29, 2024

Conversation

hny-codes
Copy link
Owner

@hny-codes hny-codes commented Jan 24, 2024

This pull request brings several changes to the blog, which includes several enhancements as well as adjustments/fixes.

Enhancements:

Adjustments/Fixes

  • Reposition the ThemeSwap component (originally left, now on the right side)
  • Removed Swup.js from project, replaced with View Transition API
  • Fixed Flash of inAccurate coloR Theme (FART) issue that occured when switching to View Transitions

Add Icones to resources used
Replace swup.js with view transition default API. Theme change scripts are also changed to reflect upon the changes bought by the API. Light-mode initial flicker will be done another time
Add a fade viewtransition to site while keeping navbar and footer intact when transitioning pages
Adding an event to listen to astro:page-load caused a FART (Flash of Inaccurate Theme Color) problem that occured upon page load. Keeping the original theme listener as is prevented the white flash that occured at page load. An event listener for astro:after-swap is used to keep the chosen theme across all pages.
@hny-codes hny-codes added the enhancement New feature or request label Jan 24, 2024
@hny-codes hny-codes self-assigned this Jan 24, 2024
Copy link

vercel bot commented Jan 24, 2024

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

Name Status Preview Comments Updated (UTC)
hny-blogs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 29, 2024 11:10pm

Remove Swup.js and fixed spacing with Prettier
@hny-codes
Copy link
Owner Author

hny-codes commented Jan 26, 2024

A bug has occurred on Chrome where:

  • Chat bubbles creates content shifting when animating in on the home page.

This issue only occurs on Chrome at a relatively small viewport (ex. 375px) while Firefox does not seem to have this content shifting error as the API uses the fallback API functions instead due to it being unsupported.

EDIT:

After testing the preview site on different browsers on a mobile device, there seems to be no issue with the content shift as the API's fallback functions are called instead (this results in a simple fade animation).

Browsers tested on mobile device:

  • Safari
  • Brave
  • FireFox
  • Google Chrome

@hny-codes hny-codes merged commit 0a249f5 into main Jan 29, 2024
2 checks passed
@hny-codes hny-codes deleted the dev branch January 29, 2024 23:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant