Develop

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview --host"
+    "preview": "vite preview --host",
+    "mocker": "node ./src/api/mocker.mjs"
   },
   "author": "Evren Ceyhan",
   "license": "MIT",
@@ -27,6 +28,7 @@
     "@vitejs/plugin-vue": "^2.3.4",
     "autoprefixer": "^10.4.14",
     "daisyui": "^3.5.1",
+    "dotenv": "^16.3.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "vite": "^2.9.16"

src/api/github.js

@@ -7,50 +7,68 @@ const API_URL = 'https://api.github.com';
 const API_USER_ID = import.meta.env.VITE_USER_GITHUB;
 const API_USER_URL = `${API_URL}/users/${API_USER_ID}`;
 
-// helpers
-const fetchFile = async (path) => fetchJson(new URL(path, import.meta.url));
+// RESOURCES ///////////////////////////////////////////////////////////////////////////////////////
 
-const normalizeRepoLanguages = (languages) => {
-    // summarize total lines of languages in single repo
-    const lineSum = Object.values(languages).reduce((sum, v) => sum + v, 0);
+export async function getProfile() {
+    return IS_DEV
+        ? await fetchFile('mocks/profile.json')
+        : await fetchJson(API_USER_URL);
+}
 
-    return Object.entries(languages).map(([name, lines]) => ({
-        name,
-        lines,
-        color: LANGUAGES[name]?.color,
-        rate: (lines / lineSum) * 100,
-    }));
-};
-
-export const getProfile = () =>
-    IS_DEV ? fetchFile('profile.json') : fetchJson(API_USER_URL);
-
-export const getRepositories = async (query = { sort: 'updated' }) => {
+export async function getRepositories(query = { sort: 'updated' }) {
     // purge cache if modified since last cached request
     // purgeCacheIfModified(`${API_USER_URL}/repos`);
 
     // fetch data or use mock in DEV
     const repos = IS_DEV
-        ? await fetchFile('repos.json')
+        ? await fetchFile('mocks/repos.json')
         : await fetchJson(`${API_USER_URL}/repos`, query);
 
     // fetch languages per repository
     const reposWithLanguages = repos.map(async (repo) => {
-        // define default language as fallback
-        let languages = { [repo.language]: 1 };
+        let languages;
 
         try {
-            languages = IS_DEV
-                ? repo.languages // use as-is in DEV
-                : await fetchJson(repo.languages_url);
-        } catch (e) {}
+            // try fetching languages per repository
+            languages = await getRepoLanguages(repo.name);
+        } catch (e) {
+            // use default language as fallback if failed
+            languages = normalizeRepoLanguages({ [repo.language]: 1 });
+        }
 
         // normalize languages per repository
-        return { ...repo, languages: normalizeRepoLanguages(languages) };
+        return { ...repo, languages };
     });
 
     // return all promises as one
     return Promise.all(reposWithLanguages);
+}
+
+export async function getRepoLanguages(repo) {
+    const languages = IS_DEV
+        ? await fetchFile(`mocks/${repo}-languages.json`)
+        : await fetchJson(`${API_USER_URL}/${repo}/languages`);
+
+    return normalizeRepoLanguages(languages);
+}
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+const fetchFile = async (path) => {
+    const url = new URL(path, import.meta.url);
+    return (await fetch(url)).json();
+};
+
+const normalizeRepoLanguages = (languages) => {
+    // summarize total lines of languages in single repo
+    const lineSum = Object.values(languages).reduce((sum, v) => sum + v, 0);
+
+    return Object.entries(languages).map(([name, lines]) => ({
+        name,
+        lines,
+        color: LANGUAGES[name]?.color,
+        rate: ((lines / lineSum) * 100).toFixed(1),
+    }));
 };
 
 // export const purgeCacheIfModified = async (url) => {

src/api/mocker.mjs

