dylan
/
gitfolio
mirror of https://github.com/dilllxd/gitfolio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2019-05-20 14:47:39 +05:30 committed by GitHub
parent e3efba34c1
commit 14fdafebe4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1402 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
CODE_OF_CONDUCT.md
View File

@ -1,76 +1,76 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at imfunny@wybemf.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at imfunny@wybemf.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

251
README.md
View File

@ -1,128 +1,123 @@
<img src="https://i.imgur.com/eA6clZr.png">
# Gitfolio [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio) ![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)
### personal website + blog for every github user
Gitfolio will help you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.
Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action.
# Getting Started
### Let's Build
```sh
git clone https://github.com/imfunniee/gitfolio.git # Clone the repo
cd gitfolio # Navigate into the project folder
npm i # Install the required dependencies
```
Gitfolio is now ready to be used. The command
```sh
node build --name [username]
```
Will build your website using your GitHub username and put it in the `dist/` folder.
If you want to use a different folder, you can specify it by setting the `--out` flag.
```sh
node build --name [username] --out [directory]
```
To open your site, run
```sh
open dist/index.html
```
If you specified a different output directory, replace `dist/` with the directory you used.
Congrats, you just made yourself a personal website!
> if you get stuck somewhere or get an error, please create an issue
### Let's Customize
#### Enabling Themes
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
* `light`
* `dark`
> TODO: Add more themes
For example, the following command will build the website with the dark theme
```
$ node build --name username --theme dark
```
#### Customize background image
To customize the background image just provide `--background [url]` argument while building
```
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
```
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
### Let's Publish
Push the files to github. You can host your website using github pages by naming your repo ``username.github.io``. You can also your custom domain.
### Updating
To update your info, simply run
```
$ node update
```
This will update your info and your repository info.
To Update background or theme you need to run `build` command again.
### Add a Blog
To add your first blog run this command, make sure the title don't have spaces instead use "-".
```
$ node blog --title my-first-blog
```
This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as [cards](https://imfunniee.github.io/gitfolio/#blog_section). You could customize the JSON object that corresponds your current blog.
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
Default JSON Format
```
{
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
"title": "Lorem ipsum dolor sit amet", // main title of blog
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
"visible": true // don't worry about this
}
```
More Arguments for Blog
```
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
--pagetitle [pagetitle] : gives blog page a title
--folder [folder] : give folder a title
```
> (use "-" instead of spaces)
### Enable Blogs
Blog are disabled by default. To enable them head over to `assets/index.html` and find `<div id="blog_section" style="display:none;">`. Remove the style attribute to show your blogs on your personal website.
If you have run build command before adding a blog you need have to remove the style attribute from `index.html` file aswell.
## License
![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)
<img src="https://i.imgur.com/eA6clZr.png">
# Gitfolio [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio) ![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)
### personal website + blog for every github user
Gitfolio will help you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.
Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action.
# Getting Started
### Let's Build
a. Clone this repo or simply download it.
```sh
git clone https://github.com/imfunniee/gitfolio.git
```
b. `cd` into the repo you just cloned or downloaded.
```sh
cd gitfolio # Navigate into the project folder
npm i # Install the required dependencies
```
c. Gitfolio is now ready to be used. The command
```sh
node build --name [username]
```
Will build your website using your GitHub username and put it in the `dist/` folder.
d. To run your website navigate to `./dist/index.html` in your browser. [you won't see blogs until you are on localhost]
🎉 Congrats, you just made yourself a personal website!
> if you get stuck somewhere or get an error, please create an issue
### Let's Customize
#### Enabling Themes
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
* `light`
* `dark`
> TODO: Add more themes
For example, the following command will build the website with the dark theme
```
$ node build --name username --theme dark
```
#### Customize background image
To customize the background image just provide `--background [url]` argument while building
```
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
```
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.
Go To `username.github.io` your site should be up!!
### Updating
To update your info, simply run
```
$ node update
```
This will update your info and your repository info.
To Update background or theme you need to run `build` command again.
### Add a Blog
To add your first blog run this command, make sure the title don't have spaces instead use "-".
```
$ node blog --title my-first-blog
```
This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as [cards](https://imfunniee.github.io/gitfolio/#blog_section). You could customize the JSON object that corresponds your current blog.
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
Default JSON Format
```
{
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
"title": "Lorem ipsum dolor sit amet", // main title of blog
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
"visible": true // don't worry about this
}
```
More Arguments for Blog
```
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
--pagetitle [pagetitle] : gives blog page a title
--folder [folder] : give folder a title
```
> (use "-" instead of spaces)
## License
![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)

118
assets/index.css
View File

@ -56,7 +56,30 @@ body{
background-size: cover !important;
background-repeat:no-repeat;
position:fixed;
color:#fff !important;
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 {
@ -67,13 +90,54 @@ body{
padding-left:33vw;
}
#display h1 {
#display h1 span {
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;
@ -249,6 +313,11 @@ body{
font-size:16px;
}
#about span a {
color: #fff;
text-decoration: none;
}
#work {
margin:2vh 0px;
padding:4vh 0px !important;
@ -278,6 +347,30 @@ body{
transform:scale(1.03);
}
#forks {
columns:2;
}
#forks 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);
}
#forks 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);
}
.section_title {
font-size:24px;
font-weight:bold;
@ -364,6 +457,27 @@ 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;

17
assets/index.html
View File

@ -7,7 +7,6 @@
<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>
@ -15,6 +14,7 @@
<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,10 +24,9 @@
</div>
<div id="display">
<div id="work">
<h1>Work.</h1>
<div id="projects"></div>
<h1>Work</h1>
</div>
<div id="blog_section" style="display:none;">
<div id="blog_section">
<h1>Blog.</h1>
<div id="blogs"></div>
</div>
@ -35,6 +34,7 @@
<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");
@ -45,10 +45,13 @@
document.getElementById("loading").style.display = "none";
},800);
},1500);
$.getJSON("./blog/blog.json", function(blog){
$.getJSON("blog.json", function(blog){
if(blog.length == 0){
return document.getElementById("blog_section").style.display = "none";
}
for(var i = 0; i < blog.length; i++){
$("#blogs").append(`
<a href="/blog/${blog[i].url_title}/" target="_blank">
<a href="./blog/${blog[i].url_title}/" target="_blank">
<section>
<img src="${blog[i].top_image}">
<div class="blog_container">
@ -59,7 +62,7 @@
</div>
</section>
</a>
`)
`);
}
});
</script>

62
assets/themes/dark.css
View File

@ -1,31 +1,31 @@
:root {
--bg-color: rgb(10, 10, 10);
--text-color: #fff;
--blog-gray-color: rgb(180, 180, 180);
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
url("{{background-image}}") center center fixed;
--height: 50vh;
}
#display h1 {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #fff;
}
#blog-display h1 {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #fff;
}
#projects section {
background: rgb(20, 20, 20);
}
#blog_section section {
background: rgb(20, 20, 20);
}
@media (max-width: 800px) {
:root {
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
url("{{background-image}}") !important;
}
}
:root {
--bg-color: rgb(10, 10, 10);
--text-color: #fff;
--blog-gray-color: rgb(180, 180, 180);
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
url("{{background-image}}") center center fixed;
--height: 50vh;
}
#display h1 {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #fff;
}
#blog-display h1 {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #fff;
}
#projects section {
background: rgb(20, 20, 20);
}
#blog_section section {
background: rgb(20, 20, 20);
}
@media (max-width: 800px) {
:root {
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
url("{{background-image}}") !important;
}
}

14
assets/themes/light.css
View File

@ -1,7 +1,7 @@
:root {
--bg-color: #fff;
--text-color: rgb(10, 10, 10);
--blog-gray-color: rgb(80, 80, 80);
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("{{background}}");
--background-background: #fff;
}
:root {
--bg-color: #fff;
--text-color: rgb(10, 10, 10);
--blog-gray-color: rgb(80, 80, 80);
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("{{background}}");
--background-background: #fff;
}

8
blog.js
View File

@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) {
"sub_title": subtitle,
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
"visible": true }
fs.readFile("./assets/blog/blog.json", function (err , data) {
fs.readFile("./dist/blog.json", function (err , data) {
if (err) throw err;
var old_blogs = JSON.parse(data);
old_blogs.push(blog_data);
fs.writeFile('./assets/blog/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
fs.writeFile('./dist/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
if (err) throw err;
console.log('Blog Created Successfully in "blog" folder.');
});
@ -61,6 +61,10 @@ if (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");

29
build.js
View File

@ -13,16 +13,18 @@ const { updateHTML } = require('./populate');
/* Specify the options the program uses */
program
.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('-o, --out [directory]', 'the output directory to put the built site')
.parse(process.argv);
.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);
const config = 'config.json';
const config = './dist/config.json';
const assetDir = path.resolve('./assets/');
const outDir = path.resolve(program.out || './dist/');
const outDir = path.resolve('./dist/');
/**
* Creates the stylesheet used by the site from a template stylesheet.
@ -71,7 +73,16 @@ async function populateCSS() {
populateCSS();
if (program.name) {
updateHTML(('%s', program.name));
let sort = program.sort ? program.sort: 'created_at';
let order = -1;
if(program.order){
if(program.order === 'asc')
order = 1;
else if(program.order === 'desc')
order = -1;
}
updateHTML(('%s', program.name), sort, order);
} else {
console.error("Error: Please provide a GitHub username.");
}

1
dist/blog.json vendored Normal file
View File

@ -0,0 +1 @@
[]

8
dist/config.json vendored Normal file
View File

@ -0,0 +1,8 @@
[
{
"username": "imfunniee",
"name": "imfunny",
"userimg": "https://avatars3.githubusercontent.com/u/36105478?v=4",
"theme": "light.css"
}
]

549
dist/index.css vendored Normal file
View File

@ -0,0 +1,549 @@
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
margin:0%;
padding:0%;
width:100vw;
background:var(--bg-color);
color:var(--text-color);
max-width:100vw;
overflow-x:hidden;
align-items:center;
font-family: 'Poppins', sans-serif;
}
#loading {
width: 100vw;
height: 100vh;
position: fixed;
background: var(--bg-color);
z-index: 999;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top:0;
bottom:0;
left:0;
right:0;
}
#spinner {
animation: rotate 0.5s infinite linear;
width:50px;
height:50px;
border:2px solid var(--bg-color);
border-bottom:2px solid var(--text-color);
border-radius:50%;
margin:0;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#profile {
width:24vw;
padding:4vh 3vw;
height:92vh;
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
background:var(--background-image) center center;
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);
}
#display {
width:64vw;
padding:4vh 3vw;
height:92vh;
display:inline-block;
padding-left:33vw;
}
#display h1 span {
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;
}
#profile_img_blog {
border-radius:50%;
width:90px;
height:90px;
background-size:cover !important;
background-repeat: no-repeat;
}
#username_blog {
font-size:18px;
color:var(--text-color);
font-family: 'Poppins', sans-serif;
font-weight:bold;
}
#username_blog span {
font-size:24px;
font-family: 'Questrial', sans-serif !important;
}
#username_blog b {
font-size:12px;
font-family:'Poppins', sans-serif;
font-weight:bold;
}
#blog-display {
width:60vw;
margin:0px 20vw;
text-align:left;
margin-top:3vh;
z-index:1;
}
#profile_blog {
width:60vw;
margin:0px 20vw;
margin-top:10vh;
text-align:left;
z-index:1;
}
#background {
width:100vw;
height:55vh;
background:var(--background-background);
background-size:cover !important;
background-repeat:no-repeat;
position: absolute;
z-index:-1;
margin-top:-10vh;
}
#blog-display h1 {
font-size:50px;
color:var(--text-color);
font-weight:bold;
font-family: 'Questrial', sans-serif;
}
#blog-display h2 {
color:var(--blog-gray-color);
}
#blog-display {
padding:1vh 0px;
font-family: 'Questrial', sans-serif;
}
#blog p {
font-size:17px;
line-height:25px;
word-spacing:1.2px;
margin:5vh 0px;
}
#blog p span {
padding:2px 4px;
background:var(--text-color);
color:var(--bg-color) !important;
}
#blog img {
width:100%;
margin:2vh 0px;
border-radius:5px;
border:1px solid rgb(0, 0, 0, 0.08);
}
#header {
width:63vw;
text-align:right;
padding:3vh 0px;
position:absolute;
}
#header a {
color:var(--text-color);
text-decoration:none;
margin-left:4vw;
font-weight:bold;
}
#footer_blog {
width:90vw;
padding:8vh 5vw;
text-align:center;
}
#footer_blog a {
color:var(--text-color) !important;
text-decoration:none;
font-family: 'Questrial', sans-serif;
font-weight:bold;
}
#footer {
width:100%;
padding:8vh 0px;
text-align:center;
}
#footer a {
color:var(--text-color) !important;
text-decoration:none;
font-family: 'Questrial', sans-serif;
font-weight:bold;
}
#profile_img {
width:180px;
height:180px;
border-radius:5px;
background-size:cover !important;
}
#profile div {
font-weight:bold;
margin:1.5vh 0px;
}
#username {
font-size:18px;
font-weight:bold;
}
#username span {
font-size:24px;
}
#userbio {
font-size:26px;
font-family: 'Questrial', sans-serif;
width:100%;
}
#about {
font-size:18px;
font-family: 'Questrial', sans-serif;
}
#about span {
margin:1vh 0px;
display:block;
}
#about span i {
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 {
columns:2;
}
#forks 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);
}
#forks 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);
}
.section_title {
font-size:24px;
font-weight:bold;
margin:1vh 0px;
}
.about_section {
font-size:18px;
font-family: 'Questrial', sans-serif;
margin:2vh 0px;
font-weight:bold;
}
.bottom_section {
margin:1vh 0px;
font-size:14px;
}
.bottom_section span {
margin-right:20px;
font-weight:bold;
}
.bottom_section span i {
font-size:15px;
}
#blog_section {
margin:2vh 0px;
padding:2vh 0px !important;
}
#blogs {
columns:2;
}
#blogs section {
width:85%;
display:inline-block;
border-radius:5px;
color:var(--text-color);
border:1px solid rgb(0, 0, 0, 0.04);
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
transition:0.4s ease-in-out;
transform:scale(1);
padding:0px;
margin:2vh 0px;
}
#blogs section img {
width:100%;
border-radius:5px 5px 0px 0px;
}
.blog_container {
padding:2.5vh 5%;
}
#blogs 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);
}
.go_back {
position: absolute;
color:var(--text-color);
font-size:26px;
margin-left:5vw;
margin-top:4vh;
}
::selection {
color:var(--bg-color);
background:var(--text-color);
}
@media (max-width: 800px){
#profile {
width:90vw;
padding:4vh 5vw;
height:60vh;
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;
height:auto;
display:inline-block;
padding-left:5vw;
}
#profile_img {
width:120px;
height:120px;
margin:0px auto !important;
}
#work {
margin:0px;
}
#projects {
columns:1;
}
#projects section {
width:88%;
}
#blogs {
columns:1;
}
#blogs section {
width:98%;
}
#blog_section {
margin:0px;
}
#blog-display {
width:90vw;
margin:0px 5vw;
text-align:left;
margin-top:0vh;
z-index:1;
}
#profile_blog {
width:90vw;
margin:0px 5vw;
margin-top:10vh;
text-align:left;
z-index:1;
}
.go_back {
position: relative;
color:var(--text-color);
font-size:26px;
margin-left:5vw;
top:5vh;
}
#blog img {
margin:1vh 0px !important;
}
#blog p {
margin:2vh 0px;
}
}
::-webkit-scrollbar {width:5px;height:5px;}
::-webkit-scrollbar-track {background:var(--bg-color);}
::-webkit-scrollbar-thumb {background:var(--text-color);}:root {
--bg-color: #fff;
--text-color: rgb(10, 10, 10);
--blog-gray-color: rgb(80, 80, 80);
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w&#x3D;1450");
--background-background: #fff;
}

360
dist/index.html vendored Normal file
View File

@ -0,0 +1,360 @@
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>imfunniee</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">
<link rel="stylesheet" href="index.css">
<link rel="icon" href="https://avatars3.githubusercontent.com/u/36105478?v=4" type="image/png"></head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="profile">
<nav id="navbar">
<a href="#projects">Projects</a>
<a href="#forks">Forks</a></nav>
<div id="profile_img" style="background: url(https://avatars3.githubusercontent.com/u/36105478?v=4) center;"></div>
<div id="username"><span style="display:block;">imfunny</span>@imfunniee</div>
<div id="userbio" style="display: block;">Frontend Developer | UI/UX designer</div>
<div id="about">
<span style="display:none;"><i class="fas fa-users"></i> &nbsp; null</span>
<span style="display:none;"><i class="fas fa-envelope"></i> &nbsp; null</span>
<span style="display:block;"><i class="fas fa-link"></i> &nbsp; https://imfunniee.github.io/</span>
<span style="display:block;"><i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp; Mars</span>
<span style="display:block;"><i class="fas fa-user-tie"></i> &nbsp;&nbsp; Available for hire</span></div>
</div>
<div id="display">
<div id="work">
<h1>Projects</h1>
<div>
<span>Filter by:
<select onchange="onFilterChange('repos');" id="repos_filter" autocomplete="off">
<option value="" selected="">---</option>
<option value="date">Date</option>
<option value="name">Name</option>
<option value="stared">Stared</option>
<option value="forked">Forked</option>
</select>
</span>
</div>
<div id="projects">
<a href="https://github.com/imfunniee/chat-on-github" target="_blank">
<section>
<div class="section_title">chat-on-github</div>
<div class="about_section">
<span style="display:none;">undefined</span>
</div>
<div class="bottom_section">
<span style="display:none;"><i class="fas fa-code"></i>&nbsp; null</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 2</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/gitfolio" target="_blank">
<section>
<div class="section_title">gitfolio</div>
<div class="about_section">
<span style="display:block;"><img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> personal website + blog for every github user</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 871</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 69</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/gitark" target="_blank">
<section>
<div class="section_title">gitark</div>
<div class="about_section">
<span style="display:block;"><img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> Dark theme for Github</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; CSS</span>
<span><i class="fas fa-star"></i>&nbsp; 111</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 11</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/polymerBot" target="_blank">
<section>
<div class="section_title">polymerBot</div>
<div class="about_section">
<span style="display:block;">🤖 A Discord bot for Moderation and stuff </span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 1</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/secret-img" target="_blank">
<section>
<div class="section_title">secret-img</div>
<div class="about_section">
<span style="display:block;">encrypt/decrypt images 🤫 </span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 2</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/yt-upload" target="_blank">
<section>
<div class="section_title">yt-upload</div>
<div class="about_section">
<span style="display:block;">basically youtube in your terminal</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 1</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/youtube-discord-rpc" target="_blank">
<section>
<div class="section_title">youtube-discord-rpc</div>
<div class="about_section">
<span style="display:block;">🎵 Discord Rich Presence for Youtube </span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 2</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/pymine" target="_blank">
<section>
<div class="section_title">pymine</div>
<div class="about_section">
<span style="display:block;">python learns to play minecraft (TOTALLY not copying https://github.com/Sentdex/pygta5 😂)</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; Python</span>
<span><i class="fas fa-star"></i>&nbsp; 2</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/NoOS" target="_blank">
<section>
<div class="section_title">NoOS</div>
<div class="about_section">
<span style="display:block;">🚀 A OS launcher that runs on your current OS</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 4</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 1</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/zucc" target="_blank">
<section>
<div class="section_title">zucc</div>
<div class="about_section">
<span style="display:block;">browser voice-controlled personal assistant</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 1</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 1</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/todo" target="_blank">
<section>
<div class="section_title">todo</div>
<div class="about_section">
<span style="display:block;">a todo app ;)</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; CSS</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 1</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/meteo" target="_blank">
<section>
<div class="section_title">meteo</div>
<div class="about_section">
<span style="display:block;">⛈ a simple weather app</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; HTML</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/Pluto" target="_blank">
<section>
<div class="section_title">Pluto</div>
<div class="about_section">
<span style="display:block;">a peer to peer video and text chat</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; HTML</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/imfunniee.github.io" target="_blank">
<section>
<div class="section_title">imfunniee.github.io</div>
<div class="about_section">
<span style="display:block;">👨‍💻 personal portfolio website and projects</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; HTML</span>
<span><i class="fas fa-star"></i>&nbsp; 4</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 1</span>
</div>
</section>
</a></div>
<hr>
<h1>Forks</h1>
<div>
<span>Filter by:
<select onchange="onFilterChange('forks');" id="forks_filter" autocomplete="off">
<option value="" selected="">---</option>
<option value="date">Date</option>
<option value="name">Name</option>
<option value="stared">Stared</option>
<option value="forked">Forked</option>
</select>
</span>
</div>
<div id="forks">
<a href="https://github.com/imfunniee/opensource.guide" target="_blank">
<section>
<div class="section_title">opensource.guide</div>
<div class="about_section">
<span style="display:block;">Community guides for open source creators</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; JavaScript</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/node-github-emoji" target="_blank">
<section>
<div class="section_title">node-github-emoji</div>
<div class="about_section">
<span style="display:block;">Node.js library for GitHub Emoji <img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> typed with TypeScript</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; TypeScript</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/awesome-css-frameworks" target="_blank">
<section>
<div class="section_title">awesome-css-frameworks</div>
<div class="about_section">
<span style="display:block;">List of awesome CSS frameworks</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; CSS</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/discord-vscode" target="_blank">
<section>
<div class="section_title">discord-vscode</div>
<div class="about_section">
<span style="display:block;">🖋️ Update your discord status with the newly added rich presence</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; TypeScript</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/adobe-rpc" target="_blank">
<section>
<div class="section_title">adobe-rpc</div>
<div class="about_section">
<span style="display:block;">A universal Discord Rich Presence for almost all of Adobe's apps.</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; Python</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a>
<a href="https://github.com/imfunniee/8D-Audio" target="_blank">
<section>
<div class="section_title">8D-Audio</div>
<div class="about_section">
<span style="display:block;">Some dsp to make songs "8D"</span>
</div>
<div class="bottom_section">
<span style="display:inline-block;"><i class="fas fa-code"></i>&nbsp; Python</span>
<span><i class="fas fa-star"></i>&nbsp; 0</span>
<span><i class="fas fa-code-branch"></i>&nbsp; 0</span>
</div>
</section>
</a></div>
</div>
<div id="blog_section">
<h1>Blog.</h1>
<div id="blogs"></div>
</div>
<div id="footer">
<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 src="index.js"></script>
<script type="text/javascript">
setTimeout(function(){
document.getElementById("loading").classList.add("animated");
document.getElementById("loading").classList.add("fadeOut");
setTimeout(function(){
document.getElementById("loading").classList.remove("animated");
document.getElementById("loading").classList.remove("fadeOut");
document.getElementById("loading").style.display = "none";
},800);
},1500);
$.getJSON("blog.json", function(blog){
if(blog.length == 0){
return document.getElementById("blog_section").style.display = "none";
}
for(var i = 0; i < blog.length; i++){
$("#blogs").append(`
<a href="./blog/${blog[i].url_title}/" target="_blank">
<section>
<img src="${blog[i].top_image}">
<div class="blog_container">
<div class="section_title">${blog[i].title}</div>
<div class="about_section">
${blog[i].sub_title}
</div>
</div>
</section>
</a>
`);
}
});
</script>
</body></html>

150
populate.js
View File

@ -27,68 +27,63 @@ function convertToEmoji(text) {
}
}
module.exports.updateHTML = (username) => {
let savedRepos = [];
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...");
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
repos = JSON.parse(repos.body);
for (var i = 0; i < repos.length; i++) {
if (repos[i].fork == false) {
document.getElementById("projects").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;
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> &nbsp; ${user.company}</span>
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span>
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> &nbsp; ${user.blog}</span>
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp; ${user.location}</span>
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> &nbsp;&nbsp; Available for hire</span>`;
//add data to config.json
fs.readFile("config.json", function (err, data) {
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> &nbsp; ${user.company}</span>
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span>
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> &nbsp; ${user.blog}</span>
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp; ${user.location}</span>
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> &nbsp;&nbsp; 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;
data = JSON.parse(data);
data[0].username = user.login;
data[0].name = user.name;
data[0].userimg = user.avatar_url;
fs.writeFile('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);
}
@ -96,4 +91,47 @@ module.exports.updateHTML = (username) => {
}).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>&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;
}
}

2
update.js
View File

@ -1,7 +1,7 @@
const fs = require('fs');
const {updateHTML} = require('./populate');
fs.readFile("config.json", function (err , data) {
fs.readFile("./dist/config.json", function (err , data) {
if (err) throw err;
data = JSON.parse(data);
var username = data[0].username;