[Release] Add Fork Count

.eslintrc.js

@@ -8,13 +8,12 @@ module.exports = {
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-console": "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
 };

README.md

@@ -1,24 +1,5 @@
-# my-repos
+# My Repos
 
-## Project setup
-```
-yarn install
-```
+List all my repositories with brief information
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+**Note**: Legacy Code, This project was created long ago and I'm lazy to rebuild the code.

package.json

@@ -1,37 +1,42 @@
 {
   "name": "my-repos",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
+  "description": "Just A Web that Lists all my Repositories",
+  "repository": "https://github.com/Leomotors/my-repos",
+  "author": "Leomotors",
+  "license": "MIT",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap": "^5.1.1",
-    "core-js": "^3.17.3",
+    "bootstrap": "^5.1.3",
+    "core-js": "^3.21.1",
     "register-service-worker": "^1.7.2",
-    "vue": "^3.2.11",
+    "vue": "^3.2.31",
     "vue-class-component": "^8.0.0-rc.1"
   },
   "devDependencies": {
     "@octokit/types": "^6.34.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-plugin-pwa": "^4.5.13",
-    "@vue/cli-plugin-typescript": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.2.11",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^7.17.0",
-    "prettier": "^2.4.0",
-    "sass": "^1.40.0",
-    "sass-loader": "^10.1.1",
-    "typescript": "^4.4.3"
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "@vue/cli-plugin-babel": "^5.0.4",
+    "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-plugin-pwa": "^5.0.4",
+    "@vue/cli-plugin-typescript": "^5.0.4",
+    "@vue/cli-service": "^5.0.4",
+    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "browserslist": "^4.20.2",
+    "eslint": "^8.11.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "prettier": "^2.6.1",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
+    "typescript": "^4.6.3"
   }
-}
+}

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <h1 class="display-3 fw-bold mt-5 mb-lg-10">My Repositories</h1>
-  <UserCard class="mx-auto mt-5" :user="user_data" />
+  <UserCard class="mx-auto mt-5" :user="user_data" :fork_count="fork_count" />
   <hr class="mt-5 mb-4" />
   <div class="input-group btn-toolbar mx-auto mb-4 justify-content-center">
     <div class="input-group-text" id="btnGroupAddon">Sort By</div>
@@ -57,52 +57,48 @@ import { User, Repo } from "@/backend/types";
 const default_user = "Leomotors";
 
 // * Sort from most to least
-const cmp = (a: number | string, b: number | string) => {
+function cmp<T extends number | string>(a: T, b: T): number {
   if (a > b) return -1;
   else if (a < b) return 1;
   else return 0;
-};
+}
 
-const sortMethods = {
+type cmpFunc = (a: Repo, b: Repo) => number;
+type sortMethod = { name: string; func: cmpFunc };
+
+const sortMethods: { [type: string]: sortMethod } = {
   recent_updated: {
     name: "Last Pushed",
-    func: (a: Repo, b: Repo): number => cmp(a.pushed_at ?? 0, b.pushed_at ?? 0),
+    func: (a, b) => cmp(a.pushed_at ?? 0, b.pushed_at ?? 0),
   },
   recent_created: {
     name: "Last Created",
-    func: (a: Repo, b: Repo): number =>
-      cmp(a.created_at ?? 0, b.created_at ?? 0),
+    func: (a, b) => cmp(a.created_at ?? 0, b.created_at ?? 0),
   },
   most_stars: {
     name: "Most Stars",
-    func: (a: Repo, b: Repo): number =>
-      cmp(a.stargazers_count ?? 0, b.stargazers_count ?? 0),
+    func: (a, b) => cmp(a.stargazers_count ?? 0, b.stargazers_count ?? 0),
   },
   name: {
     name: "Repo Name",
-    func: (a: Repo, b: Repo): number =>
-      cmp(b.name.toLowerCase(), a.name.toLowerCase()),
+    func: (a, b) => cmp(b.name.toLowerCase(), a.name.toLowerCase()),
   },
   language: {
     name: "Language",
-    func: (a: Repo, b: Repo): number =>
-      cmp(b.language ?? "Markdown", a.language ?? "Markdown"),
+    func: (a, b) => cmp(b.language ?? "Markdown", a.language ?? "Markdown"),
   },
 };
 
 async function loadData(
   user: string
-): Promise<{ user_data: User; repos_data: Repo[] }> {
+): Promise<{ user_data: User; repos_data: Repo[]; fork_count: number }> {
   let repos_data = [];
+  let fork_count = 0;
 
   console.log(`Querying User Data of ${user}`);
   const ures = await fetch(`https://api.github.com/users/${user}`);
   const utxt = await ures.text();
-  const uobj = JSON.parse(utxt);
-
-  const user_data = {
-    ...uobj,
-  };
+  const user_data = JSON.parse(utxt) as User;
 
   // * Do not fetch more than 10 times, meaning more than 1k Repo is not supported
   const PAGE_HARD_LIMIT = 10;
@@ -118,10 +114,8 @@ async function loadData(
     const robj = JSON.parse(rtxt);
 
     for (const repo of robj) {
-      const repodata: Repo = {
-        ...repo,
-      };
-      repos_data.push(repodata);
+      if ((repo as Repo).fork) fork_count++;
+      repos_data.push(repo as Repo);
     }
 
     if (robj.length < 100) break;
@@ -130,7 +124,7 @@ async function loadData(
   repos_data.sort(sortMethods.recent_updated.func);
 
   console.log(`Successfully fetched all data of ${user}`);
-  return { user_data, repos_data };
+  return { user_data, repos_data, fork_count };
 }
 
 @Options({
@@ -145,21 +139,20 @@ export default class App extends Vue {
   repos_data: Repo[] = [];
   sortMethods = sortMethods;
   currentSortMethods = "Last Pushed";
+  fork_count = 0;
 
   async created(): Promise<void> {
     const uri = window.location.search.substring(1);
     const params = new URLSearchParams(uri);
     const target_user = params.get("user") || default_user;
 
-    const { user_data, repos_data } = await loadData(target_user);
+    const { user_data, repos_data, fork_count } = await loadData(target_user);
     this.user_data = user_data;
     this.repos_data = repos_data;
+    this.fork_count = fork_count;
   }
 
-  setSortMethod(method: {
-    name: string;
-    func: (a: Repo, b: Repo) => number;
-  }): void {
+  setSortMethod(method: sortMethod): void {
     this.currentSortMethods = method.name;
     this.repos_data.sort(method.func);
   }

src/components/RepoCard.vue

@@ -22,13 +22,7 @@
     </div>
 
     <div
-      class="
-        card-body
-        d-flex
-        flex-column
-        align-items-center
-        justify-content-between
-      "
+      class="card-body d-flex flex-column align-items-center justify-content-between"
     >
       <p class="card-text">{{ repo.description }}</p>
       <div class="card-footer container row align-items-baseline pt-3">

src/components/UserCard.vue

@@ -28,7 +28,9 @@
             d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"
           />
         </svg>
-        <p>{{ user.public_repos }} Public Repositories</p>
+        <p>
+          {{ user.public_repos }} Public Repositories ({{ fork_count }} Forks)
+        </p>
       </div>
       <p v-if="user.type == 'User'">
         {{ user.followers }} Followers {{ user.following }} Following
@@ -56,10 +58,12 @@ import { User } from "@/backend/types";
 @Options({
   props: {
     user: Object,
+    fork_count: Number,
   },
 })
 export default class UserCard extends Vue {
   user!: User;
+  fork_count!: number;
 
   openUrl(url: string): void {
     window.open(url, "_blank");

src/shims-vue.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }