add exif icons, fix formatted exposure

gatsby/createExif.js

@@ -80,7 +80,7 @@ function formatExif(exifData) {
   } = exifData.exif
 
   const iso = `ISO ${ISO}`
-  const fstop = `ƒ ${FNumber}`
+  const fstop = `ƒ/${FNumber}`
   const focalLength = `${FocalLengthIn35mmFormat || FocalLength}mm`
 
   // Shutter speed
@@ -126,7 +126,7 @@ function formatGps(gpsData) {
 }
 
 function formatExposure(exposureMode) {
-  if (!exposureMode) return
+  if (exposureMode === null || exposureMode === undefined) return
 
   const exposureShortened = parseFloat(exposureMode.toFixed(2))
   let exposure

src/components/atoms/Exif.module.scss

@@ -23,6 +23,12 @@
     padding: $spacer $spacer / 1.5;
     border-bottom: 1px dashed $brand-grey-dimmed;
 
+    svg {
+      display: block;
+      margin-bottom: $spacer / 8;
+      opacity: 0.65;
+    }
+
     &:first-child {
       flex-basis: 100%;
     }

src/components/atoms/Exif.tsx

@@ -2,6 +2,22 @@ import React from 'react'
 import ExifMap from './ExifMap'
 import styles from './Exif.module.scss'
 import { Exif as ExifMeta } from '../../@types/Image'
+import Icon from './Icon'
+
+const ExifData = ({
+  title,
+  value,
+  icon
+}: {
+  title: string
+  value: string
+  icon: string
+}) => (
+  <span title={title}>
+    <Icon name={icon} />
+    {value}
+  </span>
+)
 
 export default function Exif({ exif }: { exif: ExifMeta }) {
   const {
@@ -17,12 +33,20 @@ export default function Exif({ exif }: { exif: ExifMeta }) {
   return (
     <aside className={styles.exif}>
       <div className={styles.data}>
-        {model && <span title="Camera model">{model}</span>}
+        {model && <ExifData title="Camera model" value={model} icon="Camera" />}
-        {focalLength && <span title="Focal length">{focalLength}</span>}
+        {focalLength && (
-        {fstop && <span title="Aperture">{fstop}</span>}
+          <ExifData title="Focal length" value={focalLength} icon="Crosshair" />
-        {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
+        )}
-        {exposure && <span title="Exposure">{exposure}</span>}
+        {fstop && <ExifData title="Aperture" value={fstop} icon="Aperture" />}
-        {iso && <span title="ISO">{iso}</span>}
+        {shutterspeed && (
+          <ExifData
+            title="Shutter speed"
+            value={shutterspeed}
+            icon="Stopwatch"
+          />
+        )}
+        {exposure && <ExifData title="Exposure" value={exposure} icon="Sun" />}
+        {iso && <ExifData title="ISO" value={iso} icon="Maximize" />}
       </div>
       {gps && gps.latitude && (
         <div className={styles.map}>

src/components/atoms/Icon.tsx

@@ -12,22 +12,28 @@ import {
   Moon,
   Compass,
   X,
-  Clipboard,
+  Copy,
   Search,
   ExternalLink,
   Link,
   ChevronRight,
-  ChevronLeft
+  ChevronLeft,
+  Camera,
+  Aperture,
+  Maximize,
+  Crosshair
 } from 'react-feather'
 // custom icons
 import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
+import { ReactComponent as Stopwatch } from '../../images/stopwatch.svg'
 import styles from './Icon.module.scss'
 
 const components: any = {
   Download: ArrowDownCircle,
   Jsonfeed,
   Bitcoin,
+  Stopwatch,
   ArrowDownCircle,
   Edit,
   GitHub,
@@ -37,12 +43,16 @@ const components: any = {
   Moon,
   Compass,
   X,
-  Clipboard,
+  Copy,
   Search,
   ExternalLink,
   Link,
   ChevronRight,
-  ChevronLeft
+  ChevronLeft,
+  Camera,
+  Aperture,
+  Maximize,
+  Crosshair
 }
 
 const Icon = ({ name }: { name: string }) => {

src/components/atoms/Qr.module.scss

@@ -31,15 +31,13 @@
   padding: $spacer / 3;
 
   svg {
-    width: 1rem;
+    stroke: $brand-grey-light;
-    height: 1rem;
-    fill: $brand-grey-light;
     transition: 0.15s ease-out;
   }
 
   &:hover {
     svg {
-      fill: $brand-grey-dimmed;
+      stroke: $brand-grey-dimmed;
     }
   }
 }
@@ -49,6 +47,6 @@
 
   // stylelint-disable-next-line no-descending-specificity
   svg {
-    fill: $brand-grey-dimmed;
+    stroke: $brand-grey-dimmed;
   }
 }

src/components/atoms/Qr.tsx

@@ -36,7 +36,7 @@ export default function Qr({
           onSuccess={e => onCopySuccess(e)}
           className={styles.button}
         >
-          <Icon name="Clipboard" />
+          <Icon name="Copy" />
         </Clipboard>
       </pre>
     </>

src/components/molecules/Networks.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import styles from './IconLinks.module.scss'
 import Icon from '../atoms/Icon'
+import styles from './Networks.module.scss'
 
 function NetworkIcon({ link }: { link: string }) {
   let IconComp

src/components/molecules/Vcard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Img, { FixedObject } from 'gatsby-image'
-import IconLinks from './IconLinks'
+import IconLinks from './Networks'
 import styles from './Vcard.module.scss'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 

src/images/stopwatch.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+  <path d="M9.5,22 C14.7467051,22 19,17.7467051 19,12.5 C19,7.25329488 14.7467051,3 9.5,3 C4.25329488,3 0,7.25329488 0,12.5 C0,17.7467051 4.25329488,22 9.5,22 Z M18,6.94974747 L20.0125631,5.26256313 M9.25314078,13.8966698 L12.2531408,14.8966698 M6.5,0.5 L11.5,0.5 M9,9 L9,14" transform="translate(1 1)"/>
+</svg>