Merge branch 'release/v1.0.5'

.env-sample

@@ -1 +1 @@
-SERVER_PORT=80
+GITHUB_TOKEN=1234567890

Gruntfile.js

@@ -58,6 +58,9 @@ module.exports = function(grunt) {
 
         /** Configure watch task */
         watch: {
+            options: {
+                livereload: true,
+            },
             config: {
                 files: [
                     'config.json'

README.md

@@ -12,8 +12,16 @@ See the [demo][website].
 ## 🤖 Installation
 
 1. Prepare your `config.json` change the information according to your credentials.
-2. Set `production` to `false` in `config.json`
-3. Then run it : 
+2. Rename `.env-sample` to `.env` and fill in your environment variable (GitHub Tokens)
+3. Install node package `npm install`
+4. Generate `nodes.json` and `edges.json` by running `node index.js`
+5. Then open it :
+
+### via any local Web Server : 
+- PHP Server : `php -S 127.0.0.1:80`
+- XAMPP, LAMP, MAMP, WAMP Server
+- Nginx, Apache
+- etc
 
 ### via docker run 
 ```
@@ -22,42 +30,43 @@ docker run -d -p 80:80 \
   -v /path/to/config.json:/usr/share/nginx/html/config.json \
   -v /path/to/avatar.jpg:/usr/share/nginx/html/assets/img/avatar.jpg \
   -v /path/to/cover.jpg:/usr/share/nginx/html/assets/img/cover.jpg \
-  agung2001/agung2001.github.io:master
+  -v /path/to/config.json:/usr/share/nginx/html/nodes.json \
+  -v /path/to/config.json:/usr/share/nginx/html/edges.json \
+  agung2001/agung2001.github.io:latest
 ```
 - NOTE: Don't forget to change the `/path/to/` accordingly
 
-### via manual build 
-- Install node package `npm i`
-- Build asset `grunt build`
-  - Watch `grunt watch`
+## 📝 Notes
 
-## 📚 Notes
+### How to Generate GitHub Tokens
+Please refer to [GitHub Docs - Creating a personal access token](https://docs.github.com/en/[email protected]/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) to create personal access token.
+Please set the expiration to `no expiration` and enable : `Repo` and `User` scope to see the [screenshot](assets/img/scopes.jpg). 
 
-### Handle GitHub API Rate Limit
-This repo uses GitHub public rest API to generate the graph network.
-To buffer the data from the API please set `production` to `false` in `config.json`
-Then store the object information into [nodes.json](nodes.json) & [edges.json](edges.json)
+### Live Reload
+This repo comes with livereload module, to learn more please goto [gruntjs/grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch/blob/main/docs/watch-examples.md#enabling-live-reload-in-your-html)
 
 ## 🔥 Development
-Running the nginx server
-- Rename `.env-sample` to `.env`
-- Change `.env` according to your environment
-- Docker `docker-compose up`
+- Install node package `npm install`
+  - Generate `nodes.json` and `edges.json` by running `node index.js`
+- Build asset `grunt build`
+    - Watch `grunt watch`
+
+## 📚 Resources
+- [Official Repo](https://github.com/agung2001/agung2001.github.io)
+- [GitHub REST API Docs](https://docs.github.com/en/rest)
+- [Docker Hub](https://hub.docker.com/r/agung2001/agung2001.github.io)
+- [GHCR](https://github.com/agung2001/agung2001.github.io/pkgs/container/agung2001.github.io)
 
 ## ⚒️ Built with
 - [Animate.style](https://animate.style/)
+- [Dotenv](https://www.npmjs.com/package/dotenv)
 - [Fontawesome](https://fontawesome.com/)
 - [Grunt JS](https://gruntjs.com/)
+- [Octokit.js](https://github.com/octokit/octokit.js)
 - [Svelte JS](https://svelte.dev/)
 - [TailwindCSS](https://tailwindcss.com/)
 - [Vis JS](https://visjs.org/)
 
-## 📚 Resources
-- [Official Repo](https://github.com/agung2001/agung2001.github.io)
-- [GitHub REST API Docs](https://docs.github.com/en/rest)
-- [Docker Hub](https://hub.docker.com/r/agung2001/agung2001.github.io)
-- [GHCR](https://github.com/agung2001/agung2001.github.io/pkgs/container/agung2001.github.io) 
-
 ## ⭐️ Support
 Help support me by giving a star or [donate][website]
 

assets/components/content/sections/VisJS.svelte

@@ -1,9 +1,6 @@
 <script>
-    import App from "../src/App.svelte";
-
     export let config;
     let errorMessage = 'Loading...';
-    let rateLimit = false;
 
     /** Generate Edges and Nodes */
     async function GenerateEdgesandNodes(endpoint, nodes, edges){
@@ -33,34 +30,26 @@
 
     /** Draw Repo */
     async function draw(){
-        let { username, organizations, production } = config;
+        let { production } = config;
         try {
             let nodes, edges;
-            if(production){
-                await fetch('./nodes.json')
-                    .then((response) => response.json())
-                    .then((data) => { nodes = data; });
-                await fetch('./edges.json')
-                    .then((response) => response.json())
-                    .then((data) => { edges = data; });
-            } else {
-                // console.log('MASUK');
-                /** Graph for Username */
-                let endpoint = `https://api.github.com/users/${username}/repos`;
-                let data = await GenerateEdgesandNodes(endpoint, [{ id: 0, label: username, group: 1}], []);
-                nodes = data.nodes; edges = data.edges;
-
-                /** Graph for Organization */
-                await organizations.map(async (organization) => {
-                    let endpoint = `https://api.github.com/users/${organization}/repos`;
-                    let data = await GenerateEdgesandNodes(endpoint, [{ id: nodes.length, label: organization, group: nodes.length}], []);
-                    edges.push({ from: 0, to: nodes.length });
-                    nodes.push(...data.nodes); edges.push(...data.edges);
-                });
+            await fetch('./nodes.json')
+                .then((response) => response.json())
+                .then((data) => { nodes = data; });
+            await fetch('./edges.json')
+                .then((response) => response.json())
+                .then((data) => { edges = data; });
 
-                console.log(nodes);
-                console.log(edges);
+            /** DEPRECATED - PUBLIC GITHUB API */
+            if(!production){
+                let INFO = `
+                    (◔_◔) This method has been obsolete in the latest version of the website!
+                    Please refers to : https://github.com/agung2001/agung2001.github.io/releases/tag/1.0.2 if you still want to use it.
+                    The newer version has support GitHub tokens to bypass rate limit, to learn more please refer to https://github.com/agung2001/agung2001.github.io
+                `.replace(/  +/g, '');
+                console.log(INFO);
             }
+            /** DEPRECATED - PUBLIC GITHUB API */
 
             setTimeout(function(){
                 // create a network
@@ -96,8 +85,8 @@
                         }
                     }
                 });
-            }, 500);
-        } catch(e) { errorMessage = 'Rate Limit Reached!'; rateLimit = true; }
+            }, 100);
+        } catch(e) { errorMessage = 'Rate Limit Reached!'; }
     }
     document.onload = draw();
 </script>

assets/components/content/src/main.js

@@ -6,6 +6,11 @@ import App from './App.svelte';
 		.then((response) => response.json())
 		.then((config) => {
 			let { name } = config;
+
+			/** Welcome Terminal ASCII */
+			console.log(`༼ つ ◕_◕ ༽つ Welcome to ${name} profile page`);
+
+			/** Display Component */
 			document.title = name;
 			const app = new App({
 				target: document.querySelector('#content'),

config.json

@@ -66,7 +66,7 @@
         },
         {
           "label": "Github",
-          "caption": "Contribute to open source",
+          "caption": "Any idea on how to become a GitHub stars?",
           "link": "https://github.com/agung2001",
           "icon": "fab fa-github",
           "color": "#24292f"
@@ -94,6 +94,25 @@
         }
       ]
     },
+    {
+      "label": "Artistudio",
+      "buttons": [
+        {
+          "label": "Go Packages",
+          "caption": "Collection of go packages",
+          "link": "https://pkg.go.dev/search?q=artistudioxyz&m=package",
+          "icon": "fa-brands fa-golang",
+          "color": "#007d9c"
+        },
+        {
+          "label": "GitHub Packages",
+          "caption": "Collection of container and images",
+          "link": "https://github.com/orgs/artistudioxyz/packages",
+          "icon": "fab fa-github",
+          "color": "#24292f"
+        }
+      ]
+    },
     {
       "label": "Contact",
       "buttons": [

edges.json

@@ -1,72 +1 @@
-[
-    {
-        "from": 1,
-        "to": 0,
-        "id": "619f712b-6b7d-4fee-8901-0145006dcf0e"
-    },
-    {
-        "from": 2,
-        "to": 0,
-        "id": "2d5f5b55-7271-47e6-92a6-a221200ff595"
-    },
-    {
-        "from": 3,
-        "to": 0,
-        "id": "2870c1da-2958-481b-ab07-d1016b100e3f"
-    },
-    {
-        "from": 4,
-        "to": 0,
-        "id": "c1e89d2c-9216-417d-a64c-c8758997878b"
-    },
-    {
-        "from": 5,
-        "to": 0,
-        "id": "202f0562-72e6-48a7-bb2c-143a4d671ae2"
-    },
-    {
-        "from": 6,
-        "to": 0,
-        "id": "5031ec9e-5d2f-484c-8162-6730a6aa4286"
-    },
-    {
-        "from": 7,
-        "to": 0,
-        "id": "ee383530-04f8-40b9-a365-1ce5038f07fd"
-    },
-    {
-        "from": 8,
-        "to": 0,
-        "id": "a62c01c5-ad35-4653-a10e-039eaecd93d1"
-    },
-    {
-        "from": 0,
-        "to": 9,
-        "id": "80198013-5a16-459e-a8f2-b1f34c79cf3d"
-    },
-    {
-        "from": 10,
-        "to": 9,
-        "id": "5272c2fa-53ee-4667-a388-cc0bb40aba19"
-    },
-    {
-        "from": 11,
-        "to": 9,
-        "id": "001329ca-6f20-4929-9b19-1cccbee9fcf6"
-    },
-    {
-        "from": 12,
-        "to": 9,
-        "id": "04eb840e-d9e2-4ec0-9192-9a1d2b682113"
-    },
-    {
-        "from": 13,
-        "to": 9,
-        "id": "53f1b418-f6eb-45fc-ab2d-c3402a8fa5da"
-    },
-    {
-        "from": 14,
-        "to": 9,
-        "id": "9c30b61a-cd8c-4bfd-ad9a-15452fbbad4e"
-    }
-]
+[{"from":1,"to":0},{"from":2,"to":0},{"from":3,"to":0},{"from":4,"to":0},{"from":5,"to":0},{"from":6,"to":0},{"from":7,"to":0},{"from":8,"to":0},{"from":9,"to":0},{"from":10,"to":0},{"from":0,"to":11},{"from":12,"to":11},{"from":13,"to":11},{"from":14,"to":11},{"from":15,"to":11},{"from":16,"to":11},{"from":17,"to":11},{"from":18,"to":11},{"from":19,"to":11}]

index.html

@@ -32,9 +32,8 @@
 <!--Components-->
 <script src="assets/build/components/content/bundle.js"></script>
 
-<script>
-
-</script>
+<!--Live Reload-->
+<script src="//localhost:35729/livereload.js"></script>
 
 </body>
 </html>

index.js

@@ -0,0 +1,74 @@
+/** Libraries */
+const { Octokit } = require("octokit");
+const fs = require('fs');
+require('dotenv').config();
+
+/** Config and Environment Variables */
+const config = JSON.parse( fs.readFileSync('config.json') );
+const GITHUB_TOKEN = process.env.GITHUB_TOKEN
+const octokit = new Octokit({ auth: GITHUB_TOKEN }); // Official clients for the GitHub API
+
+/** Generate Data (nodes.json and edges.json) */
+(async function(){
+    /** GenerateEdgesandNodes Function */
+    const GenerateEdgesandNodes = (data, nodes, edges) => {
+        let root = nodes[0];
+
+        /** Nodes */
+        let counter = root.id + 1;
+        data.map((v) => {
+            nodes.push({
+                id: counter,
+                label: v.name,
+                value: v.stargazers_count,
+                url: v.html_url,
+                group: counter,
+            })
+            counter++;
+        });
+
+        /** Edges */
+        edges = nodes.map((v) => ({ from: v.id, to: root.id }));
+        edges.splice(0, 1);
+        return { nodes, edges }
+    }
+
+    /** Graph for User */
+    const GraphforUser = async () => {
+        let nodes, edges;
+        let { username } = config;
+        let { data } = await octokit.request('GET /users/{username}/repos', { username });
+        data = GenerateEdgesandNodes(data, [{ id: 0, label: config.username, group: 1}], []);
+        nodes = data.nodes; edges = data.edges;
+        return { nodes, edges }
+    }
+
+    /**
+     * Graph for Organization
+     * @param data Consists of nodes and edges data from user
+     * */
+    const GraphforOrganizations = async (data) => {
+        let { nodes, edges } = data;
+        let { organizations } = config;
+        for (let i = 0; i < organizations.length; i ++) {
+            let org = organizations[i];
+            let { data } = await octokit.request('GET /orgs/{org}/repos', { org })
+            data = GenerateEdgesandNodes(data, [{ id: nodes.length, label: org, group: nodes.length}], []);
+            edges.push({ from: 0, to: nodes.length });
+            nodes.push(...data.nodes); edges.push(...data.edges);
+        }
+        return { nodes, edges }
+    }
+
+    /** Generate Data */
+    let data = await GraphforUser()
+    data = await GraphforOrganizations(data);
+
+    /** Write to File */
+    try {
+        fs.writeFileSync('nodes.json', JSON.stringify(data.nodes));
+        fs.writeFileSync('edges.json', JSON.stringify(data.edges));
+        console.log('✅ The file has been saved!');
+    } catch (e) { console.log(e); }
+
+})()