YAY SLIDER FINALLY DONE HOLY SHIT

2022-06-26 15:29:04 -07:00 · 2022-06-26 15:29:04 -07:00 · b74211c4e9
commit b74211c4e9
parent 17df5367f9
5 changed files with 124 additions and 16 deletions
--- 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",
--- 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"
  },
--- a/src/lib/utils.ts
+++ 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;
--- 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>
--- 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>