🚩: test get data from github api

pphatdev · pphatdev · commit 91e6277f8483 · 2024-11-21T19:21:12.000+07:00
diff --git a/badge.svg b/badge.svg
@@ -0,0 +1,12 @@
+<svg width="118" height="25" viewBox="0 0 118 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Sections">
+<g id="label">
+<path d="M0 4.9964C0 2.48772 2.03368 0.454041 4.54236 0.454041H83.6271V24.0811H4.54237C2.03369 24.0811 0 22.0474 0 19.5388V4.9964Z" fill="#F43B43"/>
+<text id="Total Commit" fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10.9017" font-weight="600" letter-spacing="-0.104474px"><tspan x="7.28777" y="16.2284">Total Commit</tspan></text>
+</g>
+<g id="count">
+<path d="M83.6271 0.454041H112.712C115.22 0.454041 117.254 2.48772 117.254 4.9964V19.5388C117.254 22.0474 115.22 24.0811 112.712 24.0811H83.6271V0.454041Z" fill="#290FA8"/>
+<text id="1242" fill="white" xml:space="preserve" style="white-space: pre" font-family="Kantumruy Pro" font-size="9.08472" font-weight="600" letter-spacing="-0.104474px"><tspan x="90.8694" y="15.2622">1242</tspan></text>
+</g>
+</g>
+</svg>
diff --git a/hello-world.js b/hello-world.js
@@ -1 +1,21 @@
-console.log(`Hello World`);
+function getAuthorFromParams(defaultAuthor = 'pphatdev') {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('author') || defaultAuthor;
+}
+
+async function fetchGithubCommits(author) {
+    const response = await fetch(`https://api.github.com/search/commits?q=author:${author}`);
+    const data = await response.json();
+    return data;
+}
+
+// Usage
+const author = getAuthorFromParams();
+fetchGithubCommits(author)
+.then(totalCount => {
+    const total = document.getElementById('total');
+    total.innerHTML = totalCount.total_count;
+})
+.catch(error => {
+    console.error('Error fetching commits:', error);
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>pphatdev.github.oi</title>
+</head>
+
+<body>
+    <svg width="118" height="25" viewBox="0 0 118 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="Sections">
+            <g>
+                <!-- <path d="M0 4.9964C0 2.48772 2.03368 0.454041 4.54236 0.454041H83.6271V24.0811H4.54237C2.03369 24.0811 0 22.0474 0 19.5388V4.9964Z" fill="#F43B43" /> -->
+                <text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10.9017" font-weight="600" letter-spacing="-0.104474px">
+                    <tspan x="7.28777" y="16.2284" id="label">Total Commit</tspan>
+                </text>
+            </g>
+            <g>
+                <!-- <path d="M83.6271 0.454041H112.712C115.22 0.454041 117.254 2.48772 117.254 4.9964V19.5388C117.254 22.0474 115.22 24.0811 112.712 24.0811H83.6271V0.454041Z" fill="#290FA8" /> -->
+                <text id="1242" fill="white" xml:space="preserve" style="white-space: pre" font-family="Kantumruy Pro" font-size="9.08472" font-weight="600" letter-spacing="-0.104474px">
+                    <tspan x="90.8694" y="15.2622" id="total">1242</tspan>
+                </text>
+            </g>
+        </g>
+    </svg>
+
+    <script type="module" src="./hello-world.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "pphatdev.github.io",
+  "version": "1.0.0",
+  "description": "<div align=\"center\">\r     <h1> Hello! I am Sophat (or PPhatdev) 🌈🌞 </h1>\r </div>",
+  "main": "hello-world.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT"
+}
