Add details to post pages, make general adjustments.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wp-vue",
   "description": "Just a Vue template that displays posts via the WordPress REST API. Rip this sucka apart and make it your own!",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Alex MacArthur <[email protected]> (https://macarthur.me)",
   "scripts": {

src/assets/scss/_buttons.scss

@@ -21,7 +21,7 @@ button,
   white-space: nowrap;
 
   &:hover {
-    background-color: shade($action-color, 20%);
+    background-color: darken($action-color, 10%);
     color: #fff;
   }
 

src/assets/scss/_forms.scss

@@ -38,7 +38,7 @@ textarea {
   font-size: 16px;
 
   &:hover {
-    border-color: shade($base-border-color, 20%);
+    border-color: darken($base-border-color, 20%);
   }
 
   &:focus {
@@ -48,7 +48,7 @@ textarea {
   }
 
   &:disabled {
-    background-color: shade($base-background-color, 5%);
+    background-color: darken($base-background-color, 5%);
     cursor: not-allowed;
 
     &:hover {

src/assets/scss/_typography.scss

@@ -16,6 +16,14 @@ h6 {
   font-weight: normal;
   line-height: $heading-line-height;
   margin: $small-spacing 0;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: $action-color;
+    }
+  }
 }
 
 h1 {

src/assets/scss/_variables.scss

@@ -16,7 +16,6 @@ $small-font-size: .75rem;
 $base-border-radius: 3px;
 $base-spacing: $base-line-height * 1em;
 $small-spacing: $base-spacing / 2;
-$base-z-index: 0;
 
 // Colors
 $white: #ffffff;
@@ -37,7 +36,6 @@ $base-border: 1px solid $base-border-color;
 
 // Background Colors
 $base-background-color: #fff;
-$secondary-background-color: tint($base-border-color, 75%);
 
 // Focus
 $focus-outline-color: transparentize($action-color, 0.4);

src/components/PostBody.vue

@@ -21,4 +21,24 @@ export default {
   img {
     height: auto;
   }
+
+  .wp-block-embed {
+    margin: 2rem 0;
+  }
+
+  .embed-youtube,
+  .embed-wrap {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 25px;
+    height: 0;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
 </style>

src/components/TopBar.vue

@@ -1,13 +1,25 @@
 <template>
-  <div>
-    <button @click="showUpdater">
-      Change Endpoint
-    </button>
-
-    <p>
-      Currently presenting content from <a :href="sourceURL">{{ splitEndpoint[2] }}</a>.
-    </p>
-  </div>
+  <nav>
+
+    <h1>
+      <router-link
+        :to="{
+          name: 'home',
+        }">
+        WP Vue
+      </router-link>
+    </h1>
+
+    <div>
+      <p>
+        Currently presenting content from <a :href="sourceURL">{{ splitEndpoint[2] }}</a>.
+      </p>
+
+      <button @click="showUpdater">
+        Change Endpoint
+      </button>
+    </div>
+  </nav>
 </template>
 
 <script>
@@ -38,7 +50,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  div {
+  nav {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -49,25 +61,43 @@ export default {
     padding: 1rem 2rem;
     border-bottom: 2px solid darken($gray--light, 5%);
 
+    @include media($small) {
+      flex-direction: row;
+    }
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
     @include media($mobile) {
       flex-direction: row;
     }
   }
 
   button {
-    margin-bottom: 1rem;
-
     @include media($mobile) {
-      margin: 0 1rem 0 0;
+      margin: 0 0 0 1rem;
     }
   }
 
+  h1 {
+    margin: 0;
+  }
+
   a {
     font-weight: bold;
   }
 
   p {
-    margin: 0;
+    text-align: center;
+    margin: .5rem 0 1rem;
+
+    @include media($mobile) {
+      margin: 0;
+      text-align: right;
+    }
   }
 </style>
 

src/views/Feed.vue

@@ -2,11 +2,9 @@
   <div>
 
     <section>
-      <h1>WP Vue</h1>
-
       <p>
-        A simple Vue template that displays posts from a WordPress REST API endpoint.
-        Take what you see here &amp; rip it apart as needed. To improve the base for everyone else, <a href="https://www.github.com/alexmacarthur/wp-vue">contribute on Github</a>.
+        WP Vue is a simple template built with Vue JS that displays posts from a WordPress REST API endpoint.
+        Take what you see here &amp; rip it apart to suit your needs. To improve it for everyone else, <a href="https://www.github.com/alexmacarthur/wp-vue">contribute on Github</a>.
       </p>
     </section>
 
@@ -150,11 +148,6 @@ export default {
     margin: 0 auto 3rem;
   }
 
-  h1 {
-    font-weight: bold;
-    margin: .5rem 0;
-  }
-
   ul {
     display: grid;
     grid-template-columns: repeat( auto-fit, minmax( 320px, auto ) );

src/views/Post.vue

@@ -11,6 +11,17 @@
           :src="featured_image"
         >
         <h1 v-html="title"></h1>
+
+        <ul>
+          <li>
+            <span>Published on {{ date }}</span>
+          </li>
+          <li>
+            <span>
+              <a :href="link">View Post at Source</a>
+            </span>
+          </li>
+        </ul>
       </header>
 
       <PostBody :content="content"></PostBody>
@@ -34,6 +45,8 @@
     data () {
       return {
         post: {},
+        date: '',
+        link: '',
         title: '',
         content: '',
         featured_image: ''
@@ -42,6 +55,8 @@
 
     created: async function () {
       this.post = await this.setPost();
+      this.link = this.post.link;
+      this.date = this.getFormattedDate(this.post.date);
       this.title = this.post.title.rendered;
       this.content = this.post.content.rendered;
       this.featured_image = await this.getFeaturedImage(this.post.featured_media);
@@ -103,11 +118,41 @@
   }
 
   header {
-    text-align: center;
+    margin-bottom: 1rem;
   }
 
   h1 {
-    margin: 2rem 0;
+    margin: 2rem 0 0;
+  }
+
+  ul {
+    @include media($mobile) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-gap: 5px;
+    }
+  }
+
+  li {
+
+    & + & {
+      &:before {
+        @include media($mobile) {
+          content: '|';
+          float: left;
+          margin: 0 5px 0 0;
+        }
+      }
+    }
+
+    a {
+      color: inherit;
+      font-weight: 600;
+
+      &:hover {
+        color: $action-color;
+      }
+    }
   }
 
   a {