sghg

frontend/public/styles/css/classes.css

@@ -141,3 +141,32 @@ hr {
     margin-top: 4%;
     margin-bottom: 2%;
 }
+
+.ulGal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-left: -40px;
+}
+
+.liGal {
+    flex-grow: 1;
+    list-style: none;
+}
+
+.imgGal {
+    width: 100%;
+    height: 100%;
+    max-width: 400px;
+    object-fit: contain;
+    vertical-align: bottom;
+    cursor: pointer;
+}
+
+.zoom {
+    transition: transform .2s;
+}
+
+.zoom:hover {
+    transform: scale(1.05);
+}

frontend/src/components/Header.astro

@@ -16,5 +16,11 @@
       onclick="location.href='/blog'">
       <span>blog</span>
     </button>
+<!--    <button
+        class="custom-btn btn-1"
+        type="button"
+        onclick="location.href='/gallery'">
+      <span>gallery</span>
+    </button>-->
   </nav>
 </section>

frontend/src/content/config.ts

@@ -6,4 +6,6 @@ const blog = defineCollection({
   schema: rssSchema,
 });
 
-export const collections = { blog };
+export const collections = {
+  blog
+};

frontend/src/layouts/AlbumGallery.astro

@@ -0,0 +1,27 @@
+---
+//import type { CollectionEntry } from "astro:content";
+//import FormattedDate from "../components/misc/FormattedDate.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { title, description, pubDate, updatedDate } = Astro.props;
+---
+
+<Layout title={title}>
+  <main>
+    <div class="wrapper">
+      <article>
+        <div class="prose">
+          <div class="content" style="text-align: center;">
+              <h3>{description}</h3>
+              <hr />
+            </div>
+          </div>
+          <div class="content">
+            <slot />
+          </div>
+      </article>
+    </div>
+  </main>
+</Layout>
+<style>
+</style>

frontend/src/pages/gallery/candids.astro

@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/candids/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="candids" description="random assortment of off-the-cuff images">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`candidsImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>

frontend/src/pages/gallery/cats.astro

@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/cats/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="cats" description="images of cats ive taken">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`catsImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>

frontend/src/pages/gallery/index.astro

@@ -0,0 +1,21 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { Image } from 'astro:assets';
+
+const images = await Astro.glob("/src/assets/albums/cats/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="albums">
+    <main>
+      <section class="content">
+          <ul>
+              <li><a href="/gallery/cats">cats</a></li>
+              <li><a href="/gallery/candids">candids</a></li>
+              <li><a href="/gallery/shitcam/">shitcam</a></li>
+              <li><a href="/gallery/japan">japan</a></li>
+          </ul>
+    </section>
+    </main>
+</Layout>

frontend/src/pages/gallery/japan.astro

@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/japan/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="japan" description="photos taken in japan">
+    <main>
+            <ul class="ulGal">
+                {
+                    images.map(({ src }, index) => (
+                            <li class="liGal zoom">
+                                <img
+                                        class="imgGal"
+                                        id={`japanImg${index+1}`}
+                                        src={src}
+                                        alt=""
+                                        loading="lazy"
+                                />
+                            </li>
+                    ))
+                }
+                <li class="liGal"></li>
+            </ul>
+    </main>
+</Layout>

frontend/src/pages/gallery/shitcam.astro

@@ -0,0 +1,28 @@
+---
+import Layout from "../../layouts/AlbumGallery.astro";
+
+const images = await Astro.glob("/src/assets/albums/shitcam/*").then(files => {
+    return files.map(file => file.default);
+});
+---
+
+<Layout title="shitcam" description="any photo taken with my minolta S414">
+    <main>
+            <ul class="ulGal">
+                    {
+                        images.map(({ src }, index) => (
+                                <li class="liGal zoom">
+                                    <img
+                                            class="imgGal"
+                                            id={`shitcamImg${index+1}`}
+                                            src={src}
+                                            alt=""
+                                            loading="lazy"
+                                    />
+                                </li>
+                        ))
+                    }
+                <li></li>
+            </ul>
+    </main>
+</Layout>