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

Added A Suite of Improvements (#25)

Browse source 
* * Created site files are now placed in an output directory (defaults to
dist.)
* Output directory can be specified via the --out flat
* Added a ton of coments in build.js
* Made functions in build.js use bluebird promises
* Themes are now in the assets/templates folder instead as magic
strings in the source code
* Any number of custom themes (not just light and dark) can be used by creating
a [theme].css file and putting it in assets/themes
* CSS themes are rendered with Handlebars
* CSS themes now rely on Handlebars for specifying the background image

* Restored config.json to template file

* Changes to the blogging feature

* Moved blog templates and config files to assets/blog
* Created blog pages now go to dist/blog/
* Updated blog.js accordingly

* Make blog.js use the --out setting to specify where blog files should
be put
* create a gitfolio.js file that calls blog/update/populate/build.js
files as commands instead of having to run each script manually
* Make blog/populate.js use bluebird promises

* Updated the README to reflect the changes made by this pull request

* Added link to demo site in README
This commit is contained in:
Don Isaac 2019-05-20 03:38:30 -04:00 • committed by imfunny
parent 17a5aa2dc8
commit e3efba34c1
13 changed files with 367 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.gitignore vendored
View file

@ -59,3 +59,9 @@ typings/
# next.js build output # next.js build output
.next .next
# Built website files
dist/
# Editor files and folders
.vscode/

248
README.md
View file

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

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
}
]

0
blog/blogTemplate.html → assets/blog/blogTemplate.html
View file

31
assets/themes/dark.css Normal file
View file

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

7
assets/themes/light.css Normal file
View file

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

14
blog.js
View file

@ -14,12 +14,12 @@ program
.parse(process.argv); .parse(process.argv);
function createBlog(title, subtitle, pagetitle, folder) { function createBlog(title, subtitle, pagetitle, folder) {
if (!fs.existsSync(`./blog/${folder}`)){ if (!fs.existsSync(`./dist/blog/${folder}`)){
fs.mkdirSync(`./blog/${folder}`); fs.mkdirSync(`./dist/blog/${folder}`, { recursive: true });
} }
fs.copyFile('./blog/blogTemplate.html', `./blog/${folder}/index.html`, (err) => { fs.copyFile('./assets/blog/blogTemplate.html', `./dist/blog/${folder}/index.html`, (err) => {
if (err) throw err; if (err) throw err;
jsdom.fromFile(`./blog/${folder}/index.html`, options).then(function (dom) { jsdom.fromFile(`./dist/blog/${folder}/index.html`, options).then(function (dom) {
let window = dom.window, document = window.document; let window = dom.window, document = window.document;
var style = document.createElement("link"); var style = document.createElement("link");
style.setAttribute("rel","stylesheet") style.setAttribute("rel","stylesheet")
@ -30,7 +30,7 @@ function createBlog(title, subtitle, pagetitle, folder) {
document.getElementById("blog_title").textContent = title; document.getElementById("blog_title").textContent = title;
document.getElementById("blog_sub_title").textContent = subtitle; document.getElementById("blog_sub_title").textContent = subtitle;
fs.writeFile(`./blog/${folder}/index.html`, '<!DOCTYPE html>'+window.document.documentElement.outerHTML, function (error){ fs.writeFile(`./dist/blog/${folder}/index.html`, '<!DOCTYPE html>'+window.document.documentElement.outerHTML, function (error){
if (error) throw error; if (error) throw error;
var blog_data = { var blog_data = {
"url_title": pagetitle, "url_title": pagetitle,
@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) {
"sub_title": subtitle, "sub_title": subtitle,
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
"visible": true } "visible": true }
fs.readFile("./blog/blog.json", function (err , data) { fs.readFile("./assets/blog/blog.json", function (err , data) {
if (err) throw err; if (err) throw err;
var old_blogs = JSON.parse(data); var old_blogs = JSON.parse(data);
old_blogs.push(blog_data); old_blogs.push(blog_data);
fs.writeFile('./blog/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){ fs.writeFile('./assets/blog/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
if (err) throw err; if (err) throw err;
console.log('Blog Created Successfully in "blog" folder.'); console.log('Blog Created Successfully in "blog" folder.');
}); });

1
blog/blog.json
View file

@ -1 +0,0 @@
[]

115
build.js
View file

@ -1,64 +1,77 @@
/* Argument parser */
const program = require('commander'); const program = require('commander');
const fs = require('fs'); /* Filepath utilities */
const {updateHTML} = require('./populate') const path = require('path');
/* Promise library */
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');
/* Specify the options the program uses */
program program
.version('0.1.1') .version('0.1.1')
.option('-n, --name [username]', 'get username') .option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
.option('-d, --dark', 'enable dark mode') .option('-t, --theme [theme]', 'specify a theme to use')
.option('-b, --background [background]', 'set background image') .option('-b, --background [background]', 'set the background image')
.parse(process.argv); .option('-o, --out [directory]', 'the output directory to put the built site')
.parse(process.argv);
var dark; const config = 'config.json';
var light; const assetDir = path.resolve('./assets/');
const outDir = path.resolve(program.out || './dist/');
function populateCSS(){ /**
if (program.dark) { * Creates the stylesheet used by the site from a template stylesheet.
fs.copyFile('./assets/index.css', 'index.css', (err) => { *
if (err) throw err; * Theme styles are added to the new stylesheet depending on command line
fs.appendFile('index.css', dark, function (err) { * arguments.
if (err) throw err; */
}); async function populateCSS() {
fs.readFile("config.json", function (err , data) { /* Get the theme the user requests. Defaults to 'light' */
if (err) throw err; let theme = `${program.theme || 'light'}.css`; /* Site theme, defaults to 'light' */
data = JSON.parse(data); let template = path.resolve(assetDir, 'index.css');
data[0].theme = "dark"; let stylesheet = path.join(outDir, 'index.css');
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function(err){
if (err) throw err; try {
}); await fs.accessAsync(outDir, fs.constants.F_OK);
}); } catch (err) {
}); await fs.mkdirAsync(outDir);
}else{
fs.copyFile('./assets/index.css', 'index.css', (err) => {
if (err) throw err;
fs.appendFile('index.css', light, function (err) {
if (err) throw err;
});
fs.readFile("config.json", function (error , data) {
if (error) throw err;
data = JSON.parse(data);
data[0].theme = "light";
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function(error){
if (error) throw err;
});
});
});
} }
/* 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'));
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': `${process.background || 'https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450'}`
})
/* Add the user-specified styles to the new stylesheet */
await fs.appendFileAsync(stylesheet, styles);
/* Update the config file with the user's theme choice */
let data = await fs.readFileAsync(config);
data = JSON.parse(data);
data[0].theme = theme;
await fs.writeFileAsync(config, JSON.stringify(data, null, ' '));
} }
populateCSS();
if (program.background) {
dark = `:root {--bg-color: rgb(10, 10, 10);--text-color: #fff;--blog-gray-color:rgb(180, 180, 180);--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url('${('%s', program.background)}');--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),url('${('%s', program.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){ --background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)), url('${('%s', program.background)}') !important;}`;
light = `:root {--bg-color: #fff;--text-color: rgb(10, 10, 10);--blog-gray-color:rgb(80, 80, 80);--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url('${('%s', program.background)}');--background-background: #fff;}`;
populateCSS();
}else{
dark = `:root {--bg-color: rgb(10, 10, 10);--text-color: #fff;--blog-gray-color:rgb(180, 180, 180);--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url('https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450');--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),url('https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450') center center fixed;--height:50vh;} #display h1 {-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: #fff;} #blog-display h1 {-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color: #fff;}#projects section {background:rgb(20, 20, 20);}#blog_section section {background:rgb(20, 20, 20);}@media (max-width: 800px){ :root {--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)), url('https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450') !important;}}`;
light = `:root {--bg-color: #fff;--text-color: rgb(10, 10, 10);--blog-gray-color:rgb(80, 80, 80);--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url('https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450');--background-background: #fff;}`;
populateCSS();
}
if (program.name) { if (program.name) {
updateHTML(('%s', program.name)); updateHTML(('%s', program.name));
} else { } else {
console.log("Provide a username"); console.error("Error: Please provide a GitHub username.");
} }

2
config.json
View file

@ -3,6 +3,6 @@
"username": null, "username": null,
"name": null, "name": null,
"userimg": null, "userimg": null,
"theme": "light" "theme": "light.css"
} }
] ]

55
package-lock.json generated
View file

@ -98,6 +98,11 @@
"tweetnacl": "^0.14.3" "tweetnacl": "^0.14.3"
} }
}, },
"bluebird": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
"integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
},
"browser-process-hrtime": { "browser-process-hrtime": {
"version": "0.1.3", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
@ -338,6 +343,17 @@
"url-parse-lax": "^3.0.0" "url-parse-lax": "^3.0.0"
} }
}, },
"handlebars": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
"integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
}
},
"har-schema": { "har-schema": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@ -512,6 +528,16 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
}, },
"minimist": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
},
"neo-async": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
},
"normalize-url": { "normalize-url": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
@ -535,6 +561,22 @@
"wrappy": "1" "wrappy": "1"
} }
}, },
"optimist": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"requires": {
"minimist": "~0.0.1",
"wordwrap": "~0.0.2"
},
"dependencies": {
"wordwrap": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
}
}
},
"optionator": { "optionator": {
"version": "0.8.2", "version": "0.8.2",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@ -692,8 +734,7 @@
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
"optional": true
}, },
"sshpk": { "sshpk": {
"version": "1.16.1", "version": "1.16.1",
@ -764,6 +805,16 @@
"prelude-ls": "~1.1.2" "prelude-ls": "~1.1.2"
} }
}, },
"uglify-js": {
"version": "3.5.13",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.13.tgz",
"integrity": "sha512-Lho+IJlquX6sdJgyKSJx/M9y4XbDd3ekPjD8S6HYmT5yVSwDtlSuca2w5hV4g2dIsp0Y/4orbfWxKexodmFv7w==",
"optional": true,
"requires": {
"commander": "~2.20.0",
"source-map": "~0.6.1"
}
},
"uri-js": { "uri-js": {
"version": "4.2.2", "version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",

3
package.json
View file

@ -4,14 +4,17 @@
"description": "portfolio website for showcasing your work", "description": "portfolio website for showcasing your work",
"main": "build.js", "main": "build.js",
"scripts": { "scripts": {
"clean": "rm -f dist/index.*",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "imfunny", "author": "imfunny",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"bluebird": "^3.5.4",
"commander": "^2.20.0", "commander": "^2.20.0",
"github-emoji": "^1.1.0", "github-emoji": "^1.1.0",
"got": "^9.6.0", "got": "^9.6.0",
"handlebars": "^4.1.2",
"jsdom": "^15.0.0" "jsdom": "^15.0.0"
} }
} }

116
populate.js
View file

@ -2,43 +2,43 @@ const fs = require('fs');
const got = require('got'); const got = require('got');
const emoji = require('github-emoji'); const emoji = require('github-emoji');
const jsdom = require('jsdom').JSDOM, const jsdom = require('jsdom').JSDOM,
options = { options = {
resources: "usable" resources: "usable"
}; };
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){ if (text.match(/(?<=:\s*).*?(?=\s*:)/gs) != null) {
var str = text.match(/(?<=:\s*).*?(?=\s*:)/gs); var str = text.match(/(?<=:\s*).*?(?=\s*:)/gs);
str = str.filter(function(arr) { str = str.filter(function (arr) {
return /\S/.test(arr); return /\S/.test(arr);
}); });
for(i=0;i<str.length;i++){ for (i = 0; i < str.length; i++) {
if(emoji.URLS[str[i]] != undefined){ if (emoji.URLS[str[i]] != undefined) {
var output = emoji.of(str[i]); var output = emoji.of(str[i]);
var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets"); var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets");
text = text.replace(`:${str[i]}:`, `<img src="${emojiImage}" class="emoji">`); text = text.replace(`:${str[i]}:`, `<img src="${emojiImage}" class="emoji">`);
} }
} }
return text; return text;
}else{ } else {
return text; return text;
} }
} }
module.exports.updateHTML = (username) => { module.exports.updateHTML = (username) => {
//add data to assets/index.html //add data to assets/index.html
jsdom.fromFile("./assets/index.html", options).then(function (dom) { jsdom.fromFile("./assets/index.html", options).then(function (dom) {
let window = dom.window, document = window.document; let window = dom.window, document = window.document;
(async () => { (async () => {
try { try {
console.log("Building HTML/CSS..."); console.log("Building HTML/CSS...");
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`); var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
repos = JSON.parse(repos.body); repos = JSON.parse(repos.body);
for(var i = 0;i < repos.length;i++){ for (var i = 0; i < repos.length; i++) {
if(repos[i].fork == false){ if (repos[i].fork == false) {
document.getElementById("projects").innerHTML += ` document.getElementById("projects").innerHTML += `
<a href="${repos[i].html_url}" target="_blank"> <a href="${repos[i].html_url}" target="_blank">
<section> <section>
<div class="section_title">${repos[i].name}</div> <div class="section_title">${repos[i].name}</div>
@ -52,48 +52,48 @@ jsdom.fromFile("./assets/index.html", options).then(function (dom) {
</div> </div>
</section> </section>
</a>`; </a>`;
}
} }
} var user = await got(`https://api.github.com/users/${username}`);
var user = await got(`https://api.github.com/users/${username}`); user = JSON.parse(user.body);
user = JSON.parse(user.body); document.title = user.login;
document.title = user.login; var icon = document.createElement("link");
var icon = document.createElement("link"); icon.setAttribute("rel", "icon");
icon.setAttribute("rel", "icon"); icon.setAttribute("href", user.avatar_url);
icon.setAttribute("href", user.avatar_url); icon.setAttribute("type", "image/png");
icon.setAttribute("type", "image/png"); document.getElementsByTagName("head")[0].appendChild(icon);
document.getElementsByTagName("head")[0].appendChild(icon); document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center` document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`; //document.getElementById("github_link").href = `https://github.com/${user.login}`;
//document.getElementById("github_link").href = `https://github.com/${user.login}`; document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio); document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block'; document.getElementById("about").innerHTML = `
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.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.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span>
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> &nbsp; ${user.blog}</span> <span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> &nbsp; ${user.blog}</span>
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp; ${user.location}</span> <span style="display:${user.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>`; <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 //add data to config.json
fs.readFile("config.json", function (err , data) { fs.readFile("config.json", function (err, data) {
if (err) throw err; if (err) throw err;
data = JSON.parse(data); data = JSON.parse(data);
data[0].username = user.login; data[0].username = user.login;
data[0].name = user.name; data[0].name = user.name;
data[0].userimg = user.avatar_url; data[0].userimg = user.avatar_url;
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function(err){ fs.writeFile('config.json', JSON.stringify(data, null, ' '), function (err) {
if (err) throw err; if (err) throw err;
}); });
}); });
fs.writeFile('index.html', '<!DOCTYPE html>'+window.document.documentElement.outerHTML, function (error){ fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
if (error) throw error; if (error) throw error;
console.log("Build Complete"); console.log("Build Complete");
process.exit(0) process.exit(0)
}); });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
})(); })();
}).catch(function(error){ }).catch(function (error) {
console.log(error); console.log(error);
}); });
} }