Improve the main card and tagline

[g123k]

Hi everyone,

As part of #5300, we will change a little bit the design of the homepage.
The idea is to keep the carousel but to improve the main card.

Basically, here's a mockup of the change:

• There will be a clear hint to scan or search (= this sentence may be hidden on small devices)
• The tagline is now in a dedicated card

That's why we have to evolve the content of tagline's JSON to add - at least -:

• A title
• An image

And to ease the maintenance for @teolemon, a tagline can contain multiple items that will be randomly displayed.
Here's a proposal of the new JSON:

[
   {
      "language":"en",
      "items":[
         {
            "url":"https://translate.openfoodfacts.org/project/openfoodfacts/af",
            "title":"My awesome title",
            "message":"My awesome content",
            "button_label":"Read more",
            "image":{
               "url":"http://world.openfoodfacts.org/logo.png",
               "width":"0.2"
            },
            "start_date":"1717161456000",
            "end_date":"1717161456000",
            "visible":true
         },
         {
            "url":"https://translate.openfoodfacts.org/project/openfoodfacts/af",
            "title":"My awesome title",
            "message":"My awesome content",
            "button_label":"Read more",
            "image":{
               "url":"http://world.openfoodfacts.org/logo.png",
               "width":"0.2"
            },
            "start_date":"1717161456000",
            "end_date":"1717161456000",
            "visible":true
         },
      ]
   }
]

Optional fields:

• button_label
• start_date and end_date
• visible (by default: true)
• image (width is in %)

All items will be displayed by their position in the JSON: first item in the first position…
As we now require items, instead of data, I suggest creating separate files and not in /files/tagline-off-ios-v2.json.

If you have any suggestion, feel free to comment 😇

[teolemon]

@g123k was mentionned on the server side call yesterday 👍

[g123k]

Here is the new proposal for the JSON:

{
	"news": {
		"nutriscore_v2": {
			"start_date": "08/06/2024 00:00:00",
			"end_date": "31/06/2024 23:59:59",
			"url": "https://openfoodfacts.org/nutriscore-v2",
			"translations": {
				"default": {
					"title": "It's new!",
					"message": "The **New Calculation** of the NutriScore is available in the application",
					"button_label": "Learn more",
					"image": {
						"url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-en.svg",
						"width": 0.2,
						"alt": "NutriScore A logo",
					}
				},
				"en_us": {
					"title": "It's brand new!"
				},
				"fr": {
					"title": "C’est tout nouveau !",
					"message": "Le **Nouveau Calcul** du NutriScore est disponible dans l’application",
					"button_label": "En savoir plus",
					"image": {
						"url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-fr.svg",
						"width": 0.2,
						"alt": "Le logo du NutriScore A",
					}
				}
			}
		},
		"demo": {
			"start_date": "",
			"end_date": "",
			"url": "https://translate.openfoodfacts.org/project/openfoodfacts/af",
			"style": {
				"title_background": "#000000",
				"title_text_color": "#FFFFFF",
				"title_indicator_color": "#EB5757",
				"message_background": "#000000",
				"message_text_color": "#FFFFFF",
				"button_background": "#000000",
				"button_text_color": "#FFFFFF",
				"content_background_color": "#219653"
			},
			"translations": {
				"default": {
					"url": "https://translate.openfoodfacts.org/project/openfoodfacts/en",
					"title": "My title",
					"message": "My message",
					"button_label": "My button",
					"image": {
						"url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-en.svg",
						"width": 0.2
					}
				},
				"fr": {
					"url": "https://translate.openfoodfacts.org/project/openfoodfacts/fr",
					"title": "C’est tout nouveau !",
					"message": "Le **Nouveau Calcul** du NutriScore est disponible dans l’application",
					"button_label": "En savoir plus",
					"image": {
						"url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-fr.svg",
						"width": 0.2
					}
				}
			}
		}
	},
	"tagline_feed": {
		"default": {
			"news": [
				{
					"id": "nutriscore_v2"
				}
			]
		},
		"fr_FR": {
			"news": [
				{
					"id": "nutriscore_v2",
					"override": {
						"start_date": "12/06/2024 10:00:00"
					}
				}
			]
		}
	}
}

We now define a list of news and on the other side, we have the tagline_feed, allowing this JSON to be used for potentially other use cases (e.g.: full-screen message).

For each piece of news, all fields provided in demo are available, including the ability to style it.
Mandatory items are:

• id (the key of the item)
• url
• translations->default

And in the default translation:

• title
• message

In each translation, we can override the url, but that's the only "overridable" field.
This is how a translation is managed:

1. The default is loaded
2. If my language/country is available, I'll take it -> eg "fr_FR"
3. Otherwise, if my language is available, I'll take it -> eg "fr"
4. If I have an "overridden" translation, it will replace items from default (to clear a field, it needs to be a blank entry)

For the tagline_feed, we need to provide at least a default entry with a list of news
For each news, we can override all items from the news.

Last point of attention: to override a date, it needs to be a blank entry and not NULL one.

[teolemon]

• "In each translation, we can override the url, but that's the only "overridable" field." Why @g123k ?
• Is the news key nested in the tagline_feed key mobilizing items from the top level news key ?
• Blank is to avoid unintentional overrride, I believe. if you override a date with blank, what happens ? what's the use case ?

@g123k

[g123k]

• "In each translation, we can override the url, but that's the only "overridable" field." Why @g123k ?

The idea is to distinguish the pure content to how and where it will be displayed.
When I say the url is the only field "overridable", it's because start_date and end_date actually are… but on the tagline_feed.

• Is the news key nested in the tagline_feed key mobilizing items from the top level news key ?

Yes, the idea is to say, I want this, this and this news. (it doesn't require a visible field anymore).
That way, we can later add a popup_screen for example, where we say, I want this particular content.
Or why not, a full feed of news: the idea is to be as generic as possible.

• Blank is to avoid unintentional overrride, I believe. if you override a date with blank, what happens ? what's the use case ?

Eg: You have an end_dateon a news, but in Italy, you don't wan't it -> no more end_date

[g123k]

Updated JSON with:

• Image -> alt
• Style -> title_indicator_color and content_background_color

An example is available here: https://mock_18ef88079f344225853f73970c3fa2b2.mock.insomnia.rest/files/tagline-off-ios-v3.json