Various upgrades

README.md

@@ -4,51 +4,37 @@
 
 ![GitHub repo size](https://img.shields.io/github/repo-size/seyon123/list-github-repos?style=for-the-badge) ![GitHub last commit](https://img.shields.io/github/last-commit/seyon123/list-github-repos?label=Last%20Commit&style=for-the-badge) ![GitHub](https://img.shields.io/github/license/seyon123/list-github-repos?style=for-the-badge)
  ## Overview
- This repo lists all of your GitHub repos onto a webpage. The styling and functionality can easily be customized to meet your needs. A demo webpage can be found here: https://repos.seyonrajagopal.ca/
+ This repo lists all of your GitHub repos onto a webpage. The styling and functionality can easily be customized to meet your needs.
 
  ## Prerequisites
 
- jQuery is required for this repo to work properly. You can import the script from CDN into your html page like below:
-
- ```html
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1jquery.min.js"></script>
- ```
+ jQuery is required for this repo to work properly. You can see it being called in [index.html](index.html).
 
  ## How To Use
-Start by forking or downloading this repository. There is mainly 2 file from this repository that you need, <a href="js/script.js">script.js</a> and <a href="css/styles.css">styles.css</a>. The JavaScript file gets necessary information about the users repositories from GitHub's api and the css file contains styling for elements.
-
-Go to your projects's html page and make sure you reference the JavaScript file in the head if you havn't done so, eg:
- ```html
-<script src="js/script.js"></script>
- ``` 
+1. Fork this repository.
+1. Rename it to `[your username].github.io`.
+   - *[Optional]* Rename to something else (like `myrepos`) if you wish for it to appear as a `subfolder`.
+1. In your own repo's `Settings=>Pages` choose the main branch and Save.
+1. *[Optional]* If you added a subfolder in step 2, then edit your own repo's About section, uncheck `Use your GitHub Pages website` and write  `[your username].github.io/myrepos/` **manually**.
 
-### If you want a form instead of auto list
-Find the script.js file located at `js/script.js`, place the file in your project and **comment out** the following lines:
+That's it!
 
-```javascript
-var user = ...;
-window.onload = genRepo(user);
-```
+### More advanced usage
+There are mainly 2 files from this repository that you need, [js/script.js](js/script.js) and [css/styles.css](css/styles.css). The JavaScript file gets necessary information about the user's repositories from GitHub's API and the CSS file contains styling for elements. You can see both being called in [index.html](index.html).
 
-In the html page **remove the comment ou**t besides the div with ID of `title` to return the form.
+#### If you want a form instead of auto list
+In the HTML page **remove the comment out** besides the div with ID of `title` to return the form.
 
-### If you want to show the repositories of a different user than yourself
-Find the script.js file located at `js/script.js`, place the file in your project and **manually** fill `var user = 'alternate_username';` in the following lines:
+#### If you want to show the repositories of a different user than yourself
+In the HTML page **manually** fill `var user = '...';`.
 
-```javascript
-var user = ...;
-window.onload = genRepo(user);
-```
-
-### Extras
+#### Extras
 In the html page you can move the div named `repo-box` to where you want the repositiories to show:
 ```html
 <div id="repo-box"></div>
 ```
 
-Final step is to add the styling. My styles.css file can be found at `css/styles.css` You may use that or modify or create your own.
-
-If you wish to modify or create your own syling, the following classes and  ids are used to styling. You may make or add changes to these as you desire:
+Finally, if you wish to modify or create your own syling, the following classes and ids are used to styling. You may make or add changes to these as you desire in [css/styles.css](css/styles.css):
 ```html
 #repo-box    -> <div> contains all the repositories being printed out
 .error-box   -> <div> error message div when user name is not correct
@@ -62,6 +48,4 @@ If you wish to modify or create your own syling, the following classes and  ids
 .star        -> <div> contains image and values for number of stars
 .fork        -> <div> contains image and values for number of forks
 ```
-<i>Note: UIkit was also used for some styling and icons. You may have to use your own icons if you dont want to use UIkit.</i>
-
-
+*Note: UIkit was also used for some styling and icons. You may have to use your own icons if you dont want to use UIkit.*

css/styles.css

@@ -18,6 +18,16 @@ body {
     width: 100%;
 }
 
+#repo-box>ol {
+	float: left;
+	margin: 0.9% 5% 0%;
+}
+
+#repo-box>div>h1 {
+    margin-left: 20%;
+    color: white;
+}
+
 /* css for start page asking for username */
 
 #title {
