First commit

Explore Svelte and Sapper

src/components/Nav.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let segment;
+</script>
+
+<nav>
+	<ul>
+		<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
+		<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
+
+		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
+	</ul>
+</nav>

src/components/Photo.svelte

@@ -0,0 +1,36 @@
+<script>
+    import { slide } from 'svelte/transition'
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat'
+    import * as fn from '../functions'
+
+    export let photo
+    export let index
+    export let location
+
+    // Manipulate data
+    const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
+    index = (index < 10 ? '0' : null) + index
+
+    // Format the date
+    dayjs.extend(advancedFormat)
+    const date = dayjs(photo.created_on).format('MMM Do, YYYY')
+</script>
+
+<div class="card" in:slide out:slide>
+    <div class="card-image">
+        <figure class="image is-4by3">
+            <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
+        </figure>
+    </div>
+
+    <div class="card-content">
+        <h4 class="title is-4">{photo.name}</h4>
+        <p>{location.name}, {location.country.name}</p>
+    </div>
+
+    <footer class="card-footer">
+        <span class="card-footer-item">{date}</span>
+        <span class="card-footer-item">#{index}</span>
+    </footer>
+</div>