Merge branch 'release/1.0.4'

README.md

@@ -10,6 +10,11 @@ See the [demo][website].
 ![Version](https://img.shields.io/docker/v/agung2001/agung2001.github.io)
 
 ## 🤖 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 : 
+
 ### via docker run 
 ```
 docker run -d -p 80:80 \
@@ -26,6 +31,13 @@ docker run -d -p 80:80 \
 - Build asset `grunt build`
   - Watch `grunt watch`
 
+## 📚 Notes
+
+### 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)
+
 ## 🔥 Development
 Running the nginx server
 - Rename `.env-sample` to `.env`
@@ -41,10 +53,10 @@ Running the nginx server
 - [Vis JS](https://visjs.org/)
 
 ## 📚 Resources
-- [Github](https://github.com/agung2001/agung2001.github.io)
-- Registry
-  - [Docker Hub](https://hub.docker.com/r/agung2001/agung2001.github.io)
-  - [GHCR](https://github.com/agung2001/agung2001.github.io/pkgs/container/agung2001.github.io) 
+- [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,31 +1,66 @@
 <script>
+    import App from "../src/App.svelte";
+
     export let config;
-    let errorMessage = '';
+    let errorMessage = 'Loading...';
+    let rateLimit = false;
+
+    /** Generate Edges and Nodes */
+    async function GenerateEdgesandNodes(endpoint, nodes, edges){
+        let response = await fetch(endpoint);
+        let data = await response.json();
+        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 };
+    }
 
     /** Draw Repo */
     async function draw(){
-        let { username } = config;
-        let response = await fetch(`https://api.github.com/users/${username}/repos`);
-        let data;
-        if(response.ok){
-            data = await response.json();
+        let { username, organizations, 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;
 
-            /** Nodes */
-            let nodes = [{ id: 0, label: "agung2001", group: 1 }];
-            data.map((v) => {
-                nodes.push({
-                    id: nodes.length,
-                    label: v.name,
-                    value: v.stargazers_count,
-                    group: nodes.length,
-                })
-            });
+                /** 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);
+                });
 
-            /** Edges */
-            let edges = nodes.map((v) => {
-                return { from: v.id, to: 0 };
-            });
-            edges.shift();
+                console.log(nodes);
+                console.log(edges);
+            }
 
             setTimeout(function(){
                 // create a network
@@ -53,8 +88,16 @@
                 };
 
                 var network = new vis.Network(container, data, options);
+                network.on("click", function (params) {
+                    if (params.nodes.length === 1) {
+                        let node = nodes[ params.nodes[0] ];
+                        if(node.url != null) {
+                            window.open(node.url, '_blank');
+                        }
+                    }
+                });
             }, 500);
-        } else { errorMessage = `Failed to reach endpoint!`; }
+        } catch(e) { errorMessage = 'Rate Limit Reached!'; rateLimit = true; }
     }
     document.onload = draw();
 </script>

config.json

@@ -2,7 +2,8 @@
   "name" : "Agung Sundoro",
   "tagline": "Let's connect and change the world!",
   "username": "agung2001",
-  "production" : false,
+  "organizations": ["artistudioxyz"],
+  "production": true,
   "socialButtons": [
     {
       "label": "Social",

edges.json

@@ -0,0 +1,72 @@
+[
+    {
+        "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"
+    }
+]

nodes.json

@@ -0,0 +1,103 @@
+[
+    {
+        "id": 0,
+        "label": "agung2001",
+        "group": 1
+    },
+    {
+        "id": 1,
+        "label": "agung2001",
+        "value": 0,
+        "url": "https://github.com/agung2001/agung2001",
+        "group": 1
+    },
+    {
+        "id": 2,
+        "label": "agung2001.github.io",
+        "value": 16,
+        "url": "https://github.com/agung2001/agung2001.github.io",
+        "group": 2
+    },
+    {
+        "id": 3,
+        "label": "auto-commit",
+        "value": 0,
+        "url": "https://github.com/agung2001/auto-commit",
+        "group": 3
+    },
+    {
+        "id": 4,
+        "label": "cakechimp",
+        "value": 0,
+        "url": "https://github.com/agung2001/cakechimp",
+        "group": 4
+    },
+    {
+        "id": 5,
+        "label": "docker-lamp",
+        "value": 0,
+        "url": "https://github.com/agung2001/docker-lamp",
+        "group": 5
+    },
+    {
+        "id": 6,
+        "label": "hands-on-laravel",
+        "value": 0,
+        "url": "https://github.com/agung2001/hands-on-laravel",
+        "group": 6
+    },
+    {
+        "id": 7,
+        "label": "HpProbook440G4-hackintosh",
+        "value": 0,
+        "url": "https://github.com/agung2001/HpProbook440G4-hackintosh",
+        "group": 7
+    },
+    {
+        "id": 8,
+        "label": "WordPush",
+        "value": 0,
+        "url": "https://github.com/agung2001/WordPush",
+        "group": 8
+    },
+    {
+        "id": 9,
+        "label": "artistudioxyz",
+        "group": 9
+    },
+    {
+        "id": 10,
+        "label": "bingopress",
+        "value": 0,
+        "url": "https://github.com/artistudioxyz/bingopress",
+        "group": 10
+    },
+    {
+        "id": 11,
+        "label": "docker-youtrack",
+        "value": 0,
+        "url": "https://github.com/artistudioxyz/docker-youtrack",
+        "group": 11
+    },
+    {
+        "id": 12,
+        "label": "floating-awesome-button",
+        "value": 0,
+        "url": "https://github.com/artistudioxyz/floating-awesome-button",
+        "group": 12
+    },
+    {
+        "id": 13,
+        "label": "triangle-email-template",
+        "value": 0,
+        "url": "https://github.com/artistudioxyz/triangle-email-template",
+        "group": 13
+    },
+    {
+        "id": 14,
+        "label": "wp-plugin-svelte-js",
+        "value": 7,
+        "url": "https://github.com/artistudioxyz/wp-plugin-svelte-js",
+        "group": 14
+    }
+]