Merge pull request #1 from jayehernandez/master

Get latest

.all-contributorsrc

@@ -41,6 +41,114 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "imanishbarnwal",
+      "name": "Manish Kumar Barnwal",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/46371923?v=4",
+      "profile": "https://www.linkedin.com/in/imanishbarnwal/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "jemgaleon",
+      "name": "Jem Galeon",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/10969278?v=4",
+      "profile": "http://jemgaleon.github.io",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "RaymondLZhou",
+      "name": "Raymond Zhou",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/59544754?v=4",
+      "profile": "https://github.com/RaymondLZhou",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "saurav-jaat",
+      "name": "saurav chaudhary",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/55060238?v=4",
+      "profile": "http:// https://saurav-jaat.github.io/Website/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "joelhart",
+      "name": "Joel Hartman",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/65033855?v=4",
+      "profile": "http://joelh.art",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "xiefiona",
+      "name": "Fiona Xie",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/25620518?v=4",
+      "profile": "https://github.com/xiefiona",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "charsides",
+      "name": "Charlotte Sides",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/59448807?v=4",
+      "profile": "https://github.com/charsides",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "BadaroThiago",
+      "name": "BadaroThiago",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/65410275?v=4",
+      "profile": "https://github.com/BadaroThiago",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "tbarland77",
+      "name": "Timothy Barland",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/15313520?v=4",
+      "profile": "https://github.com/tbarland77",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "claire-thompson",
+      "name": "Claire Thompson",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/60275489?v=4",
+      "profile": "https://github.com/claire-thompson",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "brianxfury",
+      "name": "Bryan Dimabayao",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/46956022?v=4",
+      "profile": "https://github.com/brianxfury",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "seryafarma",
+      "name": "seryafarma",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/3274071?v=4",
+      "profile": "https://github.com/seryafarma",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1,9 +1,5 @@
 ![Title](docs/screenshots/title.png)
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 <p>
   <img alt="Version" src="https://img.shields.io/badge/version-1.0.5-blue.svg?cacheSeconds=2592000" />
   <a href="https://github.com/jayehernandez/letra#readme" target="_blank">
@@ -42,14 +38,14 @@
 
 ## 🛠 Built With
 
