Remix Jam 2025 photo gallery (#366)

* Add PhotoSchema and transformShopifyImageUrl function to handle image URL transformations. Implement getPhotos function to fetch and parse photo data from Shopify metaobjects, ensuring proper error handling and validation.

* Add gallery route and page for Remix Jam 2025

- Introduced a new route for the photo gallery at "2025/gallery".
- Created the GalleryPage component to display optimized photos fetched from Shopify.
- Implemented responsive image handling and metadata for SEO.

* Refactor GalleryPage component and enhance image handling

- Renamed the download icon in icons.svg for clarity.
- Updated the GalleryPage component to include new image handling features such as modal support, keyboard navigation, and download functionality.
- Improved photo optimization and added full resolution image URLs for better user experience.
- Implemented hydration checks to manage modal visibility and body scroll behavior.
- Enhanced accessibility with keyboard navigation and improved link handling for images.

* Refactor GalleryPage component to improve image rendering and data handling

- Updated the loader function to return all optimized photos instead of a limited set.
- Replaced direct image elements with a new Photo component for better code organization and reusability.
- Removed unnecessary comments and cleaned up the modal image handling for clarity.
- Enhanced the overall structure of the GalleryPage for improved maintainability.

* Enhance GalleryPage component and update styles

- Refactored modal handling to preserve scroll position when the dialog is open.
- Improved CSS styles for scrollbar appearance and stability.

* Refactor GalleryPage component to enhance modal functionality and accessibility

- Moved modal handling logic into a separate PhotoModal component for better organization.
- Implemented dialog accessibility features, including scroll locking and focus trapping.
- Updated keyboard navigation for improved user experience when interacting with the modal.
- Enhanced CSS styles for focus outlines and button interactions.

* Refactor image handling and optimize photo rendering in GalleryPage

- Moved the transformShopifyImageUrl function to utils.tsx for better organization and reusability.
- Updated GalleryPage to utilize the new image transformation function, enhancing photo optimization.
- Introduced a new og-gallery image for improved social sharing.
- Cleaned up the loader function to streamline photo data handling and removed redundant code related to image optimization.

* Fix React key prop to use unique photo URL instead of array index (#367)

* Initial plan

* Fix: use photo.url as key instead of array index

Co-authored-by: brookslybrand <12396812+brookslybrand@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: brookslybrand <12396812+brookslybrand@users.noreply.github.com>

* Cleanup code

* Enhance Navbar and GalleryPage components

- Added a "Gallery" link to the Navbar for improved navigation.
- Updated styles for responsive design in Navbar and TicketLogo.
- Cleaned up the GalleryPage loader function by removing redundant code and ensuring proper photo fetching.

* Remove the width and height of the image element

* Refactor PhotoModal and ModalImage components for improved image handling

- Added click event to backdrop for better user interaction.
- Introduced aspect ratio handling and conditional styling for images based on orientation.
- Updated image quality settings for enhanced rendering.

* Small style tweaks

* Remove rounded corners on full image display

* Make the focus state of icons a bit more visible

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: brookslybrand <12396812+brookslybrand@users.noreply.github.com>

Author: brookslybrand

app/icons.svg

@@ -9,5 +9,6 @@ export default [
     route("2025/lineup", "routes/jam/pages/2025.lineup.tsx"),
     route("2025/faq", "routes/jam/pages/2025.faq.tsx"),
     route("2025/coc", "routes/jam/pages/2025.coc.tsx"),
+    route("2025/gallery", "routes/jam/pages/2025.gallery.tsx"),
   ]),
 ] satisfies RouteConfig;

app/routes.ts

@@ -14,6 +14,11 @@ CSS Variables used in this file:
   src: url("/font/jet-brains-mono.woff2") format("woff2");
 }
 
+html,
+body {
+  scrollbar-color: theme(colors.gray.300) theme(colors.gray.800);
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;

app/routes/jam/images/og-gallery.jpg

@@ -21,11 +21,14 @@ export function Navbar({ className }: { className?: string }) {
       }}
     >
       <Link to={href("/jam/2025")} className="flex items-center md:block">
-        <JamLogo className="h-[48px] fill-white md:h-auto md:w-[200px]" />
+        <JamLogo className="h-[48px] fill-white md:h-auto md:w-[200px] lg:w-[160px] xl:w-[200px]" />
       </Link>
 
       <div className="hidden items-center justify-center gap-2 rounded-full bg-black/40 p-2 backdrop-blur-lg lg:flex">
         <NavLink to={href("/jam/2025/lineup")}>Schedule & Lineup</NavLink>
+        <NavLink className="text-white" to={href("/jam/2025/gallery")}>
+          Gallery
+        </NavLink>
         <NavLink className="text-white" to={href("/jam/2025/coc")}>
           Code of Conduct
         </NavLink>
@@ -35,7 +38,7 @@ export function Navbar({ className }: { className?: string }) {
       </div>
 
       <JamLink className="hidden lg:flex" to={href("/jam/2025/ticket")}>
-        <TicketLogo className="size-6 fill-current md:size-8" />
+        <TicketLogo className="size-6 fill-current md:size-8 lg:size-6 xl:size-8" />
         <span>Ticket</span>
       </JamLink>
 
@@ -56,11 +59,14 @@ function MobileMenu() {
         </svg>
       </summary>
       <div className="absolute right-0 z-20 lg:left-0">
-        <div className="top-1 p-1 w-max">
+        <div className="top-1 w-max p-1">
           <nav className="flex flex-col gap-2 overflow-hidden rounded-[2rem] bg-black/40 px-2 py-2.5 backdrop-blur-lg">
             <MobileNavLink to={href("/jam/2025/lineup")}>
               Schedule & Lineup
             </MobileNavLink>
+            <MobileNavLink to={href("/jam/2025/gallery")}>
+              Gallery
+            </MobileNavLink>
             <MobileNavLink to={href("/jam/2025/coc")}>
               Code of Conduct
             </MobileNavLink>
@@ -120,7 +126,7 @@ function NavLink({ className, children, ...props }: NavLinkProps) {
     <RRNavLink
       className={({ isActive }) =>
         clsx(
-          "rounded-full border-2 px-5 py-0.5 text-base font-bold outline-none transition-colors duration-300 md:border-4 md:py-3 md:text-xl",
+          "rounded-full border-2 px-5 py-0.5 text-base font-bold outline-none transition-colors duration-300 md:border-4 md:py-3 md:text-xl lg:border-2 lg:px-4 lg:py-2 lg:text-base xl:px-5 xl:py-3 xl:text-xl",
           isActive
             ? "border-white text-white"
             : "border-transparent text-white/70 hover:border-white hover:text-white focus-visible:border-white focus-visible:text-white",