phundrak/phundrak.com
1
0
Fork 0
Code Issues Pull Requests Actions Activity

feat: better repository card
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Lucien Cartier-Tilet 2023-05-08 15:57:45 +02:00
parent 1e738b51b7
commit 1885072da2
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
4 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/.vuepress/components/GitHub/FetchRepositories.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<ApiLoader :url="fetchUrl" @dataLoaded="filterRepos" cache-name="repos" /> <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos" cache-name="repos" />
<slot />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

33
content/.vuepress/components/GitHub/GithubRepository.vue
View File

@ -1,22 +1,18 @@
<template> <template>
<div <div class="githubRepo flex-col flex-space-between gap-1rem rounded-corners">
class="githubRepo flex-row flex-space-between gap-1rem rounded-corners center"
>
<ApiLoader <ApiLoader
:cache-name="repoName()" :cache-name="repoName()"
:url="fetchUrl" :url="fetchUrl"
:already-known-data="props.data" :already-known-data="props.data"
@data-loaded="(repo: GithubRepo) => (repository = repo)" @data-loaded="(repo: GithubRepo) => (repository = repo)"
> >
<div class="flex-col info"> <h3>{{ repository.name }}</h3>
<h3>{{ repository.name }}</h3> <div>
<div> <p>
<p> {{ repository.description }}
{{ repository.description }} </p>
</p>
</div>
</div> </div>
<div class="flex-col flex-start gap-1rem stats"> <div class="flex-row flex-start gap-1rem stats">
<div class="stars"> <div class="stars">
<Icon name="star" /> {{ repository.stargazers_count }} <Icon name="star" /> {{ repository.stargazers_count }}
</div> </div>
@ -55,9 +51,15 @@ const repository: Ref<GithubRepo> = ref(null);
@import '../../styles/classes.less'; @import '../../styles/classes.less';
.githubRepo { .githubRepo {
width: 35rem; max-width: 35rem;
padding: 3rem; padding: 2rem;
background-color: @nord4; background-color: @nord4;
align-self: auto;
h3,
h3:first-child {
margin: 0;
padding: 0;
}
html.dark & { html.dark & {
background-color: @nord3; background-color: @nord3;
@ -69,6 +71,11 @@ const repository: Ref<GithubRepo> = ref(null);
.stats { .stats {
width: 4rem; width: 4rem;
div {
.flex-row();
gap: 0.3rem;
}
} }
} }
</style> </style>

16
content/.vuepress/components/GitHub/ListRepositories.vue
View File

@ -1,15 +1,19 @@
<template> <template>
<div v-if="props.user !== ''" class="list-repos flex-col gap-1rem"> <div class="list-repos flex-col gap-1rem">
<FetchRepositories <FetchRepositories
v-if="props.user !== ''"
:sort-by="props.sortBy" :sort-by="props.sortBy"
:user="props.user" :user="props.user"
:limit="props.limit" :limit="props.limit"
@data-loaded="(response: GithubRepo[]) => (repos = response)" @data-loaded="(response: GithubRepo[]) => (repos = response)"
/> >
<GithubRepository :data="repo" type="repositories" v-for="repo in repos" /> <GithubRepository
</div> :data="repo"
<div v-else class="list-repos flex-col gap-1rem"> type="repositories"
<slot></slot> v-for="repo in repos"
/>
</FetchRepositories>
<slot v-else />
</div> </div>
</template> </template>

9
content/.vuepress/styles/classes.less
View File

@ -8,6 +8,15 @@ each(range(5), {
display: flex; display: flex;
} }
.flex-inline {
display: inline-flex;
}
.flex-inline-col {
.flex-inline();
flex-direction: column;
}
.flex-col { .flex-col {
.flex(); .flex();
flex-direction: column; flex-direction: column;