mirror of https://github.com/dilllxd/gitfolio.git
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
This commit is contained in:
imfunny
GitHub
parent
108bc06bdb
commit
9c3538a387
|
|
@ -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.
|
||||
|
|
|
|||
127
assets/index.css
127
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;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
#projects section {
|
||||
.projects section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
#blog_section section {
|
||||
|
|
|
|||
8
blog.js
8
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");
|
||||
|
|
|
|||
28
build.js
28
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.");
|
||||
}
|
||||
|
|
@ -5,4 +5,4 @@
|
|||
"userimg": null,
|
||||
"theme": "light"
|
||||
}
|
||||
]
|
||||
]
|
||||
168
populate.js
168
populate.js
|
|
@ -27,63 +27,86 @@ function convertToEmoji(text) {
|
|||
}
|
||||
}
|
||||
|
||||
let savedRepos = [];
|
||||
let savedForks = [];
|
||||
|
||||
module.exports.updateHTML = (username, sort, order) => {
|
||||
module.exports.updateHTML = (username, sort, order, includeFork) => {
|
||||
//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...");
|
||||
var repos = await got(`https://api.github.com/users/${username}/repos?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);
|
||||
savedRepos.push(repos[i]);
|
||||
} else {
|
||||
repos[i].description = convertToEmoji(repos[i].description);
|
||||
savedForks.push(repos[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var user = await got(`https://api.github.com/users/${username}`);
|
||||
user = JSON.parse(user.body);
|
||||
document.title = user.login;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||
//add data to config.json
|
||||
fs.readFile("./dist/config.json", function (err, data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||
console.log("Building HTML/CSS...");
|
||||
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){
|
||||
document.getElementById("work_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> ${repos[i].language}</span>
|
||||
<span><i class="fas fa-star"></i> ${repos[i].stargazers_count}</span>
|
||||
<span><i class="fas fa-code-branch"></i> ${repos[i].forks_count}</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>`;
|
||||
}else{
|
||||
if(includeFork == true){
|
||||
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> ${repos[i].language}</span>
|
||||
<span><i class="fas fa-star"></i> ${repos[i].stargazers_count}</span>
|
||||
<span><i class="fas fa-code-branch"></i> ${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;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||
//add data to config.json
|
||||
fs.readFile("./dist/config.json", function (err, data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
});
|
||||
fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -91,47 +114,4 @@ module.exports.updateHTML = (username, sort, order) => {
|
|||
}).catch(function (error) {
|
||||
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> ${result[i].language}</span>
|
||||
<span><i class="fas fa-star"></i> ${result[i].stargazers_count}</span>
|
||||
<span><i class="fas fa-code-branch"></i> ${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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue