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
imfunniee · May 20, 2019 · 9c3538a · 9c3538a
1 parent 108bc06
commit 9c3538a
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 233 deletions.
diff --git a/README.md b/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.

diff --git a/assets/index.css b/assets/index.css
@@ -56,30 +56,7 @@ body{
     background-size: cover !important;
     background-repeat:no-repeat;
     position:fixed;
-	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);
+    color:#fff !important;
 }
 
 #display {
@@ -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;
+#forks {
     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);
+    padding:4vh 0px !important;
 }
 
-#forks {
+.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;

diff --git a/assets/index.html b/assets/index.html
@@ -7,14 +7,14 @@
     <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>
     <div id="loading">
         <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 @@ <h1>Blog.</h1>
             <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");

diff --git a/assets/themes/dark.css b/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 {

diff --git a/blog.js b/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");

diff --git a/build.js b/build.js
@@ -13,14 +13,14 @@ const { updateHTML } = require('./populate');
 
 /* Specify the options the program uses */
 program
-  .version('0.1.1')
-  .option('-n, --name [username]', 'get username')
-  .option('-d, --dark', 'enable dark mode')
-  .option('-b, --background [background]', 'set background image')
-  .option('-f, --fork [order]', 'include forks')
-  .option('-s, --sort [sort]', 'set default sort for repository')
-  .option('-o, --order [order]', 'set default order on sort')
-  .parse(process.argv);
+    .version('0.1.1')
+    .option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
+    .option('-t, --theme [theme]', 'specify a theme to use')
+    .option('-b, --background [background]', 'set the background image')
+    .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);
 
 const config = './dist/config.json';
 const assetDir = path.resolve('./assets/');
@@ -73,16 +73,20 @@ async function populateCSS() {
 populateCSS();
 
 if (program.name) {
-    let sort = program.sort ? program.sort: 'created_at';
-	let order = -1;
+    let sort = program.sort ? program.sort : 'created_at';
+    let order = -1;
+    let includeFork = false;
 
 	if(program.order){
 		if(program.order === 'asc')
 			order = 1;
 		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.");
 }
diff --git a/dist/config.json b/dist/config.json
@@ -5,4 +5,4 @@
   "userimg": null,
   "theme": "light"
  }
-]
+]