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).
This commit is contained in:
Hippo 2019-12-19 22:01:35 +05:30
parent 1542c53dce
commit 16bcaaf54b
8 changed files with 50 additions and 10 deletions

View file

@ -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',

View file

@ -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>

View file

@ -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(() => {

View file

@ -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]

10
src/filters/changeUrls.js Normal file
View file

@ -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;
}

View file

@ -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

View file

@ -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) {

View file

@ -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;