Feature: Use real-link for referer and origianl image

pinry-spa/src/components/PinPreview.vue

@@ -4,7 +4,7 @@
         <div class="card">
           <div class="card-image">
             <figure class="image">
-              <img :src="pinItem.original_url" alt="Image">
+              <img :src="pinItem.large_image_url" alt="Image">
             </figure>
           </div>
           <div class="card-content">
@@ -28,20 +28,24 @@
                   </p>
                 </div>
                 <div class="is-pulled-right">
-                  <b-button tag="router-link"
-                      to="/"
+                  <a :href="pinItem.referer">
+                    <b-button
+                        v-show="pinItem.referer !== null"
                         class="meta-link"
                         type="is-warning">
                       Referer
                     </b-button>
-                  <b-button tag="router-link"
-                      to="/"
+                  </a>
+                  <a :href="pinItem.original_image_url">
+                    <b-button
+                        v-show="pinItem.original_image_url !== null"
                         class="meta-link"
                         type="is-link">
-                      Original URL
+                        Original Image
                     </b-button>
+                  </a>
                   <b-button tag="router-link"
-                      to="/"
+                      :to="{ name: 'pin', params: { pinId: pinItem.id } }"
                       class="meta-link"
                       type="is-success">
                       Pin URL

pinry-spa/src/components/Pins.vue

@@ -79,7 +79,9 @@ function createImageItem(pin) {
   image.tags = pin.tags;
   image.author = pin.submitter.username;
   image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
-  image.original_url = pinHandler.escapeUrl(pin.image.image);
+  image.large_image_url = pinHandler.escapeUrl(pin.image.image);
+  image.original_image_url = pin.url;
+  image.referer = pin.referer;
   image.orgianl_width = pin.image.width;
   image.style = {
     width: `${pin.image.thumbnail.width}px`,

pinry-spa/src/router/index.js

@@ -4,6 +4,7 @@ import Home from '../views/Home.vue';
 import Pins4Tag from '../views/Pins4Tag.vue';
 import Pins4User from '../views/Pins4User.vue';
 import Pins4Board from '../views/Pins4Board.vue';
+import Pins4Id from '../views/Pins4Id.vue';
 
 Vue.use(VueRouter);
 
@@ -28,6 +29,11 @@ const routes = [
     name: 'board',
     component: Pins4Board,
   },
+  {
+    path: '/pins/:pinId',
+    name: 'pin',
+    component: Pins4Id,
+  },
 ];
 
 const router = new VueRouter({

pinry-spa/src/views/Pins4Id.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="pins-for-tag">
+    <PHeader></PHeader>
+    <Pins :pin-filters="filters"></Pins>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+import Pins from '../components/Pins.vue';
+
+export default {
+  name: 'p-header',
+  data() {
+    return {
+      filters: { tagFilter: null },
+    };
+  },
+  components: {
+    PHeader,
+    Pins,
+  },
+  created() {
+    this.initializeTag();
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.initializeTag();
+    next();
+  },
+  methods: {
+    initializeTag() {
+      this.filters.tagFilter = this.$route.params.tag;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>