Dead simple carousel for side projects with Alpine

package.json

@@ -13,6 +13,7 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/mdx": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@types/node": "^22.3.0",
     "astro": "^4.11.5",
     "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3"

pnpm-lock.yaml

@@ -13,13 +13,16 @@ importers:
         version: 0.5.10(typescript@5.5.3)
       '@astrojs/mdx':
         specifier: ^3.1.2
-        version: 3.1.2(astro@4.11.5(typescript@5.5.3))
+        version: 3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))
       '@astrojs/tailwind':
         specifier: ^5.1.0
-        version: 5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)
+        version: 5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)
+      '@types/node':
+        specifier: ^22.3.0
+        version: 22.3.0
       astro:
         specifier: ^4.11.5
-        version: 4.11.5(typescript@5.5.3)
+        version: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       tailwindcss:
         specifier: ^3.4.5
         version: 3.4.5
@@ -639,6 +642,9 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
+  '@types/node@22.3.0':
+    resolution: {integrity: sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -1975,6 +1981,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@6.18.2:
+    resolution: {integrity: sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==}
+
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -2282,12 +2291,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.2(astro@4.11.5(typescript@5.5.3))':
+  '@astrojs/mdx@3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))':
     dependencies:
       '@astrojs/markdown-remark': 5.1.1
       '@mdx-js/mdx': 3.0.1
       acorn: 8.12.1
-      astro: 4.11.5(typescript@5.5.3)
+      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -2307,9 +2316,9 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/tailwind@5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)':
+  '@astrojs/tailwind@5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)':
     dependencies:
-      astro: 4.11.5(typescript@5.5.3)
+      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
       autoprefixer: 10.4.19(postcss@8.4.39)
       postcss: 8.4.39
       postcss-load-config: 4.0.2(postcss@8.4.39)
@@ -2834,6 +2843,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
+  '@types/node@22.3.0':
+    dependencies:
+      undici-types: 6.18.2
+
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
@@ -2943,7 +2956,7 @@ snapshots:
 
   astring@1.8.6: {}
 
-  astro@4.11.5(typescript@5.5.3):
+  astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3):
     dependencies:
       '@astrojs/compiler': 2.8.2
       '@astrojs/internal-helpers': 0.4.1
@@ -3001,8 +3014,8 @@ snapshots:
       tsconfck: 3.1.1(typescript@5.5.3)
       unist-util-visit: 5.0.0
       vfile: 6.0.1
-      vite: 5.3.3
+      vite: 5.3.3(@types/node@22.3.0)
-      vitefu: 0.2.5(vite@5.3.3)
+      vitefu: 0.2.5(vite@5.3.3(@types/node@22.3.0))
       which-pm: 2.2.0
       yargs-parser: 21.1.1
       zod: 3.23.8
@@ -4656,6 +4669,8 @@ snapshots:
 
   typescript@5.5.3: {}
 
+  undici-types@6.18.2: {}
+
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.2
@@ -4736,17 +4751,18 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite@5.3.3:
+  vite@5.3.3(@types/node@22.3.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.39
       rollup: 4.18.1
     optionalDependencies:
+      '@types/node': 22.3.0
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.3.3):
+  vitefu@0.2.5(vite@5.3.3(@types/node@22.3.0)):
     optionalDependencies:
-      vite: 5.3.3
+      vite: 5.3.3(@types/node@22.3.0)
 
   volar-service-css@0.0.59(@volar/language-service@2.4.0-alpha.16):
     dependencies:

src/layouts/SideProject.astro

@@ -1,9 +1,15 @@
 ---
+import {readdirSync} from "node:fs";
 import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
 import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
 import NavigationLayout from "./NavigationLayout.astro";
 
-const { project_title, git_url, page_url, previous, next } = Astro.props;
+const { project_title, git_url, page_url, previous, next, images_folder } = Astro.props;
+
+const images_base = "/img/projects/";
+const images = readdirSync(`./public${images_base}${images_folder}/`)
+    .map((s) => `${images_base}${images_folder}/${s}`);
+const images_str = JSON.stringify(images);
 ---
 
 <!doctype html>
@@ -70,16 +76,16 @@ const { project_title, git_url, page_url, previous, next } = Astro.props;
                     <div class="grid grid-cols-2 w-full gap-6">
                         <a
                             class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
-                                 dark:shadow-black transition-colors 
+                                 dark:shadow-black transition-colors
-                                ${previous? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
+                                ${previous? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
                             href={previous? `/side-projects/${previous}` : `#`}
                         >
                             &larr; <span class="underline">Previous project</span>
                         </a>
                         <a
                             class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
-                                 dark:shadow-black transition-colors 
+                                 dark:shadow-black transition-colors text-right
-                                ${next? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
+                                ${next? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
                             href={next? `/side-projects/${next}` : `#`}
                         >
                             <span class="underline">Next project</span> &rarr;
@@ -88,11 +94,30 @@ const { project_title, git_url, page_url, previous, next } = Astro.props;
                 </div>
 
                 <div
-                    class="w-full h-screen flex items-center justify-center p-16"
+                    class="relative w-full h-screen flex items-center justify-center p-16"
+                    x-data={`{img: ${images_str}, img_len: ${images.length}, idx: 0}`}
                 >
+                    <button 
+                        class="absolute left-12 top-[50%] bg-zinc-800 border border-zinc-950
+                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
+                            disabled:opacity-50"
+                        x-bind:disabled="idx === 0"
+                        x-on:click="idx -= 1"
+                    >
+                        &larr;
+                    </button>
+                    <button 
+                        class="absolute right-12 top-[50%] bg-zinc-800 border border-zinc-950
+                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
+                            disabled:opacity-50"
+                        x-bind:disabled="idx === img_len - 1"
+                        x-on:click="idx += 1"
+                    >
+                        &rarr;
+                    </button>
                     <img
                         class="inline-block shadow-sm dark:shadow-black rounded"
-                        src="/img/projects/thp/01.png"
+                        x-bind:src="img[idx]"
                         alt="Project image"
                     />
                 </div>

src/pages/side-projects/index.astro

@@ -7,6 +7,7 @@ import SideProject from "../../layouts/SideProject.astro";
     git_url="https://git.araozu.dev/fernando/thp-web"
     page_url="https://thp.araozu.dev"
     next="thp"
+    images_folder="thp"
 >
     This is a static webpage that contains documentation for my other project,
     the THP compiler.

src/pages/side-projects/thp.astro

@@ -7,6 +7,7 @@ import SideProject from "../../layouts/SideProject.astro";
     git_url="https://git.araozu.dev/fernando/thp-web"
     page_url="https://thp.araozu.dev"
     previous="#"
+    images_folder="thp"
 >
     This is a static webpage that contains documentation for my other project,
     the THP compiler.