Added tweet and fork with configurable settings

uilicious · Sep 14, 2018 · 1801b35 · 1801b35
1 parent 1898d5e
commit 1801b35
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/ui/config/shareConfig.js b/ui/config/shareConfig.js
@@ -0,0 +1,7 @@
+export default {
+  githubForkLink: "https://github.com/uilicious/inboxkitten/fork",
+  githubAriaLabel: "Fork uilicious/inboxkitten on GitHub",
+  tweetMessage: "InboxKitten is amazing! Check it out here at",
+  tweetDataUrl: "https://inboxkitten.com",
+  enabled: true
+}
diff --git a/ui/index.html b/ui/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>inboxkitten</title>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,12 +1,26 @@
 <template>
   <div id="app">
+    <div style="position:fixed; top:3vh; right:2vw; z-index:10;" v-if="isShare">
+      <a href="https://twitter.com/intent/tweet?ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-size="large" :data-text="tweetMsg" :data-url="tweetDataUrl" data-show-count="false">Tweet</a>
+      <a class="github-button" :href="githubLink" data-size="large" :aria-label="githubAriaLabel">Fork</a>
+    </div>
     <router-view/>
   </div>
 </template>
 
 <script>
+import shareConfig from '@/../config/shareConfig.js'
 export default {
-  name: 'App'
+  name: 'App',
+  data: () => {
+    return {
+      githubLink: shareConfig.githubForkLink,
+      githubAriaLabel: shareConfig.githubAriaLabel,
+      tweetDataUrl: shareConfig.tweetDataUrl,
+      tweetMsg: shareConfig.tweetMessage,
+      isShare: shareConfig.enabled
+    }
+  }
 }
 </script>
 

diff --git a/ui/src/components/mail/inbox.vue b/ui/src/components/mail/inbox.vue
@@ -2,7 +2,7 @@
   <div class="app">
     <div class="nav">
 
-      <div class="back-button" @click="goToMain"> < Back</div>
+      <div class="back-button" @click="goToMain"> &lt; Back</div>
       <input v-model="email" v-on:keyup.enter="changeInbox" id="email"/> @{{domain}}
       <button @click="changeInbox" class="pure-button pure-button-primary fetch-button">Fetch!</button>
     </div>