diff --git a/REWRITE_CHECKLIST.md b/REWRITE_CHECKLIST.md
index f2b3e0e..ede2847 100644
--- a/REWRITE_CHECKLIST.md
+++ b/REWRITE_CHECKLIST.md
@@ -13,7 +13,7 @@ Complete list of components needed for 1:1 functionality with the original site.
- [ ] Sandbox
- [ ] Recreate build-time scripts
- [X] RSS Page
- - [ ] Auto images page
+ - [X] Auto images page
- [ ] Index Page
- [ ] Created/Updated/Published markers
- [ ] Robots.txt generation
diff --git a/packages/site/assets/scripts/old/gallery-images.ts b/packages/site/assets/scripts/old/gallery-images.ts
deleted file mode 100644
index 864dfe8..0000000
--- a/packages/site/assets/scripts/old/gallery-images.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export const handleGalleryImages = () => {
- const images = document.querySelectorAll('.galleryImage');
-
- const loadImage = (image: HTMLImageElement) => {
- image.src = image.getAttribute('finalSrc') || '';
- };
-
- const handleIntersection = (entries: IntersectionObserverEntry[]) => {
- entries.forEach((entry) => {
- if (entry.intersectionRatio > 0) {
- loadImage(entry.target as HTMLImageElement);
- }
- });
- };
-
- const observer = new IntersectionObserver(handleIntersection, {
- root: null,
- rootMargin: '0px',
- threshold: 0.05,
- });
-
- images.forEach((img) => {
- observer.observe(img);
-
- img.addEventListener('click', (event) => {
- const image = event.target as HTMLImageElement;
-
- image.onerror = () => {
- console.warn('Could not get LG version of image!');
- image.src = image.getAttribute('finalSrc') || '';
- };
-
- image.src = image.getAttribute('hdSrc') || '';
- });
- });
-};
diff --git a/packages/site/assets/scripts/old/script.ts b/packages/site/assets/scripts/old/script.ts
index 1b00cba..24aa6fc 100644
--- a/packages/site/assets/scripts/old/script.ts
+++ b/packages/site/assets/scripts/old/script.ts
@@ -1,5 +1,4 @@
import { setColourMode } from './colour-mode';
-import { handleGalleryImages } from './gallery-images';
import { noscriptHandler } from './no-script';
import { setHeader } from './setup-header';
import { svgDiagrams } from './setup-mermaid-diagrams';
@@ -20,7 +19,6 @@ setColourMode();
document.addEventListener('DOMContentLoaded', async function () {
noscriptHandler();
- handleGalleryImages();
wrapTables();
setHeader();
sortableTables();
diff --git a/packages/site/assets/scripts/runtime/images.ts b/packages/site/assets/scripts/runtime/images.ts
new file mode 100644
index 0000000..20ad812
--- /dev/null
+++ b/packages/site/assets/scripts/runtime/images.ts
@@ -0,0 +1,40 @@
+export const handleImageUpscale = () => {};
+
+const ASSET_DOMAIN = 'https://assets.pfy.ch';
+
+const loadImage = (image: HTMLImageElement, size: 'md' | 'lg') => {
+ image.src = image.src.replace(/(sm|md)/, size);
+};
+
+const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+ entries.forEach((entry) => {
+ if (entry.intersectionRatio > 0) {
+ loadImage(entry.target as HTMLImageElement, 'md');
+ }
+ });
+};
+
+const observer = new IntersectionObserver(handleIntersection, {
+ root: null,
+ rootMargin: '0px',
+ threshold: 0.05,
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+ const allImages = document.getElementsByTagName('img');
+ const imagesFromAssets = [...allImages].filter((img) =>
+ img.src.includes(ASSET_DOMAIN),
+ );
+
+ for (const image of imagesFromAssets) {
+ observer.observe(image);
+
+ image.setAttribute('originalSrc', image.src);
+ image.onerror = () => {
+ console.warn('Could not get requested version of image!');
+ image.src = image.getAttribute('originalSrc') || '';
+ };
+
+ image.addEventListener('click', () => loadImage(image, 'lg'));
+ }
+});
diff --git a/packages/site/assets/scripts/script.ts b/packages/site/assets/scripts/script.ts
index 5e45e55..e4eb782 100644
--- a/packages/site/assets/scripts/script.ts
+++ b/packages/site/assets/scripts/script.ts
@@ -1,5 +1,8 @@
import { NowListening } from './components/nowListening';
import { CatCount } from './components/catCount';
+import { handleImageUpscale } from './runtime/images';
customElements.define('now-listening', NowListening);
customElements.define('cat-count', CatCount);
+
+handleImageUpscale();
diff --git a/packages/site/posts/images.md b/packages/site/posts/images.md
new file mode 100644
index 0000000..ad3b5b7
--- /dev/null
+++ b/packages/site/posts/images.md
@@ -0,0 +1,415 @@
+---
+title: Photography
+summary: All the photos I've ever published
+---
+
+This page contains every photo I have shared on this site, whether it be in a blog post, article or header of a random
+page.
+
+The following page contains LOTS of 720x480 images, totaling over 60mb! The images will
+only load when they are scrolled into view. This current view without scrolling is about 4mb. If you'd like
+to view the High-res images (still slightly compressed), you can click on an image to make it load the "HD" version.
+
+I try to keep my site as small as possible but a page like this is inherently difficult to keep at a small size. If you
+have any ideas, please reach out!
+
+
+ Due to the way I compress and display images you're unable to view the images in their "full" resolution. If you copy the image link and replace sm with md you can download the images individually
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+