fix 1/60 shutter speed bug, upgrade gatsby, resize images before sampling colors

gatsby-config.js

@@ -7,7 +7,6 @@ module.exports = {
     siteUrl: "https://chuckdries.com",
   },
   plugins: [
-    "gatsby-plugin-sass",
     "gatsby-plugin-image",
     "gatsby-plugin-react-helmet",
     {

gatsby-node.js

@@ -4,6 +4,7 @@ const chroma = require("chroma-js");
 const chalk = require("chalk");
 const R = require("ramda");
 const exifr = require("exifr");
+const sharp = require('sharp');
 
 const badContrast = (color1, color2) => chroma.contrast(color1, color2) < 4.5;
 
@@ -75,31 +76,31 @@ function processColors(vibrantData, imagePath) {
   };
 }
 
-function convertDMSToDD(dms, positiveDirection) {
-  const res = dms
-    .map((item, i) => {
-      return item / Math.pow(60, i);
-    })
-    .reduce((a, b) => a + b);
-  return positiveDirection ? res : -res;
-}
+// function convertDMSToDD(dms, positiveDirection) {
+//   const res = dms
+//     .map((item, i) => {
+//       return item / Math.pow(60, i);
+//     })
+//     .reduce((a, b) => a + b);
+//   return positiveDirection ? res : -res;
+// }
+
+// const gps = { longitude: null, latitude: null };
+
+// if (exifData) {
+//   if (exifData.gps && exifData.gps.GPSLongitude && exifData.gps.GPSLatitude) {
+//     gps.longitude = convertDMSToDD(
+//       exifData.gps.GPSLongitude,
+//       exifData.gps.GPSLongitudeRef === "E"
+//     );
+//     gps.latitude = convertDMSToDD(
+//       exifData.gps.GPSLatitude,
+//       exifData.gps.GPSLatitudeRef === "N"
+//     );
+//   }
+// }
 
 function transformMetaToNodeData(metaData, vibrantData, imagePath) {
-  // const gps = { longitude: null, latitude: null };
-
-  // if (exifData) {
-  //   if (exifData.gps && exifData.gps.GPSLongitude && exifData.gps.GPSLatitude) {
-  //     gps.longitude = convertDMSToDD(
-  //       exifData.gps.GPSLongitude,
-  //       exifData.gps.GPSLongitudeRef === "E"
-  //     );
-  //     gps.latitude = convertDMSToDD(
-  //       exifData.gps.GPSLatitude,
-  //       exifData.gps.GPSLatitudeRef === "N"
-  //     );
-  //   }
-  // }
-
   const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
 
   return {
@@ -117,8 +118,15 @@ exports.onCreateNode = async function ({ node, actions }) {
       xmp: true,
       // icc: true
     });
-    const vibrantData = await Vibrant.from(node.absolutePath)
-      .quality(3)
+    const resizedImage = await sharp(node.absolutePath)
+      .resize({
+        width: 3000,
+        height: 3000,
+        fit: 'inside'
+      })
+      .toBuffer()
+    const vibrantData = await Vibrant.from(resizedImage)
+      .quality(1)
       .getPalette();
 
     createNodeField({

package.json

@@ -45,7 +45,6 @@
     "gatsby-plugin-preval": "^1.0.0",
     "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-robots-txt": "^1.6.2",
-    "gatsby-plugin-sass": "^4.6.0",
     "gatsby-plugin-sharp": "^3.6.0",
     "gatsby-source-filesystem": "^3.6.0",
     "gatsby-transformer-sharp": "^3.6.0",

src/components/GalleryImage/GalleryImage.js

@@ -28,7 +28,6 @@ const logKeyShortcut = (keyCode) => {
 const GalleryImage = ({ data, pageContext }) => {
   const image = data.allFile.edges[0].node;
   const ar = getAspectRatio(image);
-  console.log(image);
 
   React.useEffect(() => {
     const keyListener = (e) => {

src/utils.js

@@ -44,6 +44,9 @@ const gcd = (a, b) => {
 };
 
 export const getShutterFractionFromExposureTime = (exposureTime) => {
+  if (exposureTime === 0.016666666666666666) {
+    return '1/60'
+  }
   let fraction = exposureTime;
   const len = fraction.toString().length - 2;
 
@@ -54,5 +57,8 @@ export const getShutterFractionFromExposureTime = (exposureTime) => {
 
   numerator /= divisor;
   denominator /= divisor;
+  if (numerator > 1) {
+    return `${exposureTime}`
+  }
   return `${numerator}/${denominator}`;
 };