snipette/snipette-gridsome
snipette/snipette-gridsome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Enable image redirects

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
gridsome.config.js
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',

10
src/components/Card.vue
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>

8
src/components/bylineMultiple.vue
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(() => {

6
src/components/bylineSingle.vue
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;
}

8
src/templates/GhostAuthor.vue
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

11
src/templates/GhostPost.vue
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) {

4
src/templates/GhostTag.vue
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;