gatsby icon indicating copy to clipboard operation
gatsby copied to clipboard

Gatsbygram fixes

Open davidlyons opened this issue 1 year ago • 0 comments

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.

Documentation

Gatsby Blog / Gatsbygram Case Study

davidlyons avatar Aug 28 '23 01:08 davidlyons