[Add] gatsby-images導入

gatsby-config.js

@@ -16,8 +16,6 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
@@ -27,6 +25,7 @@ module.exports = {
         background_color: `#6600cc`,
         theme_color: `#6600cc`,
         display: `minimal-ui`,
+
         icon: `src/images/shinkan-web-icon-transparent.png`, // This path is relative to the root of the site.
       },
     },
@@ -38,8 +37,7 @@ module.exports = {
           "1r4c4E7r1PDnaf6Mk6YIS6FAOblLBiX66socla-x8ct4",
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
   ],
 }

gatsby-node.js

@@ -34,3 +34,5 @@ exports.createPages = async ({ graphql, actions }) => {
     })
   })
 }
+
+const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

package.json

@@ -8,14 +8,15 @@
     "@tsukuba-shinkan/gatsby-source-shinkan-web": "file:plugins/gatsby-source-shinkan-web",
     "dotenv": "^8.2.0",
     "gatsby": "^2.19.45",
-    "gatsby-image": "^2.2.44",
-    "gatsby-plugin-manifest": "^2.2.48",
+    "gatsby-image": "^2.3.1",
+    "gatsby-plugin-manifest": "^2.3.3",
     "gatsby-plugin-offline": "^3.0.41",
     "gatsby-plugin-react-helmet": "^3.1.24",
+    "gatsby-plugin-remote-images": "^2.1.0",
     "gatsby-plugin-sass": "^2.2.1",
-    "gatsby-plugin-sharp": "^2.4.13",
+    "gatsby-plugin-sharp": "^2.5.3",
     "gatsby-source-filesystem": "^2.1.56",
-    "gatsby-transformer-sharp": "^2.3.19",
+    "gatsby-transformer-sharp": "^2.4.3",
     "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

plugins/gatsby-source-shinkan-web/gatsby-node.js

@@ -1,8 +1,9 @@
 const axios = require("axios")
 const parseCsv = require("csv-parse/lib/sync")
+const { createRemoteFileNode } = require("gatsby-source-filesystem")
 
 exports.sourceNodes = async (
-  { actions, cache, createNodeId, createContentDigest },
+  { actions, cache, createNodeId, createContentDigest, store },
   options
 ) => {
   const { createNode } = actions
@@ -57,16 +58,63 @@ exports.sourceNodes = async (
     if (primaryKeys.includes(data.primaryKey)) continue
 
     const nodeContent = JSON.stringify(data)
-    createNode({
-      ...data,
-      id: createNodeId(`sheet-data-${row[0]}`),
-      parent: null,
-      children: [],
-      internal: {
-        type: "ShinkanWebOrg",
-        content: nodeContent,
-        contentDigest: createContentDigest(nodeContent),
-      },
-    })
+    try {
+      const images = await Promise.all(
+        data.imageUrls.map(async url => {
+          const fileNode = await createRemoteFileNode({
+            url,
+            cache,
+            store,
+            createNode: actions.createNode,
+            createNodeId: createNodeId,
+          })
+          return fileNode
+        })
+      )
+
+      const posterImages = await Promise.all(
+        data.posterImageUrls.map(async url => {
+          const fileNode = await createRemoteFileNode({
+            url,
+            cache,
+            store,
+            createNode: actions.createNode,
+            createNodeId: createNodeId,
+          })
+          return fileNode
+        })
+      )
+
+      const otherImages = await Promise.all(
+        data.otherImageUrls.map(async url => {
+          const fileNode = await createRemoteFileNode({
+            url,
+            cache,
+            store,
+            createNode: actions.createNode,
+            createNodeId: createNodeId,
+          })
+          return fileNode
+        })
+      )
+
+      createNode({
+        ...data,
+        id: createNodeId(`sheet-data-${row[0]}`),
+        parent: null,
+        children: [],
+        internal: {
+          type: "ShinkanWebOrg",
+          content: nodeContent,
+          contentDigest: createContentDigest(nodeContent),
+        },
+        images,
+        posterImages,
+        otherImages,
+      })
+    } catch (e) {
+      console.log("Error", e)
+      continue
+    }
   }
 }

src/components/BigImg.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+export default function({ url }) {
+  const allImages = useStaticQuery(graphql`
+    query c {
+      allImageSharp {
+        nodes {
+          id
+          fluid(maxWidth: 700) {
+            ...GatsbyImageSharpFluid
+          }
+          parent {
+            ... on File {
+              url
+            }
+          }
+        }
+      }
+    }
+  `)
+  const imageNode = allImages.allImageSharp.nodes.find(e => e.parent.url == url)
+  return <Img fluid={imageNode.fluid} />
+}

src/components/Img.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+export default function({ url }) {
+  const allImages = useStaticQuery(graphql`
+    query a {
+      allImageSharp {
+        nodes {
+          id
+          fluid(maxWidth: 600) {
+            ...GatsbyImageSharpFluid
+          }
+          parent {
+            ... on File {
+              url
+            }
+          }
+        }
+      }
+    }
+  `)
+  const imageNode = allImages.allImageSharp.nodes.find(e => e.parent.url == url)
+  return <Img fluid={imageNode.fluid} />
+}

src/components/OtherImg.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+export default function({ url }) {
+  const allImages = useStaticQuery(graphql`
+    query b {
+      allImageSharp {
+        nodes {
+          id
+          fixed(width: 200) {
+            ...GatsbyImageSharpFixed
+          }
+          parent {
+            ... on File {
+              url
+            }
+          }
+        }
+      }
+    }
+  `)
+  const imageNode = allImages.allImageSharp.nodes.find(e => e.parent.url == url)
+  return <Img fixed={imageNode.fixed} />
+}

src/components/SmallPoster.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+export default function({ url }) {
+  const allImages = useStaticQuery(graphql`
+    query {
+      allImageSharp {
+        nodes {
+          id
+          fixed(width: 200) {
+            ...GatsbyImageSharpFixed
+          }
+          parent {
+            ... on File {
+              url
+            }
+          }
+        }
+      }
+    }
+  `)
+  const imageNode = allImages.allImageSharp.nodes.find(e => e.parent.url == url)
+  return <Img fixed={imageNode.fixed} />
+}

src/components/image.js

@@ -2,17 +2,6 @@ import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
 
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
 const Image = () => {
   const data = useStaticQuery(graphql`
     query {

src/pages/index.js

@@ -3,7 +3,8 @@ import { graphql, useStaticQuery, Link } from "gatsby"
 // import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-// import Image from "../components/image"
+
+import SmallPoster from "../components/SmallPoster"
 import SEO from "../components/seo"
 
 const IndexPage = () => {
@@ -58,11 +59,7 @@ const IndexPage = () => {
               return (
                 <li className="scrollItem">
                   <Link to={"/org/" + node.primaryKey}>
-                    <img
-                      src={node.posterImageUrls[0]}
-                      alt={node.name}
-                      loading="lazy"
-                    />
+                    <SmallPoster url={node.posterImageUrls[0]} />
                   </Link>
                 </li>
               )
@@ -79,11 +76,7 @@ const IndexPage = () => {
               return (
                 <li className="scrollItem">
                   <Link to={"/org/" + node.primaryKey}>
-                    <img
-                      src={node.posterImageUrls[0]}
-                      alt={node.name}
-                      loading="lazy"
-                    />
+                    <SmallPoster url={node.posterImageUrls[0]} />
                   </Link>
                 </li>
               )
@@ -99,11 +92,7 @@ const IndexPage = () => {
               return (
                 <li className="scrollItem">
                   <Link to={"/org/" + node.primaryKey}>
-                    <img
-                      src={node.posterImageUrls[0]}
-                      alt={node.name}
-                      loading="lazy"
-                    />
+                    <SmallPoster url={node.posterImageUrls[0]} />
                   </Link>
                 </li>
               )
@@ -119,11 +108,7 @@ const IndexPage = () => {
               return (
                 <li className="scrollItem">
                   <Link to={"/org/" + node.primaryKey}>
-                    <img
-                      src={node.posterImageUrls[0]}
-                      alt={node.name}
-                      loading="lazy"
-                    />
+                    <SmallPoster url={node.posterImageUrls[0]} />
                   </Link>
                 </li>
               )

src/styles/global.scss

@@ -31,28 +31,14 @@ img {
 .categories {
   ul.scrollList {
     /* display: grid; */
-    overflow-x: auto;
+    overflow-x: scroll;
     white-space: nowrap;
     list-style: none;
     -webkit-overflow-scrolling: touch;
 
     li.scrollItem {
       display: inline-block;
-      width: 180px;
-      height: 255px;
-      padding-left: 0;
-      margin-right: 16px;
-      vertical-align: bottom;
       background-color: #fff;
-      border-radius: 10px;
-      box-shadow: rgba(0, 0, 0, 0.2) 1.5px 1.5px;
-
-      img {
-        top: 0;
-        overflow: hidden;
-        vertical-align: middle;
-        object-fit: cover;
-      }
     }
   }
 }
@@ -92,12 +78,6 @@ img {
   clear: both;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
-
-  img {
-    max-width: 200px;
-    padding-right: 8px;
-    vertical-align: middle;
-  }
 }
 
 /* ヘッダー */