dylan/gitfolio
1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: dylan:master
Branches Tags
dylan:master
dylan:gh-pages
dylan:v0.1.5
dylan:v0.1.4
dylan:v0.1.3
dylan:v0.1.2
dylan:v0.1.1
dylan:v0.1.0
..
compare: dylan:v0.1.2
Branches Tags
dylan:gh-pages
dylan:master
dylan:v0.1.5
dylan:v0.1.4
dylan:v0.1.3
dylan:v0.1.2
dylan:v0.1.1
dylan:v0.1.0

No commits in common. "master" and "v0.1.2" have entirely different histories.
master ... v0.1.2

37 changed files with 2763 additions and 9396 deletions
Download patch file Download diff file Expand all files Collapse all files

17
.eslintrc.json
View file

@ -1,17 +0,0 @@
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {}
}

5
.gitattributes vendored
View file

@ -1,5 +0,0 @@
# Set the default behavior, in case people don't have core.autocrlf set
* text=auto
# Require Unix line endings
* text eol=lf

4
.github/ISSUE_TEMPLATE/feature-request.md vendored
View file

@ -5,8 +5,8 @@ about: Request a new feature.
# What feature should be added? # What feature should be added?
This feature adds Twitter, Linkedin and Medium links to your profile. <!-- Explain what the feature is here -->
# Why should this feature be added? # Why should this feature be added?
Since a portfolio is being made, adding these links help improve the profile better. <!-- Provide information on what improvements this feature brings -->

3
.gitignore vendored
View file

@ -64,5 +64,4 @@ typings/
dist/ dist/
# Editor files and folders # Editor files and folders
.vscode/ .vscode/
.idea/

17
.prettierrc.json
View file

@ -1,17 +0,0 @@
{
"overrides": [
{
"files": ["*.html", "*.ejs"],
"options": {
"parser": "html",
"htmlWhitespaceSensitivity": "ignore"
}
},
{
"files": "*.md",
"options": {
"tabWidth": 4
}
}
]
}

4
.snyk
View file

@ -1,4 +0,0 @@
# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
version: v1.13.5
ignore: {}
patch: {}

3
.stylelintrc.json
View file

@ -1,3 +0,0 @@
{
"extends": ["stylelint-config-standard", "stylelint-prettier/recommended"]
}

26
.travis.yml
View file

@ -1,26 +0,0 @@
dist: bionic
language: node_js
node_js:
- 11
addons:
chrome: stable
cache:
directories:
- node_modules
before_install:
- npm install -g @lhci/cli@0.3.x
before_script:
- npm install -g
script:
- npm run build
- npm run prettier
after_success:
- lhci autorun --upload.target=temporary-public-storage
deploy:
provider: pages
token: $GITHUB_TOKEN
cleanup: false
edge: true # opt in to dpl v2
local_dir: dist
verbose: true
fqdn: dylanh.dev # forcing run

152
CODE_OF_CONDUCT.md
View file

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

1348
LICENSE
View file

File diff suppressed because it is too large Load diff

321
README.md
View file

