Git Product home page Git Product logo

app-academy-chrome-tab's Introduction

App Academy Chrome Tab

This is a browser extension to open a new tab with a page of links to commonly used resources, as well as App Academy repos. Used in combination with the Progress Tracker to enforce checking in from assigned desk.

Installation

  1. Git clone this repo locally
  2. Go to the extensions pane in Chrome (chrome://extensions)
  3. Enable the "Developer mode" checkbox
  4. Click "Load unpacked extensions..."
  5. Find the local copy of the repo and click "Select"
  6. Go to the settings pane in Chrome (chrome://settings)
  7. Choose the "Open the New Tab page" setting for "On startup"

Github OAUTH

This extension uses Github's API with OAUTH authentication. Starting with the user clicking the Authorize Github link, the action GET_GITHUB_CODE is dispatched to the github_auth.js middleware. That starts the following chain of events.

  1. In the getCode() function we make a request to GH's servers with the public API key to recieve a verificiation code.
  2. We dispatch that code with the type GET_GITHUB_TOKEN.
  3. In the getToken() function we then pass the verification code to an AWS Lambda function that wraps the private key. The Lambda source is as follows.
const request = require('request');

const clientId     = "OUR_PUBLIC_OAUTH_ID",
      clientSecret = "OUR_PRIVATE_OAUTH_KEY",
      url          = "https://github.com/login/oauth/access_token";

const data = code => ({
  client_id     : clientId,
  client_secret : clientSecret,
  code          : code
});


exports.handler = (event, context, callback) => {
  const code = event.code;

  const handleResponse = (err, res, body) => {
    const keyPairs = body.split("&"),
          resHash  = {};

    keyPairs.forEach(pair => {
      const pairArr = pair.split("=");

      resHash[pairArr[0]] = pairArr[1];
    })
    callback(null, resHash);
  }
  
  request.post({ url: url, form: data(code) }, handleResponse);
};
  1. The Lambda function will make another request to the GH servers, verifying our identity using the private_key and sending the client back the actual API token.
  2. This token is then passed to the curriculum middleware to get the daily curriculum.
  3. Using settings in the util\settings.js file and the given day from the AA API, we make a request to GH's API again requesting the readme with today's content.
  4. Then using a functional pipe, we apply a number of regex functions to the readme to parse it for today's content.

Requirements

This process places a couple of requirements on our curriculum readmes.

  1. The settings file must be maintained for pointing to the correct readme, see maintence below.
  2. The Readme's must match the following format.
## w${thisWeek}d${thisDay}

All the markdown for this day...

## w${anyNum}d${anyNum}
  • This applys to all days except those pointing to the full stack project, in which case we just output the entire readme.

Maintence

The settings file needs to be maintained to point to the correct locations in our curriculum.

Example Settings

export const GITHUB = {
  oauthUrl  : "https://github.com/login/oauth/authorize",
  lambdaUrl : "LAMBDA_ENDPOINT",
  scope     : "repo",
  client_id : "OUR_PUBLIC_OAUTH_ID",

  readmeUrl : "https://api.github.com/repos/appacademy/curriculum/contents",

  ruby       : "/ruby/README.md",
  sql        : "/sql/README.md",
  rails      : "/rails/README.md",
  javascript : "/javascript/README.md",
  react      : "/react/README.md",
  fullStack  : "/full-stack-project/README.md"
};

export const READMES = {
  w1d1 : "ruby",
  ...
  w3d1 : "sql",
  w3d2 : "sql",
  ...
  w9d5 : "fullStack",
}
  • If any of the days get shifted around in the curriculum, the README object needs to be updated to reflect that.
  • If we add any readme files, those need to be added first to GITHUB object, and then that key needs to be added as the value to the appropriate days in the README object as well.
  • If OAUTH keys get modified, we need to edit that here, as well as in the Lambda source.

Timer

The timer rendering is built entirely on SVG and CSS. It is done using techniques introduced here

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.