summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json65
-rw-r--r--package.json1
-rw-r--r--src/lib/utils.ts14
-rw-r--r--src/routes/index.svelte44
-rw-r--r--src/routes/team/index.svelte16
5 files changed, 124 insertions, 16 deletions
diff --git a/package-lock.json b/package-lock.json
index 15c7abe..934f8e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
"svelte-check": "^2.2.6",
"svelte-hcaptcha": "^0.1.1",
"svelte-preprocess": "^4.10.1",
+ "swiper": "^8.2.4",
"tslib": "^2.3.1",
"typescript": "~4.6.2"
}
@@ -991,6 +992,15 @@
"node": ">=6.0.0"
}
},
+ "node_modules/dom7": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+ "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+ "dev": true,
+ "dependencies": {
+ "ssr-window": "^4.0.0"
+ }
+ },
"node_modules/dotenv": {
"version": "16.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
@@ -2769,6 +2779,12 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true
},
+ "node_modules/ssr-window": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+ "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+ "dev": true
+ },
"node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -2967,6 +2983,30 @@
"sourcemap-codec": "^1.4.8"
}
},
+ "node_modules/swiper": {
+ "version": "8.2.4",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
+ "integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "hasInstallScript": true,
+ "dependencies": {
+ "dom7": "^4.0.4",
+ "ssr-window": "^4.0.2"
+ },
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/table": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
@@ -3984,6 +4024,15 @@
"esutils": "^2.0.2"
}
},
+ "dom7": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+ "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+ "dev": true,
+ "requires": {
+ "ssr-window": "^4.0.0"
+ }
+ },
"dotenv": {
"version": "16.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
@@ -5181,6 +5230,12 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true
},
+ "ssr-window": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+ "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+ "dev": true
+ },
"string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -5291,6 +5346,16 @@
}
}
},
+ "swiper": {
+ "version": "8.2.4",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
+ "integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
+ "dev": true,
+ "requires": {
+ "dom7": "^4.0.4",
+ "ssr-window": "^4.0.2"
+ }
+ },
"table": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
diff --git a/package.json b/package.json
index 6bb3453..faebd16 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"svelte-check": "^2.2.6",
"svelte-hcaptcha": "^0.1.1",
"svelte-preprocess": "^4.10.1",
+ "swiper": "^8.2.4",
"tslib": "^2.3.1",
"typescript": "~4.6.2"
},
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..5586b47
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,14 @@
+import { supabase } from './supabase';
+
+const setImageUrl = (imageSpec) => {
+ const { publicURL, error } = supabase
+ .storage
+ .from('mistymountains')
+ .getPublicUrl(imageSpec.image);
+ if (!error) {
+ return { ...imageSpec, image: publicURL };
+ }
+ return imageSpec;
+}
+
+export default setImageUrl; \ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index fa9fe28..5c67709 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,25 @@
<div class="row align-items-center py-2">
<div class="col-md-7">
- <img src="https://ztxoywaazhxdeiftmsiy.supabase.co/storage/v1/object/public/mistymountains/mountains.png" alt="mountains" class="img-fluid rounded shadow">
+ <Swiper
+ modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
+ class="rounded shadow"
+ spaceBetween={50}
+ slidesPerView={1}
+ autoHeight={true}
+ loop={true}
+ navigation
+ pagination={{ clickable: true }}
+ autoplay={true}
+ speed={1000}
+ on:slideChange={() => console.log('slide change')}
+ on:swiper={(e) => console.log(e.detail[0])}
+ >
+ {#each images as { image, alt } (image)}
+ <SwiperSlide>
+ <img class="image-fluid" style="width:100%" src={image} alt={alt} />
+ </SwiperSlide>
+ {/each}
+ </Swiper>
</div>
<div class="col-md-5 my-2">
<h2>Helping you conquer Mount Doom</h2>
@@ -8,7 +27,7 @@
</div>
</div>
-<div class="bg-light rounded py-3 shadow">
+<div class="bg-light rounded p-3 shadow">
<div class="d-flex justify-content-center">
<div class="col-md-8 mt-2 border-bottom">
<h3>"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."</h3>
@@ -32,4 +51,25 @@
</div>
</div>
</div>
+ <br>
</div>
+
+<script>
+ import { supabase } from '$lib/supabase';
+ import setImageUrl from '$lib/utils';
+ import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
+ import { Swiper, SwiperSlide } from 'swiper/svelte';
+ import 'swiper/css';
+ import 'swiper/css/navigation';
+ import 'swiper/css/pagination';
+ import 'swiper/css/scrollbar';
+ import 'swiper/css/autoplay';
+
+ const images = [
+ { image: 'mountains.png', alt: 'Cloudy mountains in a light sky' },
+ { image: 'office-1-1.jpeg', alt: 'Office room one' },
+ { image: 'office-1-2.jpeg', alt: 'Office room one angle two' },
+ { image: 'office-2-1.jpeg', alt: 'Office room two' },
+ { image: 'office-2-2.jpeg', alt: 'Office room two angle two' },
+ ].map(setImageUrl);
+</script> \ No newline at end of file
diff --git a/src/routes/team/index.svelte b/src/routes/team/index.svelte
index 489ae04..04c62b9 100644
--- a/src/routes/team/index.svelte
+++ b/src/routes/team/index.svelte
@@ -3,6 +3,7 @@
import { onMount } from 'svelte';
import { supabase } from '$lib/supabase';
+ import setImageUrl from '$lib/utils';
const getPeople = async () => {
const { data, error } = await supabase.from('people').select().order('id');
@@ -12,22 +13,9 @@
return [];
}
- const mapImages = (people) => {
- return people.map((x) => {
- const { publicURL, error } = supabase
- .storage
- .from('mistymountains')
- .getPublicUrl(x.image);
- if (!error) {
- return { ...x, image: publicURL };
- }
- return x;
- });
- }
-
let people = [];
onMount(async () => {
- people = await getPeople().then(mapImages);
+ people = await getPeople().then((people) => people.map(setImageUrl));
});
</script>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-30 08:53:04 +0000