diff --git a/.all-contributorsrc b/.all-contributorsrc index a7e3c975..f486e6be 100644 --- a/.all-contributorsrc +++ b/.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, diff --git a/README.md b/README.md index 9f14fe90..2ff41c68 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,5 @@ ![Title](docs/screenshots/title.png) - -[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-) - -

Version @@ -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!
-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](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors-) + + - - - - + + + + + + + + + + + + + + + + + + + +

Vaibhav Khulbe
πŸ’»πŸ–‹
michieriffic
πŸ–‹
Amogh Dixit
πŸ–‹
Paul Ogolla
πŸ–‹
Vaibhav Khulbe
πŸ’» πŸ–‹
michieriffic
πŸ–‹
Amogh Dixit
πŸ–‹
Paul Ogolla
πŸ–‹
Manish Kumar Barnwal
πŸ–‹
Jem Galeon
πŸ–‹
Raymond Zhou
πŸ–‹

saurav chaudhary
πŸ–‹
Joel Hartman
πŸ–‹
Fiona Xie
πŸ–‹
Charlotte Sides
πŸ–‹
BadaroThiago
πŸ–‹
Timothy Barland
πŸ–‹
Claire Thompson
πŸ–‹

Bryan Dimabayao
πŸ–‹
seryafarma
πŸ–‹
diff --git a/client/src/store/index.js b/client/src/store/index.js index a62fe4c1..8537d684 100644 --- a/client/src/store/index.js +++ b/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); diff --git a/docs/how_to_contribute.md b/docs/how_to_contribute.md index 75724857..ca9ef244 100644 --- a/docs/how_to_contribute.md +++ b/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! πŸ”œ diff --git a/docs/how_to_install.md b/docs/how_to_install.md new file mode 100644 index 00000000..3806620a --- /dev/null +++ b/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.** +``` +> letra@1.0.0 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. diff --git a/docs/new_language.md b/docs/new_language.md index c74daaba..e66b5a63 100644 --- a/docs/new_language.md +++ b/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. diff --git a/docs/screenshots/developer_mode_off.png b/docs/screenshots/developer_mode_off.png new file mode 100644 index 00000000..9af52a25 Binary files /dev/null and b/docs/screenshots/developer_mode_off.png differ diff --git a/docs/screenshots/extension_shown.png b/docs/screenshots/extension_shown.png new file mode 100644 index 00000000..fb759495 Binary files /dev/null and b/docs/screenshots/extension_shown.png differ diff --git a/docs/screenshots/go_to_extensions.png b/docs/screenshots/go_to_extensions.png new file mode 100644 index 00000000..3f2245f1 Binary files /dev/null and b/docs/screenshots/go_to_extensions.png differ diff --git a/docs/screenshots/load_unpacked.png b/docs/screenshots/load_unpacked.png new file mode 100644 index 00000000..60529ea7 Binary files /dev/null and b/docs/screenshots/load_unpacked.png differ diff --git a/docs/screenshots/select_dist.png b/docs/screenshots/select_dist.png new file mode 100644 index 00000000..c26172ee Binary files /dev/null and b/docs/screenshots/select_dist.png differ diff --git a/server/data/quotes.json b/server/data/quotes.json index 9d273f5d..efddfdfe 100644 --- a/server/data/quotes.json +++ b/server/data/quotes.json @@ -19,30 +19,10 @@ "sentence": "A language is an exact reflection of the character and growth of its speakers.", "author": "Cesar Chavez" }, - { - "sentence": "Language is the road map of a culture. It tells you where its people come from and where they are going.", - "author": "Rita Mae Brown" - }, - { - "sentence": "Those who know nothing of foreign languages know nothing of their own.", - "author": "Johann Wolfgang von Goethe" - }, - { - "sentence": "If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.", - "author": "Nelson Mandela" - }, - { - "sentence": "The more languages you know, the more you are human.", - "author": "TomΓ‘Ε‘ Garrigue Masaryk" - }, { "sentence": "Language exerts hidden power, like a moon on the tides.", "author": "Rita Mae Brown" }, - { - "sentence": "Knowledge of languages is the doorway to wisdom.", - "author": "Roger Bacon" - }, { "sentence": "Do you know what a foreign accent is? It’s a sign of bravery.", "author": "Amy Chua" @@ -83,6 +63,10 @@ "sentence": "Learning another language is not only learning different words for the same things, but learning another way to think about things.", "author": "Flora Lewis" }, + { + "sentence": "A woman who knows two languages is worth two women.", + "author": "French Proverb 2020" + }, { "sentence": "If you know many languages then you have many keys for a castle.", "author": "FranΓ§ois-Marie Arouet" @@ -207,6 +191,10 @@ "sentence": "For last year's words belong to last year's language. And next year's words await another voice.", "author": "T.S. Eliot, Four Quartets" }, + { + "sentence": "The conquest of learning is achieved through the knowledge of languages.", + "author": "Roger Bacon" + }, { "sentence": "One must not be shy where language is concerned.", "author": "Ann Patchett" @@ -214,9 +202,64 @@ { "sentence": "Language is the apparel in which your thoughts parade before the public.", "author": "George Crane" + }, + { + "sentence": "Who wants to have an effect on others, must first speak in their language with them.", + "author": "Kurt Tucholsky" }, { - "sentence": "The more languages you know, the more you are human.", - "author": " TomΓ‘Ε‘ Garrigue Masaryk" - } + "sentence": "The more languages you know, the more you are human.", + "author": "TomΓ‘Ε‘ Garrigue Masaryk" + }, + { + "sentence": "Language is not a genetic gift, it is a social gift. Learning a new language is becoming a member of the club – the community of speakers of that language.", + "author": " Frank Smith" + }, + { + "sentence": "A special kind of beauty exists which is born in language, of language, and for language.", + "author": "Gaston Bachelard" + }, + { + "sentence": "One should not aim at being possible to understand but at being impossible to misunderstand.", + "author": "Marcus Fabius Quintilian" + }, + { + "sentence": "With languages, you are at home anywhere.", + "author": "Edmund De Waal" + }, + { + "sentence": "Maybe then you comprehend, speaking one language only is a prison.", + "author": "David Mitchell" + }, + { + "sentence": "Language reflects the soul of people.", + "author": "Paul Schibler" + }, + { + "sentence": "You are as many a person as languages you know.", + "author": "Armenian Proverb" + }, + { + "sentence": "If culture was a house then language was the key to the front door, to all the rooms inside.", + "author": "Khaled Housseini" + }, + { + "sentence": "Language is power, life and the instrument of culture, the instrument of domination and liberation.", + "author": "Angela Carter" + }, + { + "sentence": "You want the 3 golden rules to learn any language? Use it or lose it. Love it or leave it. Feel it or fail it.", + "author": "Safir Kassim Boudjelal" + }, + { + "sentence": "Learn everything you can, anytime you can, from anyone you can; there will always come a time when you will be grateful you did.", + "author": "Sarah Caldwell" + }, + {"sentence": "Language is courage: the ability to conceive a thought, to speak it, and by doing so to make it true.", + "author": "Salman Rushdie" + }, + { + "sentence": "We die. That may be the meaning of life. But we do language. That may be the measure of our lives.", + "author": "Toni Morrison" + } ]