Let there be light

3 files changed, 89 insertions, 0 deletions

diff --git a/src/routes/team/PersonBio.svelte b/src/routes/team/PersonBio.svelte
new file mode 100644
index 0000000..437f57b
--- /dev/null
+++ b/src/routes/team/PersonBio.svelte
@@ -0,0 +1,20 @@
+<script>
+  export let bio;
+  let showMore = false;
+</script>
+
+<main>
+  {#if showMore}
+    <p>{bio}</p>
+    <button on:click={() => showMore = false}>Show Less</button>
+  {:else}
+    <p>{bio.substr(0, bio.lastIndexOf(' ', 150)) + '...'}</p>
+    <button on:click={() => showMore = true}>Show More</button>
+  {/if}
+</main>
+
+<style>
+  p {
+    white-space: pre-line;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/team/PersonCard.svelte b/src/routes/team/PersonCard.svelte
new file mode 100644
index 0000000..3859179
--- /dev/null
+++ b/src/routes/team/PersonCard.svelte
@@ -0,0 +1,26 @@
+<script>
+  import PersonBio from './PersonBio.svelte';  
+
+  export let person;
+  export let direction;
+</script>
+
+<main>
+  <div class="row">
+    {#if direction == 'right'}
+      <div class="col-sm-3">
+        <img class="img-fluid" src={person.image} alt={person.name} />
+      </div>
+      <div class="col-sm-9">
+        <PersonBio bio={person.bio} />
+      </div>
+    {:else}
+      <div class="col-sm-9">
+        <PersonBio bio={person.bio} />
+      </div>
+      <div class="col-sm-3">
+        <img class="img-fluid" src={person.image} alt={person.name} />
+      </div>
+    {/if}
+  </div>
+</main>
\ No newline at end of file
diff --git a/src/routes/team/index.svelte b/src/routes/team/index.svelte
new file mode 100644
index 0000000..56a7e33
--- /dev/null
+++ b/src/routes/team/index.svelte
@@ -0,0 +1,43 @@
+<script>
+  import PersonCard from './PersonCard.svelte';  
+
+  import { onMount } from 'svelte';
+  import { supabase } from '$lib/supabase';
+
+  const getPeople = async () => {
+    const { data, error } = await supabase.from('people').select();
+    if (!error) {
+      return data;
+    }
+    console.log(error);
+    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);
+  });
+</script>
+
+<main>
+  {#if people.length}
+    {#each people as person, i}
+      <div class="row">
+        <PersonCard person={person} direction={i % 2 ? 'left' : 'right'} />
+      </div>
+    {/each}
+  {/if}
+</main>
\ No newline at end of file