diff --git a/fresh.gen.ts b/fresh.gen.ts index 377c15b..7a99989 100644 --- a/fresh.gen.ts +++ b/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; diff --git a/islands/Gallery.tsx b/islands/Gallery.tsx index b48e112..f02ebef 100644 --- a/islands/Gallery.tsx +++ b/islands/Gallery.tsx @@ -28,7 +28,7 @@ export function Gallery({ images, ...props }: GalleryProps) {
{images.map((image, index) => ( diff --git a/islands/GalleryInfo.tsx b/islands/GalleryInfo.tsx new file mode 100644 index 0000000..09283c7 --- /dev/null +++ b/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 ( +
+

+ {props.heading} +

+

+ {props.copy} + +

+
+ ); +} diff --git a/routes/_app.tsx b/routes/_app.tsx index 53c265e..28c148a 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -25,19 +25,19 @@ export default function App({ Component }: PageProps) {
)} -
-

Contact

-

Drop me a line if you want to talk about art sometime.

-
+ + +
diff --git a/routes/favorites/index.tsx b/routes/favorites/index.tsx index 69f4c3f..d9171ca 100644 --- a/routes/favorites/index.tsx +++ b/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 ( <>
-
-

- Favorites -

-

- These are some of my favorite photos I have taken. -

-
+
diff --git a/routes/index.tsx b/routes/index.tsx index bc66ce2..9bae45a 100644 --- a/routes/index.tsx +++ b/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 ( <>
-

- {SiteName ?? "Photography Portfolio"} -

-
-

Thanks for checking out my photography

-

I shoot on a Canon EOS Rebel SL1, a camera from 2013.

-

- My photography is often what catches my eye. The juxtaposition of + + -

+ itself.`} /> +
);