gatsby
gatsby copied to clipboard
Gatsbygram fixes
Description
Found and fixed a few issues in the Gatsbygram example project:
- Fixed image scraper, query string, username/likes for GraphQL url nodes, and replaced lodash
get()
with optional chaining. - Download avatar image locally with scraper. Instagram profile pic url isn't allowed cross origin.
- Ran image scraper for the same account. The large number of files changed in this PR is mostly from the scraper images removed / downloaded / changed in the data/images folder. Some newer images are not square, so set modal image to
object-fit: contain
to prevent squishing. (This is a quick fix, but looks like Instagram only does a "contain" for horizontal / landscape images, and vertical / portrait images affect the width of the modal so there is no letterboxing on the left and right sides of vertical modal images) - Refactored modal to use a function component instead of a class component,
useStaticQuery
instead of<StaticQuery />
,and prevent space key on modal from scrolling the page down. - Fixed modal
findCurrentIndex()
condition for broken previous and next buttons. - Fixed eslint accessibility warnings: changed 'Load More' anchor to button, ignored modal backdrop div with onClick.
- Updated dependencies including react-icons and ran automigration for Cypress.
- Updated logo: more simple retro camera icon from react-icons fa6.