Facelift

- add Samsung Internet, Yandex and Electron browsers support - serve browser images from @browser-logos
gotbahn · Apr 1, 2018 · 93dc93d · 93dc93d
1 parent 34e619b
commit 93dc93d
Show file tree

Hide file tree

Showing 21 changed files with 222 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 01.04.2018
+
+Facelift
+
+### Added
+- Samsung Internet, Yandex and Electron browsers support
+
+### Changed
+- Browser images served from [@browser-logos](https://github.com/alrra/browser-logos) now [#9](https://github.com/godban/browsers-support-badges/issues/9)
+
 ## [1.0.0] - 26.03.2018
 
 Re-Init

diff --git a/README.md b/README.md
@@ -9,9 +9,11 @@ Try [Browsers Support Generator](http://godban.github.io/browsers-support-badges
 
 ## Example
 
-| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |[<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/vivaldi.png" alt="Vivaldi" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Vivaldi |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+## Browsers support
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
+| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
+| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## Contributing
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "browsers-support-badges",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "GitHub browsers support badges generator",
     "author": {
         "name": "Bogdan Plieshka",
@@ -12,7 +12,12 @@
         "type": "git",
         "url": "https://github.com/godban/browsers-support-badges.git"
     },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build"
+    },
     "dependencies": {
+        "@browser-logos/chrome": "1.0.4",
         "clipboard": "2.0.0",
         "marked": "0.3.19",
         "no-sheet-reset": "2.0.0",
@@ -22,10 +27,6 @@
         "react-scripts": "next",
         "svgr.macro": "1.0.4"
     },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build"
-    },
     "browserslist": {
         "development": [
             "last 2 chrome versions",

diff --git a/public/index.html b/public/index.html
@@ -3,32 +3,36 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <meta name="description" content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md">
+    <meta
+      name="description"
+      content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md"
+    >
     <meta property="og:locale" content="en_US">
     <meta property="og:type" content="article">
-    <meta property="og:title" content="Browsers support badges for README.md">
-    <meta property="og:description" content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md">
+    <meta property="og:title" content="Browsers support for README.md">
+    <meta
+      property="og:description"
+      content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md"
+    >
     <meta property="og:url" content="http://godban.github.io/browsers-support-badges/">
     <meta property="og:site_name" content="Browsers support badges">
-    <meta property="og:image" content="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/browsers-support-badges.png">
+    <meta
+      property="og:image"
+      content="http://godban.github.io/browsers-support-badges/screen.png"
+    >
     <title>Browsers support badges</title>
     <link rel="canonical" href="http://godban.github.io/browsers-support-badges/">
     <link rel="icon" type="image/png" href="./favicon/favicon-32x32.png" sizes="32x32">
     <link rel="icon" type="image/x-icon" href="./favicon/favicon.ico">
     <link rel="manifest" href="./manifest.json">
-    <script>
-        setTimeout(function(){window.fbAsyncInit=function(){FB.init({appId:"1547693265447721",xfbml:!0,version:"v2.1"})},function(e,n,t){let o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk")},1e3);
-    </script>
   </head>
   <body>
-  <div id="root"></div>
+    <div id="root"></div>
+    <div id="fb-root"></div>
     <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-        ga('create', 'UA-28620403-7', 'auto');
-        ga('send', 'pageview');
+        (function (i, s, o, g, r, a, m) {i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}, i[r].l = 1 * new Date();a = s.createElement(o), m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m)})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');ga('create', 'UA-28620403-7', 'auto');ga('send', 'pageview');
     </script>
+    <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/public/screen.png b/public/screen.png
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -2,62 +2,53 @@
 
 import React from 'react';
 
-setTimeout((function(d, s, id) {
-    let js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return;
-    js = d.createElement(s); js.id = id;
-    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=263072313724602";
-    fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk')),1e3);
+import Icon from './icons';
 
-setTimeout(function(){!function (d, s, id) {
-    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
-    if (!d.getElementById(id)) {
-        js = d.createElement(s);
-        js.id = id;
-        js.src = p + '://platform.twitter.com/widgets.js';
-        fjs.parentNode.insertBefore(js, fjs);
-    }
-}(document, 'script', 'twitter-wjs');},1e3);
+(function(d,s,id){let js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src='https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=1547693265447721&autoLogAppEvents=1';fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));
 
 const Footer = () => {
     return (
         <footer className="footer">
+            <div className="author">
+                made by
+                <a
+                    className="authorLink"
+                    href="https://github.com/godban"
+                    target="_blank"
+                    rel="author"
+                >
+                    <Icon.MarkGithub className="authorIcon" />
+                    {'godban'}
+                </a>
+            </div>
             <div className="social-box">
+                <div className="social-box__item social-box__item--gh">
+                    <a
+                        className="github-button"
+                        href="https://github.com/godban/browsers-support-badges"
+                        data-icon="octicon-star"
+                        data-show-count="true"
+                        aria-label="Star godban/browsers-support-badges on GitHub"
+                    >Star</a>
+                </div>
+                <div className="social-box__twitter social-box__item">
+                    <a
+                        href="https://twitter.com/share"
+                        className="twitter-share-button"
+                        data-show-count="false"
+                    >Tweet</a>
+                </div>
                 <div className="social-box__facebook social-box__item">
-                    <div id="fb-root" />
-                    <script>
-                    </script>
                     <div
                         className="fb-like"
+                        data-href="http://godban.github.io/browsers-support-badges"
                         data-layout="button_count"
                         data-action="like"
+                        data-size="small"
                         data-show-faces="false"
                         data-share="false"
                     />
                 </div>
-                <div className="social-box__twitter social-box__item">
-                    <a
-                        href="https://twitter.com/share"
-                        className="twitter-share-button"
-                        data-via="bogdan_plieshka"
-                        data-related="bogdan_plieshka"
-                    />
-                </div>
-                <div className="social-box__item social-box__item--gh">
-                    <iframe
-                        src="https://ghbtns.com/github-btn.html?user=godban&repo=browsers-support-badges&type=watch&count=true"
-                        frameBorder="0"
-                        scrolling="0"
-                        height="20px"
-                    />
-                </div>
-            </div>
-            <div className="footer__author">
-                <a
-                    className="octicon octicon-mark-github footer__link" href="https://github.com/godban"
-                    target="_blank"
-                />
             </div>
         </footer>
     );

diff --git a/src/components/icons.jsx b/src/components/icons.jsx
@@ -1,6 +1,7 @@
 import toReactComponent from 'svgr.macro';
 
 const {
+    Book,
     Check,
     ChevronUp,
     ChevronDown,
@@ -13,6 +14,7 @@ const {
 );
 
 export default {
+    Book,
     Check,
     ChevronUp,
     ChevronDown,

diff --git a/src/components/panel.jsx b/src/components/panel.jsx
@@ -4,10 +4,7 @@ import ReactDOM from 'react-dom';
 import Preview from './preview';
 import Icon from './icons';
 
-/**
- * @todo: replace pathToImages
- */
-const pathToImages = 'https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/';
+const buildLogoSrc = (name, size = '48x48') => `https://raw.githubusercontent.com/alrra/browser-logos/master/src/${name}/${name}_${size}.png`;
 
 class Panel extends React.Component {
     constructor() {
@@ -25,55 +22,67 @@ class Panel extends React.Component {
                         IE11: true,
                         Edge: true
                     },
-                    img: pathToImages + 'edge.png',
+                    img: buildLogoSrc('edge'),
                     support: true
                 },
                 {
                     name: 'Firefox',
                     version: 2,
-                    img: pathToImages + 'firefox.png',
+                    img: buildLogoSrc('firefox'),
                     support: true
                 },
                 {
                     name: 'Chrome',
                     version: 2,
-                    img: pathToImages + 'chrome.png',
+                    img: buildLogoSrc('chrome'),
                     support: true
                 },
                 {
                     name: 'Safari',
                     version: 2,
-                    img: pathToImages + 'safari.png',
+                    img: buildLogoSrc('safari'),
                     support: true
                 },
                 {
-                    name: 'Opera',
+                    name: 'iOS Safari',
                     version: 2,
-                    img: pathToImages + 'opera.png',
+                    img: buildLogoSrc('safari-ios'),
                     support: true
                 },
                 {
-                    name: 'Vivaldi',
+                    name: 'Samsung',
                     version: 2,
-                    img: pathToImages + 'vivaldi.png',
+                    img: buildLogoSrc('samsung-internet'),
                     support: true
                 },
                 {
-                    name: 'iOS Safari',
+                    name: 'Opera',
                     version: 2,
-                    img: pathToImages + 'safari-ios.png',
-                    support: false
+                    img: buildLogoSrc('opera'),
+                    support: true
                 },
                 {
                     name: 'Opera Mini',
                     version: 2,
-                    img: pathToImages + 'opera-mini.png',
+                    img: buildLogoSrc('opera-mini'),
+                    support: false
+                },
+                {
+                    name: 'Vivaldi',
+                    version: 2,
+                    img: buildLogoSrc('vivaldi'),
+                    support: false
+                },
+                {
+                    name: 'Yandex',
+                    version: 2,
+                    img: buildLogoSrc('yandex'),
                     support: false
                 },
                 {
-                    name: 'Chrome for Android',
-                    img: pathToImages + 'chrome-android.png',
+                    name: 'Electron',
                     version: 2,
+                    img: buildLogoSrc('electron'),
                     support: false
                 }
             ],
@@ -196,7 +205,7 @@ class Panel extends React.Component {
         return (
             <div className='browsers__wrap'>
                 <h1 className='main__title'>
-                    Browsers support badges for README.md
+                    Browsers support for README.md
                     <span className='main__sub-title'>
                         <Icon.MarkGithub className="icon icon--markGithub" />
                         <span className="octicon octicon-mark-github" /> GitHub Flavored Markdown