Enable image redirects

Images can now go directly to media.snipettemag.com instead of
being routed through the private Ghost instance. (Reduces traffic
on that node).

gridsome.config.js

@@ -4,6 +4,9 @@ module.exports = {
 	siteDescription: 'The professional publishing platform',
 	titleTemplate: `%s - Gridsome`,
 
+	mediaUrlFrom: 'https://snipette-ghost.herokuapp.com/content/images/',
+	mediaUrlTo: 'https://media.snipettemag.com/',
+
 	templates: {
 		GhostPost: '/:slug',
 		GhostTag: '/tag/:slug',

src/components/Card.vue

@@ -2,7 +2,7 @@
   <article :class="articleClass">
     <a v-if="cardData.coverImage" class="post-card-image-link" :href="cardData.path">
       <!-- FIXME Background size cover -->
-      <div class="post-card-image" :style="'background-image: url(' + cardData.coverImage + ')'"></div>
+      <div class="post-card-image" :style="'background-image: url(' + cardData.coverImage + ')'|changeUrls"></div>
     </a>
     <div class="post-card-content">
       <a class="post-card-content-link" :href="cardData.path">
@@ -14,7 +14,7 @@
           <h2 class="post-card-title">{{ cardData.title }}</h2>
         </header>
         <section class="post-card-excerpt">
-          <p>{{ cardData.description | stripHTML | truncate(190, '...') }}</p>
+          <p>{{ cardData.description | stripHTML | changeUrls | truncate(190, '...') }}</p>
         </section>
       </a>
       <footer class="post-card-meta">
@@ -22,7 +22,7 @@
           <li v-for="author in cardData.authors" class="author-list-item" :key="author.slug">
             <div class="author-name-tooltip">{{ author.name }}</div>
             <a v-if="author.image" :href="'/author/' + author.slug" class="static-avatar">
-              <img class="author-profile-image" :src="author.image" :alt="author.name" />
+              <img class="author-profile-image" :src="author.image|changeUrls" :alt="author.name" />
             </a>
             <a v-else :href="'/author/' + author.slug" class="static-avatar author-profile-image">
              <Avatar/>
@@ -38,6 +38,7 @@
 
 <script>
 import Avatar from "./icons/Avatar";
+import changeUrls from '../filters/changeUrls';
 
 export default {
   components: {
@@ -67,7 +68,8 @@ export default {
     stripHTML: text => {
       if (!text) return text
       return text.replace(/<[^>]+>/g, '')
-    }
+    },
+    changeUrls: changeUrls
   }
 };
 </script>

src/components/bylineMultiple.vue

@@ -26,7 +26,7 @@
               <img
                 v-if="author.image"
                 class="author-profile-image"
-                :src="author.image"
+                :src="author.image|changeUrls"
                 :alt="author.name"
               >
               <div v-else class="author-profile-image">
@@ -52,7 +52,7 @@
           </div>
 
           <a v-if="author.image" :href="'/author/' + author.slug" class="moving-avatar">
-            <img class="author-profile-image" :src="author.image" :alt="author.name">
+            <img class="author-profile-image" :src="author.image|changeUrls" :alt="author.name">
           </a>
           <a v-else :href="'/author/' + author.id" class="moving-avatar author-profile-image">
             <Avatar/>
@@ -65,6 +65,7 @@
 
 <script>
 import Avatar from "./icons/Avatar";
+import changeUrls from '../filters/changeUrls';
 
 export default {
   data: () => {
@@ -78,6 +79,9 @@ export default {
   components: {
     Avatar
   },
+  filters: {
+    changeUrls: changeUrls
+  },
   methods: {
     hideAuthorCard() {
       setTimeout(() => {

src/components/bylineSingle.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="post-full-footer">
     <section class="author-card">
-      <g-image v-if="authorData.image" class="author-profile-image" :src="authorData.image" :alt="authorData.name" />
+      <g-image v-if="authorData.image" class="author-profile-image" :src="authorData.image|changeUrls" :alt="authorData.name" />
       <span v-else class="avatar-wrapper">
         <Avatar />
       </span>
@@ -24,6 +24,7 @@
 
 <script>
   import Avatar from './icons/Avatar';
+  import changeUrls from '../filters/changeUrls';
 
   export default {
     props: {
@@ -32,6 +33,9 @@
     components: {
       Avatar
     },
+    filters: {
+      changeUrls: changeUrls
+    },
     computed: {
       authorData() {
         return this.author[0]

src/filters/changeUrls.js

@@ -0,0 +1,10 @@
+const config = require('../../gridsome.config.js');
+
+export default string => {
+  if (config.mediaUrlFrom && config.mediaUrlTo && string) {
+    var processedString = string.replace(new RegExp(config.mediaUrlFrom, 'g'), config.mediaUrlTo);
+  } else {
+    var processedString = string;
+  }
+  return processedString;
+}

src/templates/GhostAuthor.vue

@@ -4,7 +4,7 @@
       <div class="inner">
         <Navbar :logo=true />
         <div class="site-header-content">
-          <img v-if="$page.author.image" class="author-profile-image" :src="$page.author.image" :alt="$page.author.name" />
+          <img v-if="$page.author.image" class="author-profile-image" :src="$page.author.image|changeUrls" :alt="$page.author.name" />
           <h1 class="site-title"> {{ $page.author.name }} </h1>
           <h2 v-if="bio = true" class="author-bio">{{ $page.author.bio }}</h2>
           <div class="author-meta">
@@ -65,6 +65,9 @@
   import FacebookIcon from '../components/icons/Facebook';
   import RSSIcon from '../components/icons/RSS';
 
+  // Filters
+  import changeUrls from '../filters/changeUrls';
+
   import { Pager } from 'gridsome'
 
   export default {
@@ -82,6 +85,9 @@
       // Icons
       WebsiteIcon, TwitterIcon, FacebookIcon, RSSIcon, Pager
     },
+    filters: {
+      changeUrls: changeUrls
+    },
     computed: {
       numberofPosts() {
         let count = this.$page.author.belongsTo.edges.length

src/templates/GhostPost.vue

@@ -23,11 +23,11 @@
           </header>
 
           <figure v-if="$page.post.image" class="post-full-image">
-            <g-image :src="$page.post.image" :alt="$page.post.title"/>
+            <g-image :src="$page.post.image|changeUrls" :alt="$page.post.title"/>
           </figure>
 
           <section class="post-full-content">
-            <div class="post-content" v-html="$page.post.content"></div>
+            <div class="post-content" v-html="fullPost"></div>
           </section>
 
           <!-- Email subscribe form at the bottom of the page -->
@@ -60,6 +60,7 @@ import subscribeForm from "../components/subscribeForm";
 import bylineMultiple from "../components/bylineMultiple";
 import bylineSingle from "../components/bylineSingle";
 import PreviousNext from "../components/PreviousNext";
+import changeUrls from '../filters/changeUrls';
 
 export default {
   metaInfo() {
@@ -78,10 +79,16 @@ export default {
     bylineSingle,
     PreviousNext
   },
+  filters: {
+    changeUrls: changeUrls
+  },
   computed: {
     Admin() {
       return Admin;
     },
+    fullPost() {
+      return changeUrls(this.$page.post.content);
+    },
     postClass() {
       let classes = ["post-full", "post"];
       if (!this.$page.post.image) {

src/templates/GhostTag.vue

@@ -26,6 +26,7 @@ import Navbar from "../components/Navbar";
 import Card from "../components/Card";
 import capitalizeFilter from "../filters/capitalize";
 import capitalize from '../filters/capitalize';
+import changeUrls from '../filters/changeUrls';
 
 export default {
   metaInfo() {
@@ -40,6 +41,9 @@ export default {
     Navbar,
     Card
   },
+  filters: {
+    changeUrls: changeUrls
+  },
   computed: {
     Admin() {
       return Admin;