feature: url usage (vn7n24fzkq#40)

* Try vercel * Fix require path * Test profile card * fix: default theme name * Test profile api * Add console.log for debug * Add all cards api * Update header * Test header works * Test content-type header * Update header & theme api * Update header for vercel cache * Add demo page * Add cros header * Update vercel.json * Add demo page Co-authored-by: profile-summary-cards[bot] <[email protected]>
d12frosted · Apr 6, 2021 · 80e0c22 · 80e0c22
1 parent cff8083
commit 80e0c22
Show file tree

Hide file tree

Showing 15 changed files with 467 additions and 71 deletions.
diff --git a/api/cards/most-commit-language.js b/api/cards/most-commit-language.js
@@ -0,0 +1,10 @@
+const {
+    getCommitsLanguageSVGWithThemeName,
+} = require('../../src/cards/most-commit-lauguage-card');
+
+module.exports = async (req, res) => {
+    const { username, theme } = req.query;
+    const cardSVG = await getCommitsLanguageSVGWithThemeName(username, theme);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(cardSVG);
+};
diff --git a/api/cards/productive-time.js b/api/cards/productive-time.js
@@ -0,0 +1,10 @@
+const {
+    getProductiveTimeSVGWithThemeName,
+} = require('../../src/cards/productive-time-card');
+
+module.exports = async (req, res) => {
+    const { username, theme } = req.query;
+    const cardSVG = await getProductiveTimeSVGWithThemeName(username, theme);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(cardSVG);
+};
diff --git a/api/cards/profile-details.js b/api/cards/profile-details.js
@@ -0,0 +1,10 @@
+const {
+    getProfileDetailsSVGWithThemeName,
+} = require('../../src/cards/profile-details-card');
+
+module.exports = async (req, res) => {
+    const { username, theme } = req.query;
+    const cardSVG = await getProfileDetailsSVGWithThemeName(username, theme);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(cardSVG);
+};
diff --git a/api/cards/repos-per-language.js b/api/cards/repos-per-language.js
@@ -0,0 +1,10 @@
+const {
+    getReposPerLanguageSVGWithThemeName,
+} = require('../../src/cards/repos-per-language-card');
+
+module.exports = async (req, res) => {
+    const { username, theme } = req.query;
+    const cardSVG = await getReposPerLanguageSVGWithThemeName(username, theme);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(cardSVG);
+};
diff --git a/api/cards/stats.js b/api/cards/stats.js
@@ -0,0 +1,8 @@
+const { getStatsSVGWithThemeName } = require('../../src/cards/stats-card');
+
+module.exports = async (req, res) => {
+    const { username, theme } = req.query;
+    const cardSVG = await getStatsSVGWithThemeName(username, theme);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(cardSVG);
+};
diff --git a/api/pages/demo.html b/api/pages/demo.html
@@ -0,0 +1,198 @@
+
+
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>GitHub Profile Summary Cards</title>
+      <link
+         href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+         rel="stylesheet"
+         />
+      <link
+         href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
+         rel="stylesheet"
+         />
+      <link
+         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
+         rel="stylesheet"
+         />
+      <meta
+         charset="UTF-8"
+         name="viewport"
+         content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+         />
+   </head>
+   <body>
+      <a href="https://github.com/vn7n24fzkq/github-profile-summary-cards" class="github-corner" aria-label="View source on GitHub">
+         <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+         </svg>
+      </a>
+      <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+      <div id="app">
+         <v-app>
+            <v-main>
+               <v-container>
+                  <v-row>
+                  <v-col cols="3">
+                     <v-card width="800">
+                        <v-col md="auto">
+                           <v-switch
+                              v-model="$vuetify.theme.dark"
+                              inset
+                              label="Web Theme Switch"
+                              persistent-hint
+                              ></v-switch>
+                           <v-text-field
+                              v-model="username"
+                              value="Your username"
+                              label="username"
+                              outlined
+                              ></v-text-field>
+                           <v-select
+                              :items="themes"
+                              v-model="theme"
+                              @change="selectTheme"
+                              label="theme"
+                              hint="Select theme"
+                              outlined
+                              ></v-select>
+                           <v-btn
+                              width="100%"
+                              color="green"
+                              @click="submit"
+                              >
+                              Submit 
+                           </v-btn>
+                        </v-col>
+                     </v-card>
+                  </v-col>
+                  <v-col cols="8" >
+                     <v-card >
+                        <v-row justify="center" no-gutters>
+                           <v-col cols="10">
+                              <v-card outlined >
+                                 <v-img
+                                    :src="profileDetailSource"
+                                    ></v-img>
+                                 <v-card-text class="text--primary">
+                                    <div>Markdown Usage</div>
+                                    <code>
+                                    ![]({{profileDetailSource}})
+                                    </code>
+                                 </v-card-text>
+                              </v-card>
+                           </v-col>
+                        </v-row>
+                        <v-row justify="center" no-gutters>
+                           <v-col cols="5">
+                              <v-card outlined>
+                                 <v-img
+                                    :src="repoLanguageSource"
+                                    ></v-img>
+                                 <v-card-text class="text--primary">
+                                    <div>Markdown Usage</div>
+                                    <code>
+                                    ![]({{repoLanguageSource}})
+                                    </code>
+                                 </v-card-text>
+                              </v-card>
+                           </v-col>
+                           <v-col cols="5">
+                              <v-card outlined>
+                                 <v-img
+                                    :src="commitLanguageSource"
+                                    ></v-img>
+                                 <v-card-text class="text--primary">
+                                    <div>Markdown Usage</div>
+                                    <code>
+                                    ![]({{commitLanguageSource}})
+                                    </code>
+                                 </v-card-text>
+                              </v-card>
+                           </v-col>
+                        </v-row>
+                        <v-row  justify="center" no-gutters>
+                           <v-col cols="5">
+                              <v-card outlined>
+                                 <v-img
+                                    :src="statsSource"
+                                    ></v-img>
+                                 <v-card-text class="text--primary">
+                                    <div>Markdown Usage</div>
+                                    <code>
+                                    ![]({{statsSource}})
+                                    </code>
+                                 </v-card-text>
+                              </v-card>
+                           </v-col>
+                           <v-col cols="5">
+                              <v-card outlined >
+                                 <v-img
+                                    :src="productiveTimeSource"
+                                    ></v-img>
+                                 <v-card-text class="text--primary">
+                                    <div>Markdown Usage</div>
+                                    <code>
+                                    ![]({{productiveTimeSource}})
+                                    </code>
+                                 </v-card-text>
+                              </v-card>
+                           </v-col>
+                        </v-row>
+                  </v-col>
+                  </v-card>
+                  <v-row>
+               </v-container>
+            </v-main>
+         </v-app>
+      </div>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+      <script>
+         new Vue({
+             el: '#app',
+             vuetify: new Vuetify(),
+             data: {
+                 themes:['default'],
+                 username:'vn7n24fzkq',
+                 theme:'default',
+                 profileDetailSource:'',
+                 repoLanguageSource:'',
+                 commitLanguageSource:'',
+                 statsSource:'',
+                 productiveTimeSource:'',
+                 baseURL:'https://github-profile-summary-cards.vercel.app',
+             },
+             created(){
+                 axios
+                       .get('https://github-profile-summary-cards.vercel.app/api/theme')
+                       .then(response => {
+                           this.themes = response.data.themes
+                           this.updateAllCards();
+                       })
+             },
+             methods: {
+                 submit: function () {
+                     this.updateAllCards()
+                 },
+                 selectTheme: function (theme) {
+                     this.theme = theme
+                 },
+                 updateAllCards: function(){
+                     this.profileDetailSource=`${this.baseURL}/api/cards/profile-details?username=${this.username}&theme=${this.theme}`;
+                     this.repoLanguageSource=`${this.baseURL}/api/cards/repos-per-language?username=${this.username}&theme=${this.theme}`;
+                     this.commitLanguageSource=`${this.baseURL}/api/cards/most-commit-language?username=${this.username}&theme=${this.theme}`;
+                     this.statsSource=`${this.baseURL}/api/cards/stats?username=${this.username}&theme=${this.theme}`;
+                     this.productiveTimeSource=`${this.baseURL}/api/cards/productive-time?username=${this.username}&theme=${this.theme}`;
+                 }
+             }
+         });
+      </script>
+   </body>
+</html>
+
+
diff --git a/api/theme.js b/api/theme.js
@@ -0,0 +1,6 @@
+const ThemeMap = require('../src/const/theme');
+
+module.exports = async (req, res) => {
+    const themes = Array.from(ThemeMap.keys());
+    res.send({ themes: themes });
+};
diff --git a/src/app.js b/src/app.js
@@ -1,9 +1,13 @@
 const core = require('@actions/core');
-const createProfileDetailsCard = require('./cards/profile-details-card');
-const createReposPerLanguageCard = require('./cards/repos-per-language-card');
-const createCommitsPerLanguageCard = require('./cards/most-commit-lauguage-card');
-const createStatsCard = require('./cards/stats-card');
-const createProductiveTimeCard = require('./cards/productive-time-card');
+const { createProfileDetailsCard } = require('./cards/profile-details-card');
+const {
+    createReposPerLanguageCard,
+} = require('./cards/repos-per-language-card');
+const {
+    createCommitsPerLanguageCard,
+} = require('./cards/most-commit-lauguage-card');
+const { createStatsCard } = require('./cards/stats-card');
+const { createProductiveTimeCard } = require('./cards/productive-time-card');
 const { spawn } = require('child_process');
 const { outputPath, generatePreviewMarkdown } = require('./utils/file-writer');
 

diff --git a/src/cards/most-commit-lauguage-card.js b/src/cards/most-commit-lauguage-card.js
@@ -5,6 +5,33 @@ const getProfileDetails = require('../github-api/profile-details');
 const { writeSVG } = require('../utils/file-writer');
 
 const createCommitsPerLanguageCard = async function (username) {
+    const statsData = await getCommitsLanguageData(username);
+    for (const themeName of ThemeMap.keys()) {
+        const svgString = getCommitsLanguageSVG(statsData, themeName);
+        // output to folder, use 2- prefix for sort in preview
+        writeSVG(themeName, '2-most-commit-language', svgString);
+    }
+};
+
+const getCommitsLanguageSVGWithThemeName = async function (
+    username,
+    themeName
+) {
+    if (!ThemeMap.has(themeName)) throw new Error('Theme does not exist');
+    const langData = await getCommitsLanguageData(username);
+    return getCommitsLanguageSVG(langData, themeName);
+};
+
+const getCommitsLanguageSVG = function (langData, themeName) {
+    const svgString = createDonutChartCard(
+        'Top Languages by Commit',
+        langData,
+        ThemeMap.get(themeName)
+    );
+    return svgString;
+};
+
+const getCommitsLanguageData = async function (username) {
     const userDetails = await getProfileDetails(username);
     const langMap = new Map();
     for (const year of userDetails.contributionYears) {
@@ -36,15 +63,10 @@ const createCommitsPerLanguageCard = async function (username) {
     });
     langData = langData.slice(0, 5); // get top 5
 
-    for (const themeEntry of ThemeMap.entries()) {
-        const svgString = createDonutChartCard(
-            'Top Languages by Commit',
-            langData,
-            themeEntry[1]
-        );
-        // output to folder, use 2- prefix for sort in preview
-        writeSVG(themeEntry[0], '2-most-commit-language', svgString);
-    }
+    return langData;
 };
 
-module.exports = createCommitsPerLanguageCard;
+module.exports = {
+    createCommitsPerLanguageCard,
+    getCommitsLanguageSVGWithThemeName,
+};
diff --git a/src/cards/productive-time-card.js b/src/cards/productive-time-card.js
@@ -5,6 +5,29 @@ const productiveTimeCard = require('../templates/productive-time-card');
 const { writeSVG } = require('../utils/file-writer');
 
 const createProductiveTimeCard = async function (username) {
+    const productiveTimeData = await getProductiveTimeData(username);
+    for (const themeName of ThemeMap.keys()) {
+        const svgString = getProductiveTimeSVG(productiveTimeData, themeName);
+        // output to folder, use 4- prefix for sort in preview
+        writeSVG(themeName, '4-productive-time', svgString);
+    }
+};
+
+const getProductiveTimeSVGWithThemeName = async function (username, themeName) {
+    if (!ThemeMap.has(themeName)) throw new Error('Theme does not exist');
+    const productiveTimeData = await getProductiveTimeData(username);
+    return getProductiveTimeSVG(productiveTimeData, themeName);
+};
+
+const getProductiveTimeSVG = function (productiveTimeData, themeName) {
+    const svgString = productiveTimeCard(
+        productiveTimeData,
+        ThemeMap.get(themeName)
+    );
+    return svgString;
+};
+
+const getProductiveTimeData = async function (username) {
     const userId = (await getProfileDetails(username))['id'];
     const until = new Date(); // get data until now
     const productiveTime = await getProductiveTime(
@@ -20,11 +43,10 @@ const createProductiveTimeCard = async function (username) {
         chartData[hour] += 1;
     }
 
-    for (const themeEntry of ThemeMap.entries()) {
-        const svgString = productiveTimeCard(chartData, themeEntry[1]);
-        // output to folder, use 4- prefix for sort in preview
-        writeSVG(themeEntry[0], '4-productive-time', svgString);
-    }
+    return chartData;
 };
 
-module.exports = createProductiveTimeCard;
+module.exports = {
+    createProductiveTimeCard,
+    getProductiveTimeSVGWithThemeName,
+};