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

Add Social Network Sharing on Issue Page, Upgrade to Next 10.2 and use Webpack 5 #50

Merged
merged 17 commits into from Jun 19, 2021

Conversation

gupta-ji6
Copy link
Member

@gupta-ji6 gupta-ji6 commented Jun 13, 2021

This PR adds following changes:

πŸ’₯ Breaking Changes

  • moved all scripts to a separate folder
  • update build command locally & on vercel as well

before - node purgableCSSGenerator.js && next build
after - node scripts/purgableCSSGenerator.js && next build

πŸ’« Animated Floating Share Button on Issue Page

  • this was inspired by web.dev
  • automatically hides on scroll down
  • shows up again on scroll up
  • added debounce for perf benefits

floating-button

TODO

  • use useScrollPosition hook for getting scroll position
  • maybe add more sharing options in the button itself

⬆️ Upgrade to NextJS 10.2

  • First upgraded to Next 10.1
  • Use Webpack 5 for even faster performance and better build times
  • Update @svgr/webpack for webpack 5 from this issue comment
  • Add custom 500 page like custom 404 page
  • Upgrade to Next 10.2.3

⚑ Faster Morph Animation

  • Make morph animation fast for floating share button

@gupta-ji6 gupta-ji6 changed the title Add Social Network Sharing on Issue Page Add Social Network Sharing on Issue Page, Upgrade to Next 10.2 and use Webpack 5 Jun 16, 2021
@gupta-ji6 gupta-ji6 self-assigned this Jun 16, 2021
@gupta-ji6 gupta-ji6 added the enhancement New feature or request label Jun 16, 2021
utils/utils.ts Outdated Show resolved Hide resolved
components/common/FloatingShareButton.tsx Outdated Show resolved Hide resolved
Comment on lines 28 to 38
const toggleVisibiltyOnScroll = debounce(() => {
const currentScrollPos = window.pageYOffset;
if (window.scrollY > prevScrollPos) {
const opacity =
(prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70) || currentScrollPos < 10 ? 1 : 0;
setBtnOpacity(opacity);
} else {
setBtnOpacity(1);
}
setPrevScrollPos(currentScrollPos);
}, 100);
Copy link
Contributor

@prateek3255 prateek3255 Jun 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling this function even with debounce every 100ms might hurt performance. Can we try Intersection observer API because it is just meant for doing this stuff in a performant way. There is also a custom hook for it.

Copy link
Member Author

@gupta-ji6 gupta-ji6 Jun 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

umm I don't think we can use Intersection Observer API here - it's mostly meant to use when a particular element is on screen or not (AFAIK)
our floating button needs to be triggered by scroll, not by it's viewport position. am I making sense?

even the hook website you mentioned uses scroll position to trigger it's back-to-top button (see code) πŸ‘€

useHooks is also a good TS/JS hook resource btw πŸ‘ŒπŸ»

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL I can edit your review comment , WTF & why? πŸ˜„

components/common/SocialShare.tsx Outdated Show resolved Hide resolved
@gupta-ji6 gupta-ji6 merged commit 0ce71ad into main Jun 19, 2021
@gupta-ji6 gupta-ji6 deleted the add-social-sharing branch June 23, 2021 17:34
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.

None yet

2 participants