refactor: replace image resizing script with docusaurus-ideal-image plugin

This commit removes the need for manually running a script to resize the images for the gallery thumbnails. Instead, it uses the docusaurus-ideal-image plugin, which optimizes the image size and quality during build time.

create_thumbnails.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-
-# To run this script, we need 2 things:
-# 1. ImageMagick installed - the convert command comes from ImageMagick
-# 2. Run chmod +x create_thumbnails.sh - this makes the script executable
-
-# Create thumbnails for images in the static/gallery directory
-cd static/gallery
-for img in *.png; do
-    convert "$img" -resize 500x "thumbnails/$img"
-done
-cd - > /dev/null
-
-# Create thumbnails for images in the static/illustration directory
-cd static/illustration
-for img in *.png; do
-    convert "$img" -resize 400x "thumbnails/$img"
-done
-cd - > /dev/null
-
-# Create thumbnails for images in the static/photography directory
-cd static/photography
-for img in *.png; do
-    convert "$img" -resize 400x "thumbnails/$img"
-done
-cd - > /dev/null

docs/gallery.mdx

@@ -10,33 +10,33 @@ import { ImageGrid, Grid } from "@site/src/components/mdx"
 <!-- [Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4) -->
 
 export const galleryImages = [
-    { src: '/1.png'},
-    { src: '/2.png'},
-    { src: '/3.png'},
-    { src: '/4.png'},
-    { src: '/6.png'},
-    { src: '/7.png'},
-    { src: '/8.png'},
-    { src: '/9.png'},
-    { src: '/10.png'},
-    { src: '/11.png'},
-    { src: '/12.png'},
-    { src: '/13.png'},
-    { src: '/14.png'},
-    { src: '/15.png'},
-    { src: '/16.png'},
-    { src: '/17.png'},
-    { src: '/18.png'},
-    { src: '/19.png'},
-    { src: '/20.png'},
-    { src: '/21.png'},
-    { src: '/22.png'},
-    { src: '/23.png'},
-    { src: '/24.png'},
-    { src: '/25.png'},
-    { src: '/26.png'},
-    { src: '/27.png'},
-    { src: '/28.png'},
+    { src: '/gallery/1.png', img: require('/gallery/1.png')},
+    { src: '/gallery/2.png', img: require('/gallery/2.png')},
+    { src: '/gallery/3.png', img: require('/gallery/3.png')},
+    { src: '/gallery/4.png', img: require('/gallery/4.png')},
+    { src: '/gallery/6.png', img: require('/gallery/6.png')},
+    { src: '/gallery/7.png', img: require('/gallery/7.png')},
+    { src: '/gallery/8.png', img: require('/gallery/8.png')},
+    { src: '/gallery/9.png', img: require('/gallery/9.png')},
+    { src: '/gallery/10.png', img: require('/gallery/10.png')},
+    { src: '/gallery/11.png', img: require('/gallery/11.png')},
+    { src: '/gallery/12.png', img: require('/gallery/12.png')},
+    { src: '/gallery/13.png', img: require('/gallery/13.png')},
+    { src: '/gallery/14.png', img: require('/gallery/14.png')},
+    { src: '/gallery/15.png', img: require('/gallery/15.png')},
+    { src: '/gallery/16.png', img: require('/gallery/16.png')},
+    { src: '/gallery/17.png', img: require('/gallery/17.png')},
+    { src: '/gallery/18.png', img: require('/gallery/18.png')},
+    { src: '/gallery/19.png', img: require('/gallery/19.png')},
+    { src: '/gallery/20.png', img: require('/gallery/20.png')},
+    { src: '/gallery/21.png', img: require('/gallery/21.png')},
+    { src: '/gallery/22.png', img: require('/gallery/22.png')},
+    { src: '/gallery/23.png', img: require('/gallery/23.png')},
+    { src: '/gallery/24.png', img: require('/gallery/24.png')},
+    { src: '/gallery/25.png', img: require('/gallery/25.png')},
+    { src: '/gallery/26.png', img: require('/gallery/26.png')},
+    { src: '/gallery/27.png', img: require('/gallery/27.png')},
+    { src: '/gallery/28.png', img: require('/gallery/28.png')},
 ]
 
-<ImageGrid mode="masonry" firstColumnSize={11} imageArray={galleryImages} folder="/gallery"/>
+<ImageGrid mode="masonry" firstColumnSize={11} images={galleryImages} />

docs/visual-language/grid-and-layout/non-web-environment.mdx

