Compare commits
2 Commits
8cbd1dbf07
...
fea30d5bea
Author | SHA1 | Date |
---|---|---|
Lucien Cartier-Tilet | fea30d5bea | |
Lucien Cartier-Tilet | de2f11f8fe |
|
@ -3,6 +3,7 @@ import ResponsiveImage from './components/ResponsiveImage.vue';
|
|||
import ListRepositories from './components/GitRepos/ListRepositories.vue';
|
||||
import GithubRepository from './components/GitRepos/GithubRepository.vue';
|
||||
import ApiLoader from './components/ApiLoader.vue';
|
||||
import Loader from './components/Loader.vue';
|
||||
import Cache from './components/Cache.vue';
|
||||
|
||||
export default defineClientConfig({
|
||||
|
@ -11,6 +12,7 @@ export default defineClientConfig({
|
|||
app.component('ListRepositories', ListRepositories);
|
||||
app.component('GithubRepository', GithubRepository);
|
||||
app.component('ApiLoader', ApiLoader);
|
||||
app.component('Loader', Loader);
|
||||
app.component('Cache', Cache);
|
||||
},
|
||||
setup() {},
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<Cache name="repos" :callback="fetchData" @cached="processCachedData" />
|
||||
<slot v-if="loading" name="loader"></slot>
|
||||
<slot v-if="loading" name="loader">
|
||||
<Loader />
|
||||
</slot>
|
||||
<slot v-else-if="error" name="error"></slot>
|
||||
<slot v-else>
|
||||
{{ error }}
|
||||
|
@ -9,6 +11,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import Cache from './Cache.vue';
|
||||
import Loader from './Loader.vue';
|
||||
|
||||
import { Ref, ref } from 'vue';
|
||||
import { Observable, catchError, switchMap, throwError } from 'rxjs';
|
||||
|
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div class="githubRepo flex-col rounded-corners">
|
||||
<h4>{{ props.repo.name }}</h4>
|
||||
<div class="flex-row space-between">
|
||||
<p>{{ props.repo.description }}</p>
|
||||
<div class="gap-1rem flex-end">
|
||||
<p>Stars: {{ repo.stargazers_count }}</p>
|
||||
<p>Forks: {{ repo.forks_count }}</p>
|
||||
<div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
|
||||
<div class="flex-col info">
|
||||
<h3>{{ props.repo.name }}</h3>
|
||||
<div>
|
||||
<p>
|
||||
{{ props.repo.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col flex-start gap-1rem stats">
|
||||
<p>Stars: {{ repo.stargazers_count }}</p>
|
||||
<p>Forks: {{ repo.forks_count }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -24,8 +28,20 @@ const props = defineProps({
|
|||
@import '../../styles/classes.less';
|
||||
|
||||
.githubRepo {
|
||||
max-width: 35rem;
|
||||
width: 35rem;
|
||||
padding: 3rem;
|
||||
background-color: @nord3;
|
||||
background-color: @nord4;
|
||||
|
||||
html.dark & {
|
||||
background-color: @nord3;
|
||||
}
|
||||
|
||||
.info {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<ApiLoader :url="fetchUrl" @dataLoaded="filterRepos">
|
||||
<GithubRepository :repo="repo" type="repositories" v-for="repo in repos" />
|
||||
<div class="flex-col gap-1rem list-repos">
|
||||
<GithubRepository
|
||||
:repo="repo"
|
||||
type="repositories"
|
||||
v-for="repo in repos"
|
||||
class="center"
|
||||
/>
|
||||
</div>
|
||||
</ApiLoader>
|
||||
</template>
|
||||
|
||||
|
@ -47,4 +54,10 @@ const filterRepos = (response: GithubRepo[]) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
<style lang="less">
|
||||
@import '../../styles/classes.less';
|
||||
|
||||
.list-repos {
|
||||
margin: 2rem auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<svg
|
||||
class="circle-loader"
|
||||
width="40"
|
||||
height="40"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="20" cy="20" r="15" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import 'node_modules/nord/src/lesscss/nord.less';
|
||||
|
||||
.circle-loader {
|
||||
margin-left: 48%;
|
||||
fill: transparent;
|
||||
stroke: @nord7;
|
||||
stroke-width: 5;
|
||||
animation: dash 1.5s ease infinite, rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 95;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 85, 95;
|
||||
stroke-dashoffset: -25;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 85, 95;
|
||||
stroke-dashoffset: -90;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -18,15 +18,26 @@ each(range(5), {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
@flex-justifications: flex-start, flex-end, center, space-between, space-around,
|
||||
space-evenly;
|
||||
each(@flex-justifications, {
|
||||
@flex-justifications-prefixed: flex-start, flex-end;
|
||||
each(@flex-justifications-prefixed, {
|
||||
.@{value} {
|
||||
.flex();
|
||||
justify-content: @value;
|
||||
}
|
||||
});
|
||||
|
||||
@flex-justifications: center, space-between, space-around, space-evenly;
|
||||
each(@flex-justifications, {
|
||||
.flex-@{value} {
|
||||
.flex();
|
||||
justify-content: @value;
|
||||
}
|
||||
});
|
||||
|
||||
.rounded-corners {
|
||||
border-radius: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue