Merge pull request #174 from kremalicious/fix/exif

fix failing exif extraction for some photos

gatsby/createExifFields.js

@@ -2,40 +2,22 @@ const fastExif = require('fast-exif')
 const Fraction = require('fraction.js')
 const dms2dec = require('dms2dec')
 
-exports.createExifFields = (node, createNodeField) => {
-  fastExif
-    .read(node.absolutePath, true)
-    .then(exifData => {
-      if (!exifData) return
-      constructExifFields(exifData, createNodeField, node)
-    })
-    .catch(() => null) // just silently fail when exif can't be extracted
+exports.createExifFields = async (node, createNodeField) => {
+  let exifData
+  try {
+    exifData = await fastExif.read(node.absolutePath, true)
+    if (!exifData) return
+    constructExifFields(exifData, createNodeField, node)
+  } catch (error) {
+    // console.error(`${node.name}: ${error.message}`)
+    return null // just silently fail when exif can't be extracted
+  }
 }
 
-const constructExifFields = (exifData, createNodeField, node) => {
-  const { Model } = exifData.image
-  const {
-    ISO,
-    FNumber,
-    ExposureTime,
-    FocalLength,
-    ExposureBiasValue
-  } = exifData.exif
-  const {
-    GPSLatitudeRef,
-    GPSLatitude,
-    GPSLongitudeRef,
-    GPSLongitude
-  } = exifData.gps
+const getGps = gpsData => {
+  if (!gpsData) return
 
-  const { n, d } = new Fraction(ExposureTime)
-  const exposureShortened = parseFloat(ExposureBiasValue.toFixed(2))
-
-  const model = `${Model}`
-  const iso = `ISO ${ISO}`
-  const fstop = `ƒ ${FNumber}`
-  const shutterspeed = `${n}/${d}s`
-  const focalLength = `${FocalLength}mm`
+  const { GPSLatitudeRef, GPSLatitude, GPSLongitudeRef, GPSLongitude } = gpsData
 
   const GPSdec = dms2dec(
     GPSLatitude,
@@ -47,31 +29,65 @@ const constructExifFields = (exifData, createNodeField, node) => {
   const latitude = GPSdec[0]
   const longitude = GPSdec[1]
 
+  return { latitude, longitude }
+}
+
+const getExposure = exposureMode => {
+  const exposureShortened = parseFloat(exposureMode.toFixed(2))
   let exposure
 
-  if (ExposureBiasValue === 0) {
+  if (exposureMode === 0) {
     exposure = `+/- ${exposureShortened} ev`
-  } else if (ExposureBiasValue > 0) {
+  } else if (exposureMode > 0) {
     exposure = `+ ${exposureShortened} ev`
   } else {
     exposure = `${exposureShortened} ev`
   }
 
+  return exposure
+}
+
+const constructExifFields = (exifData, createNodeField, node) => {
+  const { Model } = exifData.image
+  const {
+    ISO,
+    FNumber,
+    ExposureTime,
+    FocalLength,
+    ExposureBiasValue,
+    ExposureMode,
+    LensModel
+  } = exifData.exif
+
+  const iso = `ISO ${ISO}`
+  const fstop = `ƒ ${FNumber}`
+  const focalLength = `${FocalLength}mm`
+
+  // Shutter speed
+  const { n, d } = new Fraction(ExposureTime)
+  const shutterspeed = `${n}/${d}s`
+
+  // GPS
+  let latitude
+  let longitude
+  if (exifData.gps) ({ latitude, longitude } = getGps(exifData.gps))
+
+  // Exposure
+  const exposure = getExposure(ExposureBiasValue || ExposureMode)
+
   // add exif fields to type File
   createNodeField({
     node,
     name: 'exif',
     value: {
       iso,
-      model,
+      model: Model,
       fstop,
       shutterspeed,
       focalLength,
+      lensModel: LensModel,
       exposure,
-      gps: {
-        latitude,
-        longitude
-      }
+      gps: { latitude, longitude }
     }
   })
 }

src/components/Layout.module.scss

@@ -35,21 +35,21 @@
   transition-property: transform, background;
 
   :global(.has-menu-open) & {
-    transform: translate3d(0, ($spacer * 3), 0);
+    transform: translate3d(0, ($spacer * 3.5), 0);
   }
 
   :global(.dark) & {
     background-color: $body-background-color--dark;
     color: $text-color--dark;
     border-top-color: darken($brand-grey, 15%);
-    border-bottom-color: darken($brand-grey, 15%);
-    box-shadow: 0 1px 4px darken($brand-main, 10%),
+    border-bottom-color: darken($body-background-color--dark, 3%);
+    box-shadow: 0 1px 8px rgba(darken($brand-main, 15%), 0.1),
       0 -1px 4px darken($brand-main, 15%);
   }
 
   @media (min-width: $screen-sm) and (min-height: 500px) {
     margin-top: $spacer * 2.65;
-    margin-bottom: $spacer * 19; // height of footer
+    margin-bottom: $spacer * 18; // height of footer
     position: relative;
     z-index: 2;
     min-height: 500px;

src/components/Search/SearchInput.module.scss

@@ -2,15 +2,10 @@
 
 .searchInput {
   composes: input from '../atoms/Input.module.scss';
-  background: $input-bg-focus;
 
   &::-webkit-search-cancel-button {
     display: none;
   }
-
-  &:hover {
-    background: $input-bg-focus;
-  }
 }
 
 .searchInputClose {

src/components/atoms/Exif.module.scss

@@ -21,7 +21,7 @@
     display: block;
     flex: 1 1 20%;
     white-space: nowrap;
-    padding: $spacer / 1.5;
+    padding: $spacer $spacer / 1.5;
     border-bottom: 1px dashed $brand-grey-dimmed;
 
     &:first-child {
@@ -29,17 +29,18 @@
     }
 
     :global(.dark) & {
-      border-bottom-color: $brand-grey;
+      border-bottom-color: rgba($brand-grey, 0.6);
     }
   }
 
   @media (min-width: $screen-sm) {
     margin-bottom: 0;
+    font-size: $font-size-small;
 
     span {
       border-left: 1px dashed $brand-grey-dimmed;
       border-bottom: 0;
-      padding: $spacer;
+      padding: $spacer * 1.5 $spacer;
 
       &,
       &:first-child {
@@ -51,7 +52,7 @@
       }
 
       :global(.dark) & {
-        border-left-color: $brand-grey;
+        border-left-color: rgba($brand-grey, 0.6);
       }
     }
   }
@@ -62,5 +63,5 @@
   @include media-frame;
 
   overflow: hidden;
-  height: 160px;
+  height: 200px;
 }

src/components/atoms/Exif.tsx

@@ -8,6 +8,7 @@ interface ExifProps {
   fstop: string
   shutterspeed: string
   focalLength: string
+  lensModel: string
   exposure: string
   gps: {
     latitude: string
@@ -18,17 +19,21 @@ interface ExifProps {
 export default function Exif({ exif }: { exif: ExifProps }) {
   const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif
 
+  // iPhone lenses
+
   return (
     <aside className={styles.exif}>
       <div className={styles.data}>
         {model && <span title="Camera model">{model}</span>}
+        {focalLength && <span title="Focal length">{focalLength}</span>}
         {fstop && <span title="Aperture">{fstop}</span>}
         {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
         {exposure && <span title="Exposure">{exposure}</span>}
         {iso && <span title="ISO">{iso}</span>}
-        {focalLength && <span title="Focal length">{focalLength}</span>}
       </div>
-      <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>
+      {gps.latitude && (
+        <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>
+      )}
     </aside>
   )
 }

src/components/atoms/ExifMap.tsx

@@ -51,7 +51,7 @@ export default function ExifMap({
     <Map
       center={[latitude, longitude]}
       zoom={zoom}
-      height={160}
+      height={200}
       attribution={false}
       provider={isDarkMode ? providers['dark'] : providers['light']}
       metaWheelZoom={true}

src/components/atoms/Input.module.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .input {
   display: block;
@@ -16,12 +17,15 @@
   transition: all ease-in-out 0.15s;
   appearance: none;
 
-  &:hover {
-    background: lighten($input-bg, 30%);
+  @include placeholder();
+
+  :global(.dark) & {
+    color: $input-color--dark;
+    background-color: $input-bg--dark;
+    @include placeholder($input-color-placeholder--dark);
   }
 
   &:focus {
-    background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: 0;
   }

src/components/molecules/IconLinks.module.scss

@@ -4,7 +4,8 @@
   text-align: center;
   width: 2rem;
   padding: $spacer / 4;
-  margin: 0;
+  margin-left: $spacer / 4;
+  margin-right: $spacer / 4;
   display: inline-block;
   color: $text-color-light;
 

src/components/molecules/Menu.module.scss

@@ -44,8 +44,19 @@
     display: block;
     text-align: center;
 
+    &:hover,
+    &:focus {
+      color: $link-color-hover;
+    }
+
     :global(.dark) & {
+      color: $text-color--dark;
       text-shadow: 0 -1px 0 rgba(#000, 0.5);
+
+      &:hover,
+      &:focus {
+        color: $link-color-hover;
+      }
     }
   }
 }

src/components/molecules/Subscribe.module.scss

@@ -1,16 +0,0 @@
-@import 'variables';
-
-// Subscribe component
-.subscribe {
-  margin: $spacer auto;
-
-  p {
-    text-align: center;
-    margin: 0;
-  }
-}
-
-.title {
-  font-size: $font-size-h5;
-  margin-bottom: $spacer / 2;
-}

src/components/molecules/Subscribe.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import IconLinks from './IconLinks'
-import styles from './Subscribe.module.scss'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
-
-export default function Subscribe() {
-  const { rss, jsonfeed } = useSiteMetadata()
-  const links = [rss, jsonfeed]
-
-  return (
-    <aside className={styles.subscribe}>
-      <h1 className={styles.title}>Subscribe</h1>
-      <IconLinks links={links} />
-    </aside>
-  )
-}

src/components/molecules/ThemeSwitch.module.scss

@@ -4,9 +4,7 @@
 .themeSwitch {
   position: relative;
   display: inline-block;
-  margin-right: $spacer;
-  opacity: 0.75;
-  bottom: -0.1rem;
+  margin-bottom: $spacer * $line-height;
 
   svg {
     width: 0.8rem;

src/components/molecules/Vcard.module.scss

@@ -1,10 +1,14 @@
 @import 'variables';
 @import 'mixins';
 
+.vcard {
+  margin-bottom: $spacer * 2;
+}
+
 .avatar {
   @include media-frame;
 
-  margin-bottom: ($spacer / 2);
+  margin-bottom: $spacer / 3;
 
   &,
   img {
@@ -16,7 +20,7 @@
 .description {
   font-size: $font-size-h5;
   margin-top: 0;
-  margin-bottom: ($spacer / 4);
+  margin-bottom: ($spacer / $line-height);
 
   a {
     display: block;

src/components/molecules/Vcard.tsx

@@ -23,12 +23,13 @@ const query = graphql`
 
 export default function Vcard() {
   const data = useStaticQuery(query)
-  const { twitter, github, facebook, name, uri } = useSiteMetadata().author
+  const { author, rss, jsonfeed } = useSiteMetadata()
+  const { twitter, github, name, uri } = author
   const avatar = data.avatar.edges[0].node.childImageSharp.fixed
-  const links = [twitter, github, facebook]
+  const links = [twitter, github, rss, jsonfeed]
 
   return (
-    <div className="vcard author">
+    <div className={styles.vcard}>
       <Img
         className={styles.avatar}
         fixed={avatar}

src/components/organisms/Footer.module.scss

@@ -22,6 +22,20 @@
   }
 }
 
+.theme {
+  margin: $spacer auto;
+
+  p {
+    text-align: center;
+    margin: 0;
+  }
+}
+
+.themeTitle {
+  font-size: $font-size-h5;
+  margin-bottom: $spacer / 2;
+}
+
 .copyright {
   padding-top: $spacer;
   padding-bottom: $spacer;
@@ -31,22 +45,28 @@
     font-size: $font-size-mini;
   }
 
+  a,
+  button {
+    margin-left: $spacer;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
   svg {
     width: 15px;
     height: 15px;
-    margin-right: 0.2em;
+    margin-right: 0.25rem;
     margin-bottom: -2px;
     display: inline-block;
   }
 }
 
 .btc {
-  margin-left: ($spacer / 2);
-
   // stylelint-disable-next-line
   svg {
     width: 10px;
-    margin-right: 0;
   }
 
   code {

src/components/organisms/Footer.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Container from '../atoms/Container'
 import Vcard from '../molecules/Vcard'
-import Subscribe from '../molecules/Subscribe'
+import ThemeSwitch from '../molecules/ThemeSwitch'
 import ModalThanks from '../molecules/ModalThanks'
 
 import { ReactComponent as Github } from '../../images/github.svg'
@@ -28,9 +28,6 @@ function Copyright({
         <a href={uri} rel="me">
           {name}
         </a>
-      </p>
-
-      <p>
         <a href={`${github}/blog`}>
           <Github />
           View source
@@ -58,8 +55,9 @@ export default function Footer() {
   return (
     <footer role="contentinfo" className={styles.footer}>
       <Container>
+        <ThemeSwitch />
         <Vcard />
-        <Subscribe />
+
         <Copyright showModal={showModal} toggleModal={toggleModal} />
       </Container>
     </footer>

src/components/organisms/Header.tsx

@@ -3,7 +3,6 @@ import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Search from '../Search'
 import Menu from '../molecules/Menu'
-import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 
 import styles from './Header.module.scss'
@@ -20,7 +19,6 @@ export default function Header() {
           </h1>
 
           <nav role="navigation" className={styles.nav}>
-            <ThemeSwitch />
             <Search lng="en" />
             <Menu />
           </nav>

src/styles/_mixins.scss

@@ -244,12 +244,12 @@
   border-radius: $border-radius;
   box-shadow: 0 1px 3px rgba($brand-grey, 0.2);
 
-  :global(.dark) & {
-    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
-      0 5px 16px rgba(darken($brand-main, 20%), 0.15);
-  }
-
   @media (min-width: $screen-sm) {
     border: 2px solid transparent;
   }
+
+  :global(.dark) & {
+    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
+      0 5px 16px rgba(darken($brand-main, 20%), 0.25);
+  }
 }

src/styles/_variables.scss

@@ -59,7 +59,6 @@ $line-height-small: 1.1428571429;
 $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
   Helvetica, Arial, sans-serif;
 $font-weight-base: 400;
-$font-color-base: $text-color;
 
 $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
   'Courier New', monospace;
@@ -103,15 +102,17 @@ $screen-lg: 87.5em;
 // Forms
 /////////////////////////////////////
 
-$input-bg: rgba(#fff, 0.85);
-$input-bg-focus: #fff;
+$input-bg: darken($body-background-color, 5%);
+$input-bg--dark: darken($body-background-color--dark, 5%);
 $input-bg-disabled: $brand-grey-light;
 
 $input-font-size: $font-size-base;
 $input-font-weight: $font-weight-base;
 
-$input-color: $font-color-base;
-$input-color-placeholder: rgba(46, 79, 92, 0.3);
+$input-color: $text-color;
+$input-color--dark: $text-color--dark;
+$input-color-placeholder: $brand-grey-light;
+$input-color-placeholder--dark: $brand-grey;
 
 $input-border: $brand-grey-light;
 $input-border-radius: $border-radius;

src/styles/global.scss

@@ -24,7 +24,7 @@ body {
   font-weight: $font-weight-base;
   font-size: $font-size-base;
   line-height: $line-height;
-  color: $font-color-base;
+  color: $text-color;
   text-rendering: optimizeLegibility;
   letter-spacing: -0.01em;
   font-feature-settings: 'liga', 'kern';

src/templates/Post.tsx

@@ -75,6 +75,7 @@ export const pageQuery = graphql`
               fstop
               shutterspeed
               focalLength
+              lensModel
               exposure
               gps {
                 latitude