Move listimages to gatsbyImage #145 (#146)

* refactor: migrate from react-helment to gatsby head closes #143 * feat: set defaults for images #145 * refactor: update paths for all list images in content #145 * refactor: update components to use listimage from gatsbyImage #145 * refactor: update home page to use right listimage #145 * refactor: list images in templates updated #145
ajfisher · Sep 11, 2023 · 0006afd · 0006afd
1 parent ebbacd4
commit 0006afd
Show file tree

Hide file tree

Showing 46 changed files with 97 additions and 78 deletions.
diff --git a/site/gatsby-config.js b/site/gatsby-config.js
@@ -36,7 +36,17 @@ module.exports = {
         checkSupportedExtensions: false,
       },
     },
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          formats: [`auto`, `webp`],
+          placeholder: `dominantColor`,
+          quality: 90,
+          breakpoints: [400, 500, 750, 1080, 1600]
+        },
+      }
+    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {

diff --git a/site/src/components/footer.js b/site/src/components/footer.js
@@ -3,10 +3,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 
-import { GatsbyImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 import { device } from './devices';
-import { getPostImages, ImageLink } from './list';
+import { ImageLink } from './list';
 import { pathDate } from '../lib/utils';
 
 const StyledFooter = styled.footer`
@@ -104,18 +104,12 @@ const Title = styled.h2`
 
 const PostItem = ({title, image, url, excerpt}) => {
 
-  const { postItemImages } = getPostImages();
-
-  const postImage = postItemImages.edges.find(({node}) => {
-    if (node.relativePath === image) return node;
-
-    return null;
-  });
+  const postImage = getImage(image);
 
   return <>
     <FooterImageLink>
       <Link to={url}>
-        <GatsbyImage image={postImage.node.childImageSharp.gatsbyImageData} alt={title} />
+        <GatsbyImage image={postImage} alt={title} />
       </Link>
     </FooterImageLink>
     <p><Link to={url}>{title}</Link></p>
@@ -157,7 +151,13 @@ const Footer = ({slug}) => {
         frontmatter {
           title
           date(formatString: "YYYY-MM-DD")
-          listimage
+          listimage {
+            childImageSharp {
+              gatsbyImageData(
+                layout: FULL_WIDTH
+              )
+            }
+          }
           listimage_position
           excerpt
           featureimage
@@ -182,9 +182,6 @@ const Footer = ({slug}) => {
   }
 
   featured.url = `/${pathDate(featured.date)}/${featured.slug}/`;
-  if (featured.listimage.startsWith('/img/')) {
-    featured.listimage = featured.listimage.substring(5);
-  }
 
   return (
     <StyledFooter>

diff --git a/site/src/components/list-layout.js b/site/src/components/list-layout.js
@@ -18,7 +18,6 @@ const Layout = ({ children, featured={}, slug}) => {
   // determine the featured article and pull it from the list.
   const {frontmatter={}, fields={}} = featured;
   const excerpt = frontmatter.excerpt || fields.excerpt || '';
-
   const url = `/${pathDate(frontmatter.date)}/${frontmatter.slug}/`;
 
   let featuredImage;

diff --git a/site/src/components/list.js b/site/src/components/list.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import humanize from 'humanize-plus';
 import moment from 'moment';
 
-import { GatsbyImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
 import { device } from './devices';
 import { pathDate } from '../lib/utils';
@@ -146,27 +146,17 @@ export const PostListItem = ({title, image, position, excerpt, date,
 
     const url = `/${pathDate(date)}/${slug}/`;
 
-    const { postItemImages } = getPostImages();
-
-    if (image.startsWith('/img/')) {
-      image = image.substring(5);
-    }
-
-    const postImage = postItemImages.edges.find(({node}) => {
-      if (node.relativePath === image) return node;
-
-      return null;
-    });
+    const listimage = getImage(image);
 
     const rounded_time = Math.ceil(readingtime);
     const humanised_words = humanize.compactInteger(wordcount, 1);
 
     return (
       <Item>
-        {typeof(postImage) !== 'undefined' &&
+        {typeof(listimage) !== 'undefined' &&
           <ImageLink $position={position}>
             <Link to={url}>
-              <GatsbyImage image={postImage.node.childImageSharp.gatsbyImageData} alt={title} />
+              <GatsbyImage image={listimage} alt={title} />
             </Link>
           </ImageLink>
         }

diff --git a/site/src/content/posts/2007-03-05-fuzzys-where-its-at-or-will-be-eventually.md b/site/src/content/posts/2007-03-05-fuzzys-where-its-at-or-will-be-eventually.md
@@ -11,7 +11,7 @@ excerpt: >
 featureimage: fuzzy_at_sd.png
 imageby: ajfisher Representation of fuzzy logic Stable Diffusion
 imagelink: https://ajfisher.me/
-listimage: posts/fuzzy_at_sd.png
+listimage: ../../img/posts/fuzzy_at_sd.png
 
 ---
 

diff --git a/site/src/content/posts/2007-11-19-fuzzy-logic-could-book-more-flights.md b/site/src/content/posts/2007-11-19-fuzzy-logic-could-book-more-flights.md
@@ -11,7 +11,7 @@ imagelink: https://www.flickr.com/photos/martynr/129190027
 excerpt: >
     SQL makes logic easy for developers, however it also creates boundary issues
     when it comes to sales price matching. Fuzzy logic could help resolve this problem.
-listimage: posts/fuzzy_flights.png 
+listimage: ../../img/posts/fuzzy_flights.png 
 ---
 
 I've talked about fuzzy logic for use by the retail sector [in the past](2007/03/fuzzys-where-its-at-or-will-be) and the project I'm involved in there is maturing nicely. This week I've really realised how, as software engineers we need to grasp the nettle and move a lot of service based software toward fuzzy systems for usability reasons.

diff --git a/site/src/content/posts/2008-04-27-easy-product-or-class-rating-system.md b/site/src/content/posts/2008-04-27-easy-product-or-class-rating-system.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: easy-product-or-class-rating-system
 title: Easy product or class rating system
 tags: fuzzy logic, data, database, optimisation, scripting, internet, web
-listimage: posts/server_fire.png
+listimage: ../../img/posts/server_fire.png
 excerpt: >
     Build a rating system that won't set your servers on fire.
 ---

diff --git a/...09-12-20-prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight.md b/...09-12-20-prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight.md
@@ -6,7 +6,7 @@ slug: prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight
 title: 2010 will be the year Apple and Google have a cage fight
 small-title: true
 tags: android, Apple, google, internet, iphone, mobile, predictions
-listimage: posts/cagefight.jpg
+listimage: ../../img/posts/cagefight.jpg
 ---
 
 The pre- match slanging is pretty much over and the location of the fight has been chosen. 2010 is going to be the year Apple and Google finally stop dancing around and actually get in the ring. Unlike a nice clean refereed boxing match (Apple V Microsoft) this is going to be a dirty underground cage fight complete with barbed-wire wrapped gloves - expect to see a lot of blood on the floor - and fanbois rucking in the concourses.

diff --git a/...c/content/posts/2010-01-03-2010-the-year-the-netbook-turns-into-the-web-book.md b/...c/content/posts/2010-01-03-2010-the-year-the-netbook-turns-into-the-web-book.md
@@ -6,7 +6,7 @@ slug: 2010-the-year-the-netbook-turns-into-the-web-book
 title: '2010: The year the Netbook turns into the Web-book'
 small-title: true
 tags: internet, mobile, predictions, tablet
-listimage: posts/webbook.jpg
+listimage: ../../img/posts/webbook.jpg
 ---
 
 2010 is set to be a bumper year for Consumer Electronics. With people spending less outside the home they are focusing more inside and as just about everyone now has some monstrous TV it's the little things that count.

diff --git a/site/src/content/posts/2010-03-23-an-open-internet-call-to-arms.md b/site/src/content/posts/2010-03-23-an-open-internet-call-to-arms.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: an-open-internet-call-to-arms
 title: An Open Internet call to arms
 tags: censorship, government, internet, media, rant
-listimage: posts/taped_shut.png
+listimage: ../../img/posts/taped_shut.png
 
 ---
 

diff --git a/site/src/content/posts/2010-04-13-adobe-narayens-kingdom-for-a-plan.md b/site/src/content/posts/2010-04-13-adobe-narayens-kingdom-for-a-plan.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: adobe-narayens-kingdom-for-a-plan
 title: Adobe - Narayen's kingdom for a plan...
 tags: Adobe, Apple, google, media, strategy, web
-listimage: posts/fortune_cookie.jpg
+listimage: ../../img/posts/fortune_cookie.jpg
 ---
 
 Adobe's public fracas with Apple over lack of flash on iThings and Google open sources VP8 - it's been a tough couple of weeks for Adobe with no signs of getting better. Cries of "My kingdom for a plan" may just about to be heard from the corner offices...

diff --git a/...ontent/posts/2010-06-23-why-google-is-a-more-typical-business-than-you-think.md b/...ontent/posts/2010-06-23-why-google-is-a-more-typical-business-than-you-think.md
@@ -9,7 +9,7 @@ tags: cloud computing, linux, web, desktop, OS, google
 featureimage: keyboard.jpg
 imageby: Willian Hook
 imagelink: https://www.flickr.com/photos/williamhook/2971294143/
-listimage: posts/keyboard.jpg
+listimage: ../../img/posts/keyboard.jpg
 
 ---
 

diff --git a/site/src/content/posts/2010-06-27-a-telling-quarter-for-android.md b/site/src/content/posts/2010-06-27-a-telling-quarter-for-android.md
@@ -6,7 +6,7 @@ slug: a-telling-quarter-for-android
 title: A telling quarter for Android
 tags: android, Apple, google, iphone, mobile
 featureimage: android.jpg
-listimage: posts/android.jpg
+listimage: ../../img/posts/android.jpg
 imageby: Scott Akerman
 imagelink: https://www.flickr.com/photos/sterlic/6778181411/
 

diff --git a/.../posts/2010-07-20-thingstreams-the-future-of-brand-product-consumer-dialogue.md b/.../posts/2010-07-20-thingstreams-the-future-of-brand-product-consumer-dialogue.md
@@ -12,7 +12,7 @@ excerpt: >
 featureimage: thingstreams.jpg
 imageby: Ramsey Arnaoot
 imagelink: https://www.flickr.com/photos/arnaoot/19857872/
-listimage: posts/thingstreams.jpg
+listimage: ../../img/posts/thingstreams.jpg
 
 ---
 

diff --git a/...t/posts/2010-09-29-software-is-a-race-to-zero-how-do-you-create-revenue-then.md b/...t/posts/2010-09-29-software-is-a-race-to-zero-how-do-you-create-revenue-then.md
@@ -9,7 +9,7 @@ tags: strategy, development, software
 excerpt: >
     Commodity values always drop towards their cost of production. Software
     eventually drops to $0 in value so how do you create revenue?
-listimage: posts/line_chart.jpg
+listimage: ../../img/posts/line_chart.jpg
 ---
 
 All software that has a market will inevitably and inexorably find itself in a race to the bottom with respect to price.

diff --git a/site/src/content/posts/2010-10-18-how-to-avoid-the-audiencepresenter-disconnect.md b/site/src/content/posts/2010-10-18-how-to-avoid-the-audiencepresenter-disconnect.md
@@ -9,7 +9,7 @@ tags: presentation
 featureimage: concert.jpg
 imageby: Martin Fisch
 imagelink: https://www.flickr.com/photos/marfis75/2459533929
-listimage: posts/concert.jpg
+listimage: ../../img/posts/concert.jpg
 
 ---
 

diff --git a/site/src/content/posts/2011-01-10-computing-is-finally-becoming-personal.md b/site/src/content/posts/2011-01-10-computing-is-finally-becoming-personal.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: computing-is-finally-becoming-personal
 title: Computers are finally becoming personal
 tags: Consumer Electronics, android, Apple, internet, media, mobile
-listimage: posts/zenith.jpg
+listimage: ../../img/posts/zenith.jpg
 ---
 
 After going back to work, it dawned on me that I hadn't used a computer for nearly two weeks - evident in the fact that I spent my first day back getting helplessly finger-twisted using a keyboard. Two weeks away from a computer for me probably hasn't occurred since 1990 when I went away camping and surfing for a month. So what occurred this Christmas?

diff --git a/site/src/content/posts/2011-08-08-the-web-of-intent.md b/site/src/content/posts/2011-08-08-the-web-of-intent.md
@@ -6,7 +6,7 @@ slug: the-web-of-intent
 title: The web of intent
 large-title: true
 tags: internet, media, predictions, web
-listimage: posts/will_you.jpg
+listimage: ../../img/posts/will_you.jpg
 excerpt: >
     Web applications could handle common tasks such as sharing or pinning using
     an Intent oriented design.

diff --git a/...sts/2011-09-15-device-api-applications-of-devicemotion-and-deviceorientation.md b/...sts/2011-09-15-device-api-applications-of-devicemotion-and-deviceorientation.md
@@ -6,7 +6,7 @@ slug: device-api-applications-of-devicemotion-and-deviceorientation
 title: Device API - Applications of DeviceMotion & DeviceOrientation
 small-title: true
 tags: development, python, internet, media, mobile, open source, web, android, API, arduino, advertising, hardware
-listimage: posts/gyro.jpg
+listimage: ../../img/posts/gyro.jpg
 excerpt: >
     Modern smartphones are jam-packed with sensors attached to them. This data
     is now available for use in the mobile web browser too. Here's some things you

diff --git a/...rc/content/posts/2011-10-04-on-a-post-flash-world-and-adobes-place-within-it.md b/...rc/content/posts/2011-10-04-on-a-post-flash-world-and-adobes-place-within-it.md
@@ -10,7 +10,7 @@ excerpt: >
     Sacred cows in the Adobe world finally appear to be on the BBQ. Recent signals
     from the tooling company suggest Flash may finally be about to die - and not
     too soon.
-listimage: posts/adobe.jpg
+listimage: ../../img/posts/adobe.jpg
 
 ---
 

diff --git a/site/src/content/posts/2011-10-17-neo-futurism-in-the-information-age.md b/site/src/content/posts/2011-10-17-neo-futurism-in-the-information-age.md
@@ -10,7 +10,7 @@ excerpt: >
     Finally the gloom of the GFC appears past and the web community are attempting
     to dream big ideas again - a summary of WDS11.
 featureimage: atoms_for_peace.jpg
-listimage: posts/atoms_for_peace.jpg
+listimage: ../../img/posts/atoms_for_peace.jpg
 imageby: Mark Brown
 imagelink: https://www.flickr.com/photos/airship/117781952/
 featured: true

diff --git a/site/src/content/posts/2011-11-03-we-are-the-champions-of-the-web.md b/site/src/content/posts/2011-11-03-we-are-the-champions-of-the-web.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: we-are-the-champions-of-the-web
 title: We are the champions... of the web
 tags: web, internet, media, mobile, standards, W3C, web
-listimage: posts/champion_fist.jpg
+listimage: ../../img/posts/champion_fist.jpg
 imageby: EJP Photo
 imagelink: https://www.flickr.com/photos/ejpphoto/6114079466
 excerpt: >

diff --git a/...content/posts/2011-11-07-app-stores-are-delivery-channels-not-search-engines.md b/...content/posts/2011-11-07-app-stores-are-delivery-channels-not-search-engines.md
@@ -14,7 +14,7 @@ excerpt: >
 twitter_excerpt: >
     If discovery is important to the app store, why is it still "broken"?
 
-listimage: posts/chomp.jpg
+listimage: ../../img/posts/chomp.jpg
 ---
 
 <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Wonder why <a href="https://twitter.com/search?q=%24GOOG&amp;src=ctag">$GOOG</a> and <a href="https://twitter.com/search?q=%24AAPL&amp;src=ctag">$AAPL</a> haven&#39;t invested more in making app store search actually work. A critique: <a href="http://t.co/ofVg3Dhb">http://t.co/ofVg3Dhb</a></p>&mdash; Tim O&#39;Reilly (@timoreilly) <a href="https://twitter.com/timoreilly/status/132671142942081024">November 5, 2011</a></blockquote>

diff --git a/site/src/content/posts/2011-12-20-towards-a-sensor-commons.md b/site/src/content/posts/2011-12-20-towards-a-sensor-commons.md
@@ -17,7 +17,7 @@ twitter_excerpt: >
 featureimage: commons_grass.jpg
 imageby: sciencesque
 imagelink: https://www.flickr.com/photos/apoptotic/2597478489
-listimage: posts/resistors.jpg
+listimage: ../../img/posts/resistors.jpg
 featured: true
 collection: featured
 

diff --git a/site/src/content/posts/2012-02-24-humanising-the-internet-of-things.md b/site/src/content/posts/2012-02-24-humanising-the-internet-of-things.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: humanising-the-internet-of-things
 title: Humanising the Internet of Things
 tags: internet, IoT, media, mobile, open source, predictions, presentation, arduino, product
-listimage: posts/network_cable.jpg
+listimage: ../../img/posts/network_cable.jpg
 imageby: Open Grid Scheduler / Grid Engine
 imagelink: https://www.flickr.com/photos/opengridscheduler/16267326303/
 excerpt: >

diff --git a/site/src/content/posts/2012-06-10-is-this-the-end-of-windows-server.md b/site/src/content/posts/2012-06-10-is-this-the-end-of-windows-server.md
@@ -5,7 +5,7 @@ layout: post.hbt
 title: Is this the end of Windows Server?
 slug: is-this-the-end-of-windows-server
 tags: cloud computing, open source, development, internet, linux, predictions, OS
-listimage: posts/windows_server.jpg
+listimage: ../../img/posts/windows_server.jpg
 featureimage: servers.jpg
 imageby: Shawn T. O'Neil
 imagelink: https://www.flickr.com/photos/oneilsh/14601920735

diff --git a/site/src/content/posts/2012-07-25-web-facilitated-play-in-the-real-world.md b/site/src/content/posts/2012-07-25-web-facilitated-play-in-the-real-world.md
@@ -8,7 +8,7 @@ tags: development, gaming, open source, presentation, arduino, hardware, interne
 featureimage: swing.jpg
 imageby: fuschia.berry
 imagelink: https://www.flickr.com/photos/fuchsia_berry/8500896205
-listimage: posts/swing.jpg
+listimage: ../../img/posts/swing.jpg
 excerpt: >
     How can physical interaction with digital media augment the experience of
     both and what part does the web have to play in this space?

diff --git a/...ontent/posts/2012-10-19-datatium-a-material-to-create-responsive-experiences.md b/...ontent/posts/2012-10-19-datatium-a-material-to-create-responsive-experiences.md
@@ -11,7 +11,7 @@ featured: true
 featureimage: datatium_bling_material.jpg
 imageby: neekoh.fi
 imagelink: https://www.flickr.com/photos/neekohfi/5608007004
-listimage: posts/behaviour_differentials.jpg
+listimage: ../../img/posts/behaviour_differentials.jpg
 excerpt: >
     Device responsive design is only one part of context. These are the sketch notes
     that underpinned a talk at WDS2012 on the wider aspects of using data

diff --git a/site/src/content/posts/2012-11-20-a-clickster-fail-of-epic-proportions.md b/site/src/content/posts/2012-11-20-a-clickster-fail-of-epic-proportions.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: a-clickster-fail-of-epic-proportions
 title: The ClickFail of Australian Retail.
 tags: cloud computing, development, internet, media, rant, web, retail, ecommerce
-listimage: posts/server-too-busy.png
+listimage: ../../img/posts/server-too-busy.png
 listimage-position: 0% 50%
 excerpt: >
     The coming of age of online retail in Australia crashed and burned in

diff --git a/site/src/content/posts/2013-03-20-jump-start-responsive-design-launch.md b/site/src/content/posts/2013-03-20-jump-start-responsive-design-launch.md
@@ -8,7 +8,7 @@ tags: development, books, responsive design, design, web, launch
 excerpt: >
     Working on my first book was quite good fun, though hard work, and today
     after all of that effort it's finally released.
-listimage: posts/responsive_design.jpg
+listimage: ../../img/posts/responsive_design.jpg
 listimage-position: 50% 85%
 
 ---

diff --git a/site/src/content/posts/2013-08-21-should-javascript-devs-build-real-things.md b/site/src/content/posts/2013-08-21-should-javascript-devs-build-real-things.md
@@ -16,7 +16,7 @@ twitter_excerpt: >
 featureimage: 18123764024_9226d0fe39_k.jpg
 imageby: ninfaj
 imagelink: https://www.flickr.com/photos/ninfaj/18123764024
-listimage: posts/18123764024_9226d0fe39_k.jpg
+listimage: ../../img/posts/18123764024_9226d0fe39_k.jpg
 collection: featured
 featured: true
 

diff --git a/site/src/content/posts/2014-05-04-device-api-safari.md b/site/src/content/posts/2014-05-04-device-api-safari.md
@@ -12,7 +12,7 @@ excerpt: >
 featureimage: lauren-george-K0sCNAKfmhc-unsplash.jpg
 imageby: Lauren George on Unsplash
 imagelink: https://unsplash.com/photos/K0sCNAKfmhc 
-listimage: posts/lauren-george-K0sCNAKfmhc-unsplash.jpg
+listimage: ../../img/posts/lauren-george-K0sCNAKfmhc-unsplash.jpg
 
 ---
 

diff --git a/site/src/content/posts/2014-12-16-building-information-radiator.md b/site/src/content/posts/2014-12-16-building-information-radiator.md
@@ -9,7 +9,7 @@ excerpt: >
     "Information Radiators" - devices that use physical means to relay
     encoded information are great projects if you want to explore IoT. This
     post provides a how to example.
-listimage: posts/radiator.jpg
+listimage: ../../img/posts/radiator.jpg
 
 ---
 Information radiators are an interesting, though under-explored area of IoT - probably
@@ -24,8 +24,8 @@ or some combination thereof. An information radiator is usually disconnected fro
 source of that data which is often abstract in nature.
 
 > In this post, I'll show you how to build an "information radiator" with a bit
-of Python and some LEDs, which you can then use to make your own for your
-own personal needs.
+> of Python and some LEDs, which you can then use to make your own for your
+> own personal needs.
 
 Full post at Packt: Building an Information Radiator
 [Part 1](https://www.packtpub.com/books/content/building-information-radiator-part-1)