VuePress Code Snippets

A component to pull back Mastodon profile information

This is pretty simple and uses the Fetch API to pull back profile information. Put it in a .vue file somewhere and include it as a component. Change the URL to use your Id. This is what I use to grab my profile picture for the front page of this site.

If you care about Internet Explorer, then include the isomorphic-fetch and es6-promise packages with npm install --save isomorphic-fetch es6-promise.

<template>
  <div>
    <img :src="profile.avatar" /><!-- grab the profile picture -->
  </div>
</template>
<script>
  import "isomorphic-fetch" // keep IE happy
  export default {
  data() {
    return {
      profile: {}
    };
  }, 
  mounted() {
    this.getMastodonProfile();
  },
  methods: {
    getMastodonProfile() {
      // change this to use your account Id
      fetch('https://your.mastodon.instance/api/v1/accounts/1')
        .then(stream => stream.json())
        .then(data => this.profile = data)
        .catch(error => console.error(error))			
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

This is a CSS hack really. If you want to add a footer to each page, you can extend the page-edit class in .vuepress/style.styl to append custom content. This might mess with things a little if you have lastUpdated: true in your configuration file (you may also need to add CSS white-space: pre; to your CSS).

.page-edit:before { /* or :after */
  content: "Copyright \00A9 2018 Your Name Here.";
}
1
2
3
Copyright © 2018 Andy Belfield. All rights reserved. Some portions may be CC-BY-NC where noted. Code examples on this web site are for educational purposes only. Don't use them in a production environment. Seriously.