From 0006afdd6615f6460bb9c7cab24c07eb7118bcb1 Mon Sep 17 00:00:00 2001
From: ajfisher <ajfisher.td@gmail.com>
Date: Mon, 11 Sep 2023 13:30:16 +1000
Subject: [PATCH] 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
---
 site/gatsby-config.js                         | 12 ++++++++-
 site/src/components/footer.js                 | 25 ++++++++-----------
 site/src/components/list-layout.js            |  1 -
 site/src/components/list.js                   | 18 +++----------
 ...zzys-where-its-at-or-will-be-eventually.md |  2 +-
 ...-19-fuzzy-logic-could-book-more-flights.md |  2 +-
 ...-27-easy-product-or-class-rating-system.md |  2 +-
 ...year-apple-and-google-have-a-cage-fight.md |  2 +-
 ...ear-the-netbook-turns-into-the-web-book.md |  2 +-
 ...010-03-23-an-open-internet-call-to-arms.md |  2 +-
 ...04-13-adobe-narayens-kingdom-for-a-plan.md |  2 +-
 ...-a-more-typical-business-than-you-think.md |  2 +-
 ...010-06-27-a-telling-quarter-for-android.md |  2 +-
 ...ture-of-brand-product-consumer-dialogue.md |  2 +-
 ...-to-zero-how-do-you-create-revenue-then.md |  2 +-
 ...-avoid-the-audiencepresenter-disconnect.md |  2 +-
 ...-computing-is-finally-becoming-personal.md |  2 +-
 .../posts/2011-08-08-the-web-of-intent.md     |  2 +-
 ...s-of-devicemotion-and-deviceorientation.md |  2 +-
 ...-flash-world-and-adobes-place-within-it.md |  2 +-
 ...-17-neo-futurism-in-the-information-age.md |  2 +-
 ...1-11-03-we-are-the-champions-of-the-web.md |  2 +-
 ...re-delivery-channels-not-search-engines.md |  2 +-
 .../2011-12-20-towards-a-sensor-commons.md    |  2 +-
 ...02-24-humanising-the-internet-of-things.md |  2 +-
 ...06-10-is-this-the-end-of-windows-server.md |  2 +-
 ...-web-facilitated-play-in-the-real-world.md |  2 +-
 ...terial-to-create-responsive-experiences.md |  2 +-
 ...20-a-clickster-fail-of-epic-proportions.md |  2 +-
 ...-20-jump-start-responsive-design-launch.md |  2 +-
 ...hould-javascript-devs-build-real-things.md |  2 +-
 .../posts/2014-05-04-device-api-safari.md     |  2 +-
 ...014-12-16-building-information-radiator.md |  6 ++---
 .../2015-04-15-make-js-robotics-launch.md     |  2 +-
 .../2015-05-04-pebble-controlled-leds.md      |  2 +-
 ...6-01-building-portable-minecraft-server.md |  2 +-
 .../posts/2015-08-08-ddd-jsiot-workshop.md    |  2 +-
 .../posts/2015-09-02-iot-mobile-practices.md  |  2 +-
 ...5-09-07-js-not-just-language-of-the-web.md |  2 +-
 ...rial-for-contextually-responsive-design.md |  2 +-
 .../posts/2016-01-27-road-to-interchange.md   |  2 +-
 .../posts/2016-02-11-moving-to-metalsmith.md  |  2 +-
 .../content/posts/2023-08-31-ai-works-now.md  |  3 ++-
 site/src/pages/index.js                       | 18 ++++++++++---
 site/src/templates/post-list.js               |  8 +++++-
 site/src/templates/tags.js                    | 10 +++++---
 46 files changed, 97 insertions(+), 78 deletions(-)

