From cc15aa149b78b1125a3cb0dbfea22ac47b6c63ed Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 4 Oct 2019 16:31:20 +0200 Subject: [PATCH 1/3] fix failing exif extraction for some photos --- gatsby/createExifFields.js | 89 ++++++++++++++++++++--------------- src/components/atoms/Exif.tsx | 4 +- 2 files changed, 55 insertions(+), 38 deletions(-) diff --git a/gatsby/createExifFields.js b/gatsby/createExifFields.js index 03547285..6f39d518 100644 --- a/gatsby/createExifFields.js +++ b/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,16 +29,52 @@ 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 + } = exifData.exif + + const model = `${Model}` + 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, @@ -68,10 +86,7 @@ const constructExifFields = (exifData, createNodeField, node) => { shutterspeed, focalLength, exposure, - gps: { - latitude, - longitude - } + gps: { latitude, longitude } } }) } diff --git a/src/components/atoms/Exif.tsx b/src/components/atoms/Exif.tsx index 2cdb5547..18c49cf2 100644 --- a/src/components/atoms/Exif.tsx +++ b/src/components/atoms/Exif.tsx @@ -28,7 +28,9 @@ export default function Exif({ exif }: { exif: ExifProps }) { {iso && {iso}} {focalLength && {focalLength}} -
{gps && }
+ {gps.latitude && ( +
{gps && }
+ )} ) } From 02e0edb7d02142cd4be02d82befd38ad4f0cb95d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 4 Oct 2019 21:12:02 +0200 Subject: [PATCH 2/3] more photo style fixes, clean up footer --- gatsby/createExifFields.js | 7 +++-- src/components/Layout.module.scss | 6 ++-- src/components/atoms/Exif.module.scss | 11 ++++---- src/components/atoms/Exif.tsx | 5 +++- src/components/atoms/ExifMap.tsx | 2 +- .../molecules/IconLinks.module.scss | 3 +- .../molecules/Subscribe.module.scss | 16 ----------- src/components/molecules/Subscribe.tsx | 16 ----------- .../molecules/ThemeSwitch.module.scss | 4 +-- src/components/molecules/Vcard.module.scss | 8 ++++-- src/components/molecules/Vcard.tsx | 7 +++-- src/components/organisms/Footer.module.scss | 28 ++++++++++++++++--- src/components/organisms/Footer.tsx | 8 ++---- src/components/organisms/Header.tsx | 2 -- src/styles/_mixins.scss | 10 +++---- src/templates/Post.tsx | 1 + 16 files changed, 64 insertions(+), 70 deletions(-) delete mode 100644 src/components/molecules/Subscribe.module.scss delete mode 100644 src/components/molecules/Subscribe.tsx diff --git a/gatsby/createExifFields.js b/gatsby/createExifFields.js index 6f39d518..c17312b0 100644 --- a/gatsby/createExifFields.js +++ b/gatsby/createExifFields.js @@ -55,10 +55,10 @@ const constructExifFields = (exifData, createNodeField, node) => { ExposureTime, FocalLength, ExposureBiasValue, - ExposureMode + ExposureMode, + LensModel } = exifData.exif - const model = `${Model}` const iso = `ISO ${ISO}` const fstop = `ƒ ${FNumber}` const focalLength = `${FocalLength}mm` @@ -81,10 +81,11 @@ const constructExifFields = (exifData, createNodeField, node) => { name: 'exif', value: { iso, - model, + model: Model, fstop, shutterspeed, focalLength, + lensModel: LensModel, exposure, gps: { latitude, longitude } } diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index ada64bc4..7f516f15 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -42,14 +42,14 @@ 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; diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index c47c8fda..797a72a3 100644 --- a/src/components/atoms/Exif.module.scss +++ b/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; } diff --git a/src/components/atoms/Exif.tsx b/src/components/atoms/Exif.tsx index 18c49cf2..fdf05876 100644 --- a/src/components/atoms/Exif.tsx +++ b/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,15 +19,17 @@ interface ExifProps { export default function Exif({ exif }: { exif: ExifProps }) { const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif + // iPhone lenses + return ( - ) -} diff --git a/src/components/molecules/ThemeSwitch.module.scss b/src/components/molecules/ThemeSwitch.module.scss index 4735aaa9..69e852a0 100644 --- a/src/components/molecules/ThemeSwitch.module.scss +++ b/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; diff --git a/src/components/molecules/Vcard.module.scss b/src/components/molecules/Vcard.module.scss index 9f025617..63c125db 100644 --- a/src/components/molecules/Vcard.module.scss +++ b/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; diff --git a/src/components/molecules/Vcard.tsx b/src/components/molecules/Vcard.tsx index 68a5765e..94201d97 100644 --- a/src/components/molecules/Vcard.tsx +++ b/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 ( -
+
{name} -

- -

View source @@ -58,8 +55,9 @@ export default function Footer() { return (

diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx index 375870da..1aab7517 100644 --- a/src/components/organisms/Header.tsx +++ b/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() { diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 2583af2d..ea23e298 100644 --- a/src/styles/_mixins.scss +++ b/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); + } } diff --git a/src/templates/Post.tsx b/src/templates/Post.tsx index db634e94..34a6e3e8 100644 --- a/src/templates/Post.tsx +++ b/src/templates/Post.tsx @@ -75,6 +75,7 @@ export const pageQuery = graphql` fstop shutterspeed focalLength + lensModel exposure gps { latitude From 288b2e6039540781cb2018f891287b186d1fa41b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 4 Oct 2019 21:30:45 +0200 Subject: [PATCH 3/3] dark text input --- src/components/Layout.module.scss | 2 +- src/components/Search/SearchInput.module.scss | 5 ----- src/components/atoms/Input.module.scss | 10 +++++++--- src/components/molecules/Menu.module.scss | 11 +++++++++++ src/styles/_variables.scss | 11 ++++++----- src/styles/global.scss | 2 +- 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 7f516f15..8304f409 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -35,7 +35,7 @@ transition-property: transform, background; :global(.has-menu-open) & { - transform: translate3d(0, ($spacer * 3), 0); + transform: translate3d(0, ($spacer * 3.5), 0); } :global(.dark) & { diff --git a/src/components/Search/SearchInput.module.scss b/src/components/Search/SearchInput.module.scss index f84f46b6..bad30172 100644 --- a/src/components/Search/SearchInput.module.scss +++ b/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 { diff --git a/src/components/atoms/Input.module.scss b/src/components/atoms/Input.module.scss index f9a6473f..e456a821 100644 --- a/src/components/atoms/Input.module.scss +++ b/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; } diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss index ecbc11f1..1f4b5a59 100644 --- a/src/components/molecules/Menu.module.scss +++ b/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; + } } } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fdb55f64..e5e4e2b2 100644 --- a/src/styles/_variables.scss +++ b/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; diff --git a/src/styles/global.scss b/src/styles/global.scss index 4f1787ae..54f61e1c 100644 --- a/src/styles/global.scss +++ b/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';