changed typography to island

fresh.gen.ts

@@ -11,6 +11,7 @@ import * as $favorites_gallery_opt_images from "./routes/favorites/gallery-opt/i
 import * as $favorites_index from "./routes/favorites/index.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $Gallery from "./islands/Gallery.tsx";
+import * as $GalleryInfo from "./islands/GalleryInfo.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -26,6 +27,7 @@ const manifest = {
   },
   islands: {
     "./islands/Gallery.tsx": $Gallery,
+    "./islands/GalleryInfo.tsx": $GalleryInfo,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

islands/Gallery.tsx

@@ -28,7 +28,7 @@ export function Gallery({ images, ...props }: GalleryProps) {
     <div id="gallery" class="grid grid-cols-3 gap-2 md:gap-4 ">
       {images.map((image, index) => (
         <a
-          class="aspect-square"
+          class="aspect-square object-cover"
           href={"gallery/" + image.name}
           data-pswp-width={image.widthFull}
           data-pswp-height={image.heightFull}
@@ -38,6 +38,7 @@ export function Gallery({ images, ...props }: GalleryProps) {
         >
           <img
             class="aspect-square object-cover"
+            width={image.width}
             src={"gallery-opt/" + image.name}
             alt=""
           />

islands/GalleryInfo.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "preact";
+import { useEffect } from "preact/hooks";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+
+export function GalleryInfo({ ...props }) {
+  useEffect(() => {
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: "#gallery",
+      children: "a",
+      pswpModule: () => import("photoswipe"),
+    });
+    lightbox.init();
+
+    return () => lightbox.destroy(); // Clean up
+  }, []);
+
+  return (
+    <div>
+      <h1 class="text-5xl md:text-10xl">
+        {props.heading}
+      </h1>
+      <p class="text-balance text-3xl md:text-7xl">
+        {props.copy}
+
+      </p>
+  </div>
+  );
+}

routes/_app.tsx

@@ -25,19 +25,19 @@ export default function App({ Component }: PageProps) {
         <nav class="text-xl grid grid-flow-row sm:grid-flow-col">
   <a
     href="/"
-    class="px-4 py-2 border border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
+    class="px-4 py-2 border border-r-0 border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
   >
     Home
   </a>
   <a
     href="/favorites"
-    class="px-4 py-2 border border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
+    class="px-4 py-2 border border-r-0 border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
   >
     Favorites
   </a>
   <a
     href="/b-sides"
-    class="px-4 py-2 border border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
+    class="px-4 py-2 border border-r-0 border-gray-100 text-gray-300 hover:bg-gray-100 hover:text-black transition-colors"
   >
     B Sides
   </a>

routes/b-sides/index.tsx

@@ -1,20 +1,14 @@
 import { RouteContext } from "$fresh/server.ts";
 import { Gallery } from "../../islands/Gallery.tsx";
+import { GalleryInfo } from "../../islands/GalleryInfo.tsx";
 import { images } from "./gallery-opt/images.ts";
 
 export default function MyPage(req: Request, ctx: RouteContext) {
   return (
     <>
       <div class="grid grid-cols-1 md:grid-cols-2">
-        <div>
-          <h1 class="text-5xl md:text-10xl">
-            B Sides
-          </h1>
-          <p class="text-balance text-3xl md:text-7xl">
-            This collection is comprised of photos that I think are interesting
-            but I wouldn't consider my best work.
-          </p>
-        </div>
+
+        <GalleryInfo heading={'B Sides'} copy={`This collection is comprised of photos that I think are interesting but I wouldn't consider my best work.`} />
         <Gallery images={images} />
       </div>
     </>

routes/contact/index.tsx

@@ -1,5 +1,6 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
+import { GalleryInfo } from "../../islands/GalleryInfo.tsx";
 
 // Interface to define the shape of our form data
 interface ContactForm {
@@ -85,10 +86,9 @@ export default function ContactPage(
             Your message was sent successfully!
           </div>
         )}
-        <div>
-          <h1 class="text-5xl md:text-10xl">Contact</h1>
-          <p class="text-balance text-3xl md:text-7xl">Drop me a line if you want to talk about art sometime.</p>
-        </div>
+
+        <GalleryInfo heading={"Contact"} copy={`Drop me a line if you want to talk about art sometime.`} />
+
 
         <form method="POST">
           <div class="mb-4">

routes/favorites/index.tsx

@@ -1,19 +1,13 @@
 import { RouteContext } from "$fresh/server.ts";
 import { Gallery } from "../../islands/Gallery.tsx";
+import { GalleryInfo } from "../../islands/GalleryInfo.tsx";
 import { images } from "./gallery-opt/images.ts";
 
 export default function MyPage(req: Request, ctx: RouteContext) {
   return (
     <>
       <div class="grid grid-cols-1 md:grid-cols-2">
-        <div>
-          <h1 class="text-5xl md:text-10xl">
-            Favorites
-          </h1>
-          <p class="text-balance leading-tight text-3xl md:text-7xl">
-            These are some of my favorite photos I have taken.
-          </p>
-        </div>
+        <GalleryInfo heading={'Favorites'} copy={`These are some of my favorite photos I have taken.`} />
         <Gallery images={images} />
       </div>
     </>

routes/index.tsx

@@ -1,26 +1,20 @@
 import "jsr:@std/dotenv/load";
 import { Gallery } from "../islands/Gallery.tsx";
+import { GalleryInfo } from "../islands/GalleryInfo.tsx";
 
 export default function Home() {
   const SiteName = Deno.env.get("SITE_NAME");
   return (
     <>
       <div class="">
-        <h1 class="text-5xl md:text-10xl">
-          {SiteName ?? "Photography Portfolio"}
-        </h1>
-        <div class="text-balance text-3xl md:text-7xl">
-          <p>Thanks for checking out my photography</p>
-          <p>I shoot on a Canon EOS Rebel SL1, a camera from 2013.</p>
-          <p>
-            My photography is often what catches my eye. The juxtaposition of
+
+        <GalleryInfo heading={SiteName ?? "Photography Portfolio"} copy={`Thanks for checking out my photography. My photography is often what catches my eye. The juxtaposition of
             nature and human made objects is what I find interesting. We build
             tall sky scrapers so we can see beyond the trees. We build
             televisions so we can watch birds inside of a box. I try to capture
             the balance between our human existence and the existence of Earth
-            itself.
-          </p>
-        </div>
+            itself.`} />
+
       </div>
     </>
   );