2023-05-04 22:40:46 +00:00
|
|
|
<template>
|
2023-05-08 01:35:28 +00:00
|
|
|
<div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
|
2023-05-08 09:19:41 +00:00
|
|
|
<ApiLoader
|
|
|
|
:cache-name="repoName()"
|
|
|
|
:url="fetchUrl"
|
|
|
|
:already-known-data="props.data"
|
|
|
|
@data-loaded="(repo: GithubRepo) => (repository = repo)"
|
|
|
|
>
|
|
|
|
<div class="flex-col info">
|
|
|
|
<h3>{{ props.data.name }}</h3>
|
|
|
|
<div>
|
|
|
|
<p>
|
|
|
|
{{ props.data.description }}
|
|
|
|
</p>
|
|
|
|
</div>
|
2023-05-04 22:40:46 +00:00
|
|
|
</div>
|
2023-05-08 09:19:41 +00:00
|
|
|
<div class="flex-col flex-start gap-1rem stats">
|
|
|
|
<p>Stars: {{ data.stargazers_count }}</p>
|
|
|
|
<p>Forks: {{ data.forks_count }}</p>
|
|
|
|
</div>
|
|
|
|
</ApiLoader>
|
2023-05-04 22:40:46 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2023-05-08 09:19:41 +00:00
|
|
|
import ApiLoader from '../ApiLoader.vue';
|
|
|
|
|
2023-05-08 01:01:17 +00:00
|
|
|
import { GithubRepo } from '../../composables/github';
|
2023-05-08 09:19:41 +00:00
|
|
|
import { PropType, Ref, ref } from 'vue';
|
|
|
|
|
2023-05-04 22:40:46 +00:00
|
|
|
const props = defineProps({
|
2023-05-08 09:19:41 +00:00
|
|
|
data: Object as PropType<GithubRepo>,
|
|
|
|
repoName: String,
|
|
|
|
fetcher: String as PropType<'gitea' | 'github'>,
|
2023-05-04 22:40:46 +00:00
|
|
|
});
|
2023-05-08 09:19:41 +00:00
|
|
|
|
|
|
|
const repoName = (): string => {
|
|
|
|
return props.data ? props.data.full_name : props.repoName;
|
|
|
|
};
|
|
|
|
|
|
|
|
const fetchUrl = `https://api.github.com/repos/${repoName()}`;
|
|
|
|
const repository: Ref<GithubRepo> = ref(null);
|
2023-05-04 22:40:46 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
@import 'node_modules/nord/src/lesscss/nord.less';
|
2023-05-08 01:01:17 +00:00
|
|
|
@import '../../styles/classes.less';
|
2023-05-04 22:40:46 +00:00
|
|
|
|
|
|
|
.githubRepo {
|
2023-05-08 01:35:28 +00:00
|
|
|
width: 35rem;
|
2023-05-04 22:40:46 +00:00
|
|
|
padding: 3rem;
|
2023-05-08 01:35:28 +00:00
|
|
|
background-color: @nord4;
|
|
|
|
|
|
|
|
html.dark & {
|
|
|
|
background-color: @nord3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info {
|
|
|
|
max-width: 30rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stats {
|
|
|
|
width: 4rem;
|
|
|
|
}
|
2023-05-04 22:40:46 +00:00
|
|
|
}
|
|
|
|
</style>
|