Browse Source

Created component and interface to represent projects. Name clash, should fix. Added axios for calling the Gitea API.

5-show-recent-git-repos
Robby Zambito 1 week ago
parent
commit
93b546bfe2
6 changed files with 84 additions and 4 deletions
  1. +36
    -0
      package-lock.json
  2. +2
    -0
      package.json
  3. +15
    -0
      src/components/GitProject.vue
  4. +8
    -0
      src/interfaces/GitProject.ts
  5. +3
    -0
      src/main.ts
  6. +20
    -4
      src/views/Projects.vue

+ 36
- 0
package-lock.json View File

@@ -2402,6 +2402,37 @@
"integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -11383,6 +11414,11 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
},
"vue-axios": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
"integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
},
"vue-bulma-components": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/vue-bulma-components/-/vue-bulma-components-3.2.1.tgz",


+ 2
- 0
package.json View File

@@ -13,10 +13,12 @@
"@fortawesome/free-regular-svg-icons": "^5.13.1",
"@fortawesome/free-solid-svg-icons": "^5.13.1",
"@fortawesome/vue-fontawesome": "^0.1.10",
"axios": "^0.19.2",
"buefy": "^0.8.20",
"bulma": "^0.9.0",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-bulma-components": "^3.2.1",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",


+ 15
- 0
src/components/GitProject.vue View File

@@ -0,0 +1,15 @@
<template lang="html">
<div class="box">

</div>
</template>

<script>
import Vue from 'vue';

export default class GitProject extends Vue {
}
</script>

<style lang="scss" scoped>
</style>

+ 8
- 0
src/interfaces/GitProject.ts View File

@@ -0,0 +1,8 @@
export default interface GitProject {
name: string;
description: string;
html_url: string;
website: string;
archived: boolean;
avatar_url: string;
}

+ 3
- 0
src/main.ts View File

@@ -1,4 +1,6 @@
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import { library } from '@fortawesome/fontawesome-svg-core';
@@ -30,6 +32,7 @@ library.add(
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false;
Vue.use(Buefy);
Vue.use(VueAxios, axios);

new Vue({
router,


+ 20
- 4
src/views/Projects.vue View File

@@ -4,10 +4,26 @@
</div>
</template>

<script>
export default {
name: 'Projects',
};
<script lang="ts">
import Vue from 'vue';
import GitProject from '@/interfaces/GitProject';

export default class Projects extends Vue {
projectArray: GitProject[] = [];

async populateProjectsArray() {
const res = await this.axios.get('https://git.robbyzambito.me/api/v1/repos/search?priority_owner_id=0');
const { data } = res;

this.projectArray = data;

console.log(res);
}

created() {
this.populateProjectsArray();
}
}
</script>

<style lang="sass" scoped>


Loading…
Cancel
Save