Add feature image grid

src/App.vue

@@ -1,28 +1,27 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <ImageGrid />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import ImageGrid from './components/ImageGrid.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    ImageGrid
   }
 }
 </script>
 
 <style lang="scss">
+@import '~normalize.css/normalize.css';
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Lato', Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  padding: 50px;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
-          target="_blank"
-          rel="noopener"
-          >unit-jest</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch"
-          target="_blank"
-          rel="noopener"
-          >e2e-nightwatch</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/ImageGrid.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="image-grid-container">
+    <div v-if="loading">Loading...</div>
+
+    <div v-else v-for="image in images" :key="image.id">
+      <a :href="image.links.html">
+        <figure>
+          <img :src="image.urls.small" :alt="image.alt_description" />
+          <figcaption>
+            <a :href="image.user.portfolio_url">{{ image.user.first_name }}</a>
+          </figcaption>
+        </figure>
+      </a>
+    </div>
+
+    <div v-if="failure">
+      There has been an error retrieving the requested data
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      loading: true,
+      failure: false,
+      images: {}
+    }
+  },
+  mounted() {
+    axios
+      .get(
+        `${process.env.VUE_APP_UNSPLASH_BASE_URL}/photos/?client_id=${process.env.VUE_APP_UNSPLASH_ACCESS_KEY}`
+      )
+      .then((response) => {
+        this.images = response.data
+      })
+      .catch((error) => {
+        console.log(error)
+        this.failure = true
+      })
+      .finally(() => (this.loading = false))
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$imgBaseSize: 333px;
+
+.image-grid-container {
+  text-align: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($imgBaseSize, 1fr));
+  grid-auto-rows: minmax(150px, 1fr);
+  grid-gap: 2rem;
+  grid-auto-flow: dense;
+  justify-items: center;
+  font-size: 1.25em;
+
+  a {
+    display: block;
+    word-break: break-all;
+    text-decoration: none;
+    color: white;
+  }
+
+  figure {
+    position: relative;
+    height: $imgBaseSize;
+    width: $imgBaseSize;
+    display: flex;
+    align-items: flex-end;
+
+    img {
+      height: inherit;
+      width: inherit;
+      object-fit: cover;
+
+      &:hover {
+        opacity: 0.2;
+        transition: opacity;
+        transition-duration: 2000ms;
+        transition-timing-function: ease-out;
+      }
+    }
+
+    figcaption {
+      text-align: center;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      > a {
+        padding: 22px 0;
+        text-shadow: lighten(#fdfdfd, 7%);
+
+        &:hover {
+          color: #aaa;
+          transition: color;
+          transition-duration: 1000ms;
+          transition-timing-function: ease-out;
+        }
+      }
+    }
+  }
+}
+</style>