catalogue-details.html

--- 
layout: catalogue 
---
<style>
    @import url("/stylesheets/catalogue.css");
</style>
<p id="loading_status" v-if="show"><i :class="icon"></i> (( message ))</p>
<div id="repo_details" class="content" v-if="ready">
    <div class="row">
        <div class="col">
            <a class="go-back" href="{{ site.baseurl }}/"><i class="fa fa-caret-left"></i> Go back</a>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="media">
                <img class="m-3 logo-small" :src="logo" alt="Logo">
                <div class="media-body">
                    <h2 class="display-4 mt-0 mb-1"> (( repo.name ))</h2>
                    <p class="lead">by <a target="_blank" :href="repo.owner.html_url">(( repo.owner.login ))</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-8">
            <div v-html="compiledReadme"></div>
        </div>
        <div class="col-12 col-md-4">
          <div id="about">
            <a class="btn btn-lg btn-success" target="_blank" :href="repo.html_url + '/archive/' + repo.default_branch + '.zip'">Download <i class="fa fa-download"></i></a>

            <h3>About this repo</h3>
            <ul class="list-unstyled">
                <li><i class="fas fa-globe fa-fw"></i> Repo ID:  <span class="float-right">(( repo.id ))</span></li>
                <li><i class="far fa-user-circle fa-fw"></i> Author: <span class="float-right">(( repo.owner.login ))</span></li>
                <li><i class="fab fa-github fa-fw"></i> Repo: <a class="float-right" target="_blank" :href="repo.html_url">View on Github <i class="fa fa-external-link-alt"></i></a></li>
                <li><i class="fas fa-eye fa-fw"></i> Watchers: <span class="float-right">(( repo.watchers_count ))</span></li>
                <li><i class="fas fa-star fa-fw"></i> Stars : <span class="float-right">(( repo.stargazers_count ))</span></li>
                <li><i class="fas fa-code-branch fa-fw"></i> Forks: <span class="float-right">(( repo.forks_count ))</span></li>
                <li><i class="fas fa-clock fa-fw"></i> Created: <span class="float-right">(( repo.created_at | dateFromNow ))</span></li>
                <li><i class="fas fa-clock fa-fw"></i> Last update: <span class="float-right">(( repo.updated_at | dateFromNow ))</li>
                <li><i class="fas fa-balance-scale fa-fw"></i> License: <span class="float-right" v-if="repo.license">(( repo.license.spdx_id ))</span></li>
            </ul>
          </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/marked@0.3.6"></script>
<script>
    var mDetails = new Vue({
        el: '#repo_details',
        delimiters: ['((', '))'],
        data: {
            logo: '',
            repo: null,
            readme: '',
            ready: false
        },
        computed: {
            compiledReadme: function () {
              return marked(this.readme, { sanitize: false })
            }
        },
        methods: {
            loadInfo: function(info) {
                if (info)
                {
                    this.repo = info;
                    this.readme = this.repo.description || 'No description';
                    this.logo = this.repo.owner.avatar_url;

                    mStatus.hideMessage();
                    this.ready = true;

                    $.get(`https://raw.githubusercontent.com/${this.repo.full_name}/${this.repo.default_branch}/README.md`, (res) => {
                        this.readme = res ? res : this.repo.description;
                    });

                    let iconUrl = `https://raw.githubusercontent.com/${this.repo.full_name}/${this.repo.default_branch}/icon.png`;
                    $.get(iconUrl, (res) => {
                        this.logo = iconUrl;
                    });

                    // parent -> repo from which this was forked
                    // source -> original repo at the end of the chain
                    if (this.repo.fork && this.repo.source != null) {
                        Vue.set(mDetails.repo, 'owner', this.repo.source.owner);
                    }
                } else {
                    mStatus.showError("Couldn't find the repo you requested :(");
                }
            }
        },
        filters: {
            dateFromNow: function(date) {
                return moment(date).fromNow();
            }
        }
    });

    var mStatus = new Vue({
        el: '#loading_status',
        delimiters: ['((', '))'],
        data: {
            message: '',
            icon: '',
            show: false
        },
        methods: {
            hideMessage: function() {
                this.show = false;
            },
            showError: function(msg) {
                this.message = msg;
                this.icon = 'far fa-times-circle';
                this.show = true;
            },
            showLoading: function() {
                this.message = "Loading repository...";
                this.icon = 'fas fa-sync fa-spin';
                this.show = true;
            }
        }
    });


    function getParameterByName(name) {
       return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
    }

    $(document).ready(() => {
        mStatus.showLoading();
        let id = getParameterByName('id');
        if (id == undefined || isNaN(id))
        {
            mStatus.showError("Invalid repo ID");
        }

        $.getJSON(`https://api.github.com/repositories/${id}`, (json) => {
            mDetails.loadInfo(json);
        });
    });
</script>