Showing commit history on posts

Thanks to Tom Critchlow, I recently found out about Ryan Duffy's blog post detailing how he added commit history to the posts on his Jekyll-powered site. I recently discussed a similar idea with Jon Borichevskiy and decided to adapt Ryan's method to my Gridsome-powered site.

To do this, I added a CommitHistory component, which takes a path as a prop; the path is then concatenated with the base path and a request is made to the GitHub commits endpoint:

<template>
<div>
<h3>Revisions</h3>
<div class="space-y-4">
<div
v-for="commit in commits"
v-bind:key="commit.sha"
class="flex border-solid border border-gray-300 p-4"
>
<img
class="my-0 h-16 w-16 rounded-full"
:src="commit.committer.avatar_url"
/>
<div class="flex flex-col px-4">
<a class="bg-none" :href="commit.html_url" target="gh-history">{{
commit.commit.message.split()[0]
}}</a
><span
>Travis Northcutt updated this on
{{ new Date(commit.commit.author.date).toLocaleDateString() }}
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import fetch from "node-fetch";
export default {
props: ["path"],
data() {
return {
commits: "",
};
},
created() {
const base =
"https://api.github.com/repos/tnorthcutt/travisnorthcutt.com/commits?path=/";
fetch(base + this.path)
.then(response => response.json())
.then(commits => {
this.commits = commits;
});
},
};
</script>
view raw CommitHistory.vue hosted with ❤ by GitHub

In my Post.vue template file, I then have a path computed property that determines the path in the repository of the current post, and sends that to the CommitHistory component:

<template>
<Layout>
<div class="prose mx-auto">
<h1 v-html="$page.post.title"></h1>
<div v-html="$page.post.content"></div>
<CommitHistory v-bind:path="path" />
</div>
</Layout>
</template>
<script>
export default {
metaInfo() {
return {
title: this.$page.post.title,
};
},
computed: {
path() {
return (
this.$page.post.fileInfo.directory.replace("./", "") +
"/" +
this.$page.post.fileInfo.name +
this.$page.post.fileInfo.extension
);
},
},
};
</script>
<page-query>
query ($id: ID!) {
post(id: $id) {
title
content
fileInfo {
extension
directory
name
}
}
}
</page-query>
view raw Post.vue hosted with ❤ by GitHub

Nothing fancy, but a fun little feature to add to my site. Of course, since most of my posts are recently imported from WordPress, they'll almost all have a commit message of add a ton of stuff? ¯\_(ツ)_/¯. All the more reason to write more!

Revisions