image config tweaks

gatsby-config.js

@@ -28,7 +28,9 @@ module.exports = {
       resolve: 'gatsby-plugin-sharp',
       options: {
         stripMetadata: false,
-        defaultQuality: 75
+        defaults: {
+          quality: 85
+        }
       }
     },
     'gatsby-transformer-sharp',

src/components/atoms/Exif.module.css

@@ -50,7 +50,7 @@
 .map {
   composes: breakout from '../Layout.module.css';
   composes: frame from './Image.module.css';
-  height: 180px;
+  height: 220px;
   margin-top: calc(var(--spacer) * 2);
 }
 

src/components/atoms/ExifMap.tsx

@@ -4,7 +4,7 @@ import Marker from 'pigeon-marker'
 import useDarkMode from '../../hooks/useDarkMode'
 
 const mapbox =
-  (mapboxId: string) => (x: string, y: string, z: string, dpr?: number) =>
+  (mapboxId: string) => (x: string, y: string, z: string, dpr: number) =>
     `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${
       dpr >= 2 ? '@2x' : ''
     }?access_token=${process.env.GATSBY_MAPBOX_ACCESS_TOKEN}`
@@ -33,7 +33,7 @@ export default function ExifMap({
     <Map
       center={[latitude, longitude]}
       zoom={zoom}
-      height={180}
+      height={220}
       dprs={[1, 2]}
       attribution={false}
       provider={isDarkMode ? providers['dark'] : providers['light']}

src/components/atoms/Image.tsx

@@ -25,7 +25,7 @@ export const imageSizeDefault = graphql`
     original {
       src
     }
-    gatsbyImageData(layout: CONSTRAINED, width: 1040, quality: 85)
+    gatsbyImageData(width: 1040)
   }
 `
 
@@ -35,10 +35,8 @@ export const imageSizeThumb = graphql`
       src
     }
     gatsbyImageData(
-      layout: CONSTRAINED
       width: 480
       height: 180
-      quality: 85
       transformOptions: { cropFocus: CENTER }
     )
   }
@@ -50,10 +48,8 @@ export const photoSizeThumb = graphql`
       src
     }
     gatsbyImageData(
-      layout: CONSTRAINED
       width: 316
       height: 316
-      quality: 85
       transformOptions: { cropFocus: CENTER }
     )
   }

tsconfig.json

@@ -2,20 +2,18 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "skipLibCheck": true,
-    "strictBindCallApply": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictPropertyInitialization": true,
-    "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
+    "lib": ["dom", "es2017"],
+    // "allowJs": true,
+    // "checkJs": true,
+    "jsx": "react",
+    // "strict": true,
     "esModuleInterop": true,
-    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "skipLibCheck": true,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "exclude": ["node_modules", "public", ".cache", "*.js"],