openfoodfacts/openfoodfacts-web

Content pages (and translations) for the web version

openfoodfacts-web

IMPORTANT: This project contains static contents for openfoodfacts product-opener project. If you're looking for the server side version of Open Food Facts, look at product-opener instead of this repository.

Having those file in a separate project helps being more agile on translations delivery.

Help translate

https://crowdin.com/project/openfoodfacts

Adding a new page or updating an existing page

• Create a pull request on openfoodfacts-web with the new or modified HTML file (you can do that with the "GitHub Desktop" app if you are unfamiliar with the command line)
• Set it up for translation in the .crowdin file
• Once the pull request gets approved and merged, it will be deployed on the test server
• Deployment to production is still manual

Requirements

• Do not hotlink ressources like images, JS or CSS. They need to be commited to the repository. Please organize resources in folders.

Deployment

Actual prod (no docker)

1. Move the /lang dir from openfoodfacts-server to openfoodfacts-resources (or maybe to make things even cleaner, to a new repo openfoodfacts-web. It's unclear if everything in openfoodfacts-resources is supposed to be available as-is on the web server).

2. Create a /html/images/texts/ directory in openfoodfacts-web so that we can put the new images needed by texts there (we don't have to move the existing ones right away).

That way for deployment, we can just copy /lang and /html to /srv/off/ and it will work.

On docker

See openfoodfacts-server:docs/how-to-guides/using-pages-from-openfoodfacts-web.md

And that's it! That would be already be enough of a big change for a first step. Then we can have a look at what we have in /html/ to see what we should move, one by one.

Tools

• Basic command generator

openfoodfacts-web's Issues

🎯 What can I work on ? (openfoodfacts-web)

DevOps/Reduce time to production

Beta Give feedback

1. Set up an automatic deployment pipeline for static content #14
   DevOps help wanted 🎯 P0 +3
2. Create existing symlinks #49
   +0

New pages

Beta Give feedback

1. feat: Help Center #2
   FAQ +1
   
2. Create a Presentations page #36
   new page to create +1
3. Create a page explaining how to contribute from mobile #37
   new page to create +1
4. Transform the actual presentation to a page on the website #199
   🏭 Producers +1
5. Create a page showcasing our vision and features on quality
6. Create a page showcasing Reuse (API features, Communicating source visually, reuse directory…)

Pages requiring a rewrite/update

Beta Give feedback

1. Portuguese donation page to update #22
   deployment needed +1
2. Irrelevant string in producers.html #16
   🏭 Producers +1
3. The press page should have a list of latest blogposts #173
   Blog improvement 🗞️ Press +3
4. Help us compute needs a mention of the Eco-Score #172
   Eco-Score improvement +2
5. Refresh the mobile app page #47
   improvement +1
   
6. Ensure the producer platform has an Eco-Score CTA #31
   Eco-Score 🏭 index-pro +2
7. Refresh the development page, including the README from https://github.com/openfoodfacts #208
   👩‍💻 Development- +1
8. Refresh the data page, using the README from https://github.com/openfoodfacts #209
   Data +1
9. Redesign the Discover page
10. Redesign the Contribute page
11. Redesign the Partners page
12. Redesign the Data page
13. Redesign the Legal page
14. Redesign the About Us (who we are) page to include the actual community
15. Redesign the Press page
16. Redesign the Mission/values… page

Non-essential improvements

Beta Give feedback

1. Leverage the SDK icons within the Data page #25
   Data ✨ enhancement +2

Pages requiring a deployment

Beta Give feedback

1. Deploy update to ecoscore page with driveoff promo #23
   Eco-Score deployment needed +2
2. Open Pet Food Facts data page not deployed #48
   Data 🐾 Open Pet Food Facts +2

Backport uncommitted deployed assets

Beta Give feedback

1. Some changes in prod on pro platform contents are not reported here #203
   🏭 Producers 🐛 bug +2
   
2. feat: New pages created for COP26 & Smoothie #181
   COP 26 Eco-Score +2

Translations

Beta Give feedback

1. Fix the faulty translations in Crowdin #27
   Translations 🎯 P0 +2
2. chore: New translations - fr #39
   Translations +1
3. feat: Make Ecoscore Methodology available for translation #169
   crowdin +1
   
4. Sub texts for nutriscore, ecoscore, nova etc. are not translated and exist only in English #186
   Eco-Score 🎯 P0 🐛 bug 🚥 Nutri-Score - Methodology +4
5. Move to a 1PR per language model for easier reviewing #33
   DevOps +1

Keep dependancies up to date

Beta Give feedback

No tasks being tracked yet.

To be sorted

Beta Give feedback

1. feat: Add the attribution list of environment-related icons gathered from the Noun Project #171
   +0
2. feat: "Latest updates" section for the press page #174
   🗞️ Press +1
3. ci: Check for Project mixups #179
   github_actions +1
   
4. Fix the missing files #5
   🐛 bug +1

New app page not deployed in variants (chinese, portuguese)

What

New app page not deployed in variants (chinese, portuguese)
https://cn.openfoodfacts.org/open-food-facts-mobile-app

Crowdin action fails

❌ Failed to upload the translation file to the storage. Please contact our support team for help
❌ Error from server: <Code: <empty_code>, Message: Operation timed out (Read failed)>
❌ Current execution finished with errors

Fix CTA on Eco-Score page

What

Create a page on reuses of Open Food Facts

http://fr.openfoodfacts.org/decouvrir
"Découvrez toutes les réutilisations, ou téléchargez nos données pour créer la vôtre !"

We need to create one using data.gouv.fr/fr/datasets/produits-alimentaires-ingredients-nutrition-labels/ as a source, or update Data.gouv.fr

Add a QR-Code for each platform to the mobile app webpage

Problem

• Some people access the app from their laptop
• They are not logged to the PlayStore or AppStore from their laptop
• They can initiate app install

Proposed solution

• Add a QR-Code for each platform to the mobile app webpage
  • We should choose a platform that allows us to
    • have GDPR compliant analytics
    • if possible hosted
    • create one QR code for Android, and one QR for iOS (instead of the magic URL https://world.openfoodfacts.org/open-food-facts-mobile-app) to allow us to have fine-grained analytics

Additional context

• We have QR-Codes in the presskit

Deployment issue at https://cz.openfoodfacts.org/product-count

What

https://cz.openfoodfacts.org/product-count

Crowdin build broken

Story

✔️ File 'lang/opf/en/texts/open-products-facts-mobile-app.html'
❌ No sources found for '/lang/opf/en/texts/open-pet-food-facts-mobile-app.html' pattern. Check the source paths in your configuration file
❌ No sources found for '/lang/opf/en/texts/open-beauty-facts-mobile-app.html' pattern. Check the source paths in your configuration file
✔️ File 'lang/opf/en/texts/data.html'

Translate latest-updates-press-page to English before refreshing Crowdin

Story

• Translate latest-updates-press-page to English before refreshing Crowdin

Part of

• #206

Add English visuals on the Eco-Score page

What

Add information about hunger games

What

• There isn't any way to reach the hunger games website from the Open Food Facts main website.
• To attract more and more contributors, we should add a link from the main website which redirects users there.
• This could be added to the contribute page as a section about the hunger games.

Ensure the mobile app screenshots are up to date in the Eco-Score, Nova, and Nutri-Score pages

What

• Ensure the mobile app screenshots are up to date in the Eco-Score, Nova, and Nutri-Score pages
• https://fr.openfoodfacts.org/eco-score-l-impact-environnemental-des-produits-alimentaires

Create a Presentations page

What

Started by @teolemon : https://lite6.framapad.org/p/OFF_Presentations

Part of

• Onboarding

Move to a 1PR per language model for easier reviewing

• Move to a 1PR per language model for easier reviewing
  • Option 1 : run the Github action 150 times with different configs
  • Option 2: run the action once, and find a way to split the result
    • crowdin/github-action#89

Crowdin failing

Story

-❌ No sources found for '/lang/en/texts/products.html' pattern. Check the source paths in your configuration file

Part of

• (Insert Story issue number here)

The press page should have a list of latest blogposts

The press page should have a list of latest blogposts

Sub texts for nutriscore, ecoscore, nova etc. are not translated and exist only in English

What

• A number of texts have been cut into several texts, with includes. e.g. nutriscore.html has [[nutriscore/mobile-app-promo-nutriscore.html]]
• Those sub texts are not translated and do not exists for other languages than English. As a result, they don't appear at all for other languages.

Leverage the SDK icons within the Data page

• Leverage the SDK icons within the Data page

Check deployment of the Nutri-Score methodology page

What

• Check deployment of the Nutri-Score methodology page

Deploy update to ecoscore page with driveoff promo

Deploy update to ecoscore page with driveoff promo

Update new Open Food Facts logo on the discover page

On this page : https://world.openfoodfacts.org/discover

The logo of Open Food Facts is not up to date.

Generate persona landing pages for the mobile app

Problem

• As suggested by @raphael0202 , Generate persona landing pages for the mobile app
• Mobile apps for vegans/gluten intolerant/peanut allergy… with the custom features that are relevant
• This invites a modularization of the mobile app page, so that we can reuse and reassemble blocs.

Add ADEME to the list of partners

What

• Add ADEME to the list of partners
• https://github.com/openfoodfacts/openfoodfacts-web/blob/main/lang/en/texts/partners.html

Part of

• #206

Portuguese donation page to update

https://pt.openfoodfacts.org/fazer-um-donativo-ao-open-food-facts

Set up an automatic deployment pipeline for static content

• Set up an automatic deployment pipeline for static content.
• Pull request for automated Product Opener deployment: https://github.com/openfoodfacts/openfoodfacts-server/pull/5436/files

Part of

• openfoodfacts/openfoodfacts-server#5512

Typo on homepage, 'submited' vs 'submitted'

What

The word 'submitted' is misspelled as 'submited' in the FAQ. This seemingly affects HTML contents across multiple language copies of this file.

Steps to reproduce the behavior:

1. Go to (for example) 'https://world.openfoodfacts.org/faq#data_verification'
2. See the word 'submited' is misspelled.

Expected behavior

Word should be spelled 'submitted'

Screenshots

Platform (Desktop, Mobile, Hunger Games)

• OS: All
• Platform: Web

Ensure the producer platform has an Eco-Score CTA

Ensure the producer platform has an eco-score cta

Uneven box heights of blogs in a row in the open food facts blog page contributes to inconsistency in design

What

In the Open food facts blog page, the boxes' height in the website version of the page is uneven which leads to inconsistency in its design of the overall page.

Steps to reproduce the behavior:

1. Go to https://blog.openfoodfacts.org/en/
2. Scroll vertically
3. See the difference in height

Expected behavior

The boxes in a row should be equal in height which will make the page look better and consistent in design as well.

Screenshots

Platform (Desktop, Mobile, Hunger Games)

• OS: Desktop
• Platform Desktop web version

Part of

https://forum.openfoodfacts.org/t/code-of-open-food-factss-blog-page/179
PS. I asked about this on the open food facts forum and was directed to come here. I do have knowledge of Wordpress, have worked with it in past, handled my first blog website there :), would like to contribute to this issue.

Add https://developers.google.com/search/docs/appearance/structured-data/dataset markup to the /data page

Problem

Add https://developers.google.com/search/docs/appearance/structured-data/dataset markup to the /data page to make the dataset discoverable by bots and search engines

The Japanese version mentions Open Pet Food Facts

What

The Japanese version mentions Open Pet Food Facts

Refresh the data page, using the README from https://github.com/openfoodfacts

Some changes in prod on pro platform contents are not reported here

What

• Eg. the french page has some more text.
• See differences and update.

Part of

• #206

Add feedback and contribution loops to static content

What

• Add feedback and contribution loops to static content

Update Nutri-Score page

What

Tasks

Beta Give feedback

1. Add a draft title or issue reference here
2. Update Nutri-Score page based on Santé publique France feedback
3. Update the page in general
4. Replace old videos
5. Remove finished petition
6. Create a section on Nutri-Score v2

Fix the missing files

  - source: /lang/en/obf/texts/mobile-app-open-beauty-facts.html
    translation: /lang/%two_letters_code%/obf/texts/mobile-app-open-beauty-facts.html
    languages_mapping:
      two_letters_code:
        zh-HK: zh_HK
        zh-CN: zh_CN
        en-AU: en_AU
        en-GB: en_GB
        pt-BR: pt_BR
        pt-PT: pt_PT
        nl-BE: nl_BE
        nl-NL: nl_NL
        zh-TW: zh_TW
        sr-CS: sr_CS
        sr: sr_RS
        ku : kmr_TR
        kmr: kmr
  - source: /openfoodfacts-server/madenearme/madenearme-world.html
    translation: /openfoodfacts-server/madenearme/madenearme_%two_letters_code%.html
    languages_mapping:
      two_letters_code:
        zh-HK: zh_HK
        zh-CN: zh_CN
        en-AU: en_AU
        en-GB: en_GB
        pt-BR: pt_BR
        pt-PT: pt_PT
        nl-BE: nl_BE
        nl-NL: nl_NL
        zh-TW: zh_TW
        sr-CS: sr_CS
        sr: sr_RS
        ku : kmr_TR
        kmr: kmr
  - source: /lang/obf/en/texts/data.en.html
    translation: /lang/obf/%two_letters_code%/texts/data.en.html
    languages_mapping:
      two_letters_code:
        zh-HK: zh_HK
        zh-CN: zh_CN
        en-AU: en_AU
        en-GB: en_GB
        pt-BR: pt_BR
        pt-PT: pt_PT
        nl-BE: nl_BE
        nl-NL: nl_NL
        zh-TW: zh_TW
        sr-CS: sr_CS
        sr: sr_RS
        ku : kmr_TR
        kmr: kmr
  - source: /lang/en/texts/donate.html
    translation: /lang/%two_letters_code%/texts/donate.html
    languages_mapping:
      two_letters_code:
        zh-HK: zh_HK
        zh-CN: zh_CN
        en-AU: en_AU
        en-GB: en_GB
        pt-BR: pt_BR
        pt-PT: pt_PT
        nl-BE: nl_BE
        nl-NL: nl_NL
        zh-TW: zh_TW
        sr-CS: sr_CS
        sr: sr_RS
        ku : kmr_TR
        kmr: kmr

Add margin-bottom to small button

What

Add margin-bottom to the small button

Screenshots

I don't know where to find the css style.

I only see the html l here

Create a page explaining how to contribute from mobile

While we have a page for the website ( openfoodfacts/openfoodfacts-server#54 ), there is no ressources that we can send to people on how to use the Android/Iphone/Windows phone app.

Refresh the development page, including the README from https://github.com/openfoodfacts

What

• Refresh the development page, including the README from https://github.com/openfoodfacts

Fix the faulty translations in Crowdin

Fix the faulty translations in Crowdin

• Open Beauty Facts, Open Pet Food Facts and Open Products Facts translations inserted as Open Food Facts translations
• Other issues

App install page broken for Open Beauty Facts

What

App install page broken for OBF
https://world-fr.openbeautyfacts.org/application-mobile-open-beauty-facts

Many images are 404 on the pro website

Hello,

I don't know if this is the good github repository, but there are many images which are 404 on the official website.

For example, 26 of them on https://world.pro.openfoodfacts.org/ :

Thanks for the good work you're doing!

Irrelevant string in producers.html

This appears as a string for translation.

It cannot be removed from here, it should be disabled on Crowdin, I've done it in the past, can I offer some help?

openfoodfacts-web/lang/en/texts/producers.html

Line 216 in 063d5cf

[[nutrients-list.html]]

Transform the actual presentation to a page on the website

Problem

On french producer platform, only help we provide to producers is a google presentation.
This is a good step and the presentation is really well done but has the problem that:

• this is not translated
• there is a long advocac, the producer might not want to read and maybe he wont understand operational infos comes thereafter !

Proposed solution

Move the documentation to web pages

• on page could contain the advocacy content
• the other page would be operational help

Those web pages would then be translated in English. And from there in various languages.

Alternative

We could try to keep as google docs, but translation will be really cumbersome.

Rename the mobile page

What

• For safety reasons in the past, we had given the mobile page a different name to avoid file overwrites in French and English. Those times are over, let's rename the page to the standard English name for easier deployments.

Help us compute needs a mention of the Eco-Score

• https://world.openfoodfacts.org/help-complete-products
• Help us compute needs a mention of the Eco-Score

Refresh the mobile app page

What

• Refresh the mobile app page
• https://fr.openfoodfacts.org/application-mobile-open-food-facts

Why

Include a link to the Nutri-Score simplified page and to Open Food Facts and the Nutri-Score in all Nutri-Score pages

Problem

Include a link to the Nutri-Score simplified page and to Open Food Facts and the Nutri-Score in all Nutri-Score pages

Code pointers

• https://github.com/openfoodfacts/openfoodfacts-web/blob/main/lang/en/texts/nutriscore.html
• https://world.openfoodfacts.org/open-food-facts-and-the-nutriscore

Create existing symlinks

Failed test 'footer_data_link link - lang: pt - textid: dados -- file /lang/pt/texts/dados.html does not exist'

The Wiki page about reusing data is not linked from the /data page

What

• The Wiki page about reusing data is not linked from the /data page
• https://wiki.openfoodfacts.org/Reusing_Open_Food_Facts_Data

Code pointers

• https://github.com/openfoodfacts/openfoodfacts-web/blob/main/lang/en/texts/data.html

Open Pet Food Facts data page not deployed

Open Pet Food Facts data page not deployed
https://world.openpetfoodfacts.org/data

Hello, I'm interested in getting information about Pet Food products for dogs. You're web in fantastic, there are many products, but I would like to download the data in excel format or PDF, no matter but I can't find how. Is there any possibility? I think it would help me in comparing similar products, etc.

No matter if the info is in English, French or Spanish.

Thanks a lot for your help
Cheers