@@ -16,16 +16,16 @@ The typestack for these grids is also based in multiples of 20px, line height ad
 
 2 column 20px and 4 column 20px
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/Clip_path_group.png"}, {src: "/Logos-Example-2.png" }]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{ src: "/Clip_path_group.png" }, { src: "/Logos-Example-2.png" }]} />
 
 ### Hashing It Out
 
 3 column 20px and 2 column 20px
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/HIO-Examples-1.png"}, {src: "/HIO-Examples-2.png"}]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{ src: "/HIO-Examples-1.png" }, { src: "/HIO-Examples-2.png" }]} />
 
 ### Generic Twitter
 
 This is a simpler grid based on 96px, used for X. Type sizes are also based on divisions of the 96px unit.
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/image_5.png"}, {src: "/image_6.png"}, {src: "/image_7.png"}, {src: "/image_8.png"}]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{ src: "/image_5.png" }, { src: "/image_6.png" }, { src: "/image_7.png" }, { src: "/image_8.png" }]} />

docs/visual-language/grid-and-layout/web-environment.mdx

@@ -39,12 +39,12 @@ Gutter size - 16px.
 
 ### Desktop
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/Untitled-1.png"}, {src: "/Untitled-2.png"}, {src: "/Untitled-3.png"}, {src: "/Untitled-4.png"}]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-1.png"}, {src: "/Untitled-2.png"}, {src: "/Untitled-3.png"}, {src: "/Untitled-4.png"}]} />
 
 ### Tablet
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/Untitled-5.png"}, {src: "/Untitled-6.png"}]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-5.png"}, {src: "/Untitled-6.png"}]} />
 
 ### Mobile
 
-<ImageGrid md={{cols: 2, gap: "16px"}} imageArray={[{src: "/Untitled-7.png"}, {src: "/Untitled-8.png"}]} thumbnailsFolder="" />
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-7.png"}, {src: "/Untitled-8.png"}]} />

docs/visual-language/illustration.mdx

@@ -4,81 +4,81 @@ sidebar_position: 5
 displayed_sidebar: main
 ---
 
