mirror of https://github.com/Lissy93/dashy.git
✨ Adds widget to show trending GitHub repos
This commit is contained in:
Alicia Sykes
parent
24cf0d1e0d
commit
7084ca12d0
|
|
@ -18,7 +18,8 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
|||
- [Stock Price History](#stock-price-history)
|
||||
- [Joke of the Day](#joke)
|
||||
- [Flight Data](#flight-data)
|
||||
- [GitHub Profile Stats](#gitHub-profile-stats)
|
||||
- [GitHub Trending](#github-trending)
|
||||
- [GitHub Profile Stats](#github-profile-stats)
|
||||
- [Public IP Address](#public-ip)
|
||||
- [Self-Hosted Services Widgets](#dynamic-widgets)
|
||||
- [System Info](#system-info)
|
||||
|
|
@ -432,6 +433,31 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
|
|||
|
||||
---
|
||||
|
||||
### GitHub Trending
|
||||
|
||||
Displays currently trending projects on GitHub. Optionally specify a language and time-frame. Data is fetched from [Lissy93/gh-trending-no-cors](https://github.com/Lissy93/gh-trending-no-cors) using the GitHub API.
|
||||
|
||||
<p align="center"><img width="380" src="https://i.ibb.co/BGy7Q3g/github-trending.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`lang`** | `string` | _Optional_ | A programming language to fetch trending repos from that category. E.g. `javascript` or `go`
|
||||
**`since`** | `string` | _Optional_ | The timeframe to use when calculating trends. Can be either `daily`, `weekly` or `monthly`. Defaults to `daily`
|
||||
**`limit`** | `number` | _Optional_ | Optionally limit the number of results. Max `25`, default is `10`
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: github-trending-repos
|
||||
options:
|
||||
limit: 8
|
||||
since: weekly
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### GitHub Profile Stats
|
||||
|
||||
Display stats from your GitHub profile, using embedded cards from [anuraghazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
|
@ -444,7 +470,7 @@ Display stats from your GitHub profile, using embedded cards from [anuraghazra/g
|
|||
--- | --- | --- | ---
|
||||
**`username`** | `string` | Required | The GitHub username to fetch info for. E.g. `lissy93`. (Not required if `hideProfileCard` and `hideLanguagesCard` are both set to `true`)
|
||||
**`hideProfileCard`** | `boolean` | _Optional_ | If set to `true`, the users profile card will not be shown. Defaults to `false`
|
||||
**`hideProfileCard`** | `boolean` | _Optional_ | If set to `true`, the users top languages card will not be shown. Defaults to `false`
|
||||
**`hideLanguagesCard`** | `boolean` | _Optional_ | If set to `true`, the users top languages card will not be shown. Defaults to `false`
|
||||
**`repos`** | `array` | _Optional_ | If you'd like to also display stats for some GitHub reposotories, then add an array or repo names here. Specified as `[username]/[repo-name]`, e.g. `lissy93/dashy`
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div class="trending-repos-wrapper" v-if="trendingRepos">
|
||||
<div v-for="repo in trendingRepos" :key="repo.idx" class="repo-row">
|
||||
<img class="repo-img" v-if="repo.avatar" :src="repo.avatar" />
|
||||
<div class="repo-info">
|
||||
<p class="repo-name">{{ repo.name }}</p>
|
||||
<div class="star-wrap">
|
||||
<p class="all-stars" v-if="repo.stars">{{ repo.stars | formatStars }}</p>
|
||||
<p class="new-stars" v-if="repo.newStars">↑{{ repo.newStars | formatStars }}</p>
|
||||
</div>
|
||||
<a class="repo-link" :href="repo.link">{{ repo.slug }}</a>
|
||||
<p class="repo-desc">{{ repo.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import { widgetApiEndpoints } from '@/utils/defaults';
|
||||
import { capitalize, showNumAsThousand } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
data() {
|
||||
return {
|
||||
trendingRepos: null,
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
formatStars(starCount) {
|
||||
if (!starCount) return null;
|
||||
const numericCount = typeof starCount === 'string'
|
||||
? parseInt(starCount.replaceAll(',', ''), 10) : starCount;
|
||||
return `${showNumAsThousand(numericCount) || starCount} ★`;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
since() {
|
||||
const usersChoice = this.options.since;
|
||||
const options = ['daily', 'weekly', 'monthly'];
|
||||
if (usersChoice && options.includes(usersChoice)) return usersChoice;
|
||||
return options[0];
|
||||
},
|
||||
lang() {
|
||||
return this.options.lang || '';
|
||||
},
|
||||
limit() {
|
||||
return this.options.limit || 10;
|
||||
},
|
||||
endpoint() {
|
||||
return `${widgetApiEndpoints.githubTrending}repo?since=${this.since}&lang=${this.lang}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
axios.get(this.endpoint)
|
||||
.then((response) => {
|
||||
if (response.data.items) {
|
||||
this.processData(response.data.items);
|
||||
}
|
||||
})
|
||||
.catch((dataFetchError) => {
|
||||
this.error('Unable to fetch data', dataFetchError);
|
||||
})
|
||||
.finally(() => {
|
||||
this.finishLoading();
|
||||
});
|
||||
},
|
||||
processData(repos) {
|
||||
const mkeName = (r) => capitalize(r.split('/')[1].replaceAll('-', ' ').replaceAll('_', ' '));
|
||||
let results = [];
|
||||
repos.forEach((repo) => {
|
||||
results.push({
|
||||
name: mkeName(repo.repo),
|
||||
slug: repo.repo,
|
||||
desc: repo.desc,
|
||||
lang: repo.lang,
|
||||
link: repo.repo_link,
|
||||
stars: repo.stars,
|
||||
forks: repo.forks,
|
||||
newStars: parseInt(repo.added_stars, 10),
|
||||
avatar: repo.avatars[0] || 'https://github.com/fluidicon.png',
|
||||
});
|
||||
});
|
||||
if (this.limit && this.limit < results.length) {
|
||||
results = results.slice(0, this.limit);
|
||||
}
|
||||
this.trendingRepos = results;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.trending-repos-wrapper {
|
||||
.repo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
cursor: default;
|
||||
img.repo-img {
|
||||
width: 2.5rem;
|
||||
border-radius: var(--curve-factor-small);
|
||||
}
|
||||
.repo-info {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
padding-left: 0.5rem;
|
||||
p.repo-name {
|
||||
margin: 0.1rem 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: var(--widget-text-color);
|
||||
}
|
||||
a.repo-link {
|
||||
margin: 0.1rem 0;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: underline;
|
||||
color: var(--widget-text-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
p.repo-desc {
|
||||
grid-column-start: span 2;
|
||||
margin: 0.1rem 0 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--widget-text-color);
|
||||
}
|
||||
.star-wrap {
|
||||
grid-row-start: span 2;
|
||||
min-width: 3rem;
|
||||
text-align: right;
|
||||
p {
|
||||
font-family: var(--font-monospace);
|
||||
margin: 0;
|
||||
&.all-stars {
|
||||
color: var(--widget-text-color);
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.new-stars {
|
||||
font-size: 0.8rem;
|
||||
color: var(--success);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.repo-stats {}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -67,6 +67,13 @@
|
|||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<GitHubTrending
|
||||
v-else-if="widgetType === 'github-trending-repos'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<GitHubProfile
|
||||
v-else-if="widgetType === 'github-profile-stats'"
|
||||
:options="widgetOptions"
|
||||
|
|
@ -194,6 +201,7 @@ import CodeStats from '@/components/Widgets/CodeStats.vue';
|
|||
import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
|
||||
import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
|
||||
import Flights from '@/components/Widgets/Flights.vue';
|
||||
import GitHubTrending from '@/components/Widgets/GitHubTrending.vue';
|
||||
import GitHubProfile from '@/components/Widgets/GitHubProfile.vue';
|
||||
import IframeWidget from '@/components/Widgets/IframeWidget.vue';
|
||||
import Jokes from '@/components/Widgets/Jokes.vue';
|
||||
|
|
@ -226,6 +234,7 @@ export default {
|
|||
EmbedWidget,
|
||||
ExchangeRates,
|
||||
Flights,
|
||||
GitHubTrending,
|
||||
GitHubProfile,
|
||||
IframeWidget,
|
||||
Jokes,
|
||||
|
|
|
|||
|
|
@ -221,6 +221,7 @@ module.exports = {
|
|||
holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
|
||||
publicIp: 'http://ip-api.com/json',
|
||||
readMeStats: 'https://github-readme-stats.vercel.app/api',
|
||||
githubTrending: 'https://gh-trending-repos.herokuapp.com/',
|
||||
},
|
||||
/* URLs for web search engines */
|
||||
searchEngineUrls: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue