feat: photo pages

limulus · Nov 29, 2024 · 0c3b7d0 · 0c3b7d0
1 parent f2e59a4
commit 0c3b7d0
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -90,7 +90,11 @@ Photos are hosted on `pho.limulus.net`. They are not stored in this repository.
 publishing an article with a photo, prepare the photo by following these steps:
 
 1. Ensure the photo is in your Apple Photos library. Give the photo a title and caption. The
-   caption will be used as the alt text for the photo.
+   caption will be used as the alt text for the photo. Also set the following tags:
+
+   - `limulus.net`: Tracks if the photo is used on limulus.net.
+   - `limulus.net/photos`: Indicates photo should have a photo page.
+   - `license:cc-by`: CC-BY license.
 
 2. Export the photo from Apple Photos. Use the following settings:
 
@@ -106,7 +110,7 @@ publishing an article with a photo, prepare the photo by following these steps:
 
    - Read the photos from the `photos` directory.
    - Generate hashes to use as an identifier for each photo.
-   - Extract metadata using `ExifReader`.
+   - Extract metadata using `sharp`.
    - Generate multiple renditions of each photo using `sharp`.
    - Upload the photos to `pho.limulus.net`.
    - Create a JSON file with the metadata for each photo and uploads it as `index.json`.

diff --git a/www/_data/photos.json b/www/_data/photos.json
@@ -896,5 +896,107 @@
         "size": 17700
       }
     ]
+  },
+  "spiny-side-eye": "_Eh10XTl",
+  "_Eh10XTl": {
+    "id": "_Eh10XTl",
+    "alias": "spiny-side-eye",
+    "baseUrl": "https://pho.limulus.net/_Eh10XTl",
+    "original": "DSC_0003.png",
+    "width": 5672,
+    "height": 3190,
+    "title": "Spiny Side Eye",
+    "description": "A low perspective telephoto side profile of a Desert Spiny Lizard as it sits on top of a small rock under a bush. Its eye looks to the far right.",
+    "date": "2023-05-17T17:38:09-07:00",
+    "tags": [
+      "license:cc-by",
+      "limulus.net",
+      "limulus.net/photos"
+    ],
+    "make": "NIKON CORPORATION",
+    "camera": "NIKON D5600",
+    "lens": "AF-S VR Zoom-Nikkor 70-300mm f/4.5-5.6G IF-ED",
+    "focalLength": "300 mm",
+    "exposureTime": "1/160",
+    "fNumber": "f/5.6",
+    "iso": 800,
+    "flash": "Flash did not fire, compulsory flash mode",
+    "exposureMode": "Auto exposure",
+    "whiteBalance": "Auto white balance",
+    "location": null,
+    "renditions": [
+      {
+        "name": "xl",
+        "format": "avif",
+        "url": "https://pho.limulus.net/_Eh10XTl/xl._8CzBYF5.avif",
+        "file": "xl._8CzBYF5.avif",
+        "width": 5672,
+        "height": 3190,
+        "size": 303332
+      },
+      {
+        "name": "xl",
+        "format": "jpeg",
+        "url": "https://pho.limulus.net/_Eh10XTl/xl.PqPQJ1aD.jpeg",
+        "file": "xl.PqPQJ1aD.jpeg",
+        "width": 5672,
+        "height": 3190,
+        "size": 1723161
+      },
+      {
+        "name": "lg",
+        "format": "avif",
+        "url": "https://pho.limulus.net/_Eh10XTl/lg.P1FG6tX6.avif",
+        "file": "lg.P1FG6tX6.avif",
+        "width": 3000,
+        "height": 1687,
+        "size": 164882
+      },
+      {
+        "name": "lg",
+        "format": "jpeg",
+        "url": "https://pho.limulus.net/_Eh10XTl/lg.Bz53RB0y.jpeg",
+        "file": "lg.Bz53RB0y.jpeg",
+        "width": 3000,
+        "height": 1687,
+        "size": 600487
+      },
+      {
+        "name": "md",
+        "format": "avif",
+        "url": "https://pho.limulus.net/_Eh10XTl/md.5sGZnZo0.avif",
+        "file": "md.5sGZnZo0.avif",
+        "width": 1500,
+        "height": 844,
+        "size": 87323
+      },
+      {
+        "name": "md",
+        "format": "jpeg",
+        "url": "https://pho.limulus.net/_Eh10XTl/md.KRJBjHqw.jpeg",
+        "file": "md.KRJBjHqw.jpeg",
+        "width": 1500,
+        "height": 844,
+        "size": 212532
+      },
+      {
+        "name": "sm",
+        "format": "avif",
+        "url": "https://pho.limulus.net/_Eh10XTl/sm.o0lAI929.avif",
+        "file": "sm.o0lAI929.avif",
+        "width": 750,
+        "height": 422,
+        "size": 43449
+      },
+      {
+        "name": "sm",
+        "format": "jpeg",
+        "url": "https://pho.limulus.net/_Eh10XTl/sm.DVtpCU5V.jpeg",
+        "file": "sm.DVtpCU5V.jpeg",
+        "width": 750,
+        "height": 422,
+        "size": 77798
+      }
+    ]
   }
 }
