Merge pull request #1 from Janglee123/dev

New static site for gh pages

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+.env
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+public/nameDB.json

.gitpod.yml

@@ -0,0 +1,3 @@
+vscode:
+  extensions:
+    - octref.vetur@0.27.0:a+OljFHzmH1YrzbM13sMhQ==

DEVELOPMENT.md

@@ -0,0 +1,25 @@
+# Development
+This is a guid to develope the project. See [README.md](README.md) if you want to add your name.
+
+## Project setup
+```bash
+yarn install
+yarn serve # Compiles and hot-reloads for development
+yarn build # Compiles and minifies for production
+yarn lint # Lints and fixes files
+```
+
+## Building the nameDB.json
+
+The nameDB is a big json file which contains all user added json files into one. It also fetches github avatar url from GitHuB id. You will need a GitHub oAuth token to build nameDB.json. The script fetches avatar_url from GitHuB id and without oAuth GitHub limits 60 request per hours.
+
+1. Visit [Personal Acess Tokens](https://github.com/settings/tokens) and create one. 
+2. Run `cp example.env .env`
+3. Add token in .env file
+4. Run `node buildDB.js` 
+
+## Deploying site to GitHub pages
+Make sure you have forked the repo.
+```
+sh deploy.sh <your-github-id>
+```

README.md

@@ -72,25 +72,28 @@ git checkout -b add-alonzo-church
 
 ## Make necessary changes and commit those changes
 
-Now open `Contributors.md` file in a text editor, add your name to it. Don't add it at the beginning or end of the file. Put it anywhere in between. Now, save the file.
+```
+cp public/directory/name.json.example public/directory/<yout-github-id>.json
+```
 
-<img align="right" width="450" src="assets/git-status.png" alt="git status" />
+Replace `<your-github-id>` with your original id.
 
+Open  `public/directory/<yout-github-id>.json` and fill it.
 
-If you go to the project directory and execute the command `git status`, you'll see there are changes.
+<img align="right" width="450" src="assets/git-status.png" alt="git status" />
 
+If you go to the project directory and execute the command `git status`, you'll see there are changes.
 
 Add those changes to the branch you just created using the `git add` command:
 
 ```
-git add Contributors.md
+git add public/directory/<yout-github-id>.json
 ```
 
 Now commit those changes using the `git commit` command:
 ```
-git commit -m "Add <your-name> to Contributors list"
+git commit -m "Add <your-github-id> to Contributors list"
 ```
-replacing `<your-name>` with your name.
 
 ## Push changes to GitHub
 

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};

buildDB.js

@@ -0,0 +1,33 @@
+require('dotenv').config();
+const fs = require('fs');
+const path = require('path');
+const GitHub = require('github-api');
+
+const dir = path.join(__dirname, 'public', 'directory');
+const files = fs.readdirSync(dir);
+
+const gh = new GitHub({
+  token: process.env.GITHUB_OAUTH_TOKEN,
+});
+
+const nameDb = [];
+
+const build = async () => {
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    console.log({ i });
+
+    if (file.endsWith('.json')) {
+      const data = require(path.join(dir, file));
+
+      const prof = await gh.getUser(data.githubId).getProfile();
+      console.log(prof.data.avatar_url);
+      data.avatar_url = prof.data.avatar_url;
+      nameDb.push(data);
+    }
+  }
+};
+
+build().then(() => {
+  fs.writeFileSync(path.join(__dirname, 'public', 'nameDB.json'), JSON.stringify(nameDb));
+});

deploy.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+yarn run build
+
+cd dist
+
+git init
+git add -A
+git commit -m 'deploy'
+git remote add deploy https://github.com/$1/first-bit.git
+git push -f deploy master:gh-pages
+
+cd -

example.env

@@ -0,0 +1 @@
+GITHUB_OAUTH_TOKEN=

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "first-bit",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "babel-eslint": "^10.1.0",
+    "dotenv": "^8.2.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "github-api": "^3.3.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

public/directory/get-thepacket.json

@@ -0,0 +1,5 @@
+{
+    "githubId": "get-thepacket",
+    "name": "Lakshya Baghel",
+    "bio": "Tell about yourself"
+}

public/directory/janglee123.json

@@ -0,0 +1,5 @@
+{
+    "githubId": "janglee123",
+    "name": "Meru Patel",
+    "bio": "Short Bio"
+}

public/directory/name.json.example

@@ -0,0 +1,5 @@
+{
+    "githubId": "GitHub ID",
+    "name": "Your name",
+    "bio": "Tell about yourself"
+}

public/directory/sdhiman99.json

@@ -0,0 +1,6 @@
+{
+    "githubId": "sdhiman99",
+    "name": "Shivansh Dhiman",
+    "bio": "Short Bio"
+
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="app">
+    <!-- <div> A cool bitbyte logo here. </div> -->
+    <div class="title"> First Bit </div>
+    <div class="about"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+    It has survived not only five centuries, but also the leap into electronic typesetting,
+    remaining essentially unchanged. It was popularised in the 1960s with the release of
+    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+    </div>
+    <Grid />
+  </div>
+</template>
+
+<script>
+import Grid from './components/Grid.vue';
+
+export default {
+  name: 'App',
+  components: {
+    Grid,
+  },
+};
+</script>
+
+<style>
+
+.title {
+    font-size: 32px;
+    text-align: center;
+}
+
+.about {
+    font-size: 22px;
+    text-align: center;
+    color: #555;
+}
+
+#app {
+  font-family: monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 60px;
+}
+</style>

src/components/Card.vue

@@ -0,0 +1,58 @@
+<template>
+<div class="item">
+    <img class="avatar" :src="avatar_url"/>
+    <div class="des">
+        <div class="name">{{name}}</div>
+        <div class="github-profile"><a :href="`https://github.com/${githubId}`">github.com/{{githubId}}</a></div>
+        <div>{{bio}}</div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    avatar_url: String,
+    name: String,
+    githubId: String,
+    bio: String,
+  },
+
+  methods: {
+    fetchImage() {
+    },
+  },
+};
+</script>
+
+<style>
+.item{
+    width: 250px;
+    height: 400px;
+    border: solid 1px;
+    margin: 10px;
+}
+
+.avatar{
+    width: 100%;
+    height: auto;
+    max-height: 275px;
+}
+
+.github-profile {
+    color: #999;
+    font-size: 14px;
+    transition: all .2s ease;
+}
+
+.des {
+    text-align: left;
+}
+
+.name {
+    font-size: 20px;
+    weight: 500;
+    align: left;
+}
+</style>