Dead simple carousel for side projects with Alpine
parent
c4d7a7ad35
commit
39e5c9da85
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
vitefu: 0.2.5(vite@5.3.3)
|
||||
vite: 5.3.3(@types/node@22.3.0)
|
||||
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:
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
|
|
@ -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
|
||||
${previous? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
|
||||
dark:shadow-black transition-colors
|
||||
${previous? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
|
||||
href={previous? `/side-projects/${previous}` : `#`}
|
||||
>
|
||||
← <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
|
||||
${next? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
|
||||
dark:shadow-black transition-colors text-right
|
||||
${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> →
|
||||
|
|
@ -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"
|
||||
>
|
||||
←
|
||||
</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"
|
||||
>
|
||||
→
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue