diff --git a/gatsby/TODO.md b/gatsby/TODO.md new file mode 100644 index 0000000..4848762 --- /dev/null +++ b/gatsby/TODO.md @@ -0,0 +1,13 @@ +- Gallery + - [x] Custom image metadata + - [ ] add metadata to image files + - [ ] image details page (modal route?) + - [ ] gallery page + +- [ ] homepage to gallery page transition +- [ ] homepage basic layout +- [ ] portfolio page + +- [ ] tailwind +- [ ] typescript +- [ ] graphql codegen \ No newline at end of file diff --git a/gatsby/data/gallery/DSC4452.jpg b/gatsby/data/gallery/DSC4452.jpg new file mode 100644 index 0000000..8268528 Binary files /dev/null and b/gatsby/data/gallery/DSC4452.jpg differ diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js index 7beb70f..944b55e 100644 --- a/gatsby/gatsby-config.js +++ b/gatsby/gatsby-config.js @@ -16,6 +16,7 @@ module.exports = { "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp", + // "gatsby-plugin-sharp-exif", { resolve: "gatsby-source-filesystem", options: { diff --git a/gatsby/gatsby-node.js b/gatsby/gatsby-node.js new file mode 100644 index 0000000..d69680e --- /dev/null +++ b/gatsby/gatsby-node.js @@ -0,0 +1,65 @@ +const fs = require('fs'); +const util = require('util') +const { read } = require('fast-exif'); +const iptc = require('node-iptc'); + +const readFile = util.promisify(fs.readFile) + + +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 transformMetaToNodeData(exifData, iptcData) { + 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' + ); + } + } + + + return { + exif: exifData?.exif, + gps, + meta: { + dateTaken: exifData?.exif?.DateTimeOriginal + }, + iptc: iptcData || undefined + }; +} + + +exports.onCreateNode = async function ({ node, getNode, actions }) { + const { createNodeField } = actions; + if (node.internal.type === 'ImageSharp') { + console.log(node) + const parent = getNode(node.parent); + + const file = await readFile(parent.absolutePath) + const iptcData = iptc(file) + const exifData = await read(parent.absolutePath) + createNodeField({ + node, + name: 'imageMeta', + value: transformMetaToNodeData(exifData, iptcData) + }); + } +} \ No newline at end of file diff --git a/gatsby/package-lock.json b/gatsby/package-lock.json index bc14adf..aa58bf1 100644 --- a/gatsby/package-lock.json +++ b/gatsby/package-lock.json @@ -11,6 +11,7 @@ "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^1.12.0", + "fast-exif": "^1.0.1", "gatsby": "^3.4.1", "gatsby-plugin-image": "^1.6.0", "gatsby-plugin-manifest": "^3.6.0", @@ -18,9 +19,11 @@ "gatsby-plugin-react-helmet": "^4.6.0", "gatsby-plugin-sass": "^4.6.0", "gatsby-plugin-sharp": "^3.6.0", + "gatsby-plugin-sharp-exif": "^1.0.4", "gatsby-plugin-styled-components": "^4.6.0", "gatsby-source-filesystem": "^3.6.0", "gatsby-transformer-sharp": "^3.6.0", + "node-iptc": "^1.0.5", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", @@ -9370,6 +9373,11 @@ "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz", "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=" }, + "node_modules/exif-reader": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/exif-reader/-/exif-reader-1.0.3.tgz", + "integrity": "sha512-tWMBj1+9jUSibgR/kv/GQ/fkR0biaN9GEZ5iPdf7jFeH//d2bSzgPoaWf1OfMv4MXFD4upwvpCCyeMvSyLWSfA==" + }, "node_modules/expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -9786,6 +9794,15 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-exif": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fast-exif/-/fast-exif-1.0.1.tgz", + "integrity": "sha1-F9HQTWST5j1LbAs1xrC9v1Hjlv8=", + "dependencies": { + "bluebird": "^3.3.3", + "exif-reader": "^1.0.0" + } + }, "node_modules/fast-glob": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz", @@ -11261,6 +11278,19 @@ "gatsby": "^3.0.0-next.0" } }, + "node_modules/gatsby-plugin-sharp-exif": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp-exif/-/gatsby-plugin-sharp-exif-1.0.4.tgz", + "integrity": "sha512-j2mQLcXOyBT9qODcr/fx4yFXpbtZyn6VT/4Z/6YvvgU/b53p3tkLCmxSeRdiF8rJB0jlDAY2lFJsfBJlyA1paA==", + "dependencies": { + "@babel/runtime": "^7.7.4", + "fast-exif": "^1.0.1" + }, + "peerDependencies": { + "gatsby": "^2.0.0", + "gatsby-plugin-sharp": "^2.3.4" + } + }, "node_modules/gatsby-plugin-sharp/node_modules/@sindresorhus/is": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-2.1.1.tgz", @@ -16150,6 +16180,11 @@ "node": ">= 6.0.0" } }, + "node_modules/node-iptc": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/node-iptc/-/node-iptc-1.0.5.tgz", + "integrity": "sha1-Y37FwpaImzQQSo3nXWuU7jyFwsk=" + }, "node_modules/node-object-hash": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.3.tgz", @@ -31744,6 +31779,11 @@ "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz", "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=" }, + "exif-reader": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/exif-reader/-/exif-reader-1.0.3.tgz", + "integrity": "sha512-tWMBj1+9jUSibgR/kv/GQ/fkR0biaN9GEZ5iPdf7jFeH//d2bSzgPoaWf1OfMv4MXFD4upwvpCCyeMvSyLWSfA==" + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -32091,6 +32131,15 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "fast-exif": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fast-exif/-/fast-exif-1.0.1.tgz", + "integrity": "sha1-F9HQTWST5j1LbAs1xrC9v1Hjlv8=", + "requires": { + "bluebird": "^3.3.3", + "exif-reader": "^1.0.0" + } + }, "fast-glob": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz", @@ -33519,6 +33568,15 @@ } } }, + "gatsby-plugin-sharp-exif": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp-exif/-/gatsby-plugin-sharp-exif-1.0.4.tgz", + "integrity": "sha512-j2mQLcXOyBT9qODcr/fx4yFXpbtZyn6VT/4Z/6YvvgU/b53p3tkLCmxSeRdiF8rJB0jlDAY2lFJsfBJlyA1paA==", + "requires": { + "@babel/runtime": "^7.7.4", + "fast-exif": "^1.0.1" + } + }, "gatsby-plugin-styled-components": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-4.6.0.tgz", @@ -37004,6 +37062,11 @@ "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==" }, + "node-iptc": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/node-iptc/-/node-iptc-1.0.5.tgz", + "integrity": "sha1-Y37FwpaImzQQSo3nXWuU7jyFwsk=" + }, "node-object-hash": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.3.tgz", diff --git a/gatsby/package.json b/gatsby/package.json index 2c5dc4b..e169168 100644 --- a/gatsby/package.json +++ b/gatsby/package.json @@ -18,6 +18,7 @@ "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^1.12.0", + "fast-exif": "^1.0.1", "gatsby": "^3.4.1", "gatsby-plugin-image": "^1.6.0", "gatsby-plugin-manifest": "^3.6.0", @@ -25,9 +26,11 @@ "gatsby-plugin-react-helmet": "^4.6.0", "gatsby-plugin-sass": "^4.6.0", "gatsby-plugin-sharp": "^3.6.0", + "gatsby-plugin-sharp-exif": "^1.0.4", "gatsby-plugin-styled-components": "^4.6.0", "gatsby-source-filesystem": "^3.6.0", "gatsby-transformer-sharp": "^3.6.0", + "node-iptc": "^1.0.5", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js index 9c9cd5f..9b0ae6c 100644 --- a/gatsby/src/pages/index.js +++ b/gatsby/src/pages/index.js @@ -5,53 +5,6 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image" import "../styles/gallery.scss" import "../styles/index.scss" -// data -const links = [ - { - text: "Tutorial", - url: "https://www.gatsbyjs.com/docs/tutorial/", - description: - "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.", - color: "#E95800", - }, - { - text: "How to Guides", - url: "https://www.gatsbyjs.com/docs/how-to/", - description: - "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.", - color: "#1099A8", - }, - { - text: "Reference Guides", - url: "https://www.gatsbyjs.com/docs/reference/", - description: - "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.", - color: "#BC027F", - }, - { - text: "Conceptual Guides", - url: "https://www.gatsbyjs.com/docs/conceptual/", - description: - "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.", - color: "#0D96F2", - }, - { - text: "Plugin Library", - url: "https://www.gatsbyjs.com/plugins", - description: - "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.", - color: "#8EB814", - }, - { - text: "Build and Host", - url: "https://www.gatsbyjs.com/cloud", - badge: true, - description: - "Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!", - color: "#663399", - }, -] - // markup const IndexPage = ({ data }) => { const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data])) @@ -70,11 +23,12 @@ const IndexPage = ({ data }) => {
{images.map(image => { - console.log('imag', image) + const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base + console.log('name', name) // const file = data.allFile // console.log(fileName) // return <> - return ; + return ; })}