@@ -146,4 +156,4 @@ body {
 a:hover{
     text-decoration: none;
 }
-/* End code to modify */
+/* End code to modify */

index.html

@@ -24,32 +24,49 @@
 </head>
 
 <body>
-    
+
 <!--
     <div id="title">
         <h1>Enter GitHub Username:</h1>
         <input id="user" type="text" placeholder="seyon123">
-        <button id="btn" onclick="getusername()">View Repos</button>
+        <button id="btn" onclick="getusername(this.previousElementSibling.value)">View Repos</button>
         <br><i>*Repos may appear at a slower rate compared to other content on screen.</i>
     </div>
--->
 
     <div id="back">
-        <a href="index.html">Go Back</a>
+        <a href=".">Go Back</a>
     </div>
+-->
 
     <!-- The div below is all you need to list all repositories-->
-    <div id="repo-box"></div>
-
-
-    <script>
-            document.getElementById("back").style.display = "none";
-            function getusername() {
-                var user = document.getElementById("user").value;
-                document.getElementById("title").style.display = "none";
-                document.getElementById("repo-box").style.display = "block";
-                document.getElementById("back").style.display = "block";
-                genRepo(user);
+	<div id="repo-box">
+		<ol>
+			<li><a href="#originals">Originals</a></li>
+			<li><a href="#forks">Forks</a></li>
+		</ol>
+		<div id="originals"><h1>Originals</h1></div>
+		<hr>
+    	<div id="forks"><h1>Forks</h1></div>
+	</div>
+
+   <script>
+			var full = document.querySelectorAll("#title").length > 0;
+			if (full) {
+            			document.getElementById("back").style.display = "none";
+             			document.getElementById("repo-box").style.display = "none";
+			} else {
+				getusername('');
+			}
+            function getusername(user) {
+				var params = ""; // API allowed paramters like "?type=all&sort=updated&direction=asc";
+				if (full) {
+					document.getElementById("title").style.display = "none";
+					document.getElementById("repo-box").style.display = "block";
+					document.getElementById("back").style.display = "block";
+				} else {
+					var user = document.domain.split('.', 1); // alternatively, manually enter a different user than yourself
+				}
+               	genRepo(user, params);
             }
         </script>
 </body>

js/script.js

@@ -3,23 +3,18 @@
 //   Copyright (c) 2022 Seyon Rajagopal
 // -------------------------------------------
 
-
-// To use a form instead of a specific user comment out the following 2 lines of code:
-
-var user = document.domain.split('.', 1); // alternatively, manually enter a different user than yourself using var user = 'alternate_username';
-window.onload = genRepo(user);
-
-
-function genRepo(user) {
+function genRepo(user, params) {
     const testuser = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i;
 
     if (testuser.test(user) == false || user == "" || user == null) {
         $("#repo-box").append("<div class='error-box'><h1 class='error-msg'> Sorry the GitHub username appears to be invalid </h1></div>");
     }
 
     else {
-
-        var requestURL = 'https://api.github.com/users/' + user + '/repos';
+		if (params == "") {
+			params = location.search;
+		}
+        var requestURL = 'https://api.github.com/users/' + user + '/repos' + params;
         var request = $.get(requestURL, function () {
         })
             .done(function () {
@@ -47,7 +42,7 @@ function genRepo(user) {
                         }
 
                         // Puts repo information into div
-                        $("#repo-box").append("<a href='" + repo_url + "' target='_blank'><div class='repo-item'><h1 class='title'>" +
+                        $("#" + (request[i].fork ? "forks" : "originals")).append("<a href='" + repo_url + "' target='_blank'><div class='repo-item'><h1 class='title'>" +
                             username + "/" +
                             repo_name + "</h1><p class='description'>" +
                             repo_description + "</p>" + "<div class='bottom'><div class='language'><span class='img' uk-icon='code' class='uk-icon'></span>" +