2023-05-04 22:40:46 +00:00
|
|
|
<template>
|
2023-05-08 16:04:30 +00:00
|
|
|
<div
|
|
|
|
class="githubRepo flex-col flex-space-between gap-1rem rounded-corners card-width"
|
|
|
|
>
|
2023-05-08 09:19:41 +00:00
|
|
|
<ApiLoader
|
|
|
|
:cache-name="repoName()"
|
|
|
|
:url="fetchUrl"
|
|
|
|
:already-known-data="props.data"
|
2024-06-20 07:27:59 +00:00
|
|
|
@loaded="(repo: GithubRepo) => (repository = repo)"
|
2023-05-08 09:19:41 +00:00
|
|
|
>
|
2024-06-20 07:27:59 +00:00
|
|
|
<h3>{{ repository?.name }}</h3>
|
2023-05-08 13:57:45 +00:00
|
|
|
<div>
|
|
|
|
<p>
|
2024-06-20 07:27:59 +00:00
|
|
|
{{ repository?.description }}
|
2023-05-08 13:57:45 +00:00
|
|
|
</p>
|
2023-05-04 22:40:46 +00:00
|
|
|
</div>
|
2023-05-08 13:57:45 +00:00
|
|
|
<div class="flex-row flex-start gap-1rem stats">
|
2023-05-08 13:33:22 +00:00
|
|
|
<div class="stars">
|
2024-06-20 07:27:59 +00:00
|
|
|
<Icon name="star" /> {{ repository?.stargazers_count }}
|
2023-05-08 13:33:22 +00:00
|
|
|
</div>
|
|
|
|
<div class="forks">
|
2024-06-20 07:27:59 +00:00
|
|
|
<Icon name="fork" /> {{ repository?.forks_count }}
|
2023-05-08 13:33:22 +00:00
|
|
|
</div>
|
|
|
|
<div class="link">
|
2024-06-20 07:27:59 +00:00
|
|
|
<a :href="repository?.html_url"><i class="icon phunic-link" /></a>
|
2023-05-08 13:33:22 +00:00
|
|
|
</div>
|
2023-05-08 09:19:41 +00:00
|
|
|
</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';
|
|
|
|
|
2024-06-20 07:27:59 +00:00
|
|
|
import { GithubRepo } from '../../types/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,
|
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()}`;
|
2024-06-20 07:27:59 +00:00
|
|
|
const repository: Ref<GithubRepo | null> = 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 13:57:45 +00:00
|
|
|
padding: 2rem;
|
2023-05-08 01:35:28 +00:00
|
|
|
background-color: @nord4;
|
2023-05-08 13:57:45 +00:00
|
|
|
align-self: auto;
|
|
|
|
h3,
|
|
|
|
h3:first-child {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
2023-05-08 01:35:28 +00:00
|
|
|
|
|
|
|
html.dark & {
|
|
|
|
background-color: @nord3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info {
|
|
|
|
max-width: 30rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stats {
|
|
|
|
width: 4rem;
|
2023-05-08 13:57:45 +00:00
|
|
|
|
|
|
|
div {
|
|
|
|
.flex-row();
|
|
|
|
gap: 0.3rem;
|
|
|
|
}
|
2023-05-08 01:35:28 +00:00
|
|
|
}
|
2024-06-20 07:27:59 +00:00
|
|
|
|
|
|
|
.link {
|
|
|
|
a {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
2023-05-04 22:40:46 +00:00
|
|
|
}
|
|
|
|
</style>
|