diff --git a/www/_includes/components/article-photo.webc b/www/_includes/components/article-photo.webc
@@ -1,6 +1,9 @@
 <template webc:root>
   <figure>
-    <pho-picture :@id="id" @renditions="lg, md" @attributes></pho-picture>
+    <a
+      :href="!nolink && this.getPhoto(id).tags.includes('limulus.net/photos') && `/photos/${this.getPhoto(id).alias}/`"
+      ><pho-picture :@id="id" @renditions="lg, md" @attributes></pho-picture
+    ></a>
     <figcaption>
       <span @text="this.getPhoto(id).title"></span>
     </figcaption>
@@ -14,6 +17,8 @@
     max-width: 100vw;
     width: calc(100% + var(--body-padding) * 2);
     height: auto;
+    max-height: calc(100vh - 4rem);
+    object-fit: scale-down;
   }
 
   @media (min-width: 600px) {

diff --git a/www/index.webc b/www/index.webc
@@ -39,6 +39,10 @@ teaser: >-
   <h2><a href="/penumbra/">penumbra</a></h2>
 
   <p @text="getTeaser(collections.all, '/penumbra/')"></p>
+
+  <h2><a href="/photos/">photos</a></h2>
+
+  <p @text="getTeaser(collections.all, '/photos/')"></p>
 </main>
 
 <style webc:scoped>

diff --git a/www/photos/index.webc b/www/photos/index.webc
@@ -0,0 +1,59 @@
+---
+layout: page
+title: Photos
+image: spiny-side-eye
+teaser: >-
+  A collection of Eric McCarthy’s photos.
+---
+
+<script webc:setup>
+  function allPhotos() {
+    return Object.values(this.$data.photos)
+      .filter((photo) => photo.tags?.includes('limulus.net/photos'))
+      .sort((a, b) => b.date.localeCompare(a.date))
+  }
+</script>
+
+<h1 @text="title"></h1>
+
+<div>
+  <ul>
+    <li webc:for="photo of allPhotos()">
+      <article>
+        <a :href="`/photos/${photo.alias}/`">
+          <header>
+            <h1 class="visually-hidden" webc:text="photo.title"></h1>
+          </header>
+          <pho-picture :@id="photo.id" @renditions="sm"></pho-picture>
+        </a>
+      </article>
+    </li>
+  </ul>
+</div>
+
+<style webc:scoped>
+  :host ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    grid-template-rows: masonry;
+    grid-auto-flow: dense;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  :host img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--card-border-radius);
+  }
+
+  @supports not (grid-template-rows: masonry) {
+    :host img {
+      object-fit: cover;
+      aspect-ratio: 1 / 1;
+    }
+  }
+</style>
diff --git a/www/photos/photo.webc b/www/photos/photo.webc
@@ -0,0 +1,24 @@
+---js
+const layout = 'page'
+const pagination = {
+  data: 'photos',
+  size: 1,
+  resolve: 'values',
+  alias: 'photo',
+  before: (photos) => photos.filter((photo) => photo.tags?.includes('limulus.net/photos')),
+}
+
+function permalink({ photo }) {
+  return `/photos/${this.slugify(photo.title)}/`
+}
+
+const eleventyComputed = {
+  title: ({ photo }) => photo.title,
+  image: ({ photo }) => photo.id,
+}
+---
+
+<article>
+  <h1 class="visually-hidden" @text="title"></h1>
+  <article-photo :@id="photo.id" @nolink="true"></article-photo>
+</article>