There are a lot of inconsistencies in the design around the project. We should make sure that we use the same distances (margins, line-heights) everywhere, have common guide-lines (especially left and right) and so on. Right now there is a lot of different stuff loosely flying around.

Discuss linting this project.

Currently there's an .eslintrc.json file, created by the vue-cli package. However, open to ideas to improve the linting and syntax style on this project.

The <title /> of a recipe page should contain the drink name that is currently loaded.

For example, if viewing: https://opendrinks.netlify.com/recipe/cosmopolitan

The title of the browser tab/window should say:
🍸 Open Drinks - Cosmopolitan.

This will help with SEO and looks nice on navigation.

Add a similar drinks section for each recipe. Similar drinks are drinks that have common keywords/ingredients. We can limit the number of recommendation and pick the ones that have the most similarities.

Originally posted by @VVNoodle in #50 (comment)

Open to feedback and suggestions. The UI should take advantage of Bootstrap Vue components if possible.

When searching for drinks, I would like to use my keyboard arrow keys to select a drink when more than 1 item is displayed in the results.

For example, this would be ideal:

• Go to search
• Type in "colada". 4 results are rendered.
• Press keyboard down arrow key to select the Piña Colada and hit enter to load the recipe

Bonus points if you can fix the search issue when searching drinks with accented characters, like ñ. Currently, searching for pina does not find the piña colada recipe. [Fixed in #358]

As the recipe list is growing, we'll need to start paginating the full list of recipes in the Explore view instead of loading them all at once to improve on performance. I would also like this implemented before we can start adding filtering and sorting options on the explore page.

This task involves the following:

1. Dynamically load the json files so we can support paging. This will probably require updating the recipe loader: src/recipes/index.js
2. Dropdown option to load 10, 25, 50 results at a time and update the route's querystring
3. Utilize Bootstrap Vue's pagination components for UI

Feel free to post suggestions, feedback and ideas.

In the manifest.json, it is pointing to a 192x192 & 512x512 favicon image.

Either the manifest must be updated or the correct images must be created.

Describe the bug
Execute:

• npm install
• npm test

Tests are green but there are errors in the console:

SyntaxError: Invalid or unexpected token at new Script (vm.js:79:7) at ScriptTransformer._transformAndBuildScript (C:\Users\jbiehler\Git\opendrinks\node_modules\jest-runtime\build\script_transformer.js:403:17) at ScriptTransformer.transform (C:\Users\jbiehler\Git\opendrinks\node_modules\jest-runtime\build\script_transformer.js:448:19) at Runtime._execModule (C:\Users\jbiehler\Git\opendrinks\node_modules\jest-runtime\build\index.js:640:53) at Runtime.requireModule (C:\Users\jbiehler\Git\opendrinks\node_modules\jest-runtime\build\index.js:376:14) at Runtime.requireModuleOrMock (C:\Users\jbiehler\Git\opendrinks\node_modules\jest-runtime\build\index.js:463:19) at require (C:\Users\jbiehler\Git\opendrinks\src\recipes\index.js:35:14) at getRecipe (C:\Users\jbiehler\Git\opendrinks\src\recipes\index.js:48:86) at func (C:\Users\jbiehler\Git\opendrinks\src\recipes\index.js:5:43) at Array.map (<anonymous>)

This was tested with the current master branch.

Add your drink recipes by forking and submitting a pull request.

Be sure to check out the Contributing Guidelines before submitting a pull request. :)

Happy hacking!

As mentioned in the #199 the search did come with one slightly annoying bug (non program breaking) where certain drinks are displayed when an empty space is entered. I'm not sure what causes this, whether its the search itself or something to do with those JSON objects.

Example:
https://user-images.githubusercontent.com/29446717/66253294-39663680-e7a9-11e9-9ec2-aa9aa952b45a.png

If anyone is able to solve this please let me know.

Originally posted by @Chrispy404 in #191 (comment)

As a user, I would like to search by drink ingredients. For example, if I search vodka, then the search results should return back related drinks with vodka in their ingredients list.

This should be implemented on the "Search" view. The UI is open to suggestions, but should take advantage of Bootstrap Vue if possible and will require extending the RecipeFind.vue component.

Since this is a static website, it will all be done in JS using the JSON recipes.