@ -1,175 +1,146 @@
[![Build Status](https://travis-ci.com/dilllxd/gitfolio.svg?branch=master)](https://travis-ci.com/dilllxd/gitfolio) <img src="https://i.imgur.com/eA6clZr.png">
[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier&style=for-the-badge)](https://github.com/prettier/prettier)
[![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg?style=for-the-badge)](https://github.com/imfunniee/gitfolio/releases/latest) # 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)
# Gitfolio ### personal website + blog for every github user
### 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.
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.
<img src="https://i.imgur.com/eA6clZr.png">
# Getting Started
---
### Let's Build
Check out this [live demo](https://k4ustu3h.cf) to see gitfolio in action.
a. Clone this repo or simply download it.
--- ```sh
git clone https://github.com/imfunniee/gitfolio.git
# Getting Started ```
### Let's Install b. `cd` into the repo you just cloned or downloaded.
```sh
Install gitfolio cd gitfolio # Navigate into the project folder
npm i # Install the required dependencies
```sh ```
➜ ~ git clone https://github.com/k4ustu3h/gitfolio.git
➜ ~ cd gitfolio c. Gitfolio is now ready to be used. The command
➜ ~ npm install -g
``` ```sh
node build --name [username]
### Let's Build ```
Will build your website using your GitHub username and put it in the `dist/` folder.
Using the UI
d. To run your website navigate to `./dist/index.html` in your browser. [you won't see blogs until you are on localhost]
```sh
➜ ~ gitfolio ui 🎉 Congrats, you just made yourself a personal website!
```
> if you get stuck somewhere or get an error, please create an issue
> Tip: You can use ui to create new blogs and for updating your folio too.
### Let's Customize
or
#### Forks
```sh
➜ ~ gitfolio build <username> To include forks on your personal website just provide `-f` or `--fork` argument while building
```
```
`<username>` is your username on github. This will build your website using your GitHub username and put it in the `/dist` folder. $ node build --name username -f
```
To run your website use `run` command, Default port is 3000
#### Sorting Repos
```sh
➜ ~ gitfolio run -p [port] To sort repos provide `--sort [sortBy]` argument while building. Where `[sort]` can be `created`, `updated`, `pushed`,`full_name`. Default: `created`
```
```
🎉 Congrats, you just made yourself a personal website! $ node build --name username --sort created
```
---
#### Ordering Repos
### Let's Customize
To order the sorted repos provide `--order [orderBy]` argument while building. Where `[orderBy]` can be `asc` or `desc`. Default: `asc`
#### Forks
```
To include forks on your personal website just provide `-f` or `--fork` argument while building $ node build --name username --sort created --order desc
```
```sh
➜ ~ gitfolio build <username> -f #### Customize Themes
```
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
#### Sorting Repos
* `light`
To sort repos provide `--sort [sortBy]` argument while building. Where `[sortBy]` can be `star`, `created`, `updated`, `pushed`,`full_name`. Default: `created` * `dark`
> TODO: Add more themes
```sh
➜ ~ gitfolio build <username> --sort star For example, the following command will build the website with the dark theme
``` ```
$ node build --name username --theme dark
#### Ordering Repos ```
To order the sorted repos provide `--order [orderBy]` argument while building. Where `[orderBy]` can be `asc` or `desc`. Default: `asc` #### Customize background image
```sh To customize the background image just provide `--background [url]` argument while building
➜ ~ gitfolio build <username> --sort star --order desc
``` ```
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
#### Customize Themes ```
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are You could also add in your custom CSS inside `index.css` to give it a more personal feel.
- `light`
- `dark` ### Let's Publish
> TODO: Add more themes 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.
For example, the following command will build the website with the dark theme Go To `username.github.io` your site should be up!!
```sh
➜ ~ gitfolio build <username> --theme dark ### Updating
```
To update your info, simply run
#### Customize background image
```
To customize the background image just provide `--background [url]` argument while building $ node update
```
```sh This will update your info and your repository info.
➜ ~ gitfolio build <username> --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
``` To Update background or theme you need to run `build` command again.
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
### Add a Blog
#### Add Social Media links on your profile
To add your first blog run this command, make sure the title don't have spaces instead use "-".
gitfolio supports adding the follwing Social links
```
- Codepen `-c, --codepen <username>` $ node blog --title my-first-blog
- Dev.to `-d, --dev <username>` ```
- Dribbble `-D, --dribbble <username>`
- Email `-e, --email <email>` 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.
- Facebook `-F, --facebook <username>`
- Instagram `-i, --instagram <username>` 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.
- Keybase `-k, --keybase <username>`
- Medium `-m, --medium <username>` Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
- Reddit `-r, --reddit <username>`
- Stack Exchange `-E, --stackexchange <user id>` Default JSON Format
- Steam `-S, --steam <username>` ```
- Telegram `-T, --telegram <username>` {
- Twitter `-w, --twitter <username>` "url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
- XDA Developers `-x, --xda <user id>` "title": "Lorem ipsum dolor sit amet", // main title of blog
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
```sh "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
➜ ~ gitfolio build <username> --twitter <twitter_username> --dribbble <dribbble_username> "visible": true // don't worry about this
``` }
```
---
More Arguments for Blog
### 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. --subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
--pagetitle [pagetitle] : gives blog page a title
Go To `username.github.io` your site should be up!! --folder [folder] : give folder a title
```
---
> (use "-" instead of spaces)
### Updating
To update your info, simply run ## License
![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)
```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.
---
### License
[![License](https://img.shields.io/github/license/k4ustu3h/gitfolio.svg?style=for-the-badge)](https://github.com/k4ustu3h/gitfolio/blob/master/LICENSE)
---
## Acknowledgments
- Hat tip to anyone who's code was used
- The original [gitfolio](https://github.com/imfunniee/gitfolio) made by [@imfunniee](https://github.com/imfunniee/)
---
[![CSS](https://img.shields.io/badge/uses-css-1572B6?logo=css3&style=for-the-badge)](https://github.com/topics/css)
[![h9rbs.js](https://img.shields.io/badge/uses-h9rbs.js-473349?style=for-the-badge)](https://html9responsiveboilerstrapjs.com/)
[![HTML](https://img.shields.io/badge/uses-html-E34F26?logo=html5&style=for-the-badge)](https://github.com/topics/html)
[![JavaScript](https://img.shields.io/badge/made_with-javascript-F7DF1E?logo=javascript&style=for-the-badge)](https://github.com/topics/javascript)

67
api.js
View file

@ -1,67 +0,0 @@
const got = require("got");
/**
* The defaults here are the same as the API
* @see https://developer.github.com/v3/repos/#list-user-repositories
* @param {string} username
* @param {Object} opts
* @param {('all' | 'owner' | 'member')[]} [opts.types]
* @param {'created' | 'updated' | 'pushed' | 'full_name' | 'star'} [opts.sort]
* @param {'desc' | 'asc'} [opts.order]
*/
async function getRepos(username, opts = {}) {
let tempRepos;
let page = 1;
let repos = [];
const { sort } = opts;
const order = opts.order || (sort === "full_name" ? "asc" : "desc");
const types = opts.types || [];
let type = "all";
if (
types.includes("all") ||
(types.includes("owner") && types.includes("member"))
) {
type = "all";
} else if (types.includes("member")) {
type = "member";
}
do {
let requestUrl = `https://api.github.com/users/${username}/repos?per_page=100&page=${page++}&type=${type}`;
if (sort && sort !== "star") {
requestUrl += `&sort=${sort}&direction=${order}`;
}
tempRepos = await got(requestUrl);
tempRepos = JSON.parse(tempRepos.body);
repos = repos.concat(tempRepos);
} while (tempRepos.length === 100);
if (sort === "star") {
repos = repos.sort((a, b) => {
if (order === "desc") {
return b.stargazers_count - a.stargazers_count;
}
return a.stargazers_count - b.stargazers_count;
});
}
return repos;
}
/**
* @see https://developer.github.com/v3/users/#get-a-single-user
* @param {string} username
*/
async function getUser(username) {
const res = await got(`https://api.github.com/users/${username}`);
return JSON.parse(res.body);
}
module.exports = {
getRepos,
getUser
};

9
assets/blog/blog.json Normal file
View file

@ -0,0 +1,9 @@
[
{
"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
}
]

64
assets/blog/blogTemplate.html Normal file
View file

@ -0,0 +1,64 @@
<!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>
<div id="loading">
<div id="spinner"></div>
</div>
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
<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>
</tr>
</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>
</div>
<div id="footer_blog">
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
</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("../../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>
</body></html>

BIN
assets/fonts/otf/manrope-bold.otf
View file

Binary file not shown.

BIN
assets/fonts/variable/Manrope[wght].ttf
View file

Binary file not shown.

BIN
assets/fonts/web/manrope-bold.woff2
View file

Binary file not shown.

782
assets/index.css
View file

@ -1,349 +1,433 @@
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Poppins');
@font-face { @import url('https://fonts.googleapis.com/css?family=Questrial');
font-family: "Manrope VF";
src: url("/assets/fonts/variable/Manrope%5Bwght%5D.ttf") body{
format("truetype-variations"); margin:0%;
font-style: normal; padding:0%;
font-weight: 200 800; width:100vw;
} background:var(--bg-color);
color:var(--text-color);
@font-face { max-width:100vw;
font-family: "Manrope"; overflow-x:hidden;
src: url("/assets/fonts/web/manrope-bold.woff2") format("woff2"), align-items:center;
url("/assets/fonts/otf/manrope-bold.otf") format("opentype"); font-family: 'Poppins', sans-serif;
font-style: normal; }
font-weight: 700;
} #loading {
width: 100vw;
body { height: 100vh;
align-items: center; position: fixed;
background: var(--bg-color); background: var(--bg-color);
color: var(--text-color); z-index: 999;
font-family: "Manrope VF", Manrope, sans-serif; display: flex;
font-feature-settings: "calt", "liga"; justify-content: center;
font-size: 64px; flex-direction: column;
font-variation-ligatures: normal; align-items: center;
font-variation-settings: "wght" 500; top:0;
font-weight: 700; bottom:0;
margin: 0%; left:0;
max-width: 100vw; right:0;
overflow-x: hidden; }
padding: 0%;
width: 100vw; #spinner {
} animation: rotate 0.5s infinite linear;
width:50px;
.profile { height:50px;
background: var(--background-image) center center; border:2px solid var(--bg-color);
background-repeat: no-repeat; border-bottom:2px solid var(--text-color);
background-size: cover !important; border-radius:50%;
color: #fff !important; margin:0;
display: flex; }
flex-direction: column;
height: 92vh; @keyframes rotate {
justify-content: center; 0% {transform: rotate(0deg);}
padding: 4vh 3vw; 100% {transform: rotate(360deg);}
position: fixed; }
text-align: left;
width: 24vw; #profile {
} width:24vw;
padding:4vh 3vw;
.display { height:92vh;
display: inline-block; display:flex;
height: 92vh; flex-direction:column;
padding: 4vh 3vw; justify-content:center;
padding-left: 33vw; text-align:left;
width: 64vw; background:var(--background-image) center center;
} background-size: cover !important;
background-repeat:no-repeat;
.display h1 { position:fixed;
color: var(--text-color); color:#fff !important;
font-family: "Asap", sans-serif; }
font-size: 50px;
font-weight: bold; #display {
} width:64vw;
padding:4vh 3vw;
.emoji { height:92vh;
height: 18px; display:inline-block;
width: 18px; padding-left:33vw;
} }
.footer { #display h1 {
padding: 8vh 0; font-size:50px;
text-align: center; color:var(--text-color);
width: 100%; font-weight:bold;
} font-family: 'Questrial', sans-serif;
}
.footer a {
color: var(--text-color) !important; .emoji {
font-family: "Manrope VF", Manrope, sans-serif; width:18px;
font-feature-settings: "calt", "liga"; height:18px;
font-variation-ligatures: normal; }
font-variation-settings: "wght" 500;
font-weight: 700; #profile_img_blog {
text-decoration: none; border-radius:50%;
} width:90px;
height:90px;
#profile_img { background-size:cover !important;
width: 180px; background-repeat: no-repeat;
height: 180px; }
min-width: 180px;
min-height: 180px; #username_blog {
max-width: 180px; font-size:18px;
max-height: 180px; color:var(--text-color);
border-radius: 5px; font-family: 'Poppins', sans-serif;
background-size: cover !important; font-weight:bold;
background-repeat: no-repeat !important; }
}
#username_blog span {
@keyframes grad { font-size:24px;
0% { font-family: 'Questrial', sans-serif !important;
background-position: 0% 50%; }
}
#username_blog b {
50% { font-size:12px;
background-position: 100% 50%; font-family:'Poppins', sans-serif;
} font-weight:bold;
}
100% {
background-position: 0% 50%; #blog-display {
} width:60vw;
} margin:0px 20vw;
text-align:left;
.profile div { margin-top:3vh;
font-weight: bold; z-index:1;
margin: 1.5vh 0; }
}
#profile_blog {
.hidden { width:60vw;
opacity: 0; margin:0px 20vw;
} margin-top:10vh;
text-align:left;
#username { z-index:1;
color: white; }
font-family: "Asap Condensed", sans-serif;
font-size: 18px; #background {
} width:100vw;
height:55vh;
.bottom_section span { background:var(--background-background);
font-weight: bold; background-size:cover !important;
margin-right: 20px; background-repeat:no-repeat;
} position: absolute;
z-index:-1;
.socials span { margin-top:-10vh;
display: inline-block !important; }
font-weight: normal !important;
margin-right: 2vw !important; #blog-display h1 {
} font-size:50px;
color:var(--text-color);
#username span { font-weight:bold;
font-family: "Asap Condensed", sans-serif; font-family: 'Questrial', sans-serif;
font-size: 24px; }
}
#blog-display h2 {
.console-underscore { color:var(--blog-gray-color);
display: inline-block; }
left: 10px;
position: relative; #blog-display {
top: -0.14em; padding:1vh 0px;
} font-family: 'Questrial', sans-serif;
}
#userbio {
font-family: "Asap", sans-serif; #blog p {
font-size: 26px; font-size:17px;
width: 100%; line-height:25px;
} word-spacing:1.2px;
margin:5vh 0px;
#about { }
font-family: "Asap", sans-serif;
font-size: 18px; #blog p span {
} padding:2px 4px;
background:var(--text-color);
.projects a { color:var(--bg-color) !important;
display: flex; }
text-decoration: none;
#blog img {
/* 30px is the gutter size in magic grid */ width:100%;
width: calc(49% - 30px); margin:2vh 0px;
border-radius:5px;
/* 49% avoids a weird single column on some wide screens */ border:1px solid rgb(0, 0, 0, 0.08);
} }
.socials span a { #header {
font-weight: normal !important; width:63vw;
} text-align:right;
padding:3vh 0px;
#about a, position:absolute;
#username a { }
color: #fff !important;
font-weight: bold; #header a {
text-decoration: none; color:var(--text-color);
} text-decoration:none;
margin-left:4vw;
#about a:hover, font-weight:bold;
#username a:hover { }
text-decoration: underline;
} #footer_blog {
width:90vw;
#about span { padding:8vh 5vw;
display: block; text-align:center;
margin: 1vh 0; }
}
#footer_blog a {
.bottom_section span i { color:var(--text-color) !important;
font-size: 15px; text-decoration:none;
} font-family: 'Questrial', sans-serif;
font-weight:bold;
#about span i { }
font-size: 16px;
} #footer {
width:100%;
#work { padding:8vh 0px;
margin: 2vh 0; text-align:center;
padding: 4vh 0 !important; }
}
#footer a {
#forks { color:var(--text-color) !important;
margin: 2vh 0; text-decoration:none;
padding: 4vh 0 !important; font-family: 'Questrial', sans-serif;
} font-weight:bold;
}
.projects {
margin-left: -15px; #profile_img {
width:180px;
/* align section w/ heading above */ height:180px;
} border-radius:5px;
background-size:cover !important;
.projects section { }
border: 1px solid rgb(0, 0, 0, 0.08);
border-radius: 5px; #profile div {
box-shadow: 0 0 0 rgb(0, 0, 0, 0); font-weight:bold;
color: var(--text-color); margin:1.5vh 0px;
display: inline-block; }
margin: 1vh 0;
padding: 2.5vh 5%; #username {
transform: scale(1); font-size:18px;
transition: 0.4s ease-in-out; font-weight:bold;
width: 100%; }
}
#username span {
.projects section:hover { font-size:24px;
border: 1px solid rgb(0, 0, 0, 0); }
box-shadow: 0 15px 35px rgb(0, 0, 0, 0.06);
cursor: pointer; #userbio {
transform: scale(1.03); font-size:26px;
} font-family: 'Questrial', sans-serif;
width:100%;
.section_title { }
font-size: 24px;
font-weight: bold; #about {
margin: 1vh 0; font-size:18px;
padding: 0 1px; font-family: 'Questrial', sans-serif;
word-wrap: break-word; }
}
#about span {
.about_section { margin:1vh 0px;
font-family: "Asap", sans-serif; display:block;
font-size: 18px; }
font-weight: bold;
margin: 2vh 0; #about span i {
word-wrap: break-word; font-size:16px;
} }
.bottom_section { #work {
font-size: 14px; margin:2vh 0px;
margin: 1vh 0; padding:4vh 0px !important;
word-wrap: break-word; }
}
#forks {
.socials { margin:2vh 0px;
color: #fff; padding:4vh 0px !important;
margin: 3vh 0 !important; }
text-decoration: none;
} .projects {
columns:2;
::selection { }
background: var(--text-color);
color: var(--bg-color); .projects section {
} width:85%;
padding:2.5vh 5%;
@media (max-width: 800px) { display:inline-block;
.profile { border-radius:5px;
height: 60vh; color:var(--text-color);
padding: 4vh 5vw; border:1px solid rgb(0, 0, 0, 0.08);
position: relative; box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
text-align: center; transition:0.4s ease-in-out;
width: 90vw; margin:2vh 0px;
} transform:scale(1);
}
.display {
display: inline-block; .projects section:hover {
height: auto; cursor: pointer;
padding: 4vh 5vw; border:1px solid rgb(0, 0, 0, 0);
padding-left: 5vw; box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
width: 90vw; transform:scale(1.03);
} }
.profile_img { .section_title {
animation: grad 8s ease infinite; font-size:24px;
background: var(--gradient); font-weight:bold;
background-size: 300% 300%; margin:1vh 0px;
font-family: "Asap Condensed", sans-serif; }
font-size: 128px;
margin: 0 auto !important; .about_section {
transition: background 0.5s ease; font-size:18px;
-webkit-background-clip: text; font-family: 'Questrial', sans-serif;
-webkit-text-fill-color: transparent; margin:2vh 0px;
} font-weight:bold;
}
@keyframes grad {
0% { .bottom_section {
background-position: 0% 50%; margin:1vh 0px;
} font-size:14px;
}
50% {
background-position: 100% 50%; .bottom_section span {
} margin-right:20px;
font-weight:bold;
100% { }
background-position: 0% 50%;
} .bottom_section span i {
} font-size:15px;
}
#work {
margin: 0; #blog_section {
} margin:2vh 0px;
padding:2vh 0px !important;
.projects { }
margin-left: 0;
#blogs {
/* remove neg margin to align w/ header */ columns:2;
} }
.projects a { #blogs section {
width: 100%; width:85%;
} display:inline-block;
border-radius:5px;
.projects section { color:var(--text-color);
width: 88%; 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);
::-webkit-scrollbar { padding:0px;
height: 5px; margin:2vh 0px;
width: 5px; }
}
#blogs section img {
::-webkit-scrollbar-track { width:100%;
background: var(--bg-color); border-radius:5px 5px 0px 0px;
} }
::-webkit-scrollbar-thumb { .blog_container {
background: var(--text-color); padding:2.5vh 5%;
} }
/* Iconify */ #blogs section:hover {
cursor: pointer;
.iconify { border:1px solid rgb(0, 0, 0, 0);
font-size: 24px; box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
line-height: 14px; 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;
}
#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);}

124
assets/index.html
View file

@ -1,50 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> <title></title>
<link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed&display=swap" <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
rel="stylesheet" <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
/> <link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script> </head>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script> <body>
<script <div id="loading">
src="https://code.jquery.com/jquery-3.5.0.min.js" <div id="spinner"></div>
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" </div>
crossorigin="anonymous" <div id="profile">
></script> <div id="profile_img"></div>
<link rel="stylesheet" href="index.css" /> <div id="username">
</head> <div id="fullname"></div>
</div>
<body> <div id="userbio"></div>
<div class="profile"> <div id="about"></div>
<div id="profile_img"></div> </div>
<div id="username"> <div id="display">
<div id="fullname"></div> <div id="work">
</div> <h1>Work.</h1>
<div id="about"></div> <div class="projects" id="work_section"></div>
</div> </div>
<div class="display"> <div id="forks" style="display:none;">
<div id="work"> <h1>Forks.</h1>
<h1>Work.</h1> <div class="projects" id="forks_section"></div>
<div class="projects" id="work_section"></div> </div>
</div> <div id="blog_section">
<div id="forks" style="display: none;"> <h1>Blog.</h1>
<h1>Forks.</h1> <div id="blogs"></div>
<div class="projects" id="forks_section"></div> </div>
</div> <div id="footer">
<div class="footer"> <a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
<a </div>
href="https://github.com/dilllxd/gitfolio#acknowledgments" </div>
target="_blank" <script type="text/javascript">
> setTimeout(function(){
made on earth by humans document.getElementById("loading").classList.add("animated");
</a> document.getElementById("loading").classList.add("fadeOut");
</div> setTimeout(function(){
</div> document.getElementById("loading").classList.remove("animated");
<div id="script"></div> document.getElementById("loading").classList.remove("fadeOut");
</body> document.getElementById("loading").style.display = "none";
</html> },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>

70
assets/themes/dark.css
View file

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

19
assets/themes/light.css
View file

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

75
bin/gitfolio.js
View file

@ -1,75 +0,0 @@
#! /usr/bin/env node
/* Argument parser */
const program = require("commander");
process.env.OUT_DIR = process.env.OUT_DIR || process.cwd();
const { buildCommand } = require("../build");
const { updateCommand } = require("../update");
const { uiCommand } = require("../ui");
const { runCommand } = require("../run");
const { version } = require("../package.json");
function collect(val, memo) {
memo.push(val);
return memo;
}
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("-c, --codepen [username]", "specify codepen username")
.option("-d, --dev [username]", "specify dev username")
.option("-D, --dribbble [username]", "specify dribbble username")
.option("-e, --email [email]", "specify email")
.option("-F, --facebook [username]", "specify facebook username")
.option("-i, --instagram [username]", "specify instagram username")
.option("-k, --keybase [username]", "specify keybase username")
.option("-m, --medium [username]", "specify medium username")
.option("-r, --reddit [username]", "specify reddit username")
.option("-E, --stackexchange [user id]", "specify stackexchange user id")
.option("-S, --steam [username]", "specify steam username")
.option("-T, --telegram [username]", "specify telegram username")
.option("-w, --twitter [username]", "specify twitter username")
.option("-x, --xda [user id]", "specify xda user id")
.option("-y, --youtube [user id]", "specify youtube user id")
.action(buildCommand);
program
.command("update")
.description("Update user and repository data")
.action(updateCommand);
program
.command("ui")
.description("Create and Manage gitfolio with ease")
.action(uiCommand);
program
.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
.version(version, "-v --version")
.usage("<command> [options]")
.parse(process.argv);
if (program.args.length === 0) {
program.help();
}

71
blog.js Normal file
View file

@ -0,0 +1,71 @@
const program = require('commander');
const fs = require('fs');
const jsdom = require('jsdom').JSDOM,
options = {
resources: "usable"
};
program
.version('0.1.2')
.option('-t, --title [title]', 'give blog a 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)')
.parse(process.argv);
function createBlog(title, subtitle, pagetitle, folder) {
if (!fs.existsSync(`./dist/blog/${folder}`)){
fs.mkdirSync(`./dist/blog/${folder}`, { recursive: true });
}
fs.copyFile('./assets/blog/blogTemplate.html', `./dist/blog/${folder}/index.html`, (err) => {
if (err) throw err;
jsdom.fromFile(`./dist/blog/${folder}/index.html`, options).then(function (dom) {
let window = dom.window, document = window.document;
var style = document.createElement("link");
style.setAttribute("rel","stylesheet")
style.setAttribute("href","../../index.css");
document.getElementsByTagName("head")[0].appendChild(style);
document.getElementsByTagName("title")[0].textContent = pagetitle;
document.getElementById("blog_title").textContent = title;
document.getElementById("blog_sub_title").textContent = subtitle;
fs.writeFile(`./dist/blog/${folder}/index.html`, '<!DOCTYPE html>'+window.document.documentElement.outerHTML, function (error){
if (error) throw error;
var blog_data = {
"url_title": pagetitle,
"title": title,
"sub_title": subtitle,
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
"visible": true }
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('./dist/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
if (err) throw err;
console.log('Blog Created Successfully in "blog" folder.');
});
});
});
}).catch(function(error){
console.log(error);
});
});
}
if (program.title) {
/* Check if build has been executed before blog this will prevent it from giving "link : index.css" error */
if (!fs.existsSync(`./dist/index.html`) || !fs.existsSync(`./dist/index.css`)){
return console.log("You need to run build command before using blog one");
}
if (!program.pagetitle) {
program.pagetitle = program.title;
}
if (!program.folder) {
program.folder = program.title;
}
createBlog(program.title, program.subtitle, program.pagetitle, program.folder);
} else {
console.log("Provide a title to create a new blog");
}

205
build.js
View file

@ -1,113 +1,92 @@
// Filepath utilities /* Argument parser */
const path = require("path"); const program = require('commander');
// Promise library /* Filepath utilities */
const bluebird = require("bluebird"); const path = require('path');
const hbs = require("handlebars"); /* Promise library */
// Creates promise-returning async functions from callback-passed async functions const bluebird = require('bluebird');
const fs = bluebird.promisifyAll(require("fs")); const hbs = require('handlebars');
const fse = require("fs-extra"); /* Creates promise-returning async functions
const { updateHTML } = require("./populate"); from callback-passed async functions */
const { getConfig, outDir } = require("./utils"); const fs = bluebird.promisifyAll(require('fs'));
const { updateHTML } = require('./populate');
const assetDir = path.resolve(`${__dirname}/assets/`);
const config = path.join(outDir, "config.json");
const tempfont = path.resolve(assetDir, "fonts"); /* Specify the options the program uses */
const fonts = path.join(outDir, "assets/fonts"); program
.version('0.1.2')
/** .option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
* Creates the stylesheet used by the site from a template stylesheet. .option('-t, --theme [theme]', 'specify a theme to use')
* .option('-b, --background [background]', 'set the background image')
* Theme styles are added to the new stylesheet depending on command line .option('-f, --fork', 'includes forks with repos')
* arguments. .option('-s, --sort [sort]', 'set default sort for repository')
*/ .option('-o, --order [order]', 'set default order on sort')
async function populateCSS({ .parse(process.argv);
theme = "light",
background = "https://source.unsplash.com/1280x720/?wallpaper", const config = './dist/config.json';
} = {}) { const assetDir = path.resolve('./assets/');
// Get the theme the user requests. Defaults to 'light' const outDir = path.resolve('./dist/');
theme = `${theme}.css`;
const template = path.resolve(assetDir, "index.css"); /**
const stylesheet = path.join(outDir, "index.css"); * Creates the stylesheet used by the site from a template stylesheet.
*
try { * Theme styles are added to the new stylesheet depending on command line
await fs.accessAsync(outDir, fs.constants.F_OK); * arguments.
} catch (error) { */
await fs.mkdirAsync(outDir); async function populateCSS() {
} /* Get the theme the user requests. Defaults to 'light' */
let theme = `${program.theme || 'light'}.css`; /* Site theme, defaults to 'light' */
// Copy over the template CSS stylesheet let template = path.resolve(assetDir, 'index.css');
await fs.copyFileAsync(template, stylesheet); let stylesheet = path.join(outDir, 'index.css');
// Copy Fonts try {
fse.copySync(tempfont, fonts); await fs.accessAsync(outDir, fs.constants.F_OK);
} catch (err) {
// Get an array of every available theme await fs.mkdirAsync(outDir);
const themes = await fs.readdirAsync(path.join(assetDir, "themes")); }
/* Copy over the template CSS stylesheet */
if (!themes.includes(theme)) { await fs.copyFileAsync(template, stylesheet);
console.error('Error: Requested theme not found. Defaulting to "light".');
theme = "light"; /* Get an array of every available theme */
} let themes = await fs.readdirAsync(path.join(assetDir, 'themes'));
// Read in the theme stylesheet if (!themes.includes(theme)) {
let themeSource = await fs.readFileSync(path.join(assetDir, "themes", theme)); console.error('Error: Requested theme not found. Defaulting to "light".');
themeSource = themeSource.toString("utf-8"); theme = 'light';
const themeTemplate = hbs.compile(themeSource); }
const styles = themeTemplate({ /* Read in the theme stylesheet */
background: `${background}`, let themeSource = await fs.readFileSync(path.join(assetDir, 'themes', theme));
}); themeSource = themeSource.toString('utf-8');
// Add the user-specified styles to the new stylesheet let themeTemplate = hbs.compile(themeSource);
await fs.appendFileAsync(stylesheet, styles); let styles = themeTemplate({
'background': `${process.background || 'https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450'}`
// Update the config file with the user's theme choice })
const data = await getConfig(); /* Add the user-specified styles to the new stylesheet */
data[0].theme = theme; await fs.appendFileAsync(stylesheet, styles);
await fs.writeFileAsync(config, JSON.stringify(data, null, " "));
} /* Update the config file with the user's theme choice */
let data = await fs.readFileAsync(config);
async function populateConfig(opts) { data = JSON.parse(data);
const data = await getConfig(); data[0].theme = theme;
Object.assign(data[0], opts); await fs.writeFileAsync(config, JSON.stringify(data, null, ' '));
await fs.writeFileAsync(config, JSON.stringify(data, null, " ")); }
}
populateCSS();
async function buildCommand(username, program) {
await populateCSS(program); if (program.name) {
let types; let sort = program.sort ? program.sort : 'created';
if (!program.include || !program.include.length) { let order = -1;
types = ["all"]; let includeFork = false;
} else {
types = program.include; if(program.order){
} if(program.order === 'asc')
order = 1;
const opts = { else if(program.order === 'desc')
sort: program.sort, order = -1;
order: program.order, }
includeFork: Boolean(program.fork), if(program.fork){
types, includeFork = true;
codepen: program.codepen, }
dev: program.dev, updateHTML(('%s', program.name), sort, order, includeFork);
dribbble: program.dribbble, } else {
email: program.email, console.error("Error: Please provide a GitHub username.");
facebook: program.facebook, }
instagram: program.instagram,
keybase: program.keybase,
medium: program.medium,
reddit: program.reddit,
stackexchange: program.stackexchange,
steam: program.steam,
telegram: program.telegram,
twitter: program.twitter,
xda: program.xda,
youtube: program.youtube,
};
await populateConfig(opts);
updateHTML(("%s", username), opts);
}
module.exports = {
buildCommand,
populateCSS,
populateConfig,
};

