@oauth-buttons/next

The next generation of oauth-buttons.

Why This Exists

For the consistency of login buttons.

Goals & Philosophies

• Easy

  • Installation

    • One CSS, One JS.
    • One JS.
    • npm

  • Use

    • <buttonclass="oauth-buttons login-google"></button>

  • Modification of Styles

  • Adding New

• Lightweight
  • Fast Runtime
  • Small Bundle Size
• Compatibility
  • IE11
  • Safari
  • Chrome
  • Firefox

Features

• Button Design
• SVG-WebFont fallback
• i18n-able

Tech Stack Decisions

• Build Tool

  • Selections
    • Handmade - Hyper extensible, hard to manage
    • Gulp - I prefer this than grunt because of api
    • Grunt - Experienced
  • Requirements
    • CSS Auto Generation based on templates
      • sass - sassy. additional build progress required because of JSON
      • emotion-server - cool. can integrate with build system
    • Logo
      • SVG to WebFont
      • SVG Sprite using <symbol> and <use>

• Modularize

  • web-component
  • html-replacer
  • react
  • vue

• JSON structure demo

  {
  "id": "google",
  "themeColor": {
  "main": "",
  "sub": ""
  },
  "logo": {
  "svg": "https://cdn.mori.space/oauth-buttons/google.svg",
  "svg-sprite": "ob-google-icon",
  "webfont": "",
  "png": "https://cdn.mori.space/oauth-buttons/google.png",
  }
  }

• Custom Button Text

  • API demo

    ob.textGenerator=(service)=>`Login with ${nameMap[service.id]}`

  • i18n

Project Structure

🤔