diff --git a/site/gatsby-config.js b/site/gatsby-config.js
index bfd3fd9..9c41de3 100644
--- 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
index 20b879e..8abf433 100644
--- 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
index 21bad6a..86715a6 100644
--- 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
index bfe7644..c3990b7 100644
--- 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
index c471d4f..b5c722e 100644
--- 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
index 30856ab..7b271e4 100644
--- 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
index 5089d8e..88d59d9 100644
--- 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/site/src/content/posts/2009-12-20-prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight.md b/site/src/content/posts/2009-12-20-prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight.md
index c02722f..3b9a1dd 100644
--- a/site/src/content/posts/2009-12-20-prediction-2010-will-be-the-year-apple-and-google-have-a-cage-fight.md
+++ b/site/src/content/posts/2009-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/site/src/content/posts/2010-01-03-2010-the-year-the-netbook-turns-into-the-web-book.md b/site/src/content/posts/2010-01-03-2010-the-year-the-netbook-turns-into-the-web-book.md
index 63a1498..40cf1bc 100644
--- a/site/src/content/posts/2010-01-03-2010-the-year-the-netbook-turns-into-the-web-book.md
+++ b/site/src/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
index 728e124..9e61efa 100644
--- 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
index 72fd685..1825095 100644
--- 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/site/src/content/posts/2010-06-23-why-google-is-a-more-typical-business-than-you-think.md b/site/src/content/posts/2010-06-23-why-google-is-a-more-typical-business-than-you-think.md
index a914e31..8b1154e 100644
--- a/site/src/content/posts/2010-06-23-why-google-is-a-more-typical-business-than-you-think.md
+++ b/site/src/content/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
index 3c213d9..c547387 100644
--- 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/site/src/content/posts/2010-07-20-thingstreams-the-future-of-brand-product-consumer-dialogue.md b/site/src/content/posts/2010-07-20-thingstreams-the-future-of-brand-product-consumer-dialogue.md
index d561d14..5d032a5 100644
--- a/site/src/content/posts/2010-07-20-thingstreams-the-future-of-brand-product-consumer-dialogue.md
+++ b/site/src/content/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/site/src/content/posts/2010-09-29-software-is-a-race-to-zero-how-do-you-create-revenue-then.md b/site/src/content/posts/2010-09-29-software-is-a-race-to-zero-how-do-you-create-revenue-then.md
index 22f966c..e9a2c5a 100644
--- a/site/src/content/posts/2010-09-29-software-is-a-race-to-zero-how-do-you-create-revenue-then.md
+++ b/site/src/content/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
index 918b4f9..43204a8 100644
--- 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
index 0b5d49b..6eb612d 100644
--- 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
index 9a814ad..e906def 100644
--- 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/site/src/content/posts/2011-09-15-device-api-applications-of-devicemotion-and-deviceorientation.md b/site/src/content/posts/2011-09-15-device-api-applications-of-devicemotion-and-deviceorientation.md
index 8a5f375..c0e0945 100644
--- a/site/src/content/posts/2011-09-15-device-api-applications-of-devicemotion-and-deviceorientation.md
+++ b/site/src/content/posts/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/site/src/content/posts/2011-10-04-on-a-post-flash-world-and-adobes-place-within-it.md b/site/src/content/posts/2011-10-04-on-a-post-flash-world-and-adobes-place-within-it.md
index 1849413..8397764 100644
--- a/site/src/content/posts/2011-10-04-on-a-post-flash-world-and-adobes-place-within-it.md
+++ b/site/src/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
index a6eb752..f0aeb0f 100644
--- 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
index 4a290d0..cec2621 100644
--- 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/site/src/content/posts/2011-11-07-app-stores-are-delivery-channels-not-search-engines.md b/site/src/content/posts/2011-11-07-app-stores-are-delivery-channels-not-search-engines.md
index f5807d2..471e2f1 100644
--- a/site/src/content/posts/2011-11-07-app-stores-are-delivery-channels-not-search-engines.md
+++ b/site/src/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
index 9690978..18ed1de 100644
--- 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
index 4842f8b..868f710 100644
--- 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
index f005458..455e3e7 100644
--- 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
index 75cd2d0..38d1577 100644
--- 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/site/src/content/posts/2012-10-19-datatium-a-material-to-create-responsive-experiences.md b/site/src/content/posts/2012-10-19-datatium-a-material-to-create-responsive-experiences.md
index d328ff2..669a140 100644
--- a/site/src/content/posts/2012-10-19-datatium-a-material-to-create-responsive-experiences.md
+++ b/site/src/content/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
index 0aff884..8f34b43 100644
--- 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
index 6f6e1b1..31f86e6 100644
--- 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
index d395520..c6d9875 100644
--- 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
index 0a2848c..3a31370 100644
--- 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
index 20d583e..8b12c51 100644
--- 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)
diff --git a/site/src/content/posts/2015-04-15-make-js-robotics-launch.md b/site/src/content/posts/2015-04-15-make-js-robotics-launch.md
index eb544d9..d0ed036 100644
--- a/site/src/content/posts/2015-04-15-make-js-robotics-launch.md
+++ b/site/src/content/posts/2015-04-15-make-js-robotics-launch.md
@@ -8,7 +8,7 @@ tags: development, books, javascript, robotics, arduino, nodebots, nodejs, launc
 excerpt: >
     This new book on JavaScript robotics launches today, co-authored by 15 of
     core NodeBots community members from around the world.
-listimage: posts/make_js_robots.jpg
+listimage: ../../img/posts/make_js_robots.jpg
 listimage-position: 50% 100%
 
 ---
diff --git a/site/src/content/posts/2015-05-04-pebble-controlled-leds.md b/site/src/content/posts/2015-05-04-pebble-controlled-leds.md
index f1b1d83..b62b14c 100644
--- a/site/src/content/posts/2015-05-04-pebble-controlled-leds.md
+++ b/site/src/content/posts/2015-05-04-pebble-controlled-leds.md
@@ -9,7 +9,7 @@ excerpt: >
     The ESP8266 is a capable device in its own right and can run a simple web
     server. Couple this with a smartwatch for control and you have some interesting
     remote control options.
-listimage: posts/pebble_neopixel.jpg
+listimage: ../../img/posts/pebble_neopixel.jpg
 
 ---
 
diff --git a/site/src/content/posts/2015-06-01-building-portable-minecraft-server.md b/site/src/content/posts/2015-06-01-building-portable-minecraft-server.md
index ca2fd5d..ef0d3ed 100644
--- a/site/src/content/posts/2015-06-01-building-portable-minecraft-server.md
+++ b/site/src/content/posts/2015-06-01-building-portable-minecraft-server.md
@@ -10,7 +10,7 @@ excerpt: >
     server that can be put in a lunch box and taken to the park.
 featureimage: minecraft_ss.png
 imageby: ajfisher
-listimage: posts/minecraft.jpg
+listimage: ../../img/posts/minecraft.jpg
 
 ---
 
diff --git a/site/src/content/posts/2015-08-08-ddd-jsiot-workshop.md b/site/src/content/posts/2015-08-08-ddd-jsiot-workshop.md
index 3c2a14b..f36d869 100644
--- a/site/src/content/posts/2015-08-08-ddd-jsiot-workshop.md
+++ b/site/src/content/posts/2015-08-08-ddd-jsiot-workshop.md
@@ -8,7 +8,7 @@ tags: development, IoT, javascript, web, hardware, arduino, nodejs, nodebots
 excerpt: >
     A summary of the various projects completed as part of the JS IoT workshop
     given at DDD Melbourne 2015.
-listimage: posts/neopixel_goggles.jpg
+listimage: ../../img/posts/neopixel_goggles.jpg
 
 ---
 
diff --git a/site/src/content/posts/2015-09-02-iot-mobile-practices.md b/site/src/content/posts/2015-09-02-iot-mobile-practices.md
index acf9eb0..3538c5c 100644
--- a/site/src/content/posts/2015-09-02-iot-mobile-practices.md
+++ b/site/src/content/posts/2015-09-02-iot-mobile-practices.md
@@ -8,7 +8,7 @@ tags: physical computing, development, ubicomp, IoT, mobile
 excerpt: >
     IoT product development has the opportunity to draw on some of the lessons
     hard won over the years of developing for mobile.
-listimage: posts/the_things.jpg
+listimage: ../../img/posts/the_things.jpg
 
 ---
 
diff --git a/site/src/content/posts/2015-09-07-js-not-just-language-of-the-web.md b/site/src/content/posts/2015-09-07-js-not-just-language-of-the-web.md
index 0b2e9b1..31c1148 100644
--- a/site/src/content/posts/2015-09-07-js-not-just-language-of-the-web.md
+++ b/site/src/content/posts/2015-09-07-js-not-just-language-of-the-web.md
@@ -8,7 +8,7 @@ tags: physical computing, development, ubicomp, javascript, nodejs, nodebots
 excerpt: >
     JS is moving out of the browser and into all manner of places. My notes
     and slides from my talk on this topic at JSFoo 15.
-listimage: posts/robot_love.jpg
+listimage: ../../img/posts/robot_love.jpg
 
 ---
 
diff --git a/site/src/content/posts/2015-09-09-datatium-material-for-contextually-responsive-design.md b/site/src/content/posts/2015-09-09-datatium-material-for-contextually-responsive-design.md
index ff2f1a8..7cbbced 100644
--- a/site/src/content/posts/2015-09-09-datatium-material-for-contextually-responsive-design.md
+++ b/site/src/content/posts/2015-09-09-datatium-material-for-contextually-responsive-design.md
@@ -10,7 +10,7 @@ excerpt: >
     Responsive design is still very screen size focussed where as we should be
     considering context much more than we do. This talk explains how Datatium
     helps resolve this.
-listimage: posts/phone_hand.jpg
+listimage: ../../img/posts/phone_hand.jpg
 featureimage: datatium_material.png
 ---
 
diff --git a/site/src/content/posts/2016-01-27-road-to-interchange.md b/site/src/content/posts/2016-01-27-road-to-interchange.md
index aed7cc7..ef2dea8 100644
--- a/site/src/content/posts/2016-01-27-road-to-interchange.md
+++ b/site/src/content/posts/2016-01-27-road-to-interchange.md
@@ -15,7 +15,7 @@ twitter_excerpt: >
 featureimage: omer-rana-nRjdDzaCfdM-unsplash.jpg
 imageby: Omer Rana on Unsplash
 imagelink: https://unsplash.com/photos/nRjdDzaCfdM
-listimage: posts/omer-rana-nRjdDzaCfdM-unsplash.jpg
+listimage: ../../img/posts/omer-rana-nRjdDzaCfdM-unsplash.jpg
 collection: featured
 featured: true
 ---
diff --git a/site/src/content/posts/2016-02-11-moving-to-metalsmith.md b/site/src/content/posts/2016-02-11-moving-to-metalsmith.md
index 36c7aeb..f5f9ee5 100644
--- a/site/src/content/posts/2016-02-11-moving-to-metalsmith.md
+++ b/site/src/content/posts/2016-02-11-moving-to-metalsmith.md
@@ -10,7 +10,7 @@ featureimage: forging.jpg
 featureimage-position: 100% 100%
 imageby: Flavio~
 imagelink: https://www.flickr.com/photos/37873897@N06/7070849827/
-listimage: posts/forging.jpg
+listimage: ../../img/posts/forging.jpg
 excerpt: >
     I moved this site from WP to metalsmith.io in order to get a more pure
     authoring experience. The result is good, though there were a few gotchas
diff --git a/site/src/content/posts/2023-08-31-ai-works-now.md b/site/src/content/posts/2023-08-31-ai-works-now.md
index b40ae1a..f16dc31 100644
--- a/site/src/content/posts/2023-08-31-ai-works-now.md
+++ b/site/src/content/posts/2023-08-31-ai-works-now.md
@@ -13,9 +13,10 @@ twitter_excerpt: >
     🤖 In 2023, AI isn't just evolving—it's revolutionizing. Yet, challenges
     loom large. Dive into insights from the Web Directions AI conf
 featureimage: ai_works_now_sd.jpg
+featuredimage: ../../img/posts/ai_works_now_sd.jpg
 imageby: ajfisher Representation of a neural network Stable Diffusion
 imagelink: https://ajfisher.me/
-listimage: posts/ai_works_now_head_sd.jpg
+listimage: ../../img/posts/ai_works_now_sd.jpg
 featured: true
 ---
 
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 0dcfcb4..a39e1c4 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -112,8 +112,6 @@ export const pageQuery = graphql`
           frontmatter {
             slug
             title
-            listimage
-            listimage_position
             date(formatString: "YYYY-MM-DD")
             excerpt
             featured
@@ -121,6 +119,14 @@ export const pageQuery = graphql`
             featureimage_position
             small_title
             large_title
+            listimage_position
+            listimage {
+              childImageSharp {
+                gatsbyImageData(
+                  layout: FULL_WIDTH
+                )
+              }
+            }
           }
           wordCount {
             words
@@ -143,7 +149,13 @@ export const pageQuery = graphql`
           frontmatter {
             slug
             title
-            listimage
+            listimage {
+              childImageSharp {
+                gatsbyImageData(
+                  layout: FULL_WIDTH
+                )
+              }
+            }
             listimage_position
             date(formatString: "YYYY-MM-DD")
             excerpt
diff --git a/site/src/templates/post-list.js b/site/src/templates/post-list.js
index 08bcb4b..42f54ac 100644
--- a/site/src/templates/post-list.js
+++ b/site/src/templates/post-list.js
@@ -106,7 +106,13 @@ export const pageQuery = graphql`
           frontmatter {
             slug
             title
-            listimage
+            listimage {
+              childImageSharp {
+                gatsbyImageData(
+                  layout: FULL_WIDTH
+                )
+              }
+            }
             listimage_position
             date(formatString: "YYYY-MM-DD")
             excerpt
diff --git a/site/src/templates/tags.js b/site/src/templates/tags.js
index 605b0c8..4c739eb 100644
--- a/site/src/templates/tags.js
+++ b/site/src/templates/tags.js
@@ -63,8 +63,6 @@ export default function Template({ pageContext, data}) {
             words: node.wordCount.words
           };
 
-          // const url = `/${date}/${slug}`;
-
           const excerpt = node.frontmatter.excerpt || node.excerpt || null;
 
           return (
@@ -98,7 +96,13 @@ export const pageQuery = graphql`
           frontmatter {
             slug
             title
-            listimage
+            listimage {
+              childImageSharp {
+                gatsbyImageData(
+                  layout: FULL_WIDTH
+                )
+              }
+            }
             listimage_position
             date(formatString: "YYYY-MM-DD")
             excerpt