Commit ac738b7c authored by Sam Beckham's avatar Sam Beckham 🔴

Pulls in webfeeds as post comments

- adds webmentions to Gridsome's GraphQL endpoint
- adds `PostComments` and `PostComment` to render mentions
parent 9dd7d556
......@@ -5,10 +5,24 @@
// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`
const clientConfig = require("./client.config");
const axios = require("axios");
const API_ORIGIN = "https://webmention.io/api/mentions.jf2";
const { GRIDSOME_WEBMENTIONS_TOKEN } = process.env;
module.exports = function(api) {
api.loadSource(store => {
api.loadSource(async store => {
// Use the Data store API here: https://gridsome.org/docs/data-store-api
store.addMetadata("sanityOptions", clientConfig.sanity);
const { data } = await axios.get(API_ORIGIN, {
params: { token: GRIDSOME_WEBMENTIONS_TOKEN }
});
const mentions = store.addCollection("mentions");
for (const item of data.children) {
mentions.addNode(item);
}
});
};
......@@ -10,6 +10,7 @@
"sanity:deploy": "cd data && yarn deploy && cd ../"
},
"dependencies": {
"axios": "^0.19.0",
"babel-runtime": "^6.26.0",
"gridsome": "^0.7.0",
"gridsome-plugin-rss": "github:samdbeckham/gridsome-plugin-rss.git#dateField",
......@@ -24,4 +25,4 @@
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.2.3"
}
}
\ No newline at end of file
}
......@@ -7,11 +7,13 @@
html {
--ratio: 1.61803;
--ratio--pow: 2.61803;
--ratio--pow--3: 4.23603665;
--ratio--inv: 0.61803;
--ratio--inv--pow: 0.38196;
--ratio_em: calc(var(--ratio) * 1em);
--ratio--pow_em: calc(var(--ratio--pow) * 1em);
--ratio--pow--3_em: calc(var(--ratio--pow--3) * 1em);
--ratio--inv_em: calc(var(--ratio--inv) * 1em);
--ratio--inv--pow_em: calc(var(--ratio--inv--pow) * 1em);
......
<template>
<div class="comment">
<img class="avatar" :src="author.photo" />
<div class="info">
<a class="author" :href="author.url">{{ author.name }}</a> -
<a class="source" :href="source" target="_blank" rel="nofollow">{{
date
}}</a>
<p class="content">{{ text }}</p>
</div>
</div>
</template>
<script>
export default {
name: "PostComments",
props: {
author: {
type: Object,
required: true
},
date: {
type: String,
required: true
},
source: {
type: String,
required: true
},
text: {
type: String,
required: true
}
}
};
</script>
<style scoped>
.comment {
display: grid;
grid-gap: 1em;
grid-template-columns: var(--ratio--pow--3_em) auto;
margin-bottom: var(--ratio_em);
}
.author {
font-weight: bold;
}
.avatar {
border-radius: var(--ratio--inv--pow_em);
}
</style>
<template>
<section v-if="comments.length" class="comments">
<marber-grid>
<post-comment
v-for="comment in comments"
:key="comment.id"
:author="comment.author"
:text="comment.content.text"
:date="comment.published"
:source="comment.url"
/>
</marber-grid>
</section>
</template>
<static-query>
query {
comments: allMentions (sortBy:"published" filter: {
wm_property: { eq: "in-reply-to" }
}) {
edges {
node {
id
author {
name
photo
url
}
content {
text
}
published(format: "MMMM Do, YYYY")
url
wm_target
}
}
}
}
</static-query>
<script>
import MarberGrid from "~/components/MarberGrid.vue";
import PostComment from "~/components/PostComment.vue";
export default {
name: "PostComments",
components: {
MarberGrid,
PostComment
},
props: {
postSlug: {
type: String,
required: true
}
},
computed: {
comments() {
return (
this.$static.comments &&
this.$static.comments.edges
.filter(comment => comment.node.wm_target.match(this.postSlug))
.map(comment => comment.node)
);
}
}
};
</script>
<style scoped>
.comments {
margin: var(--ratio_em) 0;
padding: var(--ratio--pow_em) 0 0;
border-top: 1px solid var(--color__gray);
}
</style>
......@@ -14,6 +14,7 @@
dataset="production"
/>
<youtube-video v-if="post.youtubeId" :video-id="post.youtubeId" />
<post-comments :post-slug="post.slug.current" />
</layout>
</template>
......@@ -21,6 +22,7 @@
import BlockContent from "sanity-blocks-vue-component";
import Vue from "vue";
import PostComments from "~/components/PostComments.vue";
import TheHeader from "~/components/TheHeader.vue";
import YoutubeVideo from "~/components/YoutubeVideo.vue";
......@@ -28,7 +30,7 @@ import { BlockCode, BlockCodepen, BlockImage, BlockTweet } from "~/serializers";
export default {
name: "SanityPost",
components: { BlockContent, TheHeader, YoutubeVideo },
components: { BlockContent, PostComments, TheHeader, YoutubeVideo },
data: () => ({
serializers: {
types: {
......@@ -74,6 +76,7 @@ query SanityPost ($id: ID!) {
publishedAt(format: "MMMM Do, YYYY")
title
youtubeId
slug { current }
}
}
</page-query>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment