Adding the index pages, the query for the artists.json file, ArtistIt…

…em component

src/components/UI/ArtistItem.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let artist;
+</script>
+
+<style lang="scss">
+  h3 {
+    text-align: center;
+  }
+  .image img {
+    object-fit: cover;
+  }
+
+  .column {
+    padding: 5rem;
+  }
+</style>
+
+<a
+  rel="prefetch"
+  href="/artists/{artist.id}"
+  class="column is-one-quarter-desktop is-one-third-tablet">
+  <div>
+    <figure class="image is-square">
+      <img
+        class="is-rounded"
+        src={artist.imageUrls}
+        alt="{artist.name} Picture" />
+    </figure>
+    <h3>{artist.name}</h3>
+  </div>
+</a>

src/routes/_layout.svelte

@@ -51,7 +51,14 @@
 <svelte:window bind:scrollY={y} bind:innerHeight={winHeight} />
 
 <Nav {segment} />
+<<<<<<< HEAD
 <progress value={progress} />
+=======
+  <progress value={progress} />
+
+<div bind:clientHeight={docHeight}>
+
+>>>>>>> Adding the index pages, the query for the artists.json file, ArtistItem component
 
 <div bind:clientHeight={docHeight}>
 
@@ -61,3 +68,8 @@
   <Footer />
 </div>
 
+<<<<<<< HEAD
+=======
+  <Footer />
+</div>
+>>>>>>> Adding the index pages, the query for the artists.json file, ArtistItem component

src/routes/artists/index.json.js

@@ -0,0 +1,24 @@
+import { fetchArtists } from '../../_directus';
+
+
+export async function get(req, res, next) {
+  const artists = await fetchArtists();
+
+  if (artists !== null) {
+    res.setHeader('Content-Type', 'application/json');
+    res.end(
+			JSON.stringify(
+				artists.map(artist => ({
+					id: artist.id,
+					name: artist.artist_name,
+					imageUrls: artist.image ? artist.image.data.full_url : "placeholder_artists.jpeg",
+					location: artist.current_location,
+					category: artist.type_of_art
+				}))
+			)
+		);
+  } else {
+		next();
+  }
+}
+

src/routes/artists/index.svelte

@@ -1 +1,28 @@
-Artists
+<script context="module">
+  export function preload({ params, query }) {
+    return this.fetch(`artists.json`)
+      .then(r => r.json())
+      .then(artists => {
+        return { artists };
+      });
+  }
+</script>
+
+<script>
+  import ArtistItem from "../../components/UI/ArtistItem.svelte";
+  export let artists;
+</script>
+
+<style lang="scss">
+
+</style>
+
+<svelte:head>
+  <title>Artists</title>
+</svelte:head>
+
+<div class="columns is-multiline">
+  {#each artists as artist}
+    <ArtistItem {artist} />
+  {/each}
+</div>