From 24cf0d1e0dc0bbcb97f2906f078f61a8979b129c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 17 Dec 2021 21:37:57 +0000
Subject: [PATCH] :sparkles: Adds GitHub profile stats widget

---
 docs/widgets.md                          | 33 +++++++++
 src/components/Widgets/GitHubProfile.vue | 89 ++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue    |  9 +++
 src/utils/defaults.js                    |  1 +
 4 files changed, 132 insertions(+)
 create mode 100644 src/components/Widgets/GitHubProfile.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index ded52484..dd117b5d 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -18,6 +18,7 @@ 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)
   - [Public IP Address](#public-ip)
 - [Self-Hosted Services Widgets](#dynamic-widgets)
   - [System Info](#system-info)
@@ -431,6 +432,38 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
 
 ---
 
+### GitHub Profile Stats
+
+Display stats from your GitHub profile, using embedded cards from [anuraghazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
+
+<p align="center"><img width="380" src="https://i.ibb.co/L0K1zNN/github-profile-stats.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`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`
+**`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`
+
+
+##### Example 
+
+
+```yaml
+- type: github-profile-stats
+  options:
+    username: Lissy93
+    hideLanguagesCard: true
+    repos:
+    - lissy93/dashy
+    - lissy93/personal-security-checklist
+    - lissy93/twitter-sentiment-visualisation
+```
+
+---
+
 ### Public IP
 
 Displays your public IP address, along with ISP name and approx location. Data is fetched from [IP-API.com](https://ip-api.com/).
diff --git a/src/components/Widgets/GitHubProfile.vue b/src/components/Widgets/GitHubProfile.vue
new file mode 100644
index 00000000..d45f5418
--- /dev/null
+++ b/src/components/Widgets/GitHubProfile.vue
@@ -0,0 +1,89 @@
+<template>
+<div class="readme-stats">
+  <img class="stats-card" v-if="!hideProfileCard" :src="profileCard" />
+  <img class="stats-card" v-if="!hideLanguagesCard" :src="topLanguagesCard" />
+  <template v-if="repos">
+    <img class="stats-card" v-for="(repo, index) in repoCards" :key="index" :src="repo" />
+  </template>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    hideProfileCard() {
+      return this.options.hideProfileCard;
+    },
+    hideLanguagesCard() {
+      return this.options.hideLanguagesCard;
+    },
+    username() {
+      const usersChoice = this.options.username;
+      if ((this.hideLanguagesCard || this.hideLanguagesCard) && !usersChoice) {
+        this.error('You must specify a GitHub username');
+      }
+      return usersChoice;
+    },
+    repos() {
+      const usersChoice = this.options.repos;
+      if (!usersChoice) return null;
+      if (typeof usersChoice === 'string') return [usersChoice];
+      if (Array.isArray(usersChoice)) return usersChoice;
+      this.error('Invalid format for repositories input');
+      return null;
+    },
+    colors() {
+      const cssVars = getComputedStyle(document.documentElement);
+      const getColor = (colorVar) => cssVars.getPropertyValue(`--${colorVar}`).trim().replace('#', '');
+      const primary = getColor('widget-text-color') || '7cd6fd';
+      const accent = getColor('widget-accent-color') || '7cd6fd';
+      const background = getColor('widget-background-color') || '7cd6fd';
+      const radius = getColor('curve-factor').replace('px', '') || '6';
+      const white = getColor('white') || 'fff';
+      return {
+        primary, accent, background, white, radius,
+      };
+    },
+    locale() {
+      if (this.options.lang) return this.options.lang;
+      return this.$store.getters.appConfig.lang || 'en';
+    },
+    cardConfig() {
+      const c = this.colors;
+      return `&title_color=${c.primary}&text_color=${c.white}&icon_color=${c.primary}`
+        + `&bg_color=${c.background}&border_radius=${c.radius}&locale=${this.locale}`
+        + '&count_private=true&show_icons=true&hide_border=true';
+    },
+    profileCard() {
+      return `${widgetApiEndpoints.readMeStats}?username=${this.username}${this.cardConfig}`;
+    },
+    topLanguagesCard() {
+      return `${widgetApiEndpoints.readMeStats}/top-langs/?username=${this.username}`
+      + `${this.cardConfig}&langs_count=12`;
+    },
+    repoCards() {
+      const cards = [];
+      this.repos.forEach((repo) => {
+        const username = repo.split('/')[0];
+        const repoName = repo.split('/')[1];
+        cards.push(`${widgetApiEndpoints.readMeStats}/pin/?username=${username}&repo=${repoName}`
+        + `${this.cardConfig}&show_owner=true`);
+      });
+      return cards;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.readme-stats {
+  img.stats-card {
+    width: 100%;
+  }
+}
+
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index f49bd345..ce9711f2 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -67,6 +67,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GitHubProfile
+        v-else-if="widgetType === 'github-profile-stats'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <IframeWidget
         v-else-if="widgetType === 'iframe'"
         :options="widgetOptions"
@@ -187,6 +194,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 GitHubProfile from '@/components/Widgets/GitHubProfile.vue';
 import IframeWidget from '@/components/Widgets/IframeWidget.vue';
 import Jokes from '@/components/Widgets/Jokes.vue';
 import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
@@ -218,6 +226,7 @@ export default {
     EmbedWidget,
     ExchangeRates,
     Flights,
+    GitHubProfile,
     IframeWidget,
     Jokes,
     NdCpuHistory,
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index e19738c8..c1d8a008 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -220,6 +220,7 @@ module.exports = {
     codeStats: 'https://codestats.net/',
     holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
     publicIp: 'http://ip-api.com/json',
+    readMeStats: 'https://github-readme-stats.vercel.app/api',
   },
   /* URLs for web search engines */
   searchEngineUrls: {