mirror of https://github.com/dilllxd/gitfolio.git
Added A Suite of Improvements (#25)
* * 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
imfunny
parent
17a5aa2dc8
commit
e3efba34c1
|
|
@ -59,3 +59,9 @@ typings/
|
|||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# Built website files
|
||||
dist/
|
||||
|
||||
# Editor files and folders
|
||||
.vscode/
|
||||
248
README.md
248
README.md
|
|
@ -1,120 +1,128 @@
|
|||
<img src="https://i.imgur.com/eA6clZr.png">
|
||||
|
||||
# Gitfolio [](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio)    
|
||||
|
||||
### 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.
|
||||
|
||||
# Getting Started
|
||||
|
||||
### Let's build
|
||||
|
||||
a. Clone this repository using ``git clone https://github.com/imfunniee/gitfolio.git`` or just simply download it.
|
||||
|
||||
```
|
||||
$ git clone https://github.com/imfunniee/gitfolio.git
|
||||
```
|
||||
|
||||
b. Now ``cd`` into the repository you just cloned ``cd gitfolio`` and run the below command
|
||||
|
||||
```
|
||||
$ npm i
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
$ node build --name username
|
||||
```
|
||||
This will create `index.css` and `index.html` files in your working directory.
|
||||
|
||||
d. Congrats, you just made yourself a personal website.
|
||||
|
||||
e. To run your website navigate to `index.html` in your browser. [you won't see blogs until you are on localhost]
|
||||
|
||||
> if you get stuck somewhere or get an error, please create an issue
|
||||
|
||||
### Let's customize
|
||||
|
||||
#### Enabling Dark theme
|
||||
|
||||
To enable dark theme just provide `--dark` as an argument while building
|
||||
|
||||
```
|
||||
$ node build --name username --dark
|
||||
```
|
||||
|
||||
#### Customize background image
|
||||
|
||||
To customize the background image just provide `--background [url]` argument while building
|
||||
|
||||
```
|
||||
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
|
||||
```
|
||||
|
||||
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
||||
|
||||
|
||||
### Let's Publish
|
||||
|
||||
Push the files to github. You can host your website using github pages by naming your repo ``username.github.io``. You can also use a custom domain.
|
||||
|
||||
|
||||
### Updating
|
||||
|
||||
To update your info, simply run
|
||||
|
||||
```
|
||||
$ node update
|
||||
```
|
||||
This will update your info and your repository info.
|
||||
|
||||
To Update background or theme you need to run `build` command again.
|
||||
|
||||
|
||||
### Add a Blog
|
||||
|
||||
To add your first blog run this command, make sure the title don't have spaces instead use "-".
|
||||
|
||||
```
|
||||
$ node blog --title my-first-blog
|
||||
```
|
||||
|
||||
This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.
|
||||
|
||||
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as [cards](https://imfunniee.github.io/gitfolio/#blog_section). You could customize the JSON object that corresponds your current blog.
|
||||
|
||||
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
|
||||
|
||||
Default JSON Format
|
||||
```
|
||||
{
|
||||
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
|
||||
"title": "Lorem ipsum dolor sit amet", // main title of blog
|
||||
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
|
||||
"visible": true // don't worry about this
|
||||
}
|
||||
```
|
||||
|
||||
More Arguments for Blog
|
||||
|
||||
```
|
||||
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
|
||||
--pagetitle [pagetitle] : gives blog page a title
|
||||
--folder [folder] : give folder a title
|
||||
```
|
||||
|
||||
> (use "-" instead of spaces)
|
||||
|
||||
### Enable Blogs
|
||||
|
||||
Blog are disabled by default. To enable them head over to `assets/index.html` and find `<div id="blog_section" style="display:none;">`. Remove the style attribute to show your blogs on your personal website.
|
||||
|
||||
If you have run build command before adding a blog you need have to remove the style attribute from `index.html` file aswell.
|
||||
|
||||
## License
|
||||
|
||||
<img src="https://i.imgur.com/eA6clZr.png">
|
||||
|
||||
# Gitfolio [](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio)    
|
||||
|
||||
### personal website + blog for every github user
|
||||
|
||||
Gitfolio will help you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.
|
||||
|
||||
Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action.
|
||||
|
||||
# Getting Started
|
||||
|
||||
### Let's Build
|
||||
|
||||
```sh
|
||||
git clone https://github.com/imfunniee/gitfolio.git # Clone the repo
|
||||
cd gitfolio # Navigate into the project folder
|
||||
npm i # Install the required dependencies
|
||||
```
|
||||
|
||||
Gitfolio is now ready to be used. The command
|
||||
|
||||
```sh
|
||||
node build --name [username]
|
||||
```
|
||||
|
||||
Will build your website using your GitHub username and put it in the `dist/` folder.
|
||||
If you want to use a different folder, you can specify it by setting the `--out` flag.
|
||||
|
||||
```sh
|
||||
node build --name [username] --out [directory]
|
||||
```
|
||||
|
||||
To open your site, run
|
||||
```sh
|
||||
open dist/index.html
|
||||
```
|
||||
|
||||
If you specified a different output directory, replace `dist/` with the directory you used.
|
||||
Congrats, you just made yourself a personal website!
|
||||
|
||||
> if you get stuck somewhere or get an error, please create an issue
|
||||
|
||||
### Let's Customize
|
||||
|
||||
#### Enabling Themes
|
||||
|
||||
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
|
||||
|
||||
* `light`
|
||||
* `dark`
|
||||
> TODO: Add more themes
|
||||
|
||||
For example, the following command will build the website with the dark theme
|
||||
```
|
||||
$ node build --name username --theme dark
|
||||
```
|
||||
|
||||
#### Customize background image
|
||||
|
||||
To customize the background image just provide `--background [url]` argument while building
|
||||
|
||||
```
|
||||
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
|
||||
```
|
||||
|
||||
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
||||
|
||||
|
||||
### Let's Publish
|
||||
|
||||
Push the files to github. You can host your website using github pages by naming your repo ``username.github.io``. You can also your custom domain.
|
||||
|
||||
### Updating
|
||||
|
||||
To update your info, simply run
|
||||
|
||||
```
|
||||
$ node update
|
||||
```
|
||||
This will update your info and your repository info.
|
||||
|
||||
To Update background or theme you need to run `build` command again.
|
||||
|
||||
|
||||
### Add a Blog
|
||||
|
||||
To add your first blog run this command, make sure the title don't have spaces instead use "-".
|
||||
|
||||
```
|
||||
$ node blog --title my-first-blog
|
||||
```
|
||||
|
||||
This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.
|
||||
|
||||
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as [cards](https://imfunniee.github.io/gitfolio/#blog_section). You could customize the JSON object that corresponds your current blog.
|
||||
|
||||
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
|
||||
|
||||
Default JSON Format
|
||||
```
|
||||
{
|
||||
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
|
||||
"title": "Lorem ipsum dolor sit amet", // main title of blog
|
||||
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
|
||||
"visible": true // don't worry about this
|
||||
}
|
||||
```
|
||||
|
||||
More Arguments for Blog
|
||||
|
||||
```
|
||||
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
|
||||
--pagetitle [pagetitle] : gives blog page a title
|
||||
--folder [folder] : give folder a title
|
||||
```
|
||||
|
||||
> (use "-" instead of spaces)
|
||||
|
||||
### Enable Blogs
|
||||
|
||||
Blog are disabled by default. To enable them head over to `assets/index.html` and find `<div id="blog_section" style="display:none;">`. Remove the style attribute to show your blogs on your personal website.
|
||||
|
||||
If you have run build command before adding a blog you need have to remove the style attribute from `index.html` file aswell.
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
14
blog.js
|
|
@ -14,12 +14,12 @@ program
|
|||
.parse(process.argv);
|
||||
|
||||
function createBlog(title, subtitle, pagetitle, folder) {
|
||||
if (!fs.existsSync(`./blog/${folder}`)){
|
||||
fs.mkdirSync(`./blog/${folder}`);
|
||||
if (!fs.existsSync(`./dist/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;
|
||||
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;
|
||||
var style = document.createElement("link");
|
||||
style.setAttribute("rel","stylesheet")
|
||||
|
|
@ -30,7 +30,7 @@ function createBlog(title, subtitle, pagetitle, folder) {
|
|||
document.getElementById("blog_title").textContent = title;
|
||||
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;
|
||||
var blog_data = {
|
||||
"url_title": pagetitle,
|
||||
|
|
@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) {
|
|||
"sub_title": subtitle,
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
|
||||
"visible": true }
|
||||
fs.readFile("./blog/blog.json", function (err , data) {
|
||||
fs.readFile("./assets/blog/blog.json", function (err , data) {
|
||||
if (err) throw err;
|
||||
var old_blogs = JSON.parse(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;
|
||||
console.log('Blog Created Successfully in "blog" folder.');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
[]
|
||||
115
build.js
115
build.js
|
|
@ -1,64 +1,77 @@
|
|||
/* Argument parser */
|
||||
const program = require('commander');
|
||||
const fs = require('fs');
|
||||
const {updateHTML} = require('./populate')
|
||||
/* Filepath utilities */
|
||||
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
|
||||
.version('0.1.1')
|
||||
.option('-n, --name [username]', 'get username')
|
||||
.option('-d, --dark', 'enable dark mode')
|
||||
.option('-b, --background [background]', 'set background image')
|
||||
.parse(process.argv);
|
||||
.version('0.1.1')
|
||||
.option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
|
||||
.option('-t, --theme [theme]', 'specify a theme to use')
|
||||
.option('-b, --background [background]', 'set the background image')
|
||||
.option('-o, --out [directory]', 'the output directory to put the built site')
|
||||
.parse(process.argv);
|
||||
|
||||
var dark;
|
||||
var light;
|
||||
const config = 'config.json';
|
||||
const assetDir = path.resolve('./assets/');
|
||||
const outDir = path.resolve(program.out || './dist/');
|
||||
|
||||
function populateCSS(){
|
||||
if (program.dark) {
|
||||
fs.copyFile('./assets/index.css', 'index.css', (err) => {
|
||||
if (err) throw err;
|
||||
fs.appendFile('index.css', dark, function (err) {
|
||||
if (err) throw err;
|
||||
});
|
||||
fs.readFile("config.json", function (err , data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].theme = "dark";
|
||||
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function(err){
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
});
|
||||
}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;
|
||||
});
|
||||
});
|
||||
});
|
||||
/**
|
||||
* Creates the stylesheet used by the site from a template stylesheet.
|
||||
*
|
||||
* Theme styles are added to the new stylesheet depending on command line
|
||||
* arguments.
|
||||
*/
|
||||
async function populateCSS() {
|
||||
/* Get the theme the user requests. Defaults to 'light' */
|
||||
let theme = `${program.theme || 'light'}.css`; /* Site theme, defaults to 'light' */
|
||||
let template = path.resolve(assetDir, 'index.css');
|
||||
let stylesheet = path.join(outDir, 'index.css');
|
||||
|
||||
try {
|
||||
await fs.accessAsync(outDir, fs.constants.F_OK);
|
||||
} catch (err) {
|
||||
await fs.mkdirAsync(outDir);
|
||||
}
|
||||
/* Copy over the template CSS stylesheet */
|
||||
await fs.copyFileAsync(template, stylesheet);
|
||||
|
||||
/* Get an array of every available theme */
|
||||
let themes = await fs.readdirAsync(path.join(assetDir, 'themes'));
|
||||
|
||||
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, ' '));
|
||||
}
|
||||
|
||||
|
||||
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();
|
||||
}
|
||||
populateCSS();
|
||||
|
||||
if (program.name) {
|
||||
updateHTML(('%s', program.name));
|
||||
} else {
|
||||
console.log("Provide a username");
|
||||
console.error("Error: Please provide a GitHub username.");
|
||||
}
|
||||
|
|
@ -3,6 +3,6 @@
|
|||
"username": null,
|
||||
"name": null,
|
||||
"userimg": null,
|
||||
"theme": "light"
|
||||
"theme": "light.css"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -98,6 +98,11 @@
|
|||
"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": {
|
||||
"version": "0.1.3",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
|
||||
|
|
@ -535,6 +561,22 @@
|
|||
"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": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
|
||||
|
|
@ -692,8 +734,7 @@
|
|||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"optional": true
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.16.1",
|
||||
|
|
@ -764,6 +805,16 @@
|
|||
"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": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@
|
|||
"description": "portfolio website for showcasing your work",
|
||||
"main": "build.js",
|
||||
"scripts": {
|
||||
"clean": "rm -f dist/index.*",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "imfunny",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bluebird": "^3.5.4",
|
||||
"commander": "^2.20.0",
|
||||
"github-emoji": "^1.1.0",
|
||||
"got": "^9.6.0",
|
||||
"handlebars": "^4.1.2",
|
||||
"jsdom": "^15.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
116
populate.js
116
populate.js
|
|
@ -2,43 +2,43 @@ const fs = require('fs');
|
|||
const got = require('got');
|
||||
const emoji = require('github-emoji');
|
||||
const jsdom = require('jsdom').JSDOM,
|
||||
options = {
|
||||
resources: "usable"
|
||||
};
|
||||
options = {
|
||||
resources: "usable"
|
||||
};
|
||||
|
||||
function convertToEmoji(text){
|
||||
function convertToEmoji(text) {
|
||||
if (text == null) return;
|
||||
text = text.toString();
|
||||
if(text.match(/(?<=:\s*).*?(?=\s*:)/gs) != null){
|
||||
if (text.match(/(?<=:\s*).*?(?=\s*:)/gs) != null) {
|
||||
var str = text.match(/(?<=:\s*).*?(?=\s*:)/gs);
|
||||
str = str.filter(function(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++) {
|
||||
if (emoji.URLS[str[i]] != undefined) {
|
||||
var output = emoji.of(str[i]);
|
||||
var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets");
|
||||
text = text.replace(`:${str[i]}:`, `<img src="${emojiImage}" class="emoji">`);
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}else{
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.updateHTML = (username) => {
|
||||
//add data to assets/index.html
|
||||
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
||||
let window = dom.window, document = window.document;
|
||||
(async () => {
|
||||
try {
|
||||
console.log("Building HTML/CSS...");
|
||||
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
|
||||
repos = JSON.parse(repos.body);
|
||||
for(var i = 0;i < repos.length;i++){
|
||||
if(repos[i].fork == false){
|
||||
document.getElementById("projects").innerHTML += `
|
||||
//add data to assets/index.html
|
||||
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
||||
let window = dom.window, document = window.document;
|
||||
(async () => {
|
||||
try {
|
||||
console.log("Building HTML/CSS...");
|
||||
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
|
||||
repos = JSON.parse(repos.body);
|
||||
for (var i = 0; i < repos.length; i++) {
|
||||
if (repos[i].fork == false) {
|
||||
document.getElementById("projects").innerHTML += `
|
||||
<a href="${repos[i].html_url}" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">${repos[i].name}</div>
|
||||
|
|
@ -52,48 +52,48 @@ jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
|||
</div>
|
||||
</section>
|
||||
</a>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
var user = await got(`https://api.github.com/users/${username}`);
|
||||
user = JSON.parse(user.body);
|
||||
document.title = user.login;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
var user = await got(`https://api.github.com/users/${username}`);
|
||||
user = JSON.parse(user.body);
|
||||
document.title = user.login;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||
//add data to config.json
|
||||
fs.readFile("config.json", function (err , data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function(err){
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
fs.writeFile('index.html', '<!DOCTYPE html>'+window.document.documentElement.outerHTML, function (error){
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
})();
|
||||
}).catch(function(error){
|
||||
console.log(error);
|
||||
});
|
||||
//add data to config.json
|
||||
fs.readFile("config.json", function (err, data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
})();
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue