Display photos from Glass (#679)

Author: evadecker

package.json

@@ -21,6 +21,7 @@
     "check-links": "lychee --config .lychee.toml ."
   },
   "dependencies": {
+    "@ascorbic/feed-loader": "^2.0.1",
     "@astrojs/check": "^0.9.6",
     "@astrojs/db": "0.18.3",
     "@astrojs/markdown-remark": "^6.3.10",

pnpm-lock.yaml

@@ -0,0 +1,80 @@
+---
+import { getCollection } from "astro:content";
+
+const LIMIT = 12;
+
+const entries = await getCollection("photos");
+const limitedEntries = entries.slice(0, LIMIT);
+
+const photos = limitedEntries.map((entry) => entry.data);
+---
+
+<ul class="photo-feed">
+  {
+    photos.map((photo) => (
+      <li>
+        <a href={photo.url}>
+          <img src={photo.image?.url} alt={photo.title} />
+        </a>
+      </li>
+    ))
+  }
+  <li class="see-all">
+    <a href="https://glass.photo/evadecker">See all photos</a>
+  </li>
+</ul>
+
+<style>
+  .photo-feed {
+    list-style: none;
+    display: flex;
+    gap: var(--space-xs);
+    padding-inline: var(--space-xl);
+    padding-block: var(--space-2xs) var(--space-l);
+    margin: 0;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-padding: var(--space-xl);
+    scrollbar-width: thin;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+    view-timeline-name: --photo;
+    view-timeline-axis: inline;
+  }
+
+  a {
+    display: block;
+    height: 220px;
+    width: auto;
+  }
+
+  img {
+    display: block;
+    height: 100%;
+    width: auto;
+    object-fit: cover;
+    background-color: var(--gray-3);
+  }
+
+  .see-all a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--space-2xl);
+    background-color: var(--gray-3);
+    transition: background-color, color, font-weight, text-decoration;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--gray-4);
+      }
+    }
+  }
+</style>

src/components/PhotoFeed.astro

@@ -221,7 +221,7 @@ const { items } = Astro.props;
     width: 100%;
 
     img {
-      background-color: var(--gray-4);
+      background-color: var(--gray-3);
       display: block;
       aspect-ratio: 1.91 / 1;
       border-radius: var(--radius-xs);

src/components/WorkList.astro

@@ -1,4 +1,5 @@
 import { defineCollection, z } from "astro:content";
+import { feedLoader } from "@ascorbic/feed-loader";
 import { glob } from "astro/loaders";
 
 export const collections = {
@@ -89,4 +90,10 @@ export const collections = {
         date: z.date(),
       }),
   }),
+
+  photos: defineCollection({
+    loader: feedLoader({
+      url: "https://glass.photo/evadecker/rss",
+    }),
+  }),
 };

src/content.config.ts

@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content";
 import WorkList from "src/components/WorkList.astro";
 import Center from "../components/Center.astro";
+import PhotoFeed from "../components/PhotoFeed.astro";
 import Synth from "../components/Synth/Synth.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
@@ -49,10 +50,16 @@ const feed = work
       </div>
     </section>
     <section class="work">
-      <h2 class="visuallyhidden">Work</h2>
+      <h2>Projects</h2>
       <WorkList items={feed} />
     </section>
   </Center>
+  <section class="photos">
+    <Center>
+      <h2>Latest photos</h2>
+    </Center>
+    <PhotoFeed />
+  </section>
 </BaseLayout>
 
 <script>
@@ -165,7 +172,17 @@ const feed = work
     }
   }
 
+  h2 {
+    font-size: var(--step-1);
+    margin-block-end: var(--space-m);
+  }
+
   .work {
     padding-block: var(--space-2xl);
   }
+
+  .photos {
+    width: 100%;
+    padding-block-end: var(--space-2xl);
+  }
 </style>

src/pages/index.astro

@@ -1,5 +1,6 @@
 :root {
   interpolate-size: allow-keywords;
+  color-scheme: light dark;
 }
 
 html {
@@ -21,11 +22,13 @@ body {
   line-height: var(--line-height-body);
   text-rendering: optimizelegibility;
   font-synthesis: none;
+  color-scheme: light;
 }
 
 body.dark {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color-scheme: dark;
 }
 
 ::selection {