Add support for Telegram and email social links

README.md

@@ -1,6 +1,7 @@
 <img src="https://i.imgur.com/eA6clZr.png">
 
 # Gitfolio
+
 [![Tweet](https://img.shields.io/twitter/url/https/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20@imfunnieee%20&url=https://github.com/imfunniee/gitfolio) ![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg?style=popout-square) ![npm](https://img.shields.io/npm/dm/gitfolio.svg?style=popout-square) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg?style=popout-square) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg?style=popout-square) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg?style=popout-square) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 ### personal website + blog for every github user
@@ -98,10 +99,10 @@ You could also add in your custom CSS inside `index.css` to give it a more perso
 
 #### Add Social Media links on your profile
 
-Twitter, LinkedIn, Medium & Dribbble links to your profile while building
+Twitter, LinkedIn, Medium, Dribbble, Telegram & email links to your profile while building
 
 ```sh
-gitfolio build <username> --twitter <twitter_username> --linkedin <linkedin_username> --medium <medium_username> --dribbble <dribbble_username>
+gitfolio build <username> --twitter <twitter_username> --linkedin <linkedin_username> --medium <medium_username> --dribbble <dribbble_username> --telegram <telegram_username> --email <email_address>
 ```
 
 ### Let's Publish
@@ -144,7 +145,6 @@ Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-post/)
 
 Blog's 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
@@ -152,7 +152,6 @@ Blog's default JSON Format
       "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
       "visible": true // don't worry about this
     }
-```
 
 ### Follow me on twitter for more updates [@imfunnieee](https://twitter.com/imfunnieee)
 

bin/gitfolio.js

@@ -1,16 +1,33 @@
 #! /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
-const { updateCommand } = require("../update");
+{
-const { uiCommand } = require("../ui");
+  buildCommand
-const { runCommand } = require("../run");
+} = require("../build");
-const { version } = require("../package.json");
+const
+{
+  updateCommand
+} = require("../update");
+const
+{
+  uiCommand
+} = require("../ui");
+const
+{
+  runCommand
+} = require("../run");
+const
+{
+  version
+} = require("../package.json");
 
-function collect(val, memo) {
+function collect(val, memo)
+{
   memo.push(val);
   return memo;
 }
@@ -29,6 +46,8 @@ program
   .option("-l, --linkedin [username]", "specify linkedin username")
   .option("-m, --medium [username]", "specify medium username")
   .option("-d, --dribbble [username]", "specify dribbble username")
+  .option("-T, --telegram [username]", "specify telegram username")
+  .option("-e, --email [username]", "specify email")
   .action(buildCommand);
 
 program
@@ -47,7 +66,8 @@ program
   .option("-p, --port [port]", "provide a port for localhost, default is 3000")
   .action(runCommand);
 
-program.on("command:*", () => {
+program.on("command:*", () =>
+{
   console.log("Unknown Command: " + program.args.join(" "));
   program.help();
 });

build.js

@@ -6,8 +6,15 @@ const hbs = require("handlebars");
 /*  Creates promise-returning async functions
     from callback-passed async functions      */
 const fs = bluebird.promisifyAll(require("fs"));
-const { updateHTML } = require("./populate");
+const
-const { getConfig, outDir } = require("./utils");
+{
+  updateHTML
+} = require("./populate");
+const
+{
+  getConfig,
+  outDir
+} = require("./utils");
 
 const assetDir = path.resolve(`${__dirname}/assets/`);
 const config = path.join(outDir, "config.json");
@@ -18,18 +25,23 @@ const config = path.join(outDir, "config.json");
  * Theme styles are added to the new stylesheet depending on command line
  * arguments.
  */
-async function populateCSS({
+async function populateCSS(
+{
   theme = "light",
   background = "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1500&q=80"
-} = {}) {
+} = {})
+{
   /* Get the theme the user requests. Defaults to 'light' */
   theme = `${theme}.css`;
   let template = path.resolve(assetDir, "index.css");
   let stylesheet = path.join(outDir, "index.css");
 
-  try {
+  try
+  {
     await fs.accessAsync(outDir, fs.constants.F_OK);
-  } catch (err) {
+  }
+  catch (err)
+  {
     await fs.mkdirAsync(outDir);
   }
   /* Copy over the template CSS stylesheet */
@@ -38,7 +50,8 @@ async function populateCSS({
   /* Get an array of every available theme */
   let themes = await fs.readdirAsync(path.join(assetDir, "themes"));
 
-  if (!themes.includes(theme)) {
+  if (!themes.includes(theme))
+  {
     console.error('Error: Requested theme not found. Defaulting to "light".');
     theme = "light";
   }
@@ -46,7 +59,8 @@ async function populateCSS({
   let themeSource = await fs.readFileSync(path.join(assetDir, "themes", theme));
   themeSource = themeSource.toString("utf-8");
   let themeTemplate = hbs.compile(themeSource);
-  let styles = themeTemplate({
+  let styles = themeTemplate(
+  {
     background: `${background}`
   });
   /* Add the user-specified styles to the new stylesheet */
@@ -58,18 +72,23 @@ async function populateCSS({
   await fs.writeFileAsync(config, JSON.stringify(data, null, " "));
 }
 
-async function populateConfig(opts) {
+async function populateConfig(opts)
+{
   const data = await getConfig();
   Object.assign(data[0], opts);
   await fs.writeFileAsync(config, JSON.stringify(data, null, " "));
 }
 
-async function buildCommand(username, program) {
+async function buildCommand(username, program)
+{
   await populateCSS(program);
   let types;
-  if (!program.include || !program.include.length) {
+  if (!program.include || !program.include.length)
+  {
     types = ["all"];
-  } else {
+  }
+  else
+  {
     types = program.include;
   }
   const opts = {
@@ -81,6 +100,9 @@ async function buildCommand(username, program) {
     linkedin: program.linkedin,
     medium: program.medium,
     dribbble: program.dribbble
+    dribbble: program.dribbble,
+    telegram: program.telegram,
+    email: program.email
   };
 
   await populateConfig(opts);

populate.js

@@ -4,20 +4,33 @@ const jsdom = require("jsdom").JSDOM,
   options = {
     resources: "usable"
   };
-const { getConfig, outDir } = require("./utils");
+const
-const { getRepos, getUser } = require("./api");
+{
+  getConfig,
+  outDir
+} = require("./utils");
+const
+{
+  getRepos,
+  getUser
+} = require("./api");
 
-function convertToEmoji(text) {
+function convertToEmoji(text)
+{
   if (text == null) return;
   text = text.toString();
   var pattern = /(?<=:\s*).*?(?=\s*:)/gs;
-  if (text.match(pattern) != null) {
+  if (text.match(pattern) != null)
+  {
     var str = text.match(pattern);
-    str = str.filter(function(arr) {
+    str = str.filter(function(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)
+      {
         text = text.replace(
           `:${str[i]}:`,
           `<img src="${emoji.URLS[str[i]]}" class="emoji">`
@@ -25,32 +38,53 @@ function convertToEmoji(text) {
       }
     }
     return text;
-  } else {
+  }
+  else
+  {
     return text;
   }
 }
 
-module.exports.updateHTML = (username, opts) => {
+module.exports.updateHTML = (username, opts) =>
-  const { includeFork, twitter, linkedin, medium, dribbble } = opts;
+{
+  const
+  {
+    includeFork,
+    twitter,
+    linkedin,
+    medium,
+    dribbble,
+    telegram,
+    email
+  } = opts;
   //add data to assets/index.html
   jsdom
     .fromFile(`${__dirname}/assets/index.html`, options)
-    .then(function(dom) {
+    .then(function(dom)
+    {
       let window = dom.window,
         document = window.document;
-      (async () => {
+      (async () =>
-        try {
+      {
+        try
+        {
           console.log("Building HTML/CSS...");
           const repos = await getRepos(username, opts);
 
-          for (var i = 0; i < repos.length; i++) {
+          for (var i = 0; i < repos.length; i++)
+          {
             let element;
-            if (repos[i].fork == false) {
+            if (repos[i].fork == false)
+            {
               element = document.getElementById("work_section");
-            } else if (includeFork == true) {
+            }
+            else if (includeFork == true)
+            {
               document.getElementById("forks").style.display = "block";
               element = document.getElementById("forks_section");
-            } else {
+            }
+            else
+            {
               continue;
             }
             element.innerHTML += `
@@ -137,6 +171,12 @@ module.exports.updateHTML = (username, opts) => {
                 <span style="display:${
                   medium == null ? "none !important" : "block"
                 };"><a href="https://www.medium.com/@${medium}/" target="_blank" class="socials"><i class="fab fa-medium-m"></i></a></span>
+                <span style="display:${
+                telegram == null ? "none !important" : "block"
+                };"><a href="https://t.me/@${telegram}" target="_blank" class="socials"><i class="fab fa-telegram"></i></a></span>
+                <span style="display:${
+                email == null ? "none !important" : "block"
+                };"><a href="mailto:${email}" target="_blank" class="socials"><i class="fas fa-envelope"></i></a></span>
                 </div>
                 `;
           //add data to config.json
@@ -148,7 +188,8 @@ module.exports.updateHTML = (username, opts) => {
           await fs.writeFile(
             `${outDir}/config.json`,
             JSON.stringify(data, null, " "),
-            function(err) {
+            function(err)
+            {
               if (err) throw err;
               console.log("Config file updated.");
             }
@@ -156,17 +197,21 @@ module.exports.updateHTML = (username, opts) => {
           await fs.writeFile(
             `${outDir}/index.html`,
             "<!DOCTYPE html>" + window.document.documentElement.outerHTML,
-            function(error) {
+            function(error)
+            {
               if (error) throw error;
               console.log(`Build Complete, Files can be Found @ ${outDir}\n`);
             }
           );
-        } catch (error) {
+        }
+        catch (error)
+        {
           console.log(error);
         }
       })();
     })
-    .catch(function(error) {
+    .catch(function(error)
+    {
       console.log(error);
     });
 };

ui.js

@@ -1,19 +1,31 @@
 const fs = require("fs");
 const express = require("express");
-const { updateHTML } = require("./populate");
+const
-const { populateCSS, populateConfig } = require("./build");
+{
-const { updateCommand } = require("./update");
+  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({
+  express.json(
+  {
     limit: "50mb"
   })
 );
 app.use(
-  express.urlencoded({
+  express.urlencoded(
+  {
     limit: "50mb",
     extended: true
   })
@@ -26,23 +38,32 @@ const jsdom = require("jsdom").JSDOM,
     resources: "usable"
   };
 global.DOMParser = new jsdom().window.DOMParser;
-const { getBlog, outDir } = require("./utils");
+const
+{
+  getBlog,
+  outDir
+} = require("./utils");
 
-function createBlog(title, subtitle, folder, topImage, images, content) {
+function createBlog(title, subtitle, folder, topImage, images, content)
+{
   // Checks to make sure this directory actually exists
   // and creates it if it doesn't
-  if (!fs.existsSync(`${outDir}/blog/`)) {
+  if (!fs.existsSync(`${outDir}/blog/`))
+  {
     fs.mkdirSync(
       `${outDir}/blog/`,
       {
         recursive: true
       },
-      err => {}
+      err =>
+      {}
     );
   }
 
-  if (!fs.existsSync(`${outDir}/blog/${folder}`)) {
+  if (!fs.existsSync(`${outDir}/blog/${folder}`))
-    fs.mkdirSync(`${outDir}/blog/${folder}`, {
+  {
+    fs.mkdirSync(`${outDir}/blog/${folder}`,
+    {
       recursive: true
     });
   }
@@ -50,11 +71,13 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
   fs.copyFile(
     `${__dirname}/assets/blog/blogTemplate.html`,
     `${outDir}/blog/${folder}/index.html`,
-    err => {
+    err =>
+    {
       if (err) throw err;
       jsdom
         .fromFile(`${outDir}/blog/${folder}/index.html`, options)
-        .then(function(dom) {
+        .then(function(dom)
+        {
           let window = dom.window,
             document = window.document;
           let style = document.createElement("link");
@@ -71,7 +94,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
             topImage.split("/")[1].split(";")[0]
           }') center center`;
 
-          if (content != null) {
+          if (content != null)
+          {
             var parser = new DOMParser();
             content = parser.parseFromString(content, "text/html");
             document.getElementById("blog").innerHTML =
@@ -79,7 +103,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
           }
 
           images = JSON.parse(images);
-          images.forEach((item, index) => {
+          images.forEach((item, index) =>
+          {
             var base64Image = item.split(";base64,").pop();
             fs.writeFile(
               `${outDir}/blog/${folder}/img_${index}.${
@@ -89,7 +114,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
               {
                 encoding: "base64"
               },
-              function(err) {
+              function(err)
+              {
                 if (err) throw err;
               }
             );
@@ -98,7 +124,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
           fs.writeFile(
             `${outDir}/blog/${folder}/index.html`,
             "<!DOCTYPE html>" + window.document.documentElement.outerHTML,
-            async function(error) {
+            async function(error)
+            {
               if (error) throw error;
 
               var base64ImageTop = topImage.split(";base64,").pop();
@@ -110,7 +137,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
                 {
                   encoding: "base64"
                 },
-                function(err) {
+                function(err)
+                {
                   if (err) throw err;
                 }
               );
@@ -127,7 +155,8 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
               fs.writeFile(
                 `${outDir}/blog.json`,
                 JSON.stringify(old_blogs, null, " "),
-                function(err) {
+                function(err)
+                {
                   if (err) throw err;
                   console.log(
                     `Blog created successfully at ${outDir}\\blog\\${folder}\n`
@@ -137,20 +166,25 @@ function createBlog(title, subtitle, folder, topImage, images, content) {
             }
           );
         })
-        .catch(function(error) {
+        .catch(function(error)
+        {
           console.log(error);
         });
     }
   );
 }
 
-function uiCommand() {
+function uiCommand()
-  app.get("/", function(req, res) {
+{
+  app.get("/", function(req, res)
+  {
     res.render("index.ejs");
   });
 
-  app.get("/update", function(req, res) {
+  app.get("/update", function(req, res)
-    if (!fs.existsSync(`${outDir}/config.json`)) {
+  {
+    if (!fs.existsSync(`${outDir}/config.json`))
+    {
       return res.send(
         'You need to run build command before using update<br><a href="/">Go Back</a>'
       );
@@ -159,9 +193,11 @@ function uiCommand() {
     res.redirect("/");
   });
 
-  app.post("/build", function(req, res) {
+  app.post("/build", function(req, res)
+  {
     let username = req.body.username;
-    if (!username) {
+    if (!username)
+    {
       return res.send("username can't be empty");
     }
     let sort = req.body.sort ? req.body.sort : "created";
@@ -172,9 +208,11 @@ function uiCommand() {
     let linkedin = req.body.linkedin ? req.body.linkedin : null;
     let medium = req.body.medium ? req.body.medium : null;
     let dribbble = req.body.dribbble ? req.body.dribbble : null;
-    let background = req.body.background
+    let telegram = req.body.telegram ? req.body.telegram : null;
-      ? req.body.background
+    let email = req.body.email ? req.body.email : null;
-      : "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1500&q=80";
+    let background = req.body.background ?
+      req.body.background :
+      "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1500&q=80";
     let theme = req.body.theme == "on" ? "dark" : "light";
     const opts = {
       sort: sort,
@@ -184,11 +222,14 @@ function uiCommand() {
       twitter: twitter,
       linkedin: linkedin,
       medium: medium,
-      dribbble: dribbble
+      dribbble: dribbble,
+      telegram: telegram,
+      email: email
     };
 
     updateHTML(username, opts);
-    populateCSS({
+    populateCSS(
+    {
       background: background,
       theme: theme
     });
@@ -196,30 +237,38 @@ function uiCommand() {
     res.redirect("/");
   });
 
-  app.get("/blog", function(req, res) {
+  app.get("/blog", function(req, res)
-    if (!fs.existsSync(`${outDir}/config.json`)) {
+  {
+    if (!fs.existsSync(`${outDir}/config.json`))
+    {
       return res.send(
         'You need to run build command before accessing blogs<br><a href="/">Go Back</a>'
       );
     }
-    fs.readFile(`${outDir}/config.json`, function(err, data) {
+    fs.readFile(`${outDir}/config.json`, function(err, data)
-      res.render("blog.ejs", {
+    {
+      res.render("blog.ejs",
+      {
         profile: JSON.parse(data)
       });
     });
   });
 
-  app.post("/createBlog", function(req, res) {
+  app.post("/createBlog", function(req, res)
+  {
     let title = req.body.title;
     let subtitle = req.body.subtitle;
     let content = req.body.content ? req.body.content : null;
-    if (!title) {
+    if (!title)
+    {
       return res.send("title can't be empty");
     }
-    if (!subtitle) {
+    if (!subtitle)
+    {
       return res.send("subtitle can't be empty");
     }
-    if (!content) {
+    if (!content)
+    {
       return res.send("something isn't working fine, try again :p");
     }
     let folder = title.replace(/[^a-zA-Z ]/g, "").replace(/ /g, "-");

update.js

@@ -1,10 +1,18 @@
-const { getConfig } = require("./utils");
+const
-const { updateHTML } = require("./populate");
+{
+  getConfig
+} = require("./utils");
+const
+{
+  updateHTML
+} = require("./populate");
 
-async function updateCommand() {
+async function updateCommand()
+{
   const data = await getConfig();
   var username = data[0].username;
-  if (username == null) {
+  if (username == null)
+  {
     console.log(
       "username not found in config.json, please run build command before using update"
     );
@@ -18,7 +26,9 @@ async function updateCommand() {
     twitter: data[0].twitter,
     linkedin: data[0].linkedin,
     medium: data[0].medium,
-    dribbble: data[0].dribbble
+    dribbble: data[0].dribbble,
+    telegram: data[0].telegram,
+    email: data[0].email
   };
   updateHTML(username, opts);
 }

views/index.ejs

@@ -1,153 +1,174 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport"
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible"
+        content="ie=edge" />
   <title>Gitfolio UI</title>
-    <link
+  <link rel="stylesheet"
-      rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
-      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
+  <link rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
         href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
-      crossorigin="anonymous"
+        crossorigin="anonymous" />
-    />
+  <link rel="stylesheet"
-    <link rel="stylesheet" type="text/css" href="./css/index.css" />
+        type="text/css"
-    <link
+        href="./css/index.css" />
-      rel="stylesheet"
+  <link rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css"
+        href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css" />
-    />
 </head>
+
 <body class="body-light">
   <header>
     <b>gitfolio</b>
-      <a href="/blog" style="float: right">New Blog </a>
+    <a href="/blog"
-      <a href="/update" style="float: right">Update</a>
+       style="float: right">New Blog </a>
-      <a href="/" style="float: right">Home</a>
+    <a href="/update"
+       style="float: right">Update</a>
+    <a href="/"
+       style="float: right">Home</a>
   </header>
-    <form method="post" action="build">
+  <form method="post"
+        action="build">
     <h3>Build or Edit Portfolio</h3>
-      <input
+    <input type="text"
-        type="text"
            class="input h-weight-bold"
            placeholder="username"
            id="username"
            name="username"
-        required
+           required /><br />
-      /><br />
+    <input type="text"
-      <input
-        type="text"
            class="input h-weight-bold"
            placeholder="background"
            name="background"
-        id="background"
+           id="background" />
-      />
     <h3>Sort By :</h3>
-      <label class="label"
+    <label class="label">Star
-        >Star
+      <input type="radio"
-        <input type="radio" name="sort" value="star" />
+             name="sort"
+             value="star" />
       <span class="radio"></span>
     </label>
 
-      <label class="label"
+    <label class="label">Created
-        >Created
+      <input type="radio"
-        <input type="radio" name="sort" value="created" checked />
+             name="sort"
+             value="created"
+             checked />
       <span class="radio"></span>
     </label>
 
-      <label class="label"
+    <label class="label">Updated
-        >Updated
+      <input type="radio"
-        <input type="radio" name="sort" value="updated" />
+             name="sort"
+             value="updated" />
       <span class="radio"></span>
     </label>
 
-      <label class="label"
+    <label class="label">Pushed
-        >Pushed
+      <input type="radio"
-        <input type="radio" name="sort" value="pushed" />
+             name="sort"
+             value="pushed" />
       <span class="radio"></span>
     </label>
 
-      <label class="label"
+    <label class="label">Full Name
-        >Full Name
+      <input type="radio"
-        <input type="radio" name="sort" value="full_name" />
+             name="sort"
+             value="full_name" />
       <span class="radio"></span>
     </label>
 
     <h3>Order By :</h3>
-      <label class="label"
+    <label class="label">Asc
-        >Asc
+      <input type="radio"
-        <input type="radio" name="order" value="asc" checked />
+             name="order"
+             value="asc"
+             checked />
       <span class="radio"></span>
     </label>
-      <label class="label"
+    <label class="label">Desc
-        >Desc
+      <input type="radio"
-        <input type="radio" name="order" value="desc" />
+             name="order"
+             value="desc" />
       <span class="radio"></span>
     </label>
     <br /><br />
-      <label class="label"
+    <label class="label">Use Dark Theme
-        >Use Dark Theme
+      <input type="checkbox"
-        <input type="checkbox" id="theme" name="theme" />
+             id="theme"
+             name="theme" />
       <span class="checkbox"></span>
     </label>
-      <label class="label"
+    <label class="label">Include Forks
-        >Include Forks
+      <input type="checkbox"
-        <input type="checkbox" id="fork" name="fork" value="true" />
+             id="fork"
+             name="fork"
+             value="true" />
       <span class="checkbox"></span>
     </label>
-      <label class="label"
+    <label class="label">Include Socials
-        >Include Socials
+      <input type="checkbox"
-        <input type="checkbox" id="socials" name="socials" />
+             id="socials"
+             name="socials" />
       <span class="checkbox"></span>
     </label>
-      <div style="display: none" id="input_for_socials">
+    <div style="display: none"
-        <input
+         id="input_for_socials">
-          type="text"
+      <input type="text"
              class="input h-weight-bold"
              placeholder="twitter username"
              id="twitter"
-          name="twitter"
+             name="twitter" /><br />
-        /><br />
+      <input type="text"
-        <input
-          type="text"
              class="input h-weight-bold"
              placeholder="medium username"
              id="medium"
-          name="medium"
+             name="medium" /><br />
-        /><br />
+      <input type="text"
-        <input
-          type="text"
              class="input h-weight-bold"
              placeholder="dribbble username"
              id="dribbble"
-          name="dribbble"
+             name="dribbble" /><br />
-        /><br />
+      <input type="text"
-        <input
-          type="text"
              class="input h-weight-bold"
              placeholder="linkedin username"
              id="linkedin"
-          name="linkedin"
+             name="linkedin" /><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="email address"
+             id="email"
+             name="email" />
     </div>
     <br /><br />
-      <button type="submit" class="button" id="build">Build</button>
+    <button type="submit"
+            class="button"
+            id="build">Build</button>
   </form>
-    <script
+  <script type="text/javascript"
-      type="text/javascript"
+          src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"></script>
-      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 => {
+    document.querySelector("#socials").addEventListener("change", event =>
-        if (event.target.checked) {
+    {
+      if (event.target.checked)
+      {
         document.querySelector("#input_for_socials").style.display = "block";
-        } else {
+      }
+      else
+      {
         document.querySelector("#input_for_socials").style.display = "none";
       }
     });
   </script>
 </body>
+
 </html>