-import { ImageGrid, Grid } from "@site/src/components/mdx"
+import { ImageGrid } from "@site/src/components/mdx"
 
 export const protocolPromotion = [
-    {src: "/Conceptual-illustration-1.png"},
-    {src: "/Conceptual-illustration-2.png"},
-    {src: "/Conceptual-illustration-3.png"},
-    {src: "/Conceptual-illustration-4.png"},
+    {src: "/illustration/Conceptual-illustration-1.png", img: require("/illustration/Conceptual-illustration-1.png") },
+    {src: "/illustration/Conceptual-illustration-2.png", img: require("/illustration/Conceptual-illustration-2.png") },
+    {src: "/illustration/Conceptual-illustration-3.png", img: require("/illustration/Conceptual-illustration-3.png") },
+    {src: "/illustration/Conceptual-illustration-4.png", img: require("/illustration/Conceptual-illustration-4.png") },
 ]
 
 export const conceptualImages = [
-    {src: "/Conceptual-illustration-5.png"},
-    {src: "/Conceptual-illustration-6.png"},
-    {src: "/Conceptual-illustration-7.png"},
-    {src: "/Conceptual-illustration-8.png"},
-    {src: "/Conceptual-illustration-9.png"},
-    {src: "/Conceptual-illustration-10.png"},
-    {src: "/Conceptual-illustration-11.png"},
-    {src: "/Conceptual-illustration-12.png"},
-    {src: "/Conceptual-illustration-13.png"},
-    {src: "/Conceptual-illustration-14.png"},
-    {src: "/Conceptual-illustration-15.png"},
-    {src: "/Conceptual-illustration-16.png"},
-    {src: "/Conceptual-illustration-17.png"},
-    {src: "/Conceptual-illustration-18.png"},
-    {src: "/Conceptual-illustration-19.png"},
-    {src: "/Conceptual-illustration-20.png"},
-    {src: "/Conceptual-illustration-21.png"},
-    {src: "/Conceptual-illustration-22.png"},
-    {src: "/Conceptual-illustration-23.png"},
-    {src: "/Conceptual-illustration-24.png"},
-    {src: "/Conceptual-illustration-25.png"},
+    {src: "/illustration/Conceptual-illustration-5.png", img: require("/illustration/Conceptual-illustration-5.png") },
+    {src: "/illustration/Conceptual-illustration-6.png", img: require("/illustration/Conceptual-illustration-6.png") },
+    {src: "/illustration/Conceptual-illustration-7.png", img: require("/illustration/Conceptual-illustration-7.png") },
+    {src: "/illustration/Conceptual-illustration-8.png", img: require("/illustration/Conceptual-illustration-8.png") },
+    {src: "/illustration/Conceptual-illustration-9.png", img: require("/illustration/Conceptual-illustration-9.png") },
+    {src: "/illustration/Conceptual-illustration-10.png", img: require("/illustration/Conceptual-illustration-10.png") },
+    {src: "/illustration/Conceptual-illustration-11.png", img: require("/illustration/Conceptual-illustration-11.png") },
+    {src: "/illustration/Conceptual-illustration-12.png", img: require("/illustration/Conceptual-illustration-12.png") },
+    {src: "/illustration/Conceptual-illustration-13.png", img: require("/illustration/Conceptual-illustration-13.png") },
+    {src: "/illustration/Conceptual-illustration-14.png", img: require("/illustration/Conceptual-illustration-14.png") },
+    {src: "/illustration/Conceptual-illustration-15.png", img: require("/illustration/Conceptual-illustration-15.png") },
+    {src: "/illustration/Conceptual-illustration-16.png", img: require("/illustration/Conceptual-illustration-16.png") },
+    {src: "/illustration/Conceptual-illustration-17.png", img: require("/illustration/Conceptual-illustration-17.png") },
+    {src: "/illustration/Conceptual-illustration-18.png", img: require("/illustration/Conceptual-illustration-18.png") },
+    {src: "/illustration/Conceptual-illustration-19.png", img: require("/illustration/Conceptual-illustration-19.png") },
+    {src: "/illustration/Conceptual-illustration-20.png", img: require("/illustration/Conceptual-illustration-20.png") },
+    {src: "/illustration/Conceptual-illustration-21.png", img: require("/illustration/Conceptual-illustration-21.png") },
+    {src: "/illustration/Conceptual-illustration-22.png", img: require("/illustration/Conceptual-illustration-22.png") },
+    {src: "/illustration/Conceptual-illustration-23.png", img: require("/illustration/Conceptual-illustration-23.png") },
+    {src: "/illustration/Conceptual-illustration-24.png", img: require("/illustration/Conceptual-illustration-24.png") },
+    {src: "/illustration/Conceptual-illustration-25.png", img: require("/illustration/Conceptual-illustration-25.png") },
 ]
 
 export const abstractImages = [
-    {src: "/Abstract-1.png"},
-    {src: "/Abstract-2.png"},
-    {src: "/Abstract-3.png"},
-    {src: "/Abstract-6.png"},
-    {src: "/Abstract-7.png"},
-    {src: "/Abstract-8.png"},
-    {src: "/Abstract-9.png"},
-    {src: "/Abstract-10.png"},
-    {src: "/Abstract-11.png"},
-    {src: "/Abstract-12.png"},
-    {src: "/Abstract-13.png"},
-    {src: "/Abstract-14.png"},
-    {src: "/Abstract-15.png"},
-    {src: "/Abstract-16.png"},
-    {src: "/Abstract-17.png"},
-    {src: "/Abstract-20.png"},
-    {src: "/Abstract-21.png"},
-    {src: "/Abstract-22.png"},
-    {src: "/Abstract-23.png"},
-    {src: "/Abstract-24.png"},
-    {src: "/Abstract-25.png"},
-    {src: "/Abstract-26.png"},
-    {src: "/Abstract-27.png"},
-    {src: "/Abstract-28.png"},
-    {src: "/Abstract-29.png"},
-    {src: "/Abstract-30.png"},
-    {src: "/Abstract-31.png"},
-    {src: "/Abstract-34.png"},
-    {src: "/Abstract-35.png"},
-    {src: "/Abstract-36.png"},
-    {src: "/Abstract-37.png"},
-    {src: "/Abstract-38.png"},
-    {src: "/Abstract-39.png"},
-    {src: "/Abstract-40.png"},
-    {src: "/Abstract-41.png"},
-    {src: "/Abstract-42.png"},
-    {src: "/Abstract-42-1.png"},
-    {src: "/Abstract-44.png"},
-    {src: "/Abstract-45.png"},
-    {src: "/Abstract-48.png"},
-    {src: "/Abstract-49.png"},
+    {src: "/illustration/Abstract-1.png", img: require("/illustration/Abstract-1.png") },
+    {src: "/illustration/Abstract-2.png", img: require("/illustration/Abstract-2.png") },
+    {src: "/illustration/Abstract-3.png", img: require("/illustration/Abstract-3.png") },
+    {src: "/illustration/Abstract-6.png", img: require("/illustration/Abstract-6.png") },
+    {src: "/illustration/Abstract-7.png", img: require("/illustration/Abstract-7.png") },
+    {src: "/illustration/Abstract-8.png", img: require("/illustration/Abstract-8.png") },
+    {src: "/illustration/Abstract-9.png", img: require("/illustration/Abstract-9.png") },
+    {src: "/illustration/Abstract-10.png", img: require("/illustration/Abstract-10.png") },
+    {src: "/illustration/Abstract-11.png", img: require("/illustration/Abstract-11.png") },
+    {src: "/illustration/Abstract-12.png", img: require("/illustration/Abstract-12.png") },
+    {src: "/illustration/Abstract-13.png", img: require("/illustration/Abstract-13.png") },
+    {src: "/illustration/Abstract-14.png", img: require("/illustration/Abstract-14.png") },
+    {src: "/illustration/Abstract-15.png", img: require("/illustration/Abstract-15.png") },
+    {src: "/illustration/Abstract-16.png", img: require("/illustration/Abstract-16.png") },
+    {src: "/illustration/Abstract-17.png", img: require("/illustration/Abstract-17.png") },
+    {src: "/illustration/Abstract-20.png", img: require("/illustration/Abstract-20.png") },
+    {src: "/illustration/Abstract-21.png", img: require("/illustration/Abstract-21.png") },
+    {src: "/illustration/Abstract-22.png", img: require("/illustration/Abstract-22.png") },
+    {src: "/illustration/Abstract-23.png", img: require("/illustration/Abstract-23.png") },
+    {src: "/illustration/Abstract-24.png", img: require("/illustration/Abstract-24.png") },
+    {src: "/illustration/Abstract-25.png", img: require("/illustration/Abstract-25.png") },
+    {src: "/illustration/Abstract-26.png", img: require("/illustration/Abstract-26.png") },
+    {src: "/illustration/Abstract-27.png", img: require("/illustration/Abstract-27.png") },
+    {src: "/illustration/Abstract-28.png", img: require("/illustration/Abstract-28.png") },
+    {src: "/illustration/Abstract-29.png", img: require("/illustration/Abstract-29.png") },
+    {src: "/illustration/Abstract-30.png", img: require("/illustration/Abstract-30.png") },
+    {src: "/illustration/Abstract-31.png", img: require("/illustration/Abstract-31.png") },
+    {src: "/illustration/Abstract-34.png", img: require("/illustration/Abstract-34.png") },
+    {src: "/illustration/Abstract-35.png", img: require("/illustration/Abstract-35.png") },
+    {src: "/illustration/Abstract-36.png", img: require("/illustration/Abstract-36.png") },
+    {src: "/illustration/Abstract-37.png", img: require("/illustration/Abstract-37.png") },
+    {src: "/illustration/Abstract-38.png", img: require("/illustration/Abstract-38.png") },
+    {src: "/illustration/Abstract-39.png", img: require("/illustration/Abstract-39.png") },
+    {src: "/illustration/Abstract-40.png", img: require("/illustration/Abstract-40.png") },
+    {src: "/illustration/Abstract-41.png", img: require("/illustration/Abstract-41.png") },
+    {src: "/illustration/Abstract-42.png", img: require("/illustration/Abstract-42.png") },
+    {src: "/illustration/Abstract-42-1.png", img: require("/illustration/Abstract-42-1.png") },
+    {src: "/illustration/Abstract-44.png", img: require("/illustration/Abstract-44.png") },
+    {src: "/illustration/Abstract-45.png", img: require("/illustration/Abstract-45.png") },
+    {src: "/illustration/Abstract-48.png", img: require("/illustration/Abstract-48.png") },
+    {src: "/illustration/Abstract-49.png", img: require("/illustration/Abstract-49.png") },
 ]
 
 These 3D rendered animations are used to promote Nomos, Waku, Nimbus, and Codex. Each Protocol has its own and can be used in static or animated form. In some cases these statues appear to be previously broken and repaired in the style of Japanese Kintsugi (golden repair). This is a metaphor for the vision of Logos to rebuild the currently broken modern society with the pieces of enlightenment and renaissance ideas.
@@ -91,7 +91,7 @@ Nimbus - Aphrodite with halo, lightness, symbol of love, attraction
 
 Waku - Prometheus, delivering transformative technology
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} imageArray={protocolPromotion} folder="/illustration" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={protocolPromotion} />
 
 ## Conceptual
 
@@ -99,7 +99,7 @@ The selected illustration style is detailed, and symmetrical to suggest the subl
 
 Need to come up with a plan/process for creating/buying/commissioning/using this type of illustration. Could be applicable to Network State Press articles and social promo stuff.
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} imageArray={conceptualImages} folder="/illustration" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={conceptualImages} />
 
 ## Abstract
 
@@ -107,4 +107,4 @@ Texture can be preferable giving a layering or aging effect to the work suggesti
 
 HIO uses these abstracts for the Flash Hash episode covers.
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 4, gap: "16px"}} md={{cols: 7, gap: "16px"}} imageArray={abstractImages} folder="/illustration" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 4, gap: "16px"}} md={{cols: 7, gap: "16px"}} images={abstractImages} />

docs/visual-language/photography.mdx

@@ -7,57 +7,57 @@ displayed_sidebar: main
 import { ImageGrid, Grid } from "@site/src/components/mdx"
 
 export const portraits = [
-    {src: "/Logos-Photography-01.png"},
-    {src: "/Logos-Photography-02.png"},
-    {src: "/Logos-Photography-03.png"},
-    {src: "/Logos-Photography-04.png"},
-    {src: "/HIO-Photography-01.png"},
-    {src: "/HIO-Photography-02.png"},
-    {src: "/HIO-Photography-03.png"},
-    {src: "/HIO-Photography-04.png"},
+    { src: "/photography/Logos-Photography-01.png", img: require("/photography/Logos-Photography-01.png") },
+    { src: "/photography/Logos-Photography-02.png", img: require("/photography/Logos-Photography-02.png") },
+    { src: "/photography/Logos-Photography-03.png", img: require("/photography/Logos-Photography-03.png") },
+    { src: "/photography/Logos-Photography-04.png", img: require("/photography/Logos-Photography-04.png") },
+    { src: "/photography/HIO-Photography-01.png", img: require("/photography/HIO-Photography-01.png") },
+    { src: "/photography/HIO-Photography-02.png", img: require("/photography/HIO-Photography-02.png") },
+    { src: "/photography/HIO-Photography-03.png", img: require("/photography/HIO-Photography-03.png") },
+    { src: "/photography/HIO-Photography-04.png", img: require("/photography/HIO-Photography-04.png") },
 ]
 
 export const activismImages = [
-    {src: "/Activism-1.png"},
-    {src: "/Activism-2.png"},
-    {src: "/Activism-3.png"},
-    {src: "/Activism-4.png"},
-    {src: "/Activism-5.png"},
-    {src: "/Activism-6.png"},
-    {src: "/Activism-7.png"},
-    {src: "/Activism-8.png"},
-    {src: "/Activism-9.png"},
-    {src: "/Activism-10.png"},
-    {src: "/Activism-11.png"},
-    {src: "/Activism-12.png"},
-    {src: "/Activism-13.png"},
-    {src: "/Activism-14.png"},
+    { src: "/photography/Activism-1.png", img: require("/photography/Activism-1.png") },
+    { src: "/photography/Activism-2.png", img: require("/photography/Activism-2.png") },
+    { src: "/photography/Activism-3.png", img: require("/photography/Activism-3.png") },
+    { src: "/photography/Activism-4.png", img: require("/photography/Activism-4.png") },
+    { src: "/photography/Activism-5.png", img: require("/photography/Activism-5.png") },
+    { src: "/photography/Activism-6.png", img: require("/photography/Activism-6.png") },
+    { src: "/photography/Activism-7.png", img: require("/photography/Activism-7.png") },
+    { src: "/photography/Activism-8.png", img: require("/photography/Activism-8.png") },
+    { src: "/photography/Activism-9.png", img: require("/photography/Activism-9.png") },
+    { src: "/photography/Activism-10.png", img: require("/photography/Activism-10.png") },
+    { src: "/photography/Activism-11.png", img: require("/photography/Activism-11.png") },
+    { src: "/photography/Activism-12.png", img: require("/photography/Activism-12.png") },
+    { src: "/photography/Activism-13.png", img: require("/photography/Activism-13.png") },
+    { src: "/photography/Activism-14.png", img: require("/photography/Activism-14.png") },
 ]
 
 export const conceptualImages = [
-    {src: "/Conceptual-1.png"},
-    {src: "/Conceptual-2.png"},
-    {src: "/Conceptual-3.png"},
-    {src: "/Conceptual-4.png"},
-    {src: "/Conceptual-5.png"},
-    {src: "/Conceptual-6.png"},
-    {src: "/Conceptual-7.png"},
-    {src: "/Conceptual-8.png"},
-    {src: "/Conceptual-9.png"},
-    {src: "/Conceptual-10.png"},
-    {src: "/Conceptual-11.png"},
-    {src: "/Conceptual-12.png"},
-    {src: "/Conceptual-13.png"},
-    {src: "/Conceptual-14.png"},
-    {src: "/Conceptual-15.png"},
-    {src: "/Conceptual-16.png"},
-    {src: "/Conceptual-17.png"},
-    {src: "/Conceptual-18.png"},
-    {src: "/Conceptual-19.png"},
-    {src: "/Conceptual-20.png"},
-    {src: "/Conceptual-21.png"},
-    {src: "/Conceptual-22.png"},
-    {src: "/Conceptual-23.png"},
+    { src: "/photography/Conceptual-1.png", img: require("/photography/Conceptual-1.png") },
+    { src: "/photography/Conceptual-2.png", img: require("/photography/Conceptual-2.png") },
+    { src: "/photography/Conceptual-3.png", img: require("/photography/Conceptual-3.png") },
+    { src: "/photography/Conceptual-4.png", img: require("/photography/Conceptual-4.png") },
+    { src: "/photography/Conceptual-5.png", img: require("/photography/Conceptual-5.png") },
+    { src: "/photography/Conceptual-6.png", img: require("/photography/Conceptual-6.png") },
+    { src: "/photography/Conceptual-7.png", img: require("/photography/Conceptual-7.png") },
+    { src: "/photography/Conceptual-8.png", img: require("/photography/Conceptual-8.png") },
+    { src: "/photography/Conceptual-9.png", img: require("/photography/Conceptual-9.png") },
+    { src: "/photography/Conceptual-10.png", img: require("/photography/Conceptual-10.png") },
+    { src: "/photography/Conceptual-11.png", img: require("/photography/Conceptual-11.png") },
+    { src: "/photography/Conceptual-12.png", img: require("/photography/Conceptual-12.png") },
+    { src: "/photography/Conceptual-13.png", img: require("/photography/Conceptual-13.png") },
+    { src: "/photography/Conceptual-14.png", img: require("/photography/Conceptual-14.png") },
+    { src: "/photography/Conceptual-15.png", img: require("/photography/Conceptual-15.png") },
+    { src: "/photography/Conceptual-16.png", img: require("/photography/Conceptual-16.png") },
+    { src: "/photography/Conceptual-17.png", img: require("/photography/Conceptual-17.png") },
+    { src: "/photography/Conceptual-18.png", img: require("/photography/Conceptual-18.png") },
+    { src: "/photography/Conceptual-19.png", img: require("/photography/Conceptual-19.png") },
+    { src: "/photography/Conceptual-20.png", img: require("/photography/Conceptual-20.png") },
+    { src: "/photography/Conceptual-21.png", img: require("/photography/Conceptual-21.png") },
+    { src: "/photography/Conceptual-22.png", img: require("/photography/Conceptual-22.png") },
+    { src: "/photography/Conceptual-23.png", img: require("/photography/Conceptual-23.png") },
 ]
 
 We have a unique photography style for each of the following categories; Portraits, Activism, and Conceptual.
@@ -66,16 +66,16 @@ We have a unique photography style for each of the following categories; Portrai
 
 This style, primarily used for podcast promotion, incorporates black-and-white visuals with dramatic lighting when feasible. It typically frames subjects with a good amount of head and shoulders. Try to ensure guest consent when possible.
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} imageArray={portraits} folder="/photography" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={portraits} />
 
 ## Activism
 
 This style is predominantly employed for Network State Press articles and presentations, featuring a black-and-white color scheme. It integrates a journalistic approach with both stock photography and real-life imagery from protests and demonstrations. While a preference is given to free resources, licensed content can also be considered.
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} imageArray={activismImages} folder="/photography" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={activismImages} />
 
 ## Conceptual
 
 This style is primarily utilized for Network State Press articles and presentations, encompassing a journalistic approach along with the inclusion of stock photography. It is designed to align with fundamental Logos concepts, such as human rights, privacy, and civil liberties. While free resources are preferred, the use of licensed materials can be explored.
 
-<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} imageArray={conceptualImages} folder="/photography" />
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={conceptualImages} />

docusaurus.config.js

@@ -52,6 +52,18 @@ const config = {
       }),
     ],
   ],
+  plugins: [
+    [
+      '@docusaurus/plugin-ideal-image',
+      {
+        quality: 100,
+        max: 1080,
+        min: 400,
+        steps: 2,
+        disableInDev: false,
+      },
+    ],
+  ],
 
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */

package.json

@@ -21,8 +21,9 @@
   "dependencies": {
     "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.109",
     "@docusaurus/core": "2.4.1",
+    "@docusaurus/plugin-ideal-image": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
-    "@docusaurus/theme-mermaid": "^2.4.1",
+    "@docusaurus/theme-mermaid": "2.4.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^1.6.22",

src/components/mdx/Image/Image.module.scss

@@ -0,0 +1,46 @@
+@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: rgb(var(--lsd-theme-secondary));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.thumbnail {
+  cursor: pointer;
+}
+
+.enlarged {
+  position: fixed;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  max-height: 90vh;
+  max-width: 90vw;
+
+  display: block;
+  object-fit: contain;
+}
+
+.closeButton {
+  position: fixed;
+  top: 18px;
+  right: 16px;
+
+  background-color: rgb(var(--lsd-theme-secondary)) !important;
+
+  cursor: pointer;
+
+  z-index: 1001;
+}

src/components/mdx/Image/Image.tsx

@@ -0,0 +1,110 @@
+import { LightBoxWrapper } from '@acid-info/logos-docusaurus-theme/lib/client/containers/LightBox'
+import { CloseIcon, IconButton } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React, { useEffect, useMemo, useState } from 'react'
+import styles from './Image.module.scss'
+
+export type LoadedImage = {
+  preSrc: string
+  width: number
+  height: number
+  placeholder: any
+  src: string
+  srcSet: string
+  images: {
+    width: number
+    height: number
+  }[]
+}
+
+export type ImageProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'src'
+> & {
+  src?: string
+  img?: LoadedImage | undefined | null
+  minWidth?: number
+}
+
+export const Image: React.FC<ImageProps> = ({
+  minWidth = 0,
+  src,
+  img,
+  ...rest
+}) => {
+  const [enlarged, setEnlarged] = useState(false)
+  const singleImage = !img?.images || img.images.length === 0
+
+  const originalImage = {
+    src: src,
+    width: rest.width,
+    height: rest.height,
+  }
+
+  const images = img?.images || []
+
+  const sorted = useMemo(
+    () =>
+      [...images]
+        .sort((a, b) => a.width - b.width)
+        .filter(img => img.width >= minWidth),
+    [images],
+  )
+
+  const [smallest] = [sorted[0] ?? originalImage].map(img => ({
+    width: img.width,
+    height: img.height,
+    src: 'src' in img ? img.src : 'path' in img ? img.path : '',
+  }))
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setEnlarged(false)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  const imageElement = (
+    <img
+      src={smallest.src as string}
+      width={smallest.width}
+      height={smallest.height}
+      onClick={() => !singleImage && setEnlarged(true)}
+      {...rest}
+      className={clsx(
+        styles.image,
+        !singleImage && styles.thumbnail,
+        rest.className,
+      )}
+    />
+  )
+
+  return (
+    <>
+      {img ? imageElement : <LightBoxWrapper>{imageElement}</LightBoxWrapper>}
+      {enlarged && (
+        <div className={styles.overlay}>
+          <IconButton
+            size="small"
+            onClick={() => setEnlarged(false)}
+            className={styles.closeButton}
+          >
+            <CloseIcon color="primary" />
+          </IconButton>
+          <img
+            src={originalImage.src as string}
+            {...rest}
+            className={styles.enlarged}
+          />
+        </div>
+      )}
+    </>
+  )
+}

src/components/mdx/Image/index.ts

@@ -0,0 +1 @@
+export * from './Image'

src/components/mdx/ImageGrid/ImageGrid.module.scss

@@ -5,17 +5,13 @@
   justify-content: center;
   align-items: center;
 
-  overflow: hidden;
   height: 100%;
 }
 
 .thumbnailImage {
-  min-height: 100%;
-  min-width: 100%;
-  max-height: none;
+  width: 100%;
+  height: auto;
   object-fit: cover;
-
-  cursor: pointer;
 }
 
 .masonry .thumbnailImageContainer {
@@ -44,20 +40,6 @@
   z-index: 10000;
 }
 
-.expandedImage {
-  position: fixed;
-
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  max-height: 90vh;
-  max-width: 90vw;
-
-  display: block;
-  object-fit: contain;
-}
-
 .closeButton {
   position: fixed;
   top: 18px;

src/components/mdx/ImageGrid/ImageGrid.tsx

@@ -1,46 +1,41 @@
-import React, { useEffect, useState } from 'react'
 import {
   Grid,
   GridProps,
 } from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
-import styles from './ImageGrid.module.scss'
 import clsx from 'clsx'
-import { IconButton, CloseIcon } from '@acid-info/lsd-react'
+import React from 'react'
+import { Image, LoadedImage } from '../Image/Image'
+import styles from './ImageGrid.module.scss'
 
 type ImageType = {
-  src: string
+  img?: { src: LoadedImage }
   alt?: string
+  src: string
 }
 
 type MasonryModeProps = {
-  setSelectedImage: (image: ImageType | null) => void
   firstColumnSize: number
-  imageArray: ImageType[]
-  folder: string
-  thumbnailsFolder: string
+  images: ImageType[]
 }
 
 // Masonry mode only has 2 columns with 1 item each.
 const MasonryMode: React.FC<MasonryModeProps> = ({
-  setSelectedImage,
   firstColumnSize,
-  imageArray,
-  folder,
-  thumbnailsFolder,
+  images,
 }) => {
-  const firstColumnImages = imageArray.slice(0, firstColumnSize)
-  const secondColumnImages = imageArray.slice(firstColumnSize)
+  const firstColumnImages = images.slice(0, firstColumnSize)
+  const secondColumnImages = images.slice(firstColumnSize)
 
   return (
     <>
       <Grid.Item>
         {firstColumnImages.map((image, index) => (
           <div key={index} className={styles.thumbnailImageContainer}>
-            <img
-              key={index}
-              src={folder + thumbnailsFolder + image.src}
-              alt={image.alt || ''}
-              onClick={() => setSelectedImage(image)}
+            <Image
+              minWidth={400}
+              src={image.src}
+              img={image.img?.src}
+              alt={image.alt ?? ''}
               className={styles.thumbnailImage}
             />
           </div>
@@ -49,11 +44,11 @@ const MasonryMode: React.FC<MasonryModeProps> = ({
       <Grid.Item>
         {secondColumnImages.map((image, index) => (
           <div key={index} className={styles.thumbnailImageContainer}>
-            <img
-              key={index}
-              src={folder + thumbnailsFolder + image.src}
-              alt={image.alt || ''}
-              onClick={() => setSelectedImage(image)}
+            <Image
+              minWidth={400}
+              src={image.src}
+              img={image.img?.src}
+              alt={image.alt ?? ''}
               className={styles.thumbnailImage}
             />
           </div>
@@ -64,37 +59,17 @@ const MasonryMode: React.FC<MasonryModeProps> = ({
 }
 
 export type ImageGridProps = GridProps & {
-  imageArray: ImageType[]
+  images: ImageType[]
   mode?: 'masonry' | 'regular' | 'square-thumbnails'
   firstColumnSize?: number
-  folder?: string
-  thumbnailsFolder?: string
 }
 
 export const ImageGrid: React.FC<ImageGridProps> = ({
   mode = 'regular',
-  imageArray,
-  firstColumnSize = 0, // default value
-  folder = '',
-  thumbnailsFolder = '/thumbnails',
+  images,
+  firstColumnSize = 0,
   ...props
 }) => {
-  const [selectedImage, setSelectedImage] = useState<null | ImageType>(null)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setSelectedImage(null)
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [])
-
   return (
     <>
       <Grid
@@ -109,43 +84,21 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
         {...props}
       >
         {mode === 'masonry' ? (
-          <MasonryMode
-            setSelectedImage={setSelectedImage}
-            firstColumnSize={firstColumnSize}
-            imageArray={imageArray}
-            folder={folder}
-            thumbnailsFolder={thumbnailsFolder}
-          />
+          <MasonryMode firstColumnSize={firstColumnSize} images={images} />
         ) : (
-          imageArray.map((image, index) => (
+          images.map((image, index) => (
             <Grid.Item key={index} className={styles.thumbnailImageContainer}>
-              <img
-                src={folder + thumbnailsFolder + image.src}
-                alt={image.alt || ''}
-                onClick={() => setSelectedImage(image)}
+              <Image
+                minWidth={400}
+                src={image.src}
+                img={image.img?.src}
+                alt={image.alt ?? ''}
                 className={styles.thumbnailImage}
               />
             </Grid.Item>
           ))
         )}
       </Grid>
-
-      {selectedImage && (
-        <div className={styles.overlay}>
-          <IconButton
-            size="small"
-            onClick={() => setSelectedImage(null)}
-            className={styles.closeButton}
-          >
-            <CloseIcon color="primary" />
-          </IconButton>
-          <img
-            src={folder + selectedImage.src}
-            alt={selectedImage.alt || ''}
-            className={styles.expandedImage}
-          />
-        </div>
-      )}
     </>
   )
 }

src/index.d.ts

@@ -1 +1,5 @@
 declare module '*.scss'
+
+declare module '@theme/IdealImage' {
+  export default function IdealImage(props: any): JSX.Element
+}