Skip to content

Instantly share code, notes, and snippets.

@boring-dragon

boring-dragon/index.html

Last active October 15, 2020 18:07
Show Gist options
  • Save boring-dragon/4cfd2a6f28ea4d173f0557ef0b3e8481 to your computer and use it in GitHub Desktop.
Save boring-dragon/4cfd2a6f28ea4d173f0557ef0b3e8481 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Mohamed jinas revised this gist Oct 15, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@

    <div id="app">
    <baivaru-dhivatar name="ޖިނާސް"></baivaru-dhivatar>
    <baivaru-dhivatar name="އަތްފާން"></baivaru-dhivatar>
    </div>


  2. Mohamed jinas created this gist Oct 15, 2020.
    56 changes: 56 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <!DOCTYPE html>
    <html>

    <head>
    <title>Baivaru Dhivatar Vue component Implementation</title>
    </head>

    <body>

    <div id="app">
    <baivaru-dhivatar name="ޖިނާސް"></baivaru-dhivatar>
    </div>



    <script type="text/x-template" id="baivaru-dhivatar-template">
    <img :src="image" alt="avatar">
    </script>

    <!-- Import Vue.js and axios -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    Vue.component('baivaru-dhivatar', {
    template: '#baivaru-dhivatar-template',
    props: {
    name: {
    type: String,
    required: true
    }
    },
    data() {
    return {
    image: ""
    }
    },
    created() {
    var base = this;
    axios.get(`https://dhivatars.baivaru.net/api/?name=${this.name}`, {
    responseType: "arraybuffer"
    })
    .then(response => {
    let base64String = btoa(
    String.fromCharCode.apply(null, new Uint8Array(response.data))
    );
    base.image = "data:image/png;base64," + base64String;
    })
    }
    })
    new Vue({
    el: '#app'
    });
    </script>
    </body>

    </html>