Feel free to discuss here for ideas.

Hacktoberfest starts today! Add your drink recipes by forking and submitting a pull request.

Check back for updates for upcoming challenges. I'll be adding feature requests and bug fix requests for varying difficulty levels.

Also, be sure to check out the Contributing Guidelines before submitting a pull request. :)

Happy hacking!

Welcome to Hacktoberfest!

We're looking for more contributors to submit a drink recipe of their choice! Also feel free to suggest any changes or bug fixes!

More issues will be created soon with varying difficulty levels. Check back for updates!

• Be sure to sign up at https://hacktoberfest.digitalocean.com
• Create a Pull Request between October 1-31 of 2019 to count towards your 4 PRs
• See Contributing Guidelines
• See https://hacktoberfest.digitalocean.com/details for more details
• Happy Hacking! 🎃

Feel free to comment or ask any questions here as well.

Bug encountered: not showing recipes by ingredient if they have that ingredient also in title, e.g. Vodka Martini, or Banana Smoothie.

Welcome to Hacktoberfest 2020!

We're looking for contributors to submit a drink recipe of their choice! Also feel free to suggest any changes, bug fixes, or feature requests! All merged pull requests will be published to https://opendrinks.io/.

See release notes from Hacktoberfest 2019 for last year's contributions:
https://github.com/alfg/opendrinks/releases/tag/v1.0.0

More issues will be created soon with varying difficulty levels. Check back for updates!

• Be sure to sign up at https://hacktoberfest.digitalocean.com
• Create a Pull Request between October 1-31 of 2020 to count towards your 4 Pull Requests.
• See Contributing Guidelines
• See https://hacktoberfest.digitalocean.com/details for more details
• Happy Hacking! 🎃

⚠️ Please note, any spam pull requests will be marked as invalid and will not count towards your 4 PRs.

Feel free to comment or ask any questions here as well.

OpenDrinks now has support for keywords!

Lets update our search function to support searching by keywords:
https://opendrinks.netlify.com/search

Can you please look at the add-adonis Pull Request? It says this needs a maintainer to approve the workflow.

Welcome to Hackoberfest 2019! Add your drink recipes by forking and submitting a pull request.

We're looking to build a collection of drink recipes of all types! View the website at:
https://opendrinks.netlify.com/

Also, be sure to check out the Contributing Guidelines before submitting a pull request. :)

Happy hacking! 🎃

Need to fix some drink image sizes.

They are breaking the explore page.

• Similar Drinks heading is not displayed above the Similar Drinks section
• Source is displayed two times

Reproduce error
Steps to reproduce the behavior:

1. Go to "https://opendrinks.netlify.com/recipe/thandai" or any page with a source
2. See error

Screenshots

Desktop (please complete the following information):

• OS [Mac OSX 10.15]
• Browser [Brave Browser: 0.69.132 Chromium: 77.0.3865.90]

Looking for ideas, suggestions and feedback for https://opendrinks.netlify.com.

Feel free to post them here.

There's any plans for an i18n implementation for the project? I'd like to participate!

On any view that uses pagination (Explore/Keywords), the URL should be updated when paging through results. For example, if I go to page 3, the URL should be updated to https://opendrinks.netlify.com/explore?page=3. This will save the page number if I were to refresh.

This should be done by updating any of the Bootstrap Vue pagination components to use pagination-nav to track pages in the URL.

Feel free to ask any questions or add any suggestions here.

Now that we have support for keywords, I would like to update our Explore view to support sorting and filtering options.

This will allow the user to to sort the recipe list by name, or optionally filtering down the recipe list by adding keywords or ingredients.

The UI and implementation is up for discussion, but should take advantage of Bootstrap Vue where possible.

Feel free to add any feedback or ideas.

The project is getting bigger, and increased lines of code means increased possibility of bugs.

Setting up a testing environment will help catalyze development of unit tests in the future, and so will prevent bugs that would've otherwise never been spotted before.

As @alfg proposed, test environment will include the use of jest and mocha since they support component and unit testing.

Suggested things to do:

• create jest and mocha config files
• create a doc on testing conventions (e.g. should be in tests directory, end with *.spec.js, where to add mocks, ...)
• set up two simple examples: one for component testing, and another for unit testing
• maybe also take a look into this

Since the drinks list is growing and there are more ways to search of drinks, the search results should either use work the same way as "Explore" now does, or simply display more results.

Currently if i search for 'Gin' as an ingredient the Negroni isn't shown due to its alphabetic placement. Funnily enough though the Dark and Stormy is returned due to the 'Gin' in 'ginger beer', although this would be another issue.

Describe the bug
When you are in the explorer view and go to page 6 for example and then filter on keywords, if there are fewer pages of results than the current it doesn't move to a page with content.

To Reproduce
Steps to reproduce the behavior:

1. Go to '/explore'
2. Go to page 6
3. Select a narrow filter - eg. 'Filters => Add keyword => Mocktail'
4. Page is now empty

Expected behavior
I expect 1 of two scenarios to happen,

1. I get sent to page 1
2. I get sent to the last page

Screenshots

Desktop (please complete the following information):

• OS: Win10
• Browser: Chrome
• Version: 94.0.4606.61

Smartphone (please complete the following information):

• Device: OnePlus 9 Pro
• OS: Android
• Browser: Chrome

Fix proposed in #1070

As discussed in #50 a validator for submitted recipes would be a nice thing to have.

Similar to: #43, I would like to add keywords to the recipe JSON schema. This would be an optional array of strings so we can support adding "keywords" to recipes. This will allow us to add search filtering options.

For example:

"keywords": [
    "alcoholic",
    "coffee"
]

This requires 3 parts:

• Update the JSON recipe template
• Update the recipe component to display the keywords (if provided) using Bootstrap badges
• Update documentation in CONTRIBUTING.md.

The keyword badges can appear after the instructions, but before the optional source url.

Open to suggestions.

As part of #395, we now have a new homepage with featured drinks via a config file:
https://github.com/alfg/opendrinks/blob/master/src/featured.json

This should map to an existing drink in the list of recipes:
https://github.com/alfg/opendrinks/tree/master/src/recipes

I'm looking for help building a list of drink categories for the homepage. Either post them here or submit a pull request with your drink category, description and list of drinks to include.

Since many recipes may have come from another source, it would make sense to add an optional source URL to the recipe.

For example, on the recipe: https://opendrinks.netlify.com/recipe/bloody-mary:

After "Directions", we can add a section for attributing a source, formatted nicely.

This requires 2 parts:

1. Updating the JSON recipe template
2. Updating the recipe component to display the source (if provided)
3. Updating documentation in CONTRIBUTING.md.

Open to suggestions.

I just noticed that light theme flash for an instant before going into dark mode on single recipe pages.

https://opendrinks.netlify.com on iOS using an iPhone X looks like this:

Add some margin-bottom spacing using Bootstrap's mb css class.

There's still 10 days left of Hackoberfest 2019! Add your drink recipes by forking and submitting a pull request.

We're looking to build a collection of drink recipes (and categories) of all types! View the website at:
https://opendrinks.netlify.com/

Also, be sure to check out the Contributing Guidelines for the JSON spec and image sizing before submitting a pull request. :)

Happy hacking! 🎃

Some recipes may have typos in their description or instructions. Feel free to send a PR to add a correction.

i18n is now supported via #711 and #1090. We're looking for contributors to support more language translations.

We currently have support for languages:

• English - en
• Japanese - ja

Each component now has a i18n block to add in the translations for the appropriate language code. For example:

<i18n>
{
  "ja": {
    "Contributed by": "提供",
    "Ingredients": "材料",
    "Directions": "手順",
    "View full recipe at": "完全なレシピを見る",
    "Similar drinks": "似ているドリンク"
  }
}
</i18n>

Feel free to submit a PR to support another language. Thanks!

Since #1169 is merged, some already translated languages is missing this key.
The goal of this issue is to track the existing languages that has this key missing to hopefully attract some PR's to patch this.

The file in question: src/views/KeywordList.vue
Key missing translation: Enter your keyword.

Please reference this issue in your PR's so I can update the list below.

FAQ

Translation progress

• ja
• fr
• es - contributed by @OscarRG #1184
• hi - contributed by @theishanbh #1179
• gl
• de - contributed by @OscarRG #1183
• nl
• no - contributed by me #1169
• ru - contributed by @KamaZz #1180
• uk - contributed by @KamaZz #1180
• bn - contributed by @appledora #1181

Maybe the correct behaviour is to turn off dark mode for the print page to save ink?!?

Would like a feature to have a print-friendly page for a recipe view.

Bonus points if it can export to a PDF file.

Originally posted by @TobyAsE in #50 (comment)

The Explore view can now filter recipes by a keyword. It would be great if it can support entering multiple keywords to narrow down the recipe list.

For example, adding keywords vodka and lime can bring up recipes that contain both keywords.

Some recipes have long descriptions and causes the formatting on the "Explore" page to be misaligned.

I would like for the description to be truncated with an Ellipsis when viewing recipes on the Explore page. This should also help with the alignment and formatting of each recipe "card" on the Explore page.

For example:

The highlighted section should be hidden. So the user would need to navigate into the full recipe view in order to see the full description.

There's just a few days left of Hackoberfest 2019! Add your drink recipes by forking and submitting a pull request.

We're looking to build a collection of drink recipes (and categories) of all types! View the website at:
https://opendrinks.io

Also, be sure to check out the Contributing Guidelines for the JSON spec and image sizing before submitting a pull request. :)

Happy hacking! 🎃

Tests are setup via Jest from #265.

Looking for contributors to help add more tests.

Test Example is located at:
https://github.com/alfg/opendrinks/tree/master/tests/unit

See: CONTRIBUTING.md

Welcome to Hacktoberfest 2021!

We're looking for contributors to submit a drink recipe of their choice! Also feel free to suggest any changes, bug fixes, or feature requests! All merged pull requests will be published to https://opendrinks.io/.

See release notes from our previous Hacktoberfest contributions:
https://github.com/alfg/opendrinks/releases/tag/v1.0.0 - Thank you Hacktoberfest 2019!
https://github.com/alfg/opendrinks/releases/tag/v2.0.0 - Thank you Hacktoberfest 2020!

More issues will be created soon with varying difficulty levels. Check back for updates!

• Be sure to sign up at https://hacktoberfest.digitalocean.com
• Create a Pull Request between October 1-31 of 2021 to count towards your 4 Pull Requests.
• See Contributing Guidelines
• See https://hacktoberfest.digitalocean.com/faq for more details
• Happy Hacking! 🎃

⚠️ Please note, any spam pull requests will be marked as invalid and will not count towards your 4 PRs.

❓ Feel free to comment or ask any questions here as well.

⭐ Star this repo and follow my other open source projects at https://github.com/alfg.

Just a few days left of Hackoberfest 2020! Add your drink recipes by forking and submitting a pull request.

We're looking to build a collection of drink recipes (and categories) of all types! View the website at:
https://opendrinks.io

Also, be sure to check out the Contributing Guidelines for the JSON spec and image sizing before submitting a pull request. :)

Happy hacking! 🎃

Is your feature request related to a problem? Please describe.

At the moment the shares buttons are tied with a dropdown (not compliant with dark mode) with some anchor elements, it leads to a weird behaviour where you can click just outside the text and miss the share functionality, plus it's an obsolete way to share contents

Describe the solution you'd like
I propose to change the "share" layout in a multiple buttons on the page OR in a single Share button that opens a modal with all the shares options

Describe alternatives you've considered
At least make the dropdown list dark mode compliant and avoid the weird click behaviour extending it for the whole element.

Do you agree on that, may I work on this?

Some recipes may have typos and grammar errors in their description or instructions. Feel free to send a PR to add a correction.

We need help tagging drink recipes with keywords so we can improve our search function. We have many recipes that have no keywords tagged, as this was a new feature.

Example of a properly tagged drink:
https://github.com/alfg/opendrinks/blob/master/src/recipes/ginger-milk-tea.json#L49-L52

Some notable keywords to add:

• non-alcoholic
• coffee
• tea
• vegan
• smoothie

Keywords can be anywhere from 2-5 keywords describing the type of drink.

Feel free to contribute keywords for 1 drink or many! Any help is appreciated.

https://opendrinks.netlify.com

Update the logo and header so when clicked, they link to the homepage.

This may need to be implemented via Vue Router's :to feature.

It could be usefull to have a social share button in the single recipe page.