11
default/config.json
View file

@ -1,11 +0,0 @@
[
{
"username": null,
"name": null,
"userimg": null,
"sort": null,
"order": null,
"includeFork": null,
"theme": "light.css"
}
]

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": null,
"name": null,
"userimg": null,
"theme": "light"
}
]

7487
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

79
package.json
View file

@ -1,59 +1,20 @@
{ {
"name": "gitfolio", "name": "gitfolio",
"version": "0.1.5", "version": "0.1.2",
"description": "a portfolio website for everyone to showcase their work", "description": "portfolio website for showcasing your work",
"main": "build.js", "main": "build.js",
"bin": "bin/gitfolio.js", "scripts": {
"scripts": { "clean": "rm -f dist/index.*",
"build": "OUT_DIR='./dist' node bin/gitfolio.js build dilllxd -f -t dark -s updated -e dylan@dylanh.dev -i dilllx -k dilll -r dilllx -S dilll -w dilllxd -y UCuQ2CKTDMlxugSQsDJKVeQA", "test": "echo \"Error: no test specified\" && exit 1"
"cli": "OUT_DIR='./dist' node bin/gitfolio.js", },
"clean": "rm -rf ./dist/*", "author": "imfunny",
"prettier": "prettier --write \"./**/*.{js,jsx,json,html,css,md}\"", "license": "ISC",
"snyk-protect": "snyk protect", "dependencies": {
"prepare": "npm run snyk-protect", "bluebird": "^3.5.4",
"test": "snyk test" "commander": "^2.20.0",
}, "github-emoji": "^1.1.0",
"author": { "got": "^9.6.0",
"name": "@imfunniee and community", "handlebars": "^4.1.2",
"email": "imfunny@wybemf.com", "jsdom": "^15.0.0"
"url": "https://imfunniee.github.io" }
}, }
"bugs": "https://github.com/imfunniee/gitfolio/issues",
"homepage": "https://github.com/imfunniee/gitfolio",
"keywords": [
"personal-website",
"github",
"portfolio",
"portfolio website",
"gitfolio",
"git"
],
"repository": {
"type": "git",
"url": "https://github.com/imfunniee/gitfolio"
},
"license": "GPL-3.0",
"dependencies": {
"bluebird": "^3.5.4",
"body-parser": "^1.19.0",
"commander": "^2.20.0",
"ejs": "3.0.2",
"express": "^4.17.0",
"fs-extra": "9.0.0",
"github-emoji": "^1.1.1",
"got": "11.0.2",
"handlebars": "4.7.6",
"jsdom": "16.2.2",
"ncp": "^2.0.0",
"snyk": "1.307.0"
},
"devDependencies": {
"eslint": "^6.8.0",
"prettier": "2.0.5",
"stylelint": "13.3.3",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-prettier": "^1.1.2"
},
"snyk": true
}

545
populate.js
View file

@ -1,428 +1,117 @@
const fs = require("fs"); const fs = require('fs');
const emoji = require("github-emoji"); const got = require('got');
const jsdom = require("jsdom").JSDOM, const emoji = require('github-emoji');
options = { const jsdom = require('jsdom').JSDOM,
resources: "usable" options = {
}; resources: "usable"
const { getConfig, outDir } = require("./utils"); };
const { getRepos, getUser } = require("./api");
function convertToEmoji(text) {
function convertToEmoji(text) { if (text == null) return;
if (text == null) return; text = text.toString();
text = text.toString(); if (text.match(/(?<=:\s*).*?(?=\s*:)/gs) != null) {
var pattern = /(?<=:\s*).*?(?=\s*:)/gs; var str = text.match(/(?<=:\s*).*?(?=\s*:)/gs);
if (text.match(pattern) != null) { str = str.filter(function (arr) {
var str = text.match(pattern); return /\S/.test(arr);
str = str.filter(function(arr) { });
return /\S/.test(arr); for (i = 0; i < str.length; i++) {
}); if (emoji.URLS[str[i]] != undefined) {
for (i = 0; i < str.length; i++) { var output = emoji.of(str[i]);
if (emoji.URLS[str[i]] != undefined) { var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets");
text = text.replace( text = text.replace(`:${str[i]}:`, `<img src="${emojiImage}" class="emoji">`);
`:${str[i]}:`, }
`<img src="${emoji.URLS[str[i]]}" class="emoji">` }
); return text;
} } else {
} return text;
return text; }
} else { }
return text;
} module.exports.updateHTML = (username, sort, order, includeFork) => {
} //add data to assets/index.html
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
module.exports.updateHTML = (username, opts) => { let window = dom.window, document = window.document;
const { (async () => {
includeFork, try {
codepen, console.log("Building HTML/CSS...");
dev, var repos = await got(`https://api.github.com/users/${username}/repos?sort=${sort}&order=${order}&per_page=1200`);
dribbble, repos = JSON.parse(repos.body);
email, for (var i = 0; i < repos.length; i++) {
facebook, if(repos[i].fork == false){
instagram, document.getElementById("work_section").innerHTML += `
keybase, <a href="${repos[i].html_url}" target="_blank">
medium, <section>
reddit, <div class="section_title">${repos[i].name}</div>
stackexchange, <div class="about_section">
steam, <span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
telegram, </div>
twitter, <div class="bottom_section">
xda, <span style="display:${repos[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span>
youtube <span><i class="fas fa-star"></i>&nbsp; ${repos[i].stargazers_count}</span>
} = opts; <span><i class="fas fa-code-branch"></i>&nbsp; ${repos[i].forks_count}</span>
//add data to assets/index.html </div>
jsdom </section>
.fromFile(`${__dirname}/assets/index.html`, options) </a>`;
.then(function(dom) { }else{
let window = dom.window, if(includeFork == true){
document = window.document; document.getElementById("forks").style.display = "block";
(async () => { document.getElementById("forks_section").innerHTML += `
try { <a href="${repos[i].html_url}" target="_blank">
console.log("Building HTML/CSS..."); <section>
const repos = await getRepos(username, opts); <div class="section_title">${repos[i].name}</div>
<div class="about_section">
for (var i = 0; i < repos.length; i++) { <span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
let element; </div>
if (repos[i].fork == false) { <div class="bottom_section">
element = document.getElementById("work_section"); <span style="display:${repos[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span>
} else if (includeFork == true) { <span><i class="fas fa-star"></i>&nbsp; ${repos[i].stargazers_count}</span>
document.getElementById("forks").style.display = "block"; <span><i class="fas fa-code-branch"></i>&nbsp; ${repos[i].forks_count}</span>
element = document.getElementById("forks_section"); </div>
} else { </section>
continue; </a>`;
} }
element.innerHTML += ` }
<a href="${repos[i].html_url}" target="_blank"> }
<section> var user = await got(`https://api.github.com/users/${username}`);
<div class="section_title">${repos[i].name}</div> user = JSON.parse(user.body);
<div class="about_section"> document.title = user.login;
<span style="display:${ var icon = document.createElement("link");
repos[i].description == undefined icon.setAttribute("rel", "icon");
? "none" icon.setAttribute("href", user.avatar_url);
: "block" icon.setAttribute("type", "image/png");
};">${convertToEmoji(repos[i].description)}</span> document.getElementsByTagName("head")[0].appendChild(icon);
</div> document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
<div class="bottom_section"> document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
<span style="display:${ //document.getElementById("github_link").href = `https://github.com/${user.login}`;
repos[i].language == null document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
? "none" document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
: "inline-block" document.getElementById("about").innerHTML = `
};"><span class="iconify" data-icon="mdi-code-tags"></span>&nbsp; ${ <span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> &nbsp; ${user.company}</span>
repos[i].language <span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span>
}</span> <span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> &nbsp; ${user.blog}</span>
<span><span class="iconify" data-icon="mdi-star"></span>&nbsp; ${ <span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp; ${user.location}</span>
repos[i].stargazers_count <span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> &nbsp;&nbsp; Available for hire</span>`;
}</span> //add data to config.json
<span><span class="iconify" data-icon="mdi-source-fork"></span>&nbsp; ${ fs.readFile("./dist/config.json", function (err, data) {
repos[i].forks_count if (err) throw err;
}</span> data = JSON.parse(data);
</div> data[0].username = user.login;
</section> data[0].name = user.name;
</a>`; data[0].userimg = user.avatar_url;
} fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) {
const user = await getUser(username); if (err) throw err;
document.title = user.login; });
var icon = document.createElement("link"); });
icon.setAttribute("rel", "icon"); fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
icon.setAttribute("href", user.avatar_url); if (error) throw error;
icon.setAttribute("type", "image/png"); console.log("Build Complete");
process.exit(0)
document.getElementsByTagName("head")[0].appendChild(icon); });
document.getElementById( } catch (error) {
"profile_img" console.log(error);
).style.background = `url('${user.avatar_url}') center center`; }
document.getElementsByTagName("head")[0].innerHTML += ` })();
<meta name="description" content="${user.bio}" /> }).catch(function (error) {
<meta property="og:image" content="${user.avatar_url}" /> console.log(error);
<meta property="og:type" content="profile" /> });
<meta property="og:title" content="${user.login}" /> }
<meta property="og:url" content="${user.html_url}" />
<meta property="og:description" content="${user.bio}" />
<meta property="profile:username" content="${user.login}" />
<meta name="twitter:image:src" content="${user.avatar_url}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="${user.login}" />
<meta name="twitter:description" content="${user.bio}" />`;
//Socials
document.getElementById(
"username"
).innerHTML = `<span id="text" style="display:${
user.name == null || !user.name ? "none" : "block"
};"></span><div class='console-underscore' id='console'>&#95;</div>`;
document.getElementById("about").innerHTML = `
<span style="display:${
user.company == null || !user.company ? "none" : "block"
};"><span class="iconify" data-icon="mdi-face"></span> &nbsp; ${
user.company
}</span>
<span style="display:block;"><a href="${
user.html_url
}"><span class="iconify" data-icon="mdi-github-circle"></span>&nbsp;&nbsp;@${
user.login
}</a></span>
<span style="display:${
email == null ? "none !important" : "block"
};"><a href="mailto:${email}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-email"></span>&nbsp;&nbsp;${email}</a></span>
<span style="display:${
user.location == null || !user.location ? "none" : "block"
};"><a href="https://www.google.com/maps/search/?api=1&query=${
user.location
}"><span class="iconify" data-icon="mdi-map-marker"></span>&nbsp;&nbsp;${
user.location
}</a></span>
<span style="display:${
user.hireable == false || !user.hireable ? "none" : "block"
};"><span class="iconify" data-icon="mdi-account-tie"></span> &nbsp;&nbsp; Available for hire</span>
<div class="socials">
<span style="display:${
codepen == null ? "none !important" : "block"
};"><a href="https://codepen.io/${codepen}" target="_blank" class="socials"><span class="iconify" data-icon="simple-icons:codepen"></span></a></span>
<span style="display:${
dev == null ? "none !important" : "block"
};"><a href="https://dev.to/${dev}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-dev-to"></span></a></span>
<span style="display:${
dribbble == null ? "none !important" : "block"
};"><a href="https://www.dribbble.com/${dribbble}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-dribbble"></span></a></span>
<span style="display:${
facebook == null ? "none !important" : "block"
};"><a href="https://facebook.com/${facebook}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-facebook-box"></span></a></span>
<span style="display:${
instagram == null ? "none !important" : "block"
};"><a href="https://www.instagram.com/${instagram}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-instagram"></span></a></span>
<span style="display:${
keybase == null ? "none !important" : "block"
};"><a href="https://keybase.io/${keybase}" target="_blank" class="socials"><span class="iconify" data-icon="simple-icons:keybase"></span></a></span>
<span style="display:${
medium == null ? "none !important" : "block"
};"><a href="https://medium.com/@${medium}" target="_blank" class="socials"><span class="iconify" data-icon="fa-brands:medium-m"></span></a></span>
<span style="display:${
reddit == null ? "none !important" : "block"
};"><a href="https://www.reddit.com/u/${reddit}" target="_blank" class="socials"><span class="iconify" data-icon="fa:reddit-alien"></span></a></span>
<span style="display:${
stackexchange == null ? "none !important" : "block"
};"><a href="https://stackexchange.com/users/${stackexchange}" target="_blank" class="socials"><span class="iconify" data-icon="mdi:stack-exchange"></span></a></span>
<span style="display:${
steam == null ? "none !important" : "block"
};"><a href="https://steamcommunity.com/id/${steam}" target="_blank" class="socials"><span class="iconify" data-icon="mdi:steam"></span></a></span>
<span style="display:${
telegram == null ? "none !important" : "block"
};"><a href="https://t.me/${telegram}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-telegram"></span></a></span>
<span style="display:${
twitter == null ? "none !important" : "block"
};"><a href="https://www.twitter.com/${twitter}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-twitter"></span></a></span>
<span style="display:${
xda == null ? "none !important" : "block"
};"><a href="https://forum.xda-developers.com/member.php?u=${xda}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-xda"></span></a></span>
<span style="display:${
youtube == null ? "none !important" : "block"
};"><a href="https://www.youtube.com/channel/${youtube}" target="_blank" class="socials"><span class="iconify" data-icon="mdi-youtube"></span></a></span>
</div>
`;
//Script
document.getElementById("script").innerHTML = `<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();
});
// function([string1, string2],target id,[color1,color2])
consoleText(["${user.name}", "${user.bio}"], "text", [
"white",
"white"
]);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ["#fff"];
var visible = true;
var con = document.getElementById("console");
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id);
target.setAttribute("style", "color:" + colors[0]);
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount);
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute("style", "color:" + colors[0]);
letterCount += x;
waiting = false;
}, 1000);
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000);
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount);
letterCount += x;
}
}, 120);
window.setInterval(function() {
if (visible === true) {
con.className = "console-underscore hidden";
visible = false;
} else {
con.className = "console-underscore";
visible = true;
}
}, 400);
}
</script>`;
//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}/gamer.html`,
`<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="7; url='https://www.youtube.com/playlist?list=UUp0gATorETNZ6ttOTMeV7jA'" />
</head>
<body>
<p>Please follow <a href="https://www.youtube.com/playlist?list=UUp0gATorETNZ6ttOTMeV7jA">this link</a>.</p>
</body>
</html>`,
function(error) {
if (error) throw error;
console.log("Wrote gamer.html");
}
);
await fs.writeFile(
`${outDir}/vps.html`,
`<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="7; url='http://207.244.250.120/'" />
</head>
<body>
<p>Please follow <a href="http://207.244.250.120/">this link</a>.</p>
</body>
</html>`,
function(error) {
if (error) throw error;
console.log("Wrote vps.html");
}
);
await fs.writeFile(
`${outDir}/keybase.txt`,
`==================================================================
https://keybase.io/dilll
--------------------------------------------------------------------
I hereby claim:
* I am an admin of https://dylanh.dev
* I am dilll (https://keybase.io/dilll) on keybase.
* I have a public key with fingerprint 9D2F 65D5 8FE7 5DED 1B8E 3B12 E58D 4317 E154 D022
To do so, I am signing this object:
{
"body": {
"key": {
"eldest_kid": "0120390f95b82550aa978d217eeac984e667e5b39cf01f64dadcd4899090a19919780a",
"fingerprint": "9d2f65d58fe75ded1b8e3b12e58d4317e154d022",
"host": "keybase.io",
"key_id": "e58d4317e154d022",
"kid": "0101b1f37fc0a6e762d2f16c51c2cc86129d89630638017cb71f17f23a082b1820130a",
"uid": "9432f8a7178f663cc1f70c77cbe51319",
"username": "dilll"
},
"service": {
"hostname": "dylanh.dev",
"protocol": "https:"
},
"type": "web_service_binding",
"version": 1
},
"ctime": 1556653778,
"expire_in": 157680000,
"prev": "6311ea796c2fdce63368d0422d2cd6fd5382355c793a82d8c50cac59ed6f147f",
"seqno": 26,
"tag": "signature"
}
which yields the signature:
-----BEGIN PGP MESSAGE-----
Version: Keybase OpenPGP v2.1.0
Comment: https://keybase.io/crypto
yMNxAnicbVJtUFRlFAZpS0AUauJjotQLihEf970f7713Z2oCtGITRpNVK2q5H++F
22676+6ygMCUjSPCxFqSDaPgqINAipKjw4BWG+Q0KCqfDkIwBoOiwAoj1DBE0V0m
/vX+OfOe8zzPec6Zcz3IzyfA90F5SthIRhfm29FakeuT2V7bU4gJFqkA0xZiRrQc
kElCdofBqEiYFsMBgZMcLnO0wBI0jfM8x7ASARiEeJFjKQQhg2iB5EQZBzKkJF4S
JYrlOJzDecBxQIXjPBaHyYo5G9msNsXsUGU5iZAhLdGsjBhaQhIQWEQKgEA0K1Gk
qg5oSsIJQiXmWOxehmpO4O0oQbGoOfVjWLb3P/gV3zgQgEwysojzEDGQUDsCKNJA
JESRhYDgJJaDJA5JFgeMKDBABoxMkDzOEgJgCRyQy75zl+U4iiRklmcAw8oQkqII
ZAYXGZWHaEACzgu0I5uZ/xSpaEkxmUxYcRymppyKiLxb9Y6xUi4w8eacBAk5VZrV
ZnFYRItJzec4HFa71stzFFi9wDwkGP6TMAiKWVJXqDKcyGZXLGZMC1Sk6FC8moCm
IaRJhmHjMJRvVWzIoHgRNANZXH3ePmo7LQZJABDPcFAkZElEkCQhK+EUoa5HlKAs
0SRLkDQtMhzJs4TEijQu8iLNIbUIKEbGvEPtM1swLQFVn3y2qmlXss28I9eGsOK2
1sxnfHwDfJ7VrPLelk+Af/DKxcHxdUtZ60cTy8I+GvAbWVNwMI9yRHy8uOmRoc2K
QpdSTsWk1/1eenx39EL96raLMzvwYHdaTs/8wzPRERvHX+0ypZ7YNFdOkUMD5rPj
o9/de9zx2/PG/ceOFR8Kjvk65OUrT+c2t/j3x1T1pg00zZPV+ANNyJDw1qz+WkYg
MPZf5ks0h3cc8CTWvH+k4AvLlSRqMcov0zV8acyjzD4patr+bnXClsNJoS80Hj0d
OxOyt7b8Ubv4yerPS92N+oCUssLMoSeBMc4+c0lo5OWUquRQrqHZHXFPhy8wkXtE
EGQbvqjv1FygqwbWoG/qg+/3Di7+IGnC83RX689sPbnubtbA3mt/uuZhVHL06+Q/
Ve6asZjm6Bc9+w52x16PG+zVVfU6dRp+MPL4H+vZ3dUHnvvQuHPL3/517+gGO9eW
xt9udr3nE7BQCdomw99ugNuoyl+J/TcnUk/0k41Jr3kmPuvKmtXnRuQU6q6eh3u2
vZQ/fGM67efNp2am6jzdjoyghkuj20/fPxm466nLuatlJL+nqOjQnYo7qypu596t
qfsxrc9Y/W3ThkrPdGJHi7vol4mptUnp02UftCaFT2rcM+c6Y/v0qXrrzvYvsRGb
K8/zV2vD0e/HiKGH3c1zG155I95zpCK+5M3Kc1FNG13O2NopA7t4czI5+6v0YPns
LeW8cuPxraW6n9wwLO/Cv16Pxg0=
=wUqU
-----END PGP MESSAGE-----
And finally, I am proving ownership of this host by posting or
appending to this document.
View my publicly-auditable identity here: https://keybase.io/dilll
==================================================================`,
function(error) {
if (error) throw error;
console.log(`wrote keybase.txt`);
}
);
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);
});
};

22
run.js
View file

@ -1,22 +0,0 @@
const path = require("path");
const express = require("express");
const outDir = path.resolve("./dist/" || process.env.OUT_DIR);
const app = express();
app.use(express.static(`${outDir}`));
function runCommand(program) {
const port = program.port ? program.port : 3000;
app.get("/", (req, res) => {
res.sendFile("/index.html");
});
app.listen(port);
console.log(
`\nGitfolio running on port ${port}, Navigate to http://localhost:${port} in your browser\n`
);
}
module.exports = {
runCommand
};

114
ui.js
View file

@ -1,114 +0,0 @@
const fs = require("fs");
const express = require("express");
const jsdom = require("jsdom").JSDOM;
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(__dirname + "/views"));
app.set("views", __dirname + "/views");
app.use(
express.json({
limit: "50mb"
})
);
app.use(
express.urlencoded({
limit: "50mb",
extended: true
})
);
const port = 3000;
global.DOMParser = new jsdom().window.DOMParser;
const { outDir } = require("./utils");
function uiCommand() {
app.get("/", (req, res) => {
res.render("index.ejs");
});
app.get("/update", (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", (req, res) => {
const { username } = req.body;
if (!username) {
return res.send("username can't be empty");
}
const sort = req.body.sort ? req.body.sort : "created";
const order = req.body.order ? req.body.order : "asc";
const includeFork = req.body.fork === "true";
const types = ["owner"];
const codepen = req.body.codepen ? req.body.codepen : null;
const dev = req.body.dev ? req.body.dev : null;
const dribbble = req.body.dribbble ? req.body.dribbble : null;
const email = req.body.email ? req.body.email : null;
const facebook = req.body.facebook ? req.body.facebook : null;
const instagram = req.body.instagram ? req.body.instagram : null;
const keybase = req.body.keybase ? req.body.keybase : null;
const medium = req.body.medium ? req.body.medium : null;
const reddit = req.body.reddit ? req.body.reddit : null;
const stackexchange = req.body.stackexchange
? req.body.stackexchange
: null;
const steam = req.body.steam ? req.body.steam : null;
const telegram = req.body.telegram ? req.body.telegram : null;
const twitter = req.body.twitter ? req.body.twitter : null;
const xda = req.body.xda ? req.body.xda : null;
const youtube = req.body.youtube ? req.body.youtube : null;
const background = req.body.background
? req.body.background
: "https://source.unsplash.com/1280x720/?wallpaper";
const theme = req.body.theme === "on" ? "dark" : "light";
const opts = {
sort,
order,
includeFork,
types,
codepen,
dev,
dribbble,
email,
facebook,
instagram,
keybase,
medium,
reddit,
stackexchange,
steam,
telegram,
twitter,
xda
};
updateHTML(username, opts);
populateCSS({
background,
theme
});
populateConfig(opts);
res.redirect("/");
});
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
};

53
update.js
View file

@ -1,40 +1,13 @@
const { getConfig } = require("./utils"); const fs = require('fs');
const { updateHTML } = require("./populate"); const {updateHTML} = require('./populate');
async function updateCommand() { fs.readFile("./dist/config.json", function (err , data) {
const data = await getConfig(); if (err) throw err;
const { username } = data[0]; data = JSON.parse(data);
if (username === null) { var username = data[0].username;
console.log( if(!username || username == null){
"username not found in config.json, please run build command before using update" console.log("username not found in config.json, please run build command before using update");
); return;
return; }
} updateHTML(username);
});
const opts = {
sort: data[0].sort,
order: data[0].order,
includeFork: data[0].includeFork,
types: data[0].types,
codepen: data[0].codepen,
dev: data[0].dev,
dribbble: data[0].dribbble,
email: data[0].email,
facebook: data[0].facebook,
instagram: data[0].instagram,
keybase: data[0].keybase,
medium: data[0].medium,
reddit: data[0].reddit,
stackexchange: data[0].stackexchange,
steam: data[0].steam,
telegram: data[0].telegram,
twitter: data[0].twitter,
xda: data[0].xda,
youtube: data[0].youtube
};
updateHTML(username, opts);
}
module.exports = {
updateCommand
};

33
utils.js
View file

@ -1,33 +0,0 @@
const path = require("path");
const bluebird = require("bluebird");
const fs = bluebird.promisifyAll(require("fs"));
const outDir = path.resolve("./dist/" || process.env.OUT_DIR);
const configPath = path.join(outDir, "config.json");
const defaultConfigPath = path.resolve(`${__dirname}/default/config.json`);
/**
* Tries to read file from out dir,
* if not present returns default file contents
*/
async function getFileWithDefaults(file, defaultFile) {
try {
await fs.accessAsync(file, fs.constants.F_OK);
} catch (error) {
const defaultData = await fs.readFileAsync(defaultFile);
return JSON.parse(defaultData);
}
const data = await fs.readFileAsync(file);
return JSON.parse(data);
}
async function getConfig() {
return getFileWithDefaults(configPath, defaultConfigPath);
}
module.exports = {
outDir,
getConfig
};

BIN
views/css/font/Circular.otf
View file

Binary file not shown.

173
views/css/index.css
View file

@ -1,173 +0,0 @@
@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 0;
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 0;
}
.input {
margin: 1.5vh 0 !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;
}
.remove i {
font-size: 14px;
margin-right: 3px;
}
#top_image i {
font-size: 20px;
position: absolute;
z-index: 5;
top: 4vh;
right: 5vw;
padding: 15px 15px;
background: #fff;
color: rgb(0, 0, 0);
border-radius: 50%;
}
#top_image i:hover {
cursor: pointer;
}
.div_for_buttons {
margin-top: 5vh;
}
.para {
font-size: 17px;
line-height: 25px;
word-spacing: 1.2px;
margin: 5vh 0;
background: transparent;
border: 0;
width: 100%;
font-family: "Questrial", sans-serif;
resize: none;
height: auto;
overflow-y: hidden;
}
.para span {
padding: 2px 4px;
background: #000;
color: #fff !important;
}
.remove {
margin-bottom: 2vh 0;
font-weight: bold;
transition: 0.4s ease-in-out;
font-size: 16px;
}
.remove:hover {
cursor: pointer;
color: rgb(255, 70, 70);
}
::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;
}

247
views/index.ejs
View file

@ -1,247 +0,0 @@
<!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" type="text/css" href="./css/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="/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="codepen username"
id="codepen"
name="codepen"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="dev username"
id="dev"
name="dev"
/>
<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="email address"
id="email"
name="email"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="facebook username"
id="facebook"
name="facebook"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="instagram username"
id="instagram"
name="instagram"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="keybase username"
id="keybase"
name="keybase"
/>
<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="reddit username"
id="reddit"
name="reddit"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="stackexchange username"
id="stackexchange"
name="stackexchange"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="steam username"
id="steam"
name="steam"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="telegram username"
id="telegram"
name="telegram"
/>
<br />
<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="xda user id"
id="xda"
name="xda"
/>
<br />
<input
type="text"
class="input h-weight-bold"
placeholder="youtube user id"
id="youtube"
name="youtube"
/>
</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 type="text/javascript">
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";
}
});
</script>
</body>
</html>