@@ -0,0 +1,62 @@
+/**
+ * This is a server side script to generate mock data, it's not part of the app,
+ * It's only used to generate mock data for the DEV environment!
+ */
+
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import dotenv from 'dotenv';
+
+// load env vars
+dotenv.config();
+
+// __dirname is not available in ES6 modules
+// https://stackoverflow.com/questions/46745014/using-dirname-in-es6-modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const MOCKS_DIR = __dirname + '/mocks';
+
+// define vars
+const API_URL = 'https://api.github.com';
+const API_USER_ID = process.env.VITE_USER_GITHUB;
+const API_USER_URL = `${API_URL}/users/${API_USER_ID}`;
+
+const readMockFile = (name) => {
+    const filename = `${MOCKS_DIR}/${name}.json`;
+    const jsonData = fs.readFileSync(filename);
+    return JSON.parse(jsonData);
+};
+
+const writeMockFile = (name, data) => {
+    const filename = `${MOCKS_DIR}/${name}.json`;
+    const jsonData = JSON.stringify(data, null, 2);
+    fs.writeFileSync(filename, jsonData);
+};
+
+const generateProfile = async () => {
+    const response = await fetch(API_USER_URL);
+    const data = await response.json();
+    writeMockFile('profile', data);
+};
+
+const generateRepos = async () => {
+    const response = await fetch(`${API_USER_URL}/repos?sort=updated`);
+    const data = await response.json();
+    writeMockFile('repos', data);
+};
+
+const generateLanguages = async () => {
+    const repos = readMockFile('repos');
+
+    repos.forEach(async ({ name, languages_url }) => {
+        const response = await fetch(languages_url);
+        const languages = await response.json();
+        writeMockFile(`${name}-languages`, languages);
+    });
+};
+
+// generate mock data
+await generateProfile();
+await generateRepos();
+await generateLanguages();

src/api/mocks/amazon-scraper-api-languages.json

@@ -0,0 +1,3 @@
+{
+  "JavaScript": 3106
+}

src/api/mocks/blog-challenge-languages.json

@@ -0,0 +1,5 @@
+{
+  "PHP": 19143,
+  "HTML": 12378,
+  "Hack": 321
+}

src/api/mocks/bootstrap-breeze-languages.json

@@ -0,0 +1,7 @@
+{
+  "Vue": 47227,
+  "PHP": 4894,
+  "JavaScript": 855,
+  "Blade": 474,
+  "CSS": 118
+}

src/api/mocks/bs-bootcamp-web-languages.json

@@ -0,0 +1,4 @@
+{
+  "HTML": 32616,
+  "CSS": 177
+}

src/api/mocks/bs-splendid-food-languages.json

@@ -0,0 +1,4 @@
+{
+  "HTML": 29547,
+  "SCSS": 14096
+}

src/api/mocks/devbox-lemp-languages.json

@@ -0,0 +1,4 @@
+{
+  "Shell": 10343,
+  "PHP": 16
+}

src/api/mocks/fixxo-app-languages.json

@@ -0,0 +1,8 @@
+{
+  "PHP": 237946,
+  "Vue": 194674,
+  "JavaScript": 12024,
+  "Blade": 700,
+  "CSS": 388,
+  "Procfile": 42
+}

src/api/mocks/gym-crm-languages.json

@@ -0,0 +1,4 @@
+{
+  "PHP": 79585,
+  "HTML": 2953
+}

src/api/mocks/laragym-languages.json

@@ -0,0 +1,7 @@
+{
+  "JavaScript": 230840,
+  "PHP": 209779,
+  "HTML": 5629,
+  "Dockerfile": 848,
+  "Shell": 322
+}

src/api/mocks/multiplay-ball-game-languages.json

@@ -0,0 +1,5 @@
+{
+  "TypeScript": 6559,
+  "HTML": 4580,
+  "JavaScript": 3134
+}

src/api/mocks/multiplay-snake-game-languages.json

@@ -0,0 +1,5 @@
+{
+  "JavaScript": 10103,
+  "Vue": 2523,
+  "HTML": 371
+}

src/api/mocks/networking-models-languages.json

@@ -0,0 +1,4 @@
+{
+  "JavaScript": 9357,
+  "Shell": 533
+}

src/api/mocks/next-cats-world-languages.json

@@ -0,0 +1,4 @@
+{
+  "JavaScript": 15574,
+  "CSS": 346
+}

src/api/mocks/next-meetups-languages.json

@@ -0,0 +1,5 @@
+{
+  "JavaScript": 19858,
+  "CSS": 390,
+  "Shell": 97
+}

src/api/mocks/next-real-estate-languages.json

@@ -0,0 +1,3 @@
+{
+  "JavaScript": 29655
+}

src/api/mocks/ng-comic-book-languages.json

@@ -0,0 +1,6 @@
+{
+  "TypeScript": 24408,
+  "HTML": 13172,
+  "JavaScript": 2238,
+  "CSS": 1330
+}

src/api/mocks/ng-heroes-app-languages.json

@@ -0,0 +1,6 @@
+{
+  "TypeScript": 21436,
+  "HTML": 5580,
+  "JavaScript": 2232,
+  "CSS": 322
+}

src/api/mocks/ng-organic-shop-languages.json

@@ -0,0 +1,6 @@
+{
+  "TypeScript": 50970,
+  "HTML": 22580,
+  "JavaScript": 1832,
+  "CSS": 760
+}

src/api/mocks/ng-weather-app-languages.json

@@ -0,0 +1,6 @@
+{
+  "HTML": 29042,
+  "TypeScript": 18705,
+  "JavaScript": 3802,
+  "CSS": 1096
+}

src/api/mocks/nuxt-resto-advisor-languages.json

@@ -0,0 +1,4 @@
+{
+  "Vue": 6028,
+  "TypeScript": 1412
+}

src/api/mocks/profile.json

@@ -0,0 +1,34 @@
+{
+  "login": "webceyhan",
+  "id": 3739981,
+  "node_id": "MDQ6VXNlcjM3Mzk5ODE=",
+  "avatar_url": "https://avatars.githubusercontent.com/u/3739981?v=4",
+  "gravatar_id": "",
+  "url": "https://api.github.com/users/webceyhan",
+  "html_url": "https://github.com/webceyhan",
+  "followers_url": "https://api.github.com/users/webceyhan/followers",
+  "following_url": "https://api.github.com/users/webceyhan/following{/other_user}",
+  "gists_url": "https://api.github.com/users/webceyhan/gists{/gist_id}",
+  "starred_url": "https://api.github.com/users/webceyhan/starred{/owner}{/repo}",
+  "subscriptions_url": "https://api.github.com/users/webceyhan/subscriptions",
+  "organizations_url": "https://api.github.com/users/webceyhan/orgs",
+  "repos_url": "https://api.github.com/users/webceyhan/repos",
+  "events_url": "https://api.github.com/users/webceyhan/events{/privacy}",
+  "received_events_url": "https://api.github.com/users/webceyhan/received_events",
+  "type": "User",
+  "site_admin": false,
+  "name": "Evren Ceyhan",
+  "company": "CEYHAN I/O",
+  "blog": "http://ceyhan.io",
+  "location": "Brussels",
+  "email": null,
+  "hireable": true,
+  "bio": "Full Stack Web Developer",
+  "twitter_username": "webceyhan",
+  "public_repos": 40,
+  "public_gists": 0,
+  "followers": 4,
+  "following": 5,
+  "created_at": "2013-03-01T16:12:23Z",
+  "updated_at": "2023-08-08T08:24:14Z"
+}

src/api/mocks/react-budget-tracker-languages.json

@@ -0,0 +1,5 @@
+{
+  "JavaScript": 22777,
+  "HTML": 1835,
+  "CSS": 200
+}

src/api/mocks/react-goggle-languages.json

@@ -0,0 +1,5 @@
+{
+  "JavaScript": 30002,
+  "HTML": 1718,
+  "CSS": 59
+}

src/api/mocks/react-meetups-languages.json

@@ -0,0 +1,5 @@
+{
+  "JavaScript": 14466,
+  "HTML": 403,
+  "CSS": 374
+}