added commits by @DonIsaac & @Chargnn

* Created site files are now placed in an output directory `dist`
* Added a ton of comments in build.js
* Made functions in build.js use bluebird promises
* Themes are now in the assets/templates folder instead as magic
strings in the source code
* Any number of custom themes (not just light and dark) can be used by creating
a [theme].css file and putting it in assets/themes
* CSS themes are rendered with Handlebars
* CSS themes now rely on Handlebars for specifying the background 
* Restored config.json to template file
* Changes to the blogging 
* Moved blog templates and config files to assets/blog
* Created blog pages now go to dist/blog/
* Updated blogTemplate
* Updated the README to reflect the changes made by this pull request
* Added link to demo site in README
* Added sorting and ordering

README.md

@@ -62,8 +62,6 @@ $ node build --name username --background https://images.unsplash.com/photo-1557
 You could also add in your custom CSS inside `index.css` to give it a more personal feel.
 
 
-### Let's Publish
-
 ### Let's Publish
 
 Head over to GitHub and create a new repository named `username.github.io`, where username is your username. Push the files inside`/dist` folder to repo you just created.

assets/index.css

@@ -59,29 +59,6 @@ body{
     color:#fff !important;
 }
 
-#profile #navbar nav {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid #e7e7e7;
-  background-color: rgba(32, 32, 32, 0.2);
-}
-
-#profile #navbar a {	
-  float: left;
-  text-align: left;
-  display: block;
-  color: #fff;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-#profile #navbar a:hover:not(.active) {
-  background-color: rgba(32, 32, 32, 0.3);
-}
-
 #display {
     width:64vw;
     padding:4vh 3vw;
@@ -90,54 +67,13 @@ body{
     padding-left:33vw;
 }
 
-#display h1 span {
+#display h1 {
     font-size:50px;
     color:var(--text-color);
     font-weight:bold;
     font-family: 'Questrial', sans-serif;
 }
 
-#display select {
-	display: inline-block;
-	font-size: 16px;
-	font-family: sans-serif;
-	font-weight: 700;
-	color: #444;
-	line-height: 1.3;
-	padding: .6em 1.4em .5em .8em;
-	max-width: 80%; 
-	box-sizing: border-box;
-	margin: 0;
-	border: 1px solid #aaa;
-	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
-	border-radius: .5em;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	appearance: none;
-	background-color: #fff;
-	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
-	background-repeat: no-repeat, repeat;
-	background-position: right .7em top 50%, 0 0;
-	background-size: .65em auto, 100%;
-}
-#display select::-ms-expand {
-	display: none;
-}
-#display select:hover {
-	border-color: #888;
-}
-#display select:focus {
-	border-color: #aaa;
-	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
-	box-shadow: 0 0 0 3px -moz-mac-focusring;
-	color: #222; 
-	outline: none;
-}
-#display select option {
-	font-weight:normal;
-}
-
 .emoji {
     width:18px;
     height:18px;
@@ -313,45 +249,21 @@ body{
     font-size:16px;
 }
 
-#about span a {
-	color: #fff;
-    text-decoration: none;
-}
-
 #work {
     margin:2vh 0px;
     padding:4vh 0px !important;
 }
 
-#projects {
-    columns:2;
-}
-
-#projects section {
-    width:85%;
-    padding:2.5vh 5%;
-    display:inline-block;
-    border-radius:5px;
-    color:var(--text-color);
-    border:1px solid rgb(0, 0, 0, 0.08);
-    box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
-    transition:0.4s ease-in-out;
-    margin:2vh 0px;
-    transform:scale(1);
-}
-
-#projects section:hover {
-    cursor: pointer;
-    border:1px solid rgb(0, 0, 0, 0);
-    box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
-    transform:scale(1.03);
-}
-
 #forks {
+    margin:2vh 0px;
+    padding:4vh 0px !important;
+}
+
+.projects {
     columns:2;
 }
 
