✨ Adds widget to show trending GitHub repos

docs/widgets.md

@@ -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`
 
 

src/components/Widgets/GitHubTrending.vue

@@ -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>

src/components/Widgets/WidgetBase.vue

@@ -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,

src/utils/defaults.js

@@ -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: {