🎉 initial release

Signed-off-by: Mandeep Singh <im@msingh.me>
khurafat · Sep 12, 2018 · b5c88e8 · b5c88e8
1 parent f2cba3d
commit b5c88e8
Show file tree

Hide file tree

Showing 10 changed files with 1,329 additions and 4,038 deletions.
diff --git a/package.json b/package.json
@@ -8,13 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "axios": "^0.18.0",
+    "cache-loader": "^1.2.2",
+    "file-loader": "^2.0.0",
+    "tailwindcss": "^0.6.5",
+    "vue": "^2.5.17",
+    "vue-clipboard2": "^0.2.1",
+    "vue-style-loader": "^4.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.2",
     "@vue/cli-plugin-eslint": "^3.0.2",
-    "@vue/cli-service": "^3.0.2",
     "@vue/eslint-config-prettier": "^3.0.2",
+    "autoprefixer": "^9.1.5",
+    "url-loader": "^1.1.1",
     "vue-template-compiler": "^2.5.17"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,17 @@
+// module.exports = {
+//   plugins: {
+//     tailwindcss: {},
+//     autoprefixer: {}
+//   }
+// };
+
+let tailwindcss = require("tailwindcss");
+
 module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
+  plugins: [
+    // ...
+    tailwindcss("./tailwind.js"),
+    require("autoprefixer")
+    // ...
+  ]
 };
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>github-emojis</title>
+    <title>Github Emojis</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,90 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app" class="text-center container mx-auto">
+    <div class="my-12">
+      <img alt="Github Emojis" src="./assets/logo.png">
+      <h1 class="mb-2">Github Emojis</h1>
+      <p>A list of all the emojis that can be used in Github flavourd Markdown.</p>
+    </div>
+
+    <div class="container mx-auto mb-12 flex flex-col items-center">
+      <input type="search" placeholder="Search an emoji..." class="shadow appearance-none border rounded w-1/2 pt-3 pb-2 px-3 text-grey-darker" v-model="search">
+    </div>
+
+    <!-- Two columns -->
+    <section class="flex mb-4 bg-grey-lighter rounded-lg p-4">
+      <div class="text-center flex flex-wrap">
+          <div v-for="emoji in filteredList" v-bind:key="emoji.name" class="p-4 w-1/2 flex items-center cursor-pointer" @click="doCopy(emoji)">
+            <img :src="emoji.img" :alt="emoji.name" class="w-12 h-12 ml-24 mr-12">
+            <div class="text-center bg-grey-light py-1 px-3 rounded-sm text-grey-dark"><pre class="">{{ ':' + emoji.name + ':'}}</pre></div>
+          </div>
+      </div>
+    </section>
+
+    <footer class="my-12">
+      <p>A fun product by <a href="https://www.khurafat.desi">Khurafat.desi</a></p>
+    </footer>
+
+    <img src="./assets/khurafat.png" alt="Khurafat" class="watermark fixed" />
   </div>
 </template>
 
 <script>
 import HelloWorld from "./components/HelloWorld.vue";
+import axios from "axios";
 
 export default {
   name: "app",
   components: {
     HelloWorld
+  },
+  data() {
+    return {
+      emojis: [],
+      search: ""
+    };
+  },
+  mounted() {
+    axios.get("https://api.github.com/emojis").then(response => {
+      this.emojis = Object.entries(response.data).map(([key, value]) => ({
+        name: key,
+        img: value
+      }));
+    });
+  },
+  computed: {
+    filteredList() {
+      return this.emojis.filter(emoji => {
+        return emoji.name.includes(this.search.toLowerCase());
+      });
+    }
+  },
+  methods: {
+    doCopy: function(emoji) {
+      this.$copyText(":" + emoji.name + ":").then(
+        e => {
+          alert("Copied");
+          console.log(e);
+        },
+        e => {
+          alert("Can not copy");
+          console.log(e);
+        }
+      );
+    }
   }
 };
 </script>
 
 <style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+/* body {
+  background-color: #fff;
+  background-image: url("./assets/khurafat.png");
+  background-position: right bottom;
+  background-repeat: no-repeat;
+} */
+.watermark {
+  right: -2rem;
+  bottom: -0.75rem;
+  width: 10rem;
 }
 </style>
diff --git a/src/assets/khurafat.png b/src/assets/khurafat.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,62 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/preflight";
+ */
+@tailwind preflight;
+
+/**
+ * This injects any component classes registered by plugins.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/components";
+ */
+@tailwind components;
+
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+ */
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/utilities";
+ */
+@tailwind utilities;
+
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+ */
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,12 @@
 import Vue from "vue";
 import App from "./App.vue";
+import VueClipboard from "vue-clipboard2";
+import "./main.css";
 
 Vue.config.productionTip = false;
 
+Vue.use(VueClipboard);
+
 new Vue({
   render: h => h(App)
 }).$mount("#app");