-* [VueJS](https://vuejs.org/)
-* [NodeJS](https://nodejs.org/en/)
+* [Vue.js](https://vuejs.org/)
+* [Node.js](https://nodejs.org/en/)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!<br />
 
-Feel free to check the [issues page](https://github.com/jayehernandez/letra-extension/issues) for any open issues. If this is your first time contributing to Open Source, check out the [Contributing Guidelines](https://github.com/jayehernandez/letra-extension/blob/improved-docs/docs/how_to_contribute.md).
+Feel free to check the [issues page](https://github.com/jayehernandez/letra-extension/issues) for any open issues. If this is your first time contributing to Open Source, check out the [Contributing Guidelines](https://github.com/jayehernandez/letra-extension/blob/master/docs/how_to_contribute.md).
 
 You can also suggest a new feature by creating an Issue. Please wait for confirmation before working on it.
 
@@ -59,6 +55,12 @@ You can also suggest a new feature by creating an Issue. Please wait for confirm
 - [Add a new language](https://github.com/jayehernandez/letra-extension/blob/master/docs/new_language.md)
 - Edit translations from existing languages - guide 🔜
 
+### Installation
+
+Here's a [guide](https://github.com/jayehernandez/letra-extension/blob/master/docs/how_to_install.md) on how to install this Chrome extension on your local machine.
+
+**Note:** You don't need to do this if you're just doing some issues in the _Good for First Timers_ section above. But you're welcome to do so anyways!
+
 ## 🙏🏻 Acknowledgements
 
 * Boilerplate Vue Extension from [Kocal's vue-web-extension](https://github.com/Kocal/vue-web-extension)
@@ -75,15 +77,35 @@ Give a ⭐️ if this project helped you!
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://about.me/vaibhav_khulbe"><img src="https://avatars0.githubusercontent.com/u/11731837?v=4" width="100px;" alt=""/><br /><sub><b>Vaibhav Khulbe</b></sub></a><br /><a href="https://github.com/jayehernandez/letra-extension/commits?author=Kvaibhav01" title="Code">💻</a><a href="https://github.com/jayehernandez/letra-extension/commits?author=Kvaibhav01" title="Content">🖋</a></td>
-    <td align="center"><a href="https://github.com/michieriffic"><img src="https://avatars1.githubusercontent.com/u/12575688?v=4" width="100px;" alt=""/><br /><sub><b>michieriffic</b></sub></a><br /><a href="https://github.com/jayehernandez/letra-extension/commits?author=michieriffic" title="Content">🖋</a></td>
-    <td align="center"><a href="https://github.com/fluorspar20"><img src="https://avatars0.githubusercontent.com/u/59736770?v=4" width="100px;" alt=""/><br /><sub><b>Amogh Dixit</b></sub></a><br /><a href="https://github.com/jayehernandez/letra-extension/commits?author=fluorspar20" title="Content">🖋</a></td>
-    <td align="center"><a href="https://github.com/paulzay"><img src="https://avatars3.githubusercontent.com/u/29974825?v=4" width="100px;" alt=""/><br /><sub><b>Paul Ogolla</b></sub></a><br /><a href="https://github.com/jayehernandez/letra-extension/commits?author=paulzay" title="Content">🖋</a></td>
+    <td align="center"><a href="https://about.me/vaibhav_khulbe"><img src="https://avatars0.githubusercontent.com/u/11731837?v=4" width="100px;" alt=""/><br /><sub><b>Vaibhav Khulbe</b></sub></a><br /><a href="https://github.com/jayehernandez/letra-extension/commits?author=Kvaibhav01" title="Code">💻</a> <a href="#content-Kvaibhav01" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/michieriffic"><img src="https://avatars1.githubusercontent.com/u/12575688?v=4" width="100px;" alt=""/><br /><sub><b>michieriffic</b></sub></a><br /><a href="#content-michieriffic" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/fluorspar20"><img src="https://avatars0.githubusercontent.com/u/59736770?v=4" width="100px;" alt=""/><br /><sub><b>Amogh Dixit</b></sub></a><br /><a href="#content-fluorspar20" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/paulzay"><img src="https://avatars3.githubusercontent.com/u/29974825?v=4" width="100px;" alt=""/><br /><sub><b>Paul Ogolla</b></sub></a><br /><a href="#content-paulzay" title="Content">🖋</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/imanishbarnwal/"><img src="https://avatars0.githubusercontent.com/u/46371923?v=4" width="100px;" alt=""/><br /><sub><b>Manish Kumar Barnwal</b></sub></a><br /><a href="#content-imanishbarnwal" title="Content">🖋</a></td>
+    <td align="center"><a href="http://jemgaleon.github.io"><img src="https://avatars0.githubusercontent.com/u/10969278?v=4" width="100px;" alt=""/><br /><sub><b>Jem Galeon</b></sub></a><br /><a href="#content-jemgaleon" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/RaymondLZhou"><img src="https://avatars2.githubusercontent.com/u/59544754?v=4" width="100px;" alt=""/><br /><sub><b>Raymond Zhou</b></sub></a><br /><a href="#content-RaymondLZhou" title="Content">🖋</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="http:// https://saurav-jaat.github.io/Website/"><img src="https://avatars2.githubusercontent.com/u/55060238?v=4" width="100px;" alt=""/><br /><sub><b>saurav chaudhary</b></sub></a><br /><a href="#content-saurav-jaat" title="Content">🖋</a></td>
+    <td align="center"><a href="http://joelh.art"><img src="https://avatars0.githubusercontent.com/u/65033855?v=4" width="100px;" alt=""/><br /><sub><b>Joel Hartman</b></sub></a><br /><a href="#content-joelhart" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/xiefiona"><img src="https://avatars3.githubusercontent.com/u/25620518?v=4" width="100px;" alt=""/><br /><sub><b>Fiona Xie</b></sub></a><br /><a href="#content-xiefiona" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/charsides"><img src="https://avatars1.githubusercontent.com/u/59448807?v=4" width="100px;" alt=""/><br /><sub><b>Charlotte Sides</b></sub></a><br /><a href="#content-charsides" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/BadaroThiago"><img src="https://avatars2.githubusercontent.com/u/65410275?v=4" width="100px;" alt=""/><br /><sub><b>BadaroThiago</b></sub></a><br /><a href="#content-BadaroThiago" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/tbarland77"><img src="https://avatars2.githubusercontent.com/u/15313520?v=4" width="100px;" alt=""/><br /><sub><b>Timothy Barland</b></sub></a><br /><a href="#content-tbarland77" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/claire-thompson"><img src="https://avatars3.githubusercontent.com/u/60275489?v=4" width="100px;" alt=""/><br /><sub><b>Claire Thompson</b></sub></a><br /><a href="#content-claire-thompson" title="Content">🖋</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/brianxfury"><img src="https://avatars1.githubusercontent.com/u/46956022?v=4" width="100px;" alt=""/><br /><sub><b>Bryan Dimabayao</b></sub></a><br /><a href="#content-brianxfury" title="Content">🖋</a></td>
+    <td align="center"><a href="https://github.com/seryafarma"><img src="https://avatars0.githubusercontent.com/u/3274071?v=4" width="100px;" alt=""/><br /><sub><b>seryafarma</b></sub></a><br /><a href="#content-seryafarma" title="Content">🖋</a></td>
   </tr>
 </table>
 

client/src/store/index.js

@@ -73,7 +73,7 @@ export default new Vuex.Store({
         else dispatch('retrieveLanguageOptions');
       });
     },
-    retrieveLanguageOptions({ dispatch }) {
+    retrieveLanguageOptions({ commit, dispatch }) {
       axios.get(`${process.env.VUE_APP_API_URL}/languages`)
         .then(response => {
           const options = Object.keys(response.data.languages);

docs/how_to_contribute.md

@@ -46,6 +46,8 @@ You can contribute in two ways, whichever is more convinient for you:
 
 ![Created PR](screenshots/created_pr.png)
 
+10. Extra step: Please click on the ⭐️ **Star** button if you like this repository and it helped you in any way!
+
 ## 2️⃣ Via Local Machine
 
 🚧 Guide coming soon! 🔜

docs/how_to_install.md

@@ -0,0 +1,96 @@
+# ⚙️ Installation Guidelines
+
+> A simple guide on how to install this project on your local machine!
+
+## ⚠️ Some things to take note of
+- You will need to have [Google Chrome](https://google.com/chrome/) installed (it's a Chrome extension 🤣)
+
+- Also, make sure that you have **Node.js** and **npm** installed. [Here's a handy guide from the npm site!](https://www.npmjs.com/get-npm)
+
+- These external APIs will **not** work on your local machine, since I can't possible share the production API keys 🔑 with everyone:
+> - Unsplash (so you won't get to see a background image 😢)
+> - ResponsiveVoice (no text-to-speech for the chosen word!)
+
+- Make sure you have the repository in your local machine! You can go to the [Contributing Guidelines](https://github.com/jayehernandez/letra-extension/blob/master/docs/how_to_contribute.md) for steps on how to fork this repo.
+
+## 1️⃣ Setup Node.js server
+
+The Node.js server is where we'll be getting the word for the day, and the supported languages.
+
+1. Go to the `server` folder.
+```
+cd server
+```
+
+2. Create a `.env` file so that we can set the port to `3100`.
+```
+echo PORT=3100 >> .env
+```
+
+3. Install dependencies needed for this project.
+```
+npm install
+```
+
+4. Start the server!
+```
+npm start
+```
+
+5. If you see something like this in your console, that means you're good to go! ✨ **Do not close this terminal.**
+```
+> [email protected] start {{ serverFilePathHere }}
+> node server.js
+```
+
+## 2️⃣ Setup Vue.js
+
+This is what we'll be using for the frontend of the site.
+
+1. Open a new terminal. Do not use the same one from the Node.js setup. Navigate to `client` folder.
+```
+cd client
+```
+
+2. Create a `.env` file and set the API url to `http://localhost:3100`. This will enable us to connect our Vue app to the NodeJS server.
+```
+echo VUE_APP_API_URL=http://localhost:3100 >> .env
+```
+
+3. Same as in the first part, we'll need to install dependencies.
+```
+npm install
+```
+
+4. Since we need the `dist` folder for the extension, we'll need to watch any file changes. **Do not close this terminal.**
+```
+npm run watch:dev
+```
+
+5. If you see something like this, you're good to go!!
+```
+[ Starting the Hot Extension Reload Server... ]
+
+webpack is watching the files…
+```
+
+## 3️⃣ Run on Google Chrome
+
+Final steps!! 🏃🏽‍♂️ We'll just need to setup our browser to allow development of Chrome extensions.
+
+1. Open Google Chrome. Click on the three dots at the upper right of the screen. Then click on `More Tools` -> `Extensions`.
+![Go To Extensions](screenshots/go_to_extensions.png)
+
+2. You should now be in the **Extensions** page. Enable **Developer Mode** by clicking on the switch at the upper right of the screen.
+![Developer Mode Off](screenshots/developer_mode_off.png)
+
+3. We need to load the compiled files (from Vue.js above) to Chrome. We'll do this by clicking on `Load unpacked`.
+![Load Unpacked](screenshots/load_unpacked.png)
+
+4. Navigate to where your `letra-extension` repository is. Go to `client -> dist` and select this folder.
+![Select Dist](screenshots/select_dist.png)
+
+5. The extension should now be loaded on the page! 🎉 You can test it by well, opening a new tab.
+![Extension Shown](screenshots/extension_shown.png)
+
+> Let me know if any of these steps are unclear! I'd be happy to help out in setting up your local copy.

docs/new_language.md

@@ -5,7 +5,7 @@
 ## 📝 Guidelines
 
 ### Adding Language Details
-You'll need to add the new language in the `server/data/languages.json` file.  
+You'll need to add the new language in the `server/data/languages.json` file.
 
 Format:
 ```sh
@@ -33,7 +33,7 @@ Example:
 ### Adding Words
 This is based on Education First's [list](https://www.ef.com/wwen/english-resources/english-vocabulary/top-3000-words/) of the 3000 most common words.
 
-You'll need to add a new file in the `server/data/words` folder called `{language}.json`. 
+You'll need to add a new file in the `server/data/words` folder called `{language}.json`.
 Here's the [`french.json`](https://github.com/jayehernandez/letra-extension/blob/master/server/data/words/french.json) for the French language for your reference. This file contains an array of JSON objects with the format:
 ```sh
 {
@@ -42,10 +42,18 @@ Here's the [`french.json`](https://github.com/jayehernandez/letra-extension/blob
 }
 ```
 
-To make this process easier, we'll use Google Sheets. I made a [reference sheet](https://docs.google.com/spreadsheets/d/1XFWxJPyVvlG-XL_EFGZ2BUTII0Gr3ovoKPrjfEi-a14) of the 3000 words. To generate the JSON file, you can do the following steps:
+To make this process easier, we'll use Google Sheets. _(You get to contribute and learn about sheets, what a great combination!)_
+
+I made a [reference sheet](https://docs.google.com/spreadsheets/d/1XFWxJPyVvlG-XL_EFGZ2BUTII0Gr3ovoKPrjfEi-a14) of the 3000 words. To generate the JSON file, you can do the following steps:
 
 1. Make a copy of the reference sheet above. `File -> Make a copy`
 2. Fill in the **words** column.
+* 💁🏻‍♀️ Tip: Since this may take quite some time, I suggest translating the words using Google Translate first and refine the translations afterwards. Google sheets has a handy formula for this. You can read more about it [here](https://support.google.com/docs/answer/3093331?hl=en)!
+```
+= GOOGLETRANSLATE("Hello World","en","es")
+= GOOGLETRANSLATE(word, source_language, target_language)
+```
+
 3. Install an Export JSON add-on.
   `Add-ons -> Get Add-ons -> Search for "Export Sheet Data: -> Install`
 4. Open options for the Export Sheet Data.