1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00

Add files via upload

This commit is contained in:
imfunny 2019-08-12 09:40:00 +05:30 committed by GitHub
parent 4a2872171d
commit ee354ae852
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 3180 additions and 2387 deletions

View file

@ -1,14 +1,13 @@
<img src="https://i.imgur.com/eA6clZr.png">
# Gitfolio [![Tweet](https://img.shields.io/twitter/url/https/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?style=popout-square) ![npm](https://img.shields.io/npm/dm/gitfolio.svg?style=popout-square) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg?style=popout-square) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg?style=popout-square) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg?style=popout-square)
### personal website + blog for every github user
# Gitfolio [![Tweet](https://img.shields.io/twitter/url/https/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20@imfunnieee%20&url=https://github.com/imfunniee/gitfolio) ![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg?style=popout-square) ![npm](https://img.shields.io/npm/dm/gitfolio.svg?style=popout-square) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg?style=popout-square) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg?style=popout-square) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg?style=popout-square)
### 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 Install
@ -21,22 +20,30 @@ npm i gitfolio -g
### Let's Build
Using the UI
```sh
$ gitfolio ui
```
> Tip: You can use ui to create new blogs and for updating your folio too.
or
```sh
gitfolio build <username>
```
`<username>` is your username on github. This will build your website using your GitHub username and put it in the `/dist` folder.
To run your website use `run` command
To run your website use `run` command, Default port is 3000
```sh
gitfolio run
gitfolio run -p [port]
```
Open your browser at http://localhost:3000
🎉 Congrats, you just made yourself a personal website!
### Let's Customize
#### Forks
@ -67,11 +74,12 @@ $ gitfolio build <username> --sort star --order desc
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
* `light`
* `dark`
> TODO: Add more themes
- `light`
- `dark`
> TODO: Add more themes
For example, the following command will build the website with the dark theme
```sh
$ gitfolio build <username> --theme dark
```
@ -86,19 +94,20 @@ $ gitfolio build <username> --background https://images.unsplash.com/photo-15572
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
### Add Twitter, LinkedIn and Medium Links on your profile
### Add Twitter, LinkedIn and Medium links on your profile
Twitter, LinkedIn and Medium Links to your profile while building
```sh
gitfolio build <username> --twitter <twitter_username> --linkedin <linkedin_username> --medium <medium_username>
```
### 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
@ -106,27 +115,33 @@ To update your info, simply run
```sh
$ gitfolio update
```
or use the `Update` options in gitfolio's UI
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.
To add your first blog use the UI.
```sh
$ gitfolio blog my-first-blog
$ gitfolio ui
```
> (use "-" instead of spaces)
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 will open up a UI page and you can click on `New Blog` to create a new blog. Once you are done writing your blog you can hit the `Create Blog`.
This will create a blog inside `./dist/blog` folder.
Look for success or error in your terminal.
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-post/)
Default JSON Format
Blog's default JSON Format
```
{
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
@ -137,16 +152,10 @@ Default JSON Format
}
```
More Arguments for Blog
```
--subtitle [subtitle] : gives blog a subtitle (Default : '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)
### Follow me on twitter for more updates
🙌 [@imfunnieee](https://twitter.com/imfunnieee)
## License
![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg?style=popout-square)

View file

@ -1,9 +1 @@
[
{
"url_title": "FooBar",
"title": "FooBar",
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
"visible": true
}
]
[]

View file

@ -1,64 +1,125 @@
<!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">
<!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>Lorem ipsum dolor</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>
</head>
<body>
<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>
</head>
<body>
<div id="loading">
<div id="spinner"></div>
<div id="spinner"></div>
</div>
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
<div id="background_overlay"></div>
<div id="background"></div>
<table id="profile_blog">
<tbody><tr>
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
<td style="width:52vw;">
<div id="username_blog"></div>
</td>
<tbody>
<tr>
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
<td style="width:52vw;">
<div id="username_blog"></div>
</td>
</tr>
</tbody></table>
</tbody>
</table>
<div id="blog-display">
<h1 id="blog_title">Lorem ipsum dolor</h1>
<h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<div id="blog">
<img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis ac egestas. Phasellus volutpat tristique maximus. <b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat, sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan velit condimentum, pharetra felis vitae, commodo tellus. <u><i>Mauris consequat luctus orci.</i></u></p>
<p>
Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue quis sodales. Quisque rutrum ligula nec dapibus tincidunt. <span>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum iaculis. Suspendisse potenti.</span> Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat. Integer blandit, felis at ullamcorper maximus, odio lectus pretium mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec diam eget vehicula.
</p>
<img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050">
<p>
Donec hendrerit turpis non libero eleifend dignissim. Mauris non tempor metus, et tristique massa. Integer consequat justo quam, vitae aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis. Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus semper ligula at tincidunt. Pellentesque accumsan varius vehicula.
</p>
</div>
<h1 id="blog_title">Lorem ipsum dolor</h1>
<h2 id="blog_sub_title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h2>
<div id="blog">
<img
src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat
pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis
ac egestas. Phasellus volutpat tristique maximus.
<b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat,
sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan
velit condimentum, pharetra felis vitae, commodo tellus.
<u><i>Mauris consequat luctus orci.</i></u>
</p>
<p>
Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi
vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue
quis sodales. Quisque rutrum ligula nec dapibus tincidunt.
<span
>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum
iaculis. Suspendisse potenti.</span
>
Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat.
Integer blandit, felis at ullamcorper maximus, odio lectus pretium
mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec
diam eget vehicula.
</p>
<img
src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050"
/>
<p>
Donec hendrerit turpis non libero eleifend dignissim. Mauris non
tempor metus, et tristique massa. Integer consequat justo quam, vitae
aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis.
Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis
nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus
semper ligula at tincidunt. Pellentesque accumsan varius vehicula.
</p>
</div>
</div>
<div id="footer_blog">
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
<a href="https://github.com/imfunniee" target="_blank"
>made on earth by a human</a
>
</div>
<script type="text/javascript">
setTimeout(function(){
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("../../config.json", function(user){
setTimeout(function() {
document.getElementById("loading").classList.remove("animated");
document.getElementById("loading").classList.remove("fadeOut");
document.getElementById("loading").style.display = "none";
}, 800);
}, 1500);
$.getJSON("../../config.json", function(user) {
var icon = document.createElement("link");
icon.setAttribute("rel", "icon");
icon.setAttribute("href", user[0].userimg);
icon.setAttribute("type", "image/png");
document.getElementsByTagName("head")[0].appendChild(icon);
document.getElementById("profile_img_blog").style.background = `url('${user[0].userimg}') center center`;
document.getElementById("username_blog").innerHTML = `<spanstyle="display:${user[0].name == null || !user[0].name ? 'none' : 'block'};">${user[0].name}</span><br>@${user[0].username}<b id="blog_time"></b>`;
});
</script>
document.getElementById("profile_img_blog").style.background = `url('${
user[0].userimg
}') center center`;
document.getElementById(
"username_blog"
).innerHTML = `<span style="display:${
user[0].name == null || !user[0].name ? "none" : "block"
};">${user[0].name}</span>@${user[0].username}<b id="blog_time"></b>`;
</body></html>
if ((user[0].theme = "dark.css")) {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.1))";
} else {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1))";
}
});
</script>
</body>
</html>

View file

@ -1,15 +1,15 @@
@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;
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;
}
@ -23,448 +23,525 @@ body{
justify-content: center;
flex-direction: column;
align-items: center;
top:0;
bottom:0;
left:0;
right:0;
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;
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);}
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;
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;
background-repeat: no-repeat;
position: fixed;
color: #fff !important;
}
#display {
width:64vw;
padding:4vh 3vw;
height:92vh;
display:inline-block;
padding-left:33vw;
width: 64vw;
padding: 4vh 3vw;
height: 92vh;
display: inline-block;
padding-left: 33vw;
}
#display h1 {
font-size:50px;
color:var(--text-color);
font-weight:bold;
font-size: 50px;
color: var(--text-color);
font-weight: bold;
font-family: 'Questrial', sans-serif;
}
.emoji {
width:18px;
height:18px;
width: 18px;
height: 18px;
}
#profile_img_blog {
border-radius:50%;
width:90px;
height:90px;
background-size:cover !important;
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-size: 18px;
color: var(--text-color);
font-family: 'Poppins', sans-serif;
font-weight:bold;
font-weight: bold;
}
#username_blog span {
font-size:24px;
font-size: 24px;
font-family: 'Questrial', sans-serif !important;
}
#username_blog b {
font-size:12px;
font-family:'Poppins', sans-serif;
font-weight:bold;
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;
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;
width: 60vw;
margin: 0px 20vw;
margin-top: 34vh;
text-align: left;
z-index: 1;
}
#background_overlay {
width: 100vw;
height: 55vh;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
#background {
width:100vw;
height:55vh;
background:var(--background-background);
background-size:cover !important;
background-repeat:no-repeat;
width: 100vw;
height: 55vh;
background-size: cover !important;
background-repeat: no-repeat !important;
position: absolute;
z-index:-1;
margin-top:-10vh;
z-index: -2;
top: 0;
left: 0;
}
#blog-display h1 {
font-size:50px;
color:var(--text-color);
font-weight:bold;
font-size: 50px;
color: var(--text-color);
font-weight: bold;
font-family: 'Questrial', sans-serif;
}
#blog-display h2 {
color:var(--blog-gray-color);
color: var(--blog-gray-color);
}
#blog-display {
padding:1vh 0px;
padding: 1vh 0px;
font-family: 'Questrial', sans-serif;
}
#blog p {
font-size:17px;
line-height:25px;
word-spacing:1.2px;
margin:5vh 0px;
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;
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);
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;
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;
color: var(--text-color);
text-decoration: none;
margin-left: 4vw;
font-weight: bold;
}
#footer_blog {
width:90vw;
padding:8vh 5vw;
text-align:center;
width: 90vw;
padding: 8vh 5vw;
text-align: center;
}
#footer_blog a {
color:var(--text-color) !important;
text-decoration:none;
color: var(--text-color) !important;
text-decoration: none;
font-family: 'Questrial', sans-serif;
font-weight:bold;
font-weight: bold;
}
#footer {
width:100%;
padding:8vh 0px;
text-align:center;
width: 100%;
padding: 8vh 0px;
text-align: center;
}
#footer a {
color:var(--text-color) !important;
text-decoration:none;
color: var(--text-color) !important;
text-decoration: none;
font-family: 'Questrial', sans-serif;
font-weight:bold;
font-weight: bold;
}
#profile_img {
width:180px;
height:180px;
min-width:180px;
min-height:180px;
max-width:180px;
max-height:180px;
border-radius:5px;
background-size:cover !important;
background-repeat:no-repeat !important;
width: 180px;
height: 180px;
min-width: 180px;
min-height: 180px;
max-width: 180px;
max-height: 180px;
border-radius: 5px;
background-size: cover !important;
background-repeat: no-repeat !important;
}
#profile div {
font-weight:bold;
margin:1.5vh 0px;
font-weight: bold;
margin: 1.5vh 0px;
}
#username {
font-size:18px;
font-weight:bold;
font-size: 18px;
font-weight: bold;
}
#username span {
font-size:24px;
font-size: 24px;
}
#userbio {
font-size:26px;
font-size: 26px;
font-family: 'Questrial', sans-serif;
width:100%;
width: 100%;
}
#about {
font-size:18px;
font-size: 18px;
font-family: 'Questrial', sans-serif;
}
#about a,
#username a {
color:#fff !important;
text-decoration:none;
font-weight:bold;
color: #fff !important;
text-decoration: none;
font-weight: bold;
}
#about a:hover,
#username a:hover {
text-decoration:underline;
text-decoration: underline;
}
#about span {
margin:1vh 0px;
display:block;
margin: 1vh 0px;
display: block;
}
#about span i {
font-size:16px;
font-size: 16px;
}
#work {
margin:2vh 0px;
padding:4vh 0px !important;
margin: 2vh 0px;
padding: 4vh 0px !important;
}
#forks {
margin:2vh 0px;
padding:4vh 0px !important;
margin: 2vh 0px;
padding: 4vh 0px !important;
}
.projects {
margin-left: -15px; /* align section w/ heading above */
margin-left: -15px;
/* align section w/ heading above */
}
.projects a {
/* 30px is the gutter size in magic grid */
width: calc(49% - 30px); /* 49% avoids a weird single column on some wide screens */
display: flex;
text-decoration: none;
/* 30px is the gutter size in magic grid */
width: calc(49% - 30px);
/* 49% avoids a weird single column on some wide screens */
display: flex;
text-decoration: none;
}
.projects section {
width: 100%;
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;
transform:scale(1);
padding: 2.5vh 5%;
margin: 1vh 0px;
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;
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);
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;
padding:0px 1px;
font-size: 24px;
font-weight: bold;
margin: 1vh 0px;
padding: 0px 1px;
word-wrap: break-word;
}
.about_section {
font-size:18px;
font-size: 18px;
font-family: 'Questrial', sans-serif;
margin:2vh 0px;
font-weight:bold;
margin: 2vh 0px;
font-weight: bold;
word-wrap: break-word;
}
.bottom_section {
margin:1vh 0px;
font-size:14px;
margin: 1vh 0px;
font-size: 14px;
word-wrap: break-word;
}
.bottom_section span {
margin-right:20px;
font-weight:bold;
margin-right: 20px;
font-weight: bold;
}
.bottom_section span i {
font-size:15px;
font-size: 15px;
}
.socials {
color: #fff;
text-decoration: none;
margin: 3vh 0px !important;
}
.socials span {
display: inline-block !important;
margin-right: 2vw !important;
font-weight: normal !important;
}
.socials span a {
font-weight: normal !important;
}
#blog_section {
margin:2vh 0px;
padding:2vh 0px !important;
margin: 2vh 0px;
padding: 2vh 0px !important;
}
#blogs {
columns: 2;
}
#blog_title {
font-size: 50px;
}
#blog_sub_title {
font-size: 36px;
margin-top: -2vh;
}
#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;
width: 100%;
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;
width: 100%;
border-radius: 5px 5px 0px 0px;
}
.blog_container {
padding:2.5vh 5%;
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);
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;
color: var(--text-color);
font-size: 26px;
margin-left: 5vw;
margin-top: 4vh;
}
::selection {
color:var(--bg-color);
background:var(--text-color);
color: var(--bg-color);
background: var(--text-color);
}
@media (max-width: 800px){
@media (max-width: 800px) {
#profile {
width:90vw;
padding:4vh 5vw;
height:60vh;
text-align:center;
width: 90vw;
padding: 4vh 5vw;
height: 60vh;
text-align: center;
position: relative;
}
#display {
width:90vw;
padding:4vh 5vw;
height:auto;
display:inline-block;
padding-left:5vw;
width: 90vw;
padding: 4vh 5vw;
height: auto;
display: inline-block;
padding-left: 5vw;
}
#profile_img {
width:120px;
height:120px;
min-width:120px;
min-height:120px;
max-width:120px;
max-height:120px;
margin:0px auto !important;
width: 120px;
height: 120px;
min-width: 120px;
min-height: 120px;
max-width: 120px;
max-height: 120px;
margin: 0px auto !important;
}
#work {
margin:0px;
margin: 0px;
}
.projects {
margin-left: 0; /* remove neg margin to align w/ header */
margin-left: 0;
/* remove neg margin to align w/ header */
}
.projects a {
width: 100%;
width: 100%;
}
.projects section {
width:88%;
width: 88%;
}
#blogs {
columns: 1;
}
#blogs section {
width:98%;
width: 98%;
}
#blog_section {
margin:0px;
margin: 0px;
}
#blog-display {
width:90vw;
margin:0px 5vw;
text-align:left;
margin-top:0vh;
z-index:1;
width: 90vw;
margin: 0px 5vw;
text-align: left;
margin-top: 0vh;
z-index: 1;
}
#blog_title {
font-size: 32px !important;
}
#blog_sub_title {
font-size: 24px;
margin-top: -1vh;
}
#profile_blog {
width:90vw;
margin:0px 5vw;
margin-top:10vh;
text-align:left;
z-index:1;
width: 90vw;
margin: 0px 5vw;
margin-top: 36vh;
text-align: left;
z-index: 1;
}
#profile_img_blog {
width: 65px;
height: 65px;
}
.go_back {
position: relative;
color:var(--text-color);
font-size:26px;
margin-left:5vw;
top:5vh;
color: var(--text-color);
font-size: 26px;
margin-left: 5vw;
top: 5vh;
}
#blog img {
margin:1vh 0px !important;
margin: 1vh 0px !important;
}
#blog p {
margin:2vh 0px;
margin: 2vh 0px;
}
}
::-webkit-scrollbar {width:5px;height:5px;}
::-webkit-scrollbar-track {background:var(--bg-color);}
::-webkit-scrollbar-thumb {background:var(--text-color);}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
background: var(--text-color);
}

