YAY SLIDER FINALLY DONE HOLY SHIT

This commit is contained in:
Logan Hunt 2022-06-26 15:29:04 -07:00
parent 17df5367f9
commit b74211c4e9
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
5 changed files with 124 additions and 16 deletions

65
package-lock.json generated
View File

@ -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",

View File

@ -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"
},

14
src/lib/utils.ts Normal file
View File

@ -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;

View File

@ -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>

View File

@ -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>