-#forks section {
+.projects section {
     width:85%;
     padding:2.5vh 5%;
     display:inline-block;
@@ -364,7 +276,7 @@ body{
     transform:scale(1);
 }
 
-#forks section:hover {
+.projects section:hover {
     cursor: pointer;
     border:1px solid rgb(0, 0, 0, 0);
     box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
@@ -457,27 +369,6 @@ body{
         text-align:center;
         position: relative;
     }
-	#profile #navbar nav {
-      padding:4vh 5vw;
-      text-align:center;
-	  list-style-type: none;
-	  overflow: hidden;
-	  border: 1px solid #e7e7e7;
-	  background-color: rgba(32, 32, 32, 0.5);
-	  position: relative;
-	}
-	#profile #navbar a {
-	  float: none !important;
-	  display: block;
-	  color: #fff;
-	  text-align: center;
-	  padding: 14px 16px;
-	  text-decoration: none;
-	  margin:0px auto !important;
-	}
-	#profile #navbar a:hover:not(.active) {
-	  background-color: rgba(32, 32, 32, 0.3);
-	}
     #display {
         width:90vw;
         padding:4vh 5vw;

assets/index.html

@@ -7,6 +7,7 @@
     <title></title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
@@ -14,7 +15,6 @@
         <div id="spinner"></div>
     </div>
     <div id="profile">
-		<nav id="navbar"></nav>
         <div id="profile_img"></div>
         <div id="username">
             <div id="fullname"></div>
@@ -24,7 +24,12 @@
     </div>
     <div id="display">
         <div id="work">
-            <h1>Work</h1>
+            <h1>Work.</h1>
+            <div class="projects" id="work_section"></div>
+        </div>
+        <div id="forks" style="display:none;">
+            <h1>Forks.</h1>
+            <div class="projects" id="forks_section"></div>
         </div>
         <div id="blog_section">
             <h1>Blog.</h1>
@@ -34,7 +39,6 @@
             <a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
         </div>
     </div>
-	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script type="text/javascript">
     setTimeout(function(){
         document.getElementById("loading").classList.add("animated");

assets/themes/dark.css

@@ -17,7 +17,7 @@
   background-clip: text;
   -webkit-text-fill-color: #fff;
 }
-#projects section {
+.projects section {
   background: rgb(20, 20, 20);
 }
 #blog_section section {

blog.js

@@ -55,16 +55,16 @@ function createBlog(title, subtitle, pagetitle, folder) {
 }
 
 if (program.title) {
+    /* Check if build has been executed before blog this will prevent it from giving "link : index.css" error */
+    if (!fs.existsSync(`./dist/index.html`) || !fs.existsSync(`./dist/index.css`)){
+        return console.log("You need to run build command before using blog one");
+    }
     if (!program.pagetitle) {
         program.pagetitle = program.title;
     }
     if (!program.folder) {
         program.folder = program.title;
     }
-    /* Check if build has been executed before blog this will prevent it from giving "link : index.css" error */
-    if (!fs.existsSync(`./dist/index.html`)){
-        return console.log("You need to run build command before using blog one");
-    }
     createBlog(program.title, program.subtitle, program.pagetitle, program.folder);
 } else {
     console.log("Provide a title to create a new blog");

build.js

@@ -14,10 +14,10 @@ const { updateHTML } = require('./populate');
 /* Specify the options the program uses */
 program
     .version('0.1.1')
-  .option('-n, --name [username]', 'get username')
+    .option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
-  .option('-d, --dark', 'enable dark mode')
+    .option('-t, --theme [theme]', 'specify a theme to use')
-  .option('-b, --background [background]', 'set background image')
+    .option('-b, --background [background]', 'set the background image')
-  .option('-f, --fork [order]', 'include forks')
+    .option('-f, --fork', 'includes forks with repos')
     .option('-s, --sort [sort]', 'set default sort for repository')
     .option('-o, --order [order]', 'set default order on sort')
     .parse(process.argv);
@@ -75,6 +75,7 @@ populateCSS();
 if (program.name) {
     let sort = program.sort ? program.sort : 'created_at';
     let order = -1;
+    let includeFork = false;
 	
 	if(program.order){
 		if(program.order === 'asc')
@@ -82,7 +83,10 @@ if (program.name) {
 		else if(program.order === 'desc')
 			order = -1;
     }
-    updateHTML(('%s', program.name), sort, order);
+    if(program.fork){
+        includeFork = true;
+    }
+    updateHTML(('%s', program.name), sort, order, includeFork);
 } else {
     console.error("Error: Please provide a GitHub username.");
 }

populate.js

@@ -27,28 +27,51 @@ function convertToEmoji(text) {
     }
 }
 
-let savedRepos = [];
+module.exports.updateHTML = (username, sort, order, includeFork) => {
-let savedForks = [];
-
-module.exports.updateHTML = (username, sort, order) => {
     //add data to assets/index.html
     jsdom.fromFile("./assets/index.html", options).then(function (dom) {
         let window = dom.window, document = window.document;
         (async () => {
             try {
-             console.log("Building HTML/CSS/JS...");
+                console.log("Building HTML/CSS...");
-            var repos = await got(`https://api.github.com/users/${username}/repos?per_page=1200`);
+                var repos = await got(`https://api.github.com/users/${username}/repos?sort=${sort}&order=${order}&per_page=1200`);
                 repos = JSON.parse(repos.body);
                 for (var i = 0; i < repos.length; i++) {
                     if(repos[i].fork == false){
-					repos[i].description = convertToEmoji(repos[i].description);
+                        document.getElementById("work_section").innerHTML += `
-					savedRepos.push(repos[i]);
+                        <a href="${repos[i].html_url}" target="_blank">
+                        <section>
+                            <div class="section_title">${repos[i].name}</div>
+                            <div class="about_section">
+                            <span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
+                            </div>
+                            <div class="bottom_section">
+                                <span style="display:${repos[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span>
+                                <span><i class="fas fa-star"></i>&nbsp; ${repos[i].stargazers_count}</span>
+                                <span><i class="fas fa-code-branch"></i>&nbsp; ${repos[i].forks_count}</span>
+                            </div>
+                        </section>
+                        </a>`;
                     }else{
-					repos[i].description = convertToEmoji(repos[i].description);
+                        if(includeFork == true){
-					savedForks.push(repos[i]);
+                            document.getElementById("forks").style.display = "block";
+                            document.getElementById("forks_section").innerHTML += `
+                            <a href="${repos[i].html_url}" target="_blank">
+                            <section>
+                                <div class="section_title">${repos[i].name}</div>
+                                <div class="about_section">
+                                <span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
+                                </div>
+                                <div class="bottom_section">
+                                    <span style="display:${repos[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span>
+                                    <span><i class="fas fa-star"></i>&nbsp; ${repos[i].stargazers_count}</span>
+                                    <span><i class="fas fa-code-branch"></i>&nbsp; ${repos[i].forks_count}</span>
+                                </div>
+                            </section>
+                            </a>`;
+                        }
                     }
                 }
-            
                 var user = await got(`https://api.github.com/users/${username}`);
                 user = JSON.parse(user.body);
                 document.title = user.login;
@@ -92,46 +115,3 @@ module.exports.updateHTML = (username, sort, order) => {
         console.log(error);
     });
 }
-
-function populateHTML(type, sort, order, document){
-	let data = require('./dist/' + type + '.json');
-	let result = [];
-	result = data.sort(GetSortOrder(sort, order));
-	if(result.length){
-		for(var i = 0;i < result.length;i++){
-            document.getElementById(type === 'repos' ? 'projects' : 'forks').innerHTML += `
-            <a href="${result[i].html_url}" target="_blank">
-                <section>
-                    <div class="section_title">${result[i].name}</div>
-                       <div class="about_section">
-					<span style="display:${result[i].description == undefined ? 'none' : 'block'};">${result[i].description}</span>
-                    </div>
-                    <div class="bottom_section">
-                        <span style="display:${result[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i>&nbsp; ${result[i].language}</span>
-                        <span><i class="fas fa-star"></i>&nbsp; ${result[i].stargazers_count}</span>
-                        <span><i class="fas fa-code-branch"></i>&nbsp; ${result[i].forks_count}</span>
-                    </div>
-                </section>
-            </a>`;
-		}
-	}
-}
-
-function GetSortOrder(prop, order) {  
-    return function(a, b) {  
-		if(typeof(a[prop]) === 'string'){
-			if (a[prop].toLowerCase() > b[prop].toLowerCase()) {  
-				return 1 * order;  
-			} else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {  
-				return -1 * order;  
-			}  
-		} else {
-			if (a[prop] > b[prop]) {  
-				return 1 * order;  
-			} else if (a[prop] < b[prop]) {  
-				return -1 * order;  
-			}  
-		}
-        return 0;  
-    }  
-}