View file

@ -1,118 +1,121 @@
<!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></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>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="profile">
<div id="profile_img"></div>
<div id="username">
<div id="fullname"></div>
</div>
<div id="userbio"></div>
<div id="about"></div>
</div>
<div id="display">
<div id="work">
<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>
<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 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) {
blog = 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>
`);
}
}).fail(function () {
return document.getElementById("blog_section").style.display = "none";
});
</script>
<script type="text/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
<script>
const magicProjectsGrid = new MagicGrid({
container: '#work_section',
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
});
const magicForksGrid = new MagicGrid({
container: '#forks_section',
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
})
$('document').ready(() => {
magicProjectsGrid.listen();
magicForksGrid.listen();
});
</script>
</body>
</html>
<!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></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>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="profile">
<div id="profile_img"></div>
<div id="username">
<div id="fullname"></div>
</div>
<div id="userbio"></div>
<div id="about"></div>
</div>
<div id="display">
<div id="work">
<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>
<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 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) {
blog = 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/${blog[i].url_title}/${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>
`);
}
}).fail(function() {
return (document.getElementById("blog_section").style.display = "none");
});
</script>
<script>
const magicProjectsGrid = new MagicGrid({
container: "#work_section",
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
});
const magicForksGrid = new MagicGrid({
container: "#forks_section",
animate: false,
gutter: 30, // default gutter size
static: true,
useMin: false,
maxColumns: 2,
useTransform: true
});
$("document").ready(() => {
magicProjectsGrid.listen();
magicForksGrid.listen();
});
</script>
</body>
</html>

View file

@ -2,30 +2,36 @@
--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-image: linear-gradient(90deg, rgba(10, 10, 10, 0.3), 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}}}") center center fixed;
url("{{{background}}}") 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), rgba(10, 10, 10, 0)),
url("{{{background}}}") !important;
}
}
}

View file

@ -1,54 +1,55 @@
#! /usr/bin/env node
#! /usr/bin/env node
/* Argument parser */
const program = require('commander');
const program = require("commander");
process.env.OUT_DIR = process.env.OUT_DIR || process.cwd();
const {buildCommand} = require('../build');
const {updateCommand} = require('../update');
const {blogCommand} = require('../blog');
const {runCommand} = require('../run');
const {version} = require('../package.json');
const { buildCommand } = require("../build");
const { updateCommand } = require("../update");
const { uiCommand } = require("../ui");
const { runCommand } = require("../run");
const { version } = require("../package.json");
program
.command('build <username>')
.description('Build site with your GitHub username. This will be used to customize your site')
.option('-t, --theme [theme]', 'specify a theme to use', 'light')
.option('-b, --background [background]', 'set the background image')
.option('-f, --fork', 'includes forks with repos')
.option('-s, --sort [sort]', 'set default sort for repository', 'created')
.option('-o, --order [order]', 'set default order on sort', 'asc')
.option('-w, --twitter [handle]', 'set Twitter handle')
.option('-l, --linkedin [username]', 'specify LinkedIn username')
.option('-m, --medium [username]', 'specify Medium username')
.action(buildCommand)
.command("build <username>")
.description(
"Build site with your GitHub username. This will be used to customize your site"
)
.option("-t, --theme [theme]", "specify a theme to use", "light")
.option("-b, --background [background]", "set the background image")
.option("-f, --fork", "includes forks with repos")
.option("-s, --sort [sort]", "set default sort for repository", "created")
.option("-o, --order [order]", "set default order on sort", "asc")
.option("-w, --twitter [username]", "specify twitter username")
.option("-l, --linkedin [username]", "specify linkedin username")
.option("-m, --medium [username]", "specify medium username")
.option("-d, --dribbble [username]", "specify dribbble username")
.action(buildCommand);
program
.command('update')
.description('Update user and repository data')
.action(updateCommand);
.command("update")
.description("Update user and repository data")
.action(updateCommand);
program
.command('blog <title>')
.description('Create blog with specified title')
.option('-s, --subtitle [subtitle]', 'give blog a subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
.option('-p, --pagetitle [pagetitle]', 'give blog page a title')
.option('-f, --folder [folder]', 'give folder a title (use "-" instead of spaces)')
.action(blogCommand);
.command("ui")
.description("Create and Manage blogs with ease")
.action(uiCommand);
program
.command('run')
.description('Run build files')
.action(runCommand);
.command("run")
.description("Run build files")
.option("-p, --port [port]", "provide a port for localhost, default is 3000")
.action(runCommand);
program.on('command:*', () => {
console.log('Unknown Command: ' + program.args.join(' '))
program.help()
program.on("command:*", () => {
console.log("Unknown Command: " + program.args.join(" "));
program.help();
});
program
.version(version, '-v --version')
.usage('<command> [options]')
.parse(process.argv);
.version(version, "-v --version")
.usage("<command> [options]")
.parse(process.argv);
if (program.args.length === 0) program.help();

154
build.js
View file

@ -1,91 +1,115 @@
/* Filepath utilities */
const path = require('path');
const path = require("path");
/* Promise library */
const bluebird = require('bluebird');
const hbs = require('handlebars');
const bluebird = require("bluebird");
const hbs = require("handlebars");
/* Creates promise-returning async functions
from callback-passed async functions */
const fs = bluebird.promisifyAll(require('fs'));
const { updateHTML } = require('./populate');
const { getConfig, outDir } = require('./utils');
const fs = bluebird.promisifyAll(require("fs"));
const { updateHTML } = require("./populate");
const { getConfig, outDir } = require("./utils");
const assetDir = path.resolve(`${__dirname}/assets/`);
const config = path.join(outDir, 'config.json');
const config = path.join(outDir, "config.json");
/**
* Creates the stylesheet used by the site from a template stylesheet.
*
* Theme styles are added to the new stylesheet depending on command line
*
* Theme styles are added to the new stylesheet depending on command line
* arguments.
*/
async function populateCSS({
theme = 'light',
background = 'https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=500&h=1000&q=80&fit=crop',
theme = "light",
background = "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1500&q=80"
} = {}) {
/* Get the theme the user requests. Defaults to 'light' */
theme = `${theme}.css`;
let template = path.resolve(assetDir, 'index.css');
let stylesheet = path.join(outDir, 'index.css');
/* Get the theme the user requests. Defaults to 'light' */
theme = `${theme}.css`;
let template = path.resolve(assetDir, "index.css");
let stylesheet = path.join(outDir, "index.css");
let serviceWorker = path.resolve(assetDir, 'service-worker.js');
try {
await fs.accessAsync(outDir, fs.constants.F_OK);
} catch (err) {
await fs.mkdirAsync(outDir);
}
/* Copy over the template CSS stylesheet */
await fs.copyFileAsync(template, stylesheet);
try {
await fs.accessAsync(outDir, fs.constants.F_OK);
} catch (err) {
await fs.mkdirAsync(outDir);
}
/* Copy over the template CSS stylesheet */
await fs.copyFileAsync(template, stylesheet);
/* Get an array of every available theme */
let themes = await fs.readdirAsync(path.join(assetDir, "themes"));
/* Add Service Worker */
await fs.copyFileSync(serviceWorker, `${outDir}/service-worker.js`);
if (!themes.includes(theme)) {
console.error('Error: Requested theme not found. Defaulting to "light".');
theme = "light";
}
/* Read in the theme stylesheet */
let themeSource = await fs.readFileSync(path.join(assetDir, "themes", theme));
themeSource = themeSource.toString("utf-8");
let themeTemplate = hbs.compile(themeSource);
let styles = themeTemplate({
background: `${background}`
});
/* Add the user-specified styles to the new stylesheet */
await fs.appendFileAsync(stylesheet, styles);
/* Get an array of every available theme */
let themes = await fs.readdirAsync(path.join(assetDir, 'themes'));
if (!themes.includes(theme)) {
console.error('Error: Requested theme not found. Defaulting to "light".');
theme = 'light';
}
/* Read in the theme stylesheet */
let themeSource = await fs.readFileSync(path.join(assetDir, 'themes', theme));
themeSource = themeSource.toString('utf-8');
let themeTemplate = hbs.compile(themeSource);
let styles = themeTemplate({
'background': `${background}`
})
/* Add the user-specified styles to the new stylesheet */
await fs.appendFileAsync(stylesheet, styles);
/* Update the config file with the user's theme choice */
const data = await getConfig();
data[0].theme = theme;
await fs.writeFileAsync(config, JSON.stringify(data, null, ' '));
/* Update the config file with the user's theme choice */
const data = await getConfig();
data[0].theme = theme;
await fs.writeFileAsync(config, JSON.stringify(data, null, " "));
}
async function populateConfig(sort, order, includeFork, twitter, linkedin, medium) {
const data = await getConfig();
data[0].sort = sort;
data[0].order = order;
data[0].includeFork = includeFork;
data[0].twitter = twitter; // added twitter
data[0].linkedin = linkedin; // added linkedin
data[0].medium = medium; // added medium
await fs.writeFileAsync(config, JSON.stringify(data, null, ' '));
async function populateConfig(
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
) {
const data = await getConfig();
data[0].sort = sort;
data[0].order = order;
data[0].includeFork = includeFork;
data[0].twitter = twitter; // added twitter
data[0].linkedin = linkedin; // added linkedin
data[0].medium = medium; // added medium
data[0].dribbble = dribbble; // added dribbble
await fs.writeFileAsync(config, JSON.stringify(data, null, " "));
}
async function buildCommand(username, program) {
await populateCSS(program);
let sort = program.sort ? program.sort : 'created';
let order = program.order ? program.order : "asc";
let includeFork = program.fork ? true : false;
let twitter = program.twitter ? program.twitter : null;
let linkedin = program.linkedin ? program.linkedin : null;
let medium = program.medium ? program.medium : null;
await populateConfig(sort, order, includeFork, twitter, linkedin, medium);
updateHTML(('%s', username), sort, order, includeFork, twitter, linkedin, medium);
await populateCSS(program);
let sort = program.sort ? program.sort : "created";
let order = program.order ? program.order : "asc";
let includeFork = program.fork ? true : false;
let twitter = program.twitter ? program.twitter : null;
let linkedin = program.linkedin ? program.linkedin : null;
let medium = program.medium ? program.medium : null;
let dribbble = program.dribbble ? program.dribbble : null;
await populateConfig(
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
);
updateHTML(
("%s", username),
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
);
}
module.exports = {
buildCommand
buildCommand,
populateCSS,
populateConfig
};

2979
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -33,14 +33,14 @@
"license": "GPL-3.0",
"dependencies": {
"bluebird": "^3.5.4",
"body-parser": "^1.19.0",
"commander": "^2.20.0",
"ejs": "^2.6.2",
"express": "^4.17.0",
"github-emoji": "^1.1.0",
"got": "^9.6.0",
"handlebars": "^4.1.2",
"jsdom": "^15.1.0",
"ncp": "^2.0.0",
"open": "^6.3.0",
"x-default-browser": "^0.4.0"
"ncp": "^2.0.0"
}
}

View file

@ -1,142 +1,240 @@
const fs = require('fs');
const got = require('got');
const emoji = require('github-emoji');
const jsdom = require('jsdom').JSDOM,
options = {
resources: "usable"
};
const { getConfig, outDir } = require('./utils');
const fs = require("fs");
const got = require("got");
const emoji = require("github-emoji");
const jsdom = require("jsdom").JSDOM,
options = {
resources: "usable"
};
const { getConfig, outDir } = require("./utils");
function convertToEmoji(text) {
if (text == null) return;
text = text.toString();
var pattern = /(?<=:\s*).*?(?=\s*:)/gs
if (text.match(pattern) != null) {
var str = text.match(pattern);
str = str.filter(function (arr) {
return /\S/.test(arr);
});
for (i = 0; i < str.length; i++) {
if (emoji.URLS[str[i]] != undefined) {
var output = emoji.of(str[i]);
var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets");
text = text.replace(`:${str[i]}:`, `<img src="${emojiImage}" class="emoji">`);
}
}
return text;
} else {
return text;
if (text == null) return;
text = text.toString();
var pattern = /(?<=:\s*).*?(?=\s*:)/gs;
if (text.match(pattern) != null) {
var str = text.match(pattern);
str = str.filter(function(arr) {
return /\S/.test(arr);
});
for (i = 0; i < str.length; i++) {
if (emoji.URLS[str[i]] != undefined) {
var output = emoji.of(str[i]);
var emojiImage = output.url.replace(
"assets-cdn.github",
"github.githubassets"
);
text = text.replace(
`:${str[i]}:`,
`<img src="${emojiImage}" class="emoji">`
);
}
}
return text;
} else {
return text;
}
}
module.exports.updateHTML = (username, sort, order, includeFork, twitter, linkedin, medium) => {
//add data to assets/index.html
jsdom.fromFile(`${__dirname}/assets/index.html`, options).then(function (dom) {
let window = dom.window, document = window.document;
(async () => {
try {
console.log("Building HTML/CSS...");
var repos = [];
var tempRepos;
var page = 1;
if(sort == "star"){
do{
tempRepos = await got(`https://api.github.com/users/${username}/repos?per_page=100&page=${page++}`);
tempRepos = JSON.parse(tempRepos.body);
repos = repos.concat(tempRepos);
} while(tempRepos.length == 100);
if(order == "desc"){
repos = repos.sort(function(a, b) {
return b.stargazers_count - a.stargazers_count;
});
}else{
repos = repos.sort(function(a, b) {
return a.stargazers_count - b.stargazers_count;
});
}
}else{
do{
tempRepos = await got(`https://api.github.com/users/${username}/repos?sort=${sort}&order=${order}&per_page=100&page=${page++}`);
tempRepos = JSON.parse(tempRepos.body);
repos = repos.concat(tempRepos);
} while(tempRepos.length == 100);
}
for (var i = 0; i < repos.length; i++) {
if(repos[i].fork == false){
document.getElementById("work_section").innerHTML += `
module.exports.updateHTML = (
username,
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
) => {
//add data to assets/index.html
jsdom
.fromFile(`${__dirname}/assets/index.html`, options)
.then(function(dom) {
let window = dom.window,
document = window.document;
(async () => {
try {
console.log("Building HTML/CSS...");
var repos = [];
var tempRepos;
var page = 1;
if (sort == "star") {
do {
tempRepos = await got(
`https://api.github.com/users/${username}/repos?per_page=100&page=${page++}`
);
tempRepos = JSON.parse(tempRepos.body);
repos = repos.concat(tempRepos);
} while (tempRepos.length == 100);
if (order == "desc") {
repos = repos.sort(function(a, b) {
return b.stargazers_count - a.stargazers_count;
});
} else {
repos = repos.sort(function(a, b) {
return a.stargazers_count - b.stargazers_count;
});
}
} else {
do {
tempRepos = await got(
`https://api.github.com/users/${username}/repos?sort=${sort}&order=${order}&per_page=100&page=${page++}`
);
tempRepos = JSON.parse(tempRepos.body);
repos = repos.concat(tempRepos);
} while (tempRepos.length == 100);
}
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>
<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>
<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{
if(includeFork == true){
document.getElementById("forks").style.display = "block";
document.getElementById("forks_section").innerHTML += `
} 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="section_title">${
repos[i].name
}</div>
<div class="about_section">
<span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
<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>
<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><a href="${user.html_url}">@${user.login}</a>`;
//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; <a href="${user.blog}">${user.blog}</a></span>
<span style="display:${twitter == null ? 'none' : 'block'};"><i class="fab fa-twitter-square"></i> &nbsp;&nbsp; <a href="https://www.twitter.com/${twitter}" target="_blank" class="socials"> Twitter</a></span>
<span style="display:${linkedin == null ? 'none' : 'block'};"><i class="fab fa-linkedin"></i> &nbsp;&nbsp; <a href="https://www.linkedin.com/in/${linkedin}/" target="_blank" class="socials"> LinkedIn</a></span>
<span style="display:${medium == null ? 'none' : 'block'};"><i class="fab fa-medium"></i> &nbsp;&nbsp; <a href="https://www.medium.com/@${medium}/" target="_blank" class="socials"> Medium</a></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
const data = await getConfig();
data[0].username = user.login;
data[0].name = user.name;
data[0].userimg = user.avatar_url;
await fs.writeFile(`${outDir}/config.json`, JSON.stringify(data, null, ' '), function (err) {
if (err) throw err;
console.log("Config file updated.");
});
await fs.writeFile(`${outDir}/index.html`, '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
if (error) throw error;
console.log(`Build Complete, Files can be Found @ ${outDir}`);
});
} catch (error) {
console.log(error);
}
}
})();
}).catch(function (error) {
console.log(error);
}
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><a href="${user.html_url}">@${user.login}</a>`;
//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; <a href="${user.blog}">${
user.blog
}</a></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>
<div class="socials">
<span style="display:${
twitter == null ? "none !important" : "block"
};"><a href="https://www.twitter.com/${twitter}" target="_blank" class="socials"><i class="fab fa-twitter"></i></a></span>
<span style="display:${
dribbble == null ? "none !important" : "block"
};"><a href="https://www.dribbble.com/${dribbble}" target="_blank" class="socials"><i class="fab fa-dribbble"></i></a></span>
<span style="display:${
linkedin == null ? "none !important" : "block"
};"><a href="https://www.linkedin.com/in/${linkedin}/" target="_blank" class="socials"><i class="fab fa-linkedin-in"></i></a></span>
<span style="display:${
medium == null ? "none !important" : "block"
};"><a href="https://www.medium.com/@${medium}/" target="_blank" class="socials"><i class="fab fa-medium-m"></i></a></span>
</div>`;
//add data to config.json
const data = await getConfig();
data[0].username = user.login;
data[0].name = user.name;
data[0].userimg = user.avatar_url;
await fs.writeFile(
`${outDir}/config.json`,
JSON.stringify(data, null, " "),
function(err) {
if (err) throw err;
console.log("Config file updated.\n");
}
);
await fs.writeFile(
`${outDir}/index.html`,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML,
function(error) {
if (error) throw error;
console.log(`Build Complete, Files can be Found @ ${outDir}\n`);
}
);
} catch (error) {
console.log(error);
}
})();
})
.catch(function(error) {
console.log(error);
});
}
};

29
run.js
View file

@ -1,25 +1,20 @@
const express = require('express');
const open = require('open');
const defaultBrowser = require('x-default-browser');
const path = require('path');
const outDir = path.resolve('./dist/' || process.env.OUT_DIR);
const express = require("express");
const path = require("path");
const outDir = path.resolve("./dist/" || process.env.OUT_DIR);
const app = express();
app.use(express.static(`${outDir}`));
function runCommand(){
app.get('/',function(req,res){
res.sendFile('/index.html');
function runCommand(program) {
let port = program.port ? program.port : 3000;
app.get("/", function(req, res) {
res.sendFile("/index.html");
});
app.listen(3000);
defaultBrowser(function (err, res) {
if(err) throw err;
(async () => {
await open('http://localhost:3000', {app: res.commonName});
console.log("ctrl + c to exit");
})();
});
app.listen(port);
console.log(
`\nGitfolio running on port ${port}, Navigate to http://localhost:${port} in your browser\n`
);
}
module.exports = {

222
ui.js Normal file
View file

@ -0,0 +1,222 @@
const fs = require("fs");
const express = require("express");
let bodyParser = require("body-parser");
const { updateHTML } = require("./populate");
const { populateCSS, populateConfig } = require("./build");
const { updateCommand } = require("./update");
const app = express();
app.set("view engine", "ejs");
app.use(express.static("views"));
app.set("views", __dirname + "/views");
app.use(express.json({ limit: "50mb" }));
app.use(express.urlencoded({ limit: "50mb", extended: true }));
const port = 3000;
const jsdom = require("jsdom").JSDOM,
options = {
resources: "usable"
};
global.DOMParser = new jsdom().window.DOMParser;
const { getBlog, outDir } = require("./utils");
function createBlog(title, subtitle, folder, topImage, images, content) {
// Checks to make sure this directory actually exists
// and creates it if it doesn't
if (!fs.existsSync(`${outDir}/blog/`)) {
fs.mkdirSync(`${outDir}/blog/`, { recursive: true }, err => {});
}
if (!fs.existsSync(`${outDir}/blog/${folder}`)) {
fs.mkdirSync(`${outDir}/blog/${folder}`, { recursive: true });
}
fs.copyFile(
`${__dirname}/assets/blog/blogTemplate.html`,
`${outDir}/blog/${folder}/index.html`,
err => {
if (err) throw err;
jsdom
.fromFile(`${outDir}/blog/${folder}/index.html`, options)
.then(function(dom) {
let window = dom.window,
document = window.document;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("href", "../../index.css");
document.getElementsByTagName("head")[0].appendChild(style);
document.getElementsByTagName("title")[0].textContent = title;
document.getElementById("blog_title").textContent = title;
document.getElementById("blog_sub_title").textContent = subtitle;
document.getElementById(
"background"
).style.background = `url('top_image.${
topImage.split("/")[1].split(";")[0]
}') center center`;
if (content != null) {
var parser = new DOMParser();
content = parser.parseFromString(content, "text/html");
document.getElementById("blog").innerHTML =
content.documentElement.innerHTML;
}
images = JSON.parse(images);
images.forEach((item, index) => {
var base64Image = item.split(";base64,").pop();
fs.writeFile(
`${outDir}/blog/${folder}/img_${index}.${
item.split("/")[1].split(";")[0]
}`,
base64Image,
{ encoding: "base64" },
function(err) {
if (err) throw err;
}
);
});
fs.writeFile(
`${outDir}/blog/${folder}/index.html`,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML,
async function(error) {
if (error) throw error;
var base64ImageTop = topImage.split(";base64,").pop();
fs.writeFile(
`${outDir}/blog/${folder}/top_image.${
topImage.split("/")[1].split(";")[0]
}`,
base64ImageTop,
{ encoding: "base64" },
function(err) {
if (err) throw err;
}
);
let blog_data = {
url_title: folder,
title: title,
sub_title: subtitle,
top_image: `top_image.${topImage.split("/")[1].split(";")[0]}`,
visible: true
};
const old_blogs = await getBlog();
old_blogs.push(blog_data);
fs.writeFile(
`${outDir}/blog.json`,
JSON.stringify(old_blogs, null, " "),
function(err) {
if (err) throw err;
console.log(
`Blog created successfully at ${outDir}\\blog\\${folder}\n`
);
}
);
}
);
})
.catch(function(error) {
console.log(error);
});
}
);
}
function uiCommand() {
app.get("/", function(req, res) {
res.render("index.ejs");
});
app.get("/update", function(req, res) {
if (!fs.existsSync(`${outDir}/config.json`)) {
return res.send(
'You need to run build command before using update<br><a href="/">Go Back</a>'
);
}
updateCommand();
res.redirect("/");
});
app.post("/build", function(req, res) {
let username = req.body.username;
if (!username) {
return res.send("username can't be empty");
}
let sort = req.body.sort ? req.body.sort : "created";
let order = req.body.order ? req.body.order : "asc";
let includeFork = req.body.fork == "true" ? true : false;
let twitter = req.body.twitter ? req.body.twitter : null;
let linkedin = req.body.linkedin ? req.body.linkedin : null;
let medium = req.body.medium ? req.body.medium : null;
let dribbble = req.body.dribbble ? req.body.dribbble : null;
let background = req.body.background
? req.body.background
: "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1500&q=80";
let theme = req.body.theme == "on" ? "dark" : "light";
updateHTML(
username,
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
);
populateCSS({ background: background, theme: theme });
populateConfig(
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
);
res.redirect("/");
});
app.get("/blog", function(req, res) {
if (!fs.existsSync(`${outDir}/config.json`)) {
return res.send(
'You need to run build command before accessing blogs<br><a href="/">Go Back</a>'
);
}
fs.readFile("./dist/config.json", function(err, data) {
res.render("blog.ejs", { profile: JSON.parse(data) });
});
});
app.post("/createBlog", function(req, res) {
let title = req.body.title;
let subtitle = req.body.subtitle;
let content = req.body.content ? req.body.content : null;
if (!title) {
return res.send("title can't be empty");
}
if (!subtitle) {
return res.send("subtitle can't be empty");
}
if (!content) {
return res.send("something isn't working fine, try again :p");
}
let folder = title.replace(/[^a-zA-Z ]/g, "").replace(/ /g, "-");
let topImage = req.body.top_image;
let images = req.body.images;
createBlog(title, subtitle, folder, topImage, images, content);
res.redirect("/blog");
});
console.log("\nStarting...");
app.listen(port);
console.log(
`The GUI is running on port ${port}, Navigate to http://localhost:${port} in your browser\n`
);
}
module.exports = {
uiCommand
};

View file

@ -1,22 +1,39 @@
const {getConfig} = require('./utils');
const {updateHTML} = require('./populate');
const { getConfig } = require("./utils");
const { updateHTML } = require("./populate");
async function updateCommand() {
const data = await getConfig();
var username = data[0].username;
var sort = data[0].sort;
var order = data[0].order;
var includeFork = data[0].includeFork;
var twitter = data[0].twitter;
var linkedin = data[0].linkedin;
var medium = data[0].medium;
if(username == null || sort == null || order == null || includeFork == null){
console.log("username not found in config.json, please run build command before using update");
return;
}
updateHTML(username, sort, order, includeFork, twitter, linkedin, medium);
const data = await getConfig();
var username = data[0].username;
var sort = data[0].sort;
var order = data[0].order;
var includeFork = data[0].includeFork;
var twitter = data[0].twitter;
var linkedin = data[0].linkedin;
var medium = data[0].medium;
var dribbble = data[0].dribbble;
if (
username == null ||
sort == null ||
order == null ||
includeFork == null
) {
console.log(
"username not found in config.json, please run build command before using update"
);
return;
}
updateHTML(
username,
sort,
order,
includeFork,
twitter,
linkedin,
medium,
dribbble
);
}
module.exports = {
updateCommand
updateCommand
};

260
views/blog.ejs Normal file
View file

@ -0,0 +1,260 @@
<!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>Gitfolio UI</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="stylesheet"
href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css"
/>
</head>
<body class="body-light">
<header>
<b>gitfolio</b>
<a href="/blog" style="float: right">New Blog </a>
<a href="/update" style="float: right">Update</a>
<a href="/" style="float: right">Home</a>
</header>
<div id="top_image">
<i class="fas fa-camera" onclick="applyTopImage()"></i>
</div>
<input
type="file"
id="top_image_file"
style="display: none"
accept="image/*"
style="display: none"
/>
<table id="profile_blog">
<tbody>
<tr>
<td style="width:8vw;">
<div
id="profile_img_blog"
style="background:url('<%= profile[0].userimg%>') center center;"
></div>
</td>
<td style="width:52vw;">
<div id="username_blog">
<% if(profile[0].name)%>
<span><%= profile[0].name%></span>
<% %>
<br />@<%= profile[0].username%><b id="blog_time"></b>
</div>
</td>
</tr>
</tbody>
</table>
<div id="blog-display">
<form
style="padding: 0px; width:100%;"
method="POST"
action="/createBlog"
id="form"
>
<textarea
id="blog_title"
placeholder="blog title here"
spellcheck="false"
rows="1"
onkeyup="addRow(event)"
name="title"
required
></textarea>
<br />
<textarea
id="blog_sub_title"
placeholder="blog sub title here"
spellcheck="false"
rows="1"
name="subtitle"
onkeyup="addRow(event)"
required
></textarea>
<div id="originalContent" style="display: none"></div>
<input type="hidden" name="top_image" id="top" />
<input type="hidden" name="content" id="content" />
<input type="hidden" name="images" id="images" />
<div id="blog"></div>
<div class="div_for_buttons">
<input
type="file"
name="file"
id="file"
style="display: none"
accept="image/*"
/>
<button
class="button h-weight-bold h-border-pill -size-small"
type="button"
onclick="clickFile()"
>
<i class="fas fa-plus"></i>&nbsp; Image
</button>
<button
class="button h-weight-bold h-border-pill -size-small"
type="button"
onclick="addPara()"
>
<i class="fas fa-plus"></i>&nbsp; Paragraph
</button>
<h5>Tip : You can use html inside paragraphs</h5>
</div>
<button type="button" class="button" onclick="submitthisform()">
Create Blog
</button>
</form>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"
></script>
<script>
var imgElement = document.querySelector("#file");
var topImageElement = document.querySelector("#top_image_file");
var img_number = 0;
var blog_para_number = 0;
var images = [];
function applyTopImage() {
topImageElement.value = "";
document.querySelector("#top").value = "";
document.querySelector("#top_image").style.background =
"linear-gradient(0deg, rgb(250, 250, 250), rgb(220, 220, 220))";
topImageElement.click();
}
topImageElement.addEventListener("change", e => {
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = data => {
var image = data.target.result;
document.querySelector(
"#top_image"
).style.background = `linear-gradient(0deg, rgba(250, 250, 250, 1), rgba(220, 220, 220, 0)), url('${image}') center center`;
document.querySelector("#top").value = image;
};
});
function addRow(e) {
e.preventDefault();
if (e.target.clientHeight < e.target.scrollHeight) {
e.target.rows += 1;
} else {
if (e.target.value == "") {
e.target.rows = 1;
}
}
}
function remove(e, element, blobData) {
var elem = document.getElementById(element);
var elem2 = document.getElementById(`${element}_original`);
elem.parentNode.removeChild(e.target);
elem.parentNode.removeChild(elem);
elem2.parentNode.removeChild(elem2);
imgElement.value = "";
if (element.split("_")[0] == "img") {
images.splice(images.indexOf(blobData), 1);
img_number--;
}
}
function addDataToOriginalPara(id) {
document.querySelector(
`#para_${id}_original`
).innerHTML = document.querySelector(`#para_${id}`).value;
}
function clickFile() {
imgElement.click();
}
imgElement.addEventListener("change", e => {
var img = document.createElement("img");
var imageblob = URL.createObjectURL(e.target.files[0]);
img.setAttribute(
"src",
`img_${img_number}.${e.target.files[0].type.split("/")[1]}`
);
img.setAttribute("alt", `blog image ${img_number}`);
img.setAttribute("id", `img_${img_number}_original`);
var img2 = document.createElement("img");
img2.setAttribute("src", imageblob);
img2.setAttribute("alt", `blog image ${img_number}`);
img2.setAttribute("id", `img_${img_number}`);
var remove = document.createElement("div");
remove.setAttribute("class", "remove");
remove.setAttribute(
"onclick",
`remove(event,'img_${img_number}', '${imageblob}')`
);
remove.innerHTML = '<i class="fas fa-times"></i> Remove';
document.querySelector("#originalContent").appendChild(img);
document.querySelector("#blog").appendChild(img2);
document.querySelector("#blog").appendChild(remove);
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = data => {
images.push(data.target.result);
console.log(images);
};
imgElement.value = "";
img_number++;
});
function addPara() {
var para = document.createElement("textarea");
para.setAttribute("class", "para");
para.setAttribute("id", `para_${blog_para_number}`);
para.setAttribute("spellcheck", false);
para.setAttribute("rows", 1);
para.setAttribute(
"onkeyup",
`addRow(event), addDataToOriginalPara('${blog_para_number}')`
);
para.setAttribute("required", true);
para.setAttribute("placeholder", "What's on your Mind?");
var remove = document.createElement("div");
remove.setAttribute("class", "remove");
remove.setAttribute(
"onclick",
`remove(event,'para_${blog_para_number}', null)`
);
remove.innerHTML = '<i class="fas fa-times"></i> Remove';
var originalPara = document.createElement("p");
originalPara.setAttribute("id", `para_${blog_para_number}_original`);
document.querySelector("#blog").appendChild(para);
document.querySelector("#blog").appendChild(remove);
document.querySelector("#originalContent").appendChild(originalPara);
blog_para_number++;
}
function submitthisform() {
document.querySelector("#content").value = document.querySelector(
"#originalContent"
).innerHTML;
document.querySelector("#images").value = JSON.stringify(images);
document.querySelector("#form").submit();
}
</script>
</body>
</html>

BIN
views/font/Circular.otf Normal file

Binary file not shown.

299
views/index.css Normal file
View file

@ -0,0 +1,299 @@
@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("https://fonts.googleapis.com/css?family=Questrial");
@font-face {
font-family: "Circular";
src: url("./font/Circular.otf");
}
body {
margin: 0%;
padding: 0%;
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
align-items: center;
font-family: "Poppins", sans-serif;
background: rgb(250, 250, 250) !important;
will-change: auto;
}
header {
width: 90vw;
padding: 4vh 5vw;
font-weight: bold;
background: rgb(255, 255, 255);
font-size: 32px;
}
header b {
font-family: "Circular", sans-serif;
}
header a {
font-size: 16px;
margin: 1.8vh 0px;
margin-left: 4vw;
color: #000;
text-decoration: none;
transition: 0.4s ease-in-out;
}
header a:hover {
color: #bebebe;
}
form {
width: 90vw;
padding: 2vh 5vw;
}
form .button {
margin: 2vh 0px;
}
.input {
margin: 1.5vh 0px !important;
}
.label {
display: inline-block !important;
margin-right: 25px;
font-weight: bold;
}
button {
transition: 0.4s ease-in-out !important;
}
button:hover {
color: #fff;
background: #000 !important;
}
.-size-small {
margin-right: 1vw !important;
}
#top_image {
width: 100vw;
height: 50vh;
position: absolute;
top: 14vh;
left: 0;
background: linear-gradient(0deg, rgb(250, 250, 250), rgb(200, 200, 200));
background-size: cover !important;
background-repeat: no-repeat !important;
z-index: 1;
text-align: right;
}
#top_image i {
font-size: 20px;
position: absolute;
z-index: 5;
top: 4vh;
right: 5vw;
padding: 15px 15px;
background: #ffffff;
color: rgb(0, 0, 0);
border-radius: 50%;
}
#top_image i:hover {
cursor: pointer;
}
#profile_blog {
width: 60vw;
margin: 0px 20vw;
margin-top: 42vh !important;
text-align: left;
z-index: 1;
transition: 0.4s ease-in-out;
z-index: 2;
position: relative;
}
#profile_img_blog {
border-radius: 50%;
width: 90px;
height: 90px;
background-size: cover !important;
background-repeat: no-repeat;
}
#username_blog {
font-size: 18px;
color: #000;
font-family: "Poppins", sans-serif;
font-weight: bold;
padding-left: 0px;
}
#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: 3vh 20vw;
text-align: left;
z-index: 1;
transition: 0.4s ease-in-out;
z-index: 2;
position: relative;
}
#blog_title {
font-size: 50px;
color: #000;
font-weight: bold;
font-family: "Questrial", sans-serif;
background: transparent;
border: 0px;
width: 100%;
resize: none;
height: auto;
overflow-y: hidden;
}
#blog_sub_title {
font-size: 36px;
color: rgb(100, 100, 100);
font-weight: bold;
font-family: "Questrial", sans-serif;
background: transparent;
border: 0px;
width: 100%;
resize: none;
height: auto;
overflow-y: hidden;
}
#blog_sub_title::placeholder {
color: rgb(100, 100, 100);
}
#blog-display h2 {
color: var(--blog-gray-color);
}
#blog-display {
padding: 1vh 0px;
font-family: "Questrial", sans-serif;
}
.div_for_buttons {
margin-top: 5vh;
}
.para {
font-size: 17px;
line-height: 25px;
word-spacing: 1.2px;
margin: 5vh 0px;
background: transparent;
border: 0px;
width: 100%;
font-family: "Questrial", sans-serif;
resize: none;
height: auto;
overflow-y: hidden;
}
.para span {
padding: 2px 4px;
background: #000;
color: #fff !important;
}
#blog {
margin-top: 2vh;
}
#blog img {
width: 100%;
margin: 2vh 0px;
border-radius: 5px;
border: 1px solid rgb(0, 0, 0, 0.08);
}
.remove {
margin-bottom: 2vh 0px;
font-weight: bold;
transition: 0.4s ease-in-out;
font-size: 16px;
}
.remove i {
font-size: 14px;
margin-right: 3px;
}
.remove:hover {
cursor: pointer;
color: rgb(255, 70, 70);
}
@media (max-width: 800px) {
#blog-display {
width: 90vw;
margin: 0px 5vw;
text-align: left;
margin-top: 0vh;
z-index: 1;
}
#profile_blog {
width: 90vw;
margin: 0px 5vw;
}
#profile_img_blog {
width: 70px;
height: 70px;
}
#blog img {
margin: 1vh 0px !important;
}
#blog p {
margin: 2vh 0px;
}
}
::selection {
color: #fff;
background: #000;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #000;
}
input,
textarea:focus {
outline: none;
}
::placeholder {
color: #000;
}

145
views/index.ejs Normal file
View file

@ -0,0 +1,145 @@
<!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>Gitfolio UI</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="stylesheet"
href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css"
/>
</head>
<body class="body-light">
<header>
<b>gitfolio</b>
<a href="/blog" style="float: right">New Blog </a>
<a href="/update" style="float: right">Update</a>
<a href="/" style="float: right">Home</a>
</header>
<form method="post" action="build">
<h3>Build or Edit Portfolio</h3>
<input
type="text"
class="input h-weight-bold"
placeholder="username"
id="username"
name="username"
required
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="background"
name="background"
id="background"
/>
<h3>Sort By :</h3>
<label class="label"
>Star
<input type="radio" name="sort" value="star" />
<span class="radio"></span>
</label>
<label class="label"
>Created
<input type="radio" name="sort" value="created" checked />
<span class="radio"></span>
</label>
<label class="label"
>Updated
<input type="radio" name="sort" value="updated" />
<span class="radio"></span>
</label>
<label class="label"
>Pushed
<input type="radio" name="sort" value="pushed" />
<span class="radio"></span>
</label>
<label class="label"
>Full Name
<input type="radio" name="sort" value="full_name" />
<span class="radio"></span>
</label>
<h3>Order By :</h3>
<label class="label"
>Asc
<input type="radio" name="order" value="asc" checked />
<span class="radio"></span>
</label>
<label class="label"
>Desc
<input type="radio" name="order" value="desc" />
<span class="radio"></span>
</label>
<br /><br />
<label class="label"
>Use Dark Theme
<input type="checkbox" id="theme" name="theme" />
<span class="checkbox"></span>
</label>
<label class="label"
>Include Forks
<input type="checkbox" id="fork" name="fork" value="true" />
<span class="checkbox"></span>
</label>
<label class="label"
>Include Socials
<input type="checkbox" id="socials" name="socials" />
<span class="checkbox"></span>
</label>
<div style="display: none" id="input_for_socials">
<input
type="text"
class="input h-weight-bold"
placeholder="twitter username"
id="twitter"
name="twitter"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="medium username"
id="medium"
name="medium"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="dribbble username"
id="dribbble"
name="dribbble"
/><br />
<input
type="text"
class="input h-weight-bold"
placeholder="linkedin username"
id="linkedin"
name="linkedin"
/>
</div>
<br /><br />
<button type="submit" class="button" id="build">Build</button>
</form>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"
></script>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>

7
views/index.js Normal file
View file

@ -0,0 +1,7 @@
document.querySelector("#socials").addEventListener("change", event => {
if (event.target.checked) {
document.querySelector("#input_for_socials").style.display = "block";
} else {
document.querySelector("#input_for_socials").style.display = "none";
}
});