Merge branch 'master' into gh-pages

ikuwow · Jan 16, 2016 · 0a7c597 · 0a7c597
2 parents 649e0c8 + 62afae5
commit 0a7c597
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
-# yourcontribution
-Visualize your contributions on GitHub
+# Yourcontributions
+
+![sampleWidget](./sampleWidget.png)
+
+GitHub contributions widget.
+
+http://ikuwow.github.io/yourcontributions/
+
+## Usage
+
+* Input your GitHub username
+* Preview
+* Copy & paste code
+
+## LICENSE
+
+MIT
+
diff --git a/index.html b/index.html
@@ -1,10 +1,31 @@
 <html>
 
 <head>
+
   <meta charset="utf-8"/>
+  <title>Yourcontributions: GitHub Contribution widget</title>
+  <meta name="description" content="Visualize your GitHub Contributions"/>
+  <meta name="keyword" content="GitHub,widget,contributions,commits,issues,streak,ikuwow,repositories"/>
+
+  <!-- facebook ogp -->
+  <meta property="og:url" content="http://ikuwow.github.io/yourcontributions/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Yourcontributions: GitHub Contribution widget" />
+  <meta property="og:description" content="Visualize your GitHub Contributions" />
+  <meta property="og:image" content="http://ikuwow.github.io/img/ikuwow_200x200.png" />
+
+  <!-- Twitter card -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@ikuwow" />
+  <meta name="twitter:title" content="Yourcontributions: GitHub Contribution widget" />
+  <meta name="twitter:description" content="Visualize your GitHub Contributions" />
+  <meta name="twitter:image" content="http://ikuwow.github.io/img/ikuwow_200x200.png" />
+
+  <!-- css -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/primer/2.5.0/primer.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.min.css"/>
   <link rel="stylesheet" href="./main.css"/>
+
 </head>
 
 <body>
@@ -22,17 +43,15 @@
 <div class="container">
   <div class="columns">
     <div class="four-fifths column centered">
-      <h1>yourcontribution</h1>
-
-      <h2>Visualize your GitHub contributions.</h2>
-
-
+      <h1>Yourcontributions</h1>
+      <h2>GitHub contribution chart widget</h2>
       <form class="preview-toolbox flex-table">
         <div class="flex-table-item">
-          <label><span class="octicon octicon-mark-github"></span>username</label>
+          <label><span class="octicon octicon-mark-github"></span>https://github.com/</label>
         </div>
         <div class="flex-table-item flex-table-item-primary">
-          <input type="text" class="input-block form-gh-username" placeholder="Type your username here"></input>
+          <input type="text" class="input-block form-gh-username" placeholder="Input your GitHub username here"></input>
+          <input type="text" name="dummy" style="display:none;">
         </div>
         <div class="flex-table-item">
           <button type="button" class="btn form-preview">Preview &amp; Get Code</button>
@@ -44,19 +63,33 @@ <h3>Preview Area</h3>
       </div>
 
       <textarea class="get-code input-contrast" readonly>
-<a href="http://github.com/[:username]" class="gh-contributions" data-gh-username="[:username]" target="_blank">[:username]'s contributions</a><script src="http://ikuwow.github.io/yourcontribution/widget.js"></script></textarea>
+<a href="http://github.com/[:username]" class="gh-contributions" data-gh-username="[:username]" target="_blank">[:username]'s contributions</a><script src="http://ikuwow.github.io/yourcontributions/widget.min.js"></script></textarea>
+
+      <div class="social-buttons">
+        <a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="ikuwow" data-related="ikuwow" data-dnt="true">Tweet</a> <script>!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');</script>
+<div class="fb-like" data-href="http://ikuwow.github.io/yourcontributions/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
+        <a href="http://b.hatena.ne.jp/entry/http://ikuwow.github.io/yourcontributions/" class="hatena-bookmark-button" data-hatena-bookmark-title="Yourcontributions: GitHub Contribution widget" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="en" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
+      </div>
 
     </div>
   </div><!-- .columns -->
   <footer>
       <p>
       Created by <a href="http://ikuwow.github.io" target="_blank">ikuwow</a>,
       Powered by <a href="http://ghchart.rshah.org" target="_blank">Github Chart API</a>.
-      &nbsp;<a href="https://github.com/ikuwow/yourcontribution" target="_blank">Fork me on GitHub</a></p>
+      &nbsp;<a href="https://github.com/ikuwow/yourcontributions" target="_blank">Fork me on GitHub</a></p>
   </footer>
 </div><!-- .container -->
 
 <script src="./main.js"></script>
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=939439589464529";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
 </body>
 
 </html>
diff --git a/main.css b/main.css
@@ -1,18 +1,28 @@
+h1, h2 {
+    margin: 30px 0;
+}
+body {
+    text-align: center;
+}
 textarea {
     resize: none;
 }
+#preview-display {
+    height: 240px;
+}
+#preview-display h3 {
+    margin-top: 81px;
+    margin-bottom: 81px;
+}
 .preview-toolbox .flex-table-item-primary {
     padding: 0 8px;
 }
 .flex-table-item span {
-    margin-right:4px;
+    margin-right: 8px;
 }
 .get-code {
     width: 100%;
-    height: 80px;
+    height: 72px;
     margin: 16px 0;
     font-family: 'Courier New', Monaco, monospace;
 }
-footer {
-    text-align: center;
-}
diff --git a/main.js b/main.js
@@ -1,8 +1,10 @@
 (function(){
 
-var ptb = document.getElementsByClassName("form-preview")[0];
-ptb.onclick = function() {
+var preview = function() {
     var gh_username = document.getElementsByClassName("form-gh-username")[0].value;
+    if (gh_username === "") {
+        return;
+    }
     var preview = document.getElementById("preview-display");
 
     var aTag = document.createElement("a");
@@ -13,7 +15,7 @@ ptb.onclick = function() {
     aTag.innerHTML = gh_username+"'s contributions";
 
     var scriptTag = document.createElement("script");
-    scriptTag.src = location.href+"widget.js";
+    scriptTag.src = location.href.split('?')[0]+"widget.min.js";
 
     var child;
     while (child = preview.lastChild) {
@@ -26,4 +28,14 @@ ptb.onclick = function() {
     getcode.textContent = aTag.outerHTML + scriptTag.outerHTML;
 };
 
+var ptb = document.getElementsByClassName("form-preview")[0];
+var inputGitHubUsername = document.getElementsByClassName("form-gh-username")[0];
+ptb.onclick = preview;
+inputGitHubUsername.onkeypress = function() {
+    if (window.event.keyCode === 13) {
+        preview();
+    }
+};
+
+
 })();
diff --git a/sampleWidget.png b/sampleWidget.png
diff --git a/test.html b/test.html
diff --git a/widget.min.js b/widget.min.js