✨ Adds GitHub profile stats widget

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>

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,