Knowledge panels for facet pages (tracker)

[teolemon]

What

• [ ] Self service linking to Wikidata (stored the same way as translations)
• [ ] Self-service uploading of SVG/PNG of logos (stored somewhere, not live immediately, and then manually committed to the repository)
• [x] Deep link to Hunger Games to annotate more products and logos (#2804 )
• [x] #8182

### Tasks
- [ ] Turn the category averages on the category facet page into a knowledge panel
- [ ] Turn the packager code map and address on the packager codes facet page into a knowledge panel
- [ ] Turn the Additives EFSA evaluation on the additives facet page into a knowledge panel
- [ ] https://github.com/openfoodfacts/openfoodfacts-server/issues/10216
- [ ] https://github.com/openfoodfacts/openfoodfacts-server/issues/10214
- [ ] https://github.com/openfoodfacts/openfoodfacts-server/issues/10215
- [ ] https://github.com/openfoodfacts/openfoodfacts-server/issues/7558
- [ ] Turn the "Organization Members" in the editor facet into a knowledge panel
- [ ] Add a CSS style to the  knowledge panels provided by the facet knowledge panel engine
- [ ] Turn the additives functions into a knowledge panel
- [ ] Add a customized promotion knowledge panel for the app (eg: the app for vegan products, for Nutri-Score, for Eco-Score, for Label XYZ)
- [ ] https://github.com/openfoodfacts/openfoodfacts-server/issues/10213

Part of

• 5493

Mockups

<div class="card" style="
"><br><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Get the Eco-Score of products with the Open Food Facts app</h4><p style="
    padding: 10px;
"><a href="https://world.openfoodfacts.org/open-food-facts-mobile-app">The Open Food Facts app</a> allows you to quickly get the Eco-Score of products: all you have to do is scan their barcode. If you have already installed the Open Food Facts app, please update it to get the new version!</p>
    <img src="https://static.openfoodfacts.org/images/misc/mobileapp/new_openfoodfacts_app_en_light_3_screenshots.png" alt="The Eco-Score on the Open Food Facts app" style="/* max-height: 400px; */">
</div>

<div class="card"><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Discover how the Eco-Score is computed</h4>

<a href="/ecoscore" class="buttonbar button" style="top:0;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg> <span class="bt-text">Discover the Eco-Score methodology</span></a></div>

[teolemon]

[doublah]

Could probably show the brand website from wikidata and link that too.

[teolemon]

Probably related to the Taxonomy Editor

[alexgarel]

I think https://github.com/openfoodfacts/facets-knowledge-panels is part of the answer.

[teolemon]

After the call with the agency, a quick and dirty mockup on how the facet page could be improved @stephanegigandet @alexgarel @raphael0202

<div class="card" style="
"><br><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Get the Eco-Score of products with the Open Food Facts app</h4><p style="
    padding: 10px;
"><a href="https://world.openfoodfacts.org/open-food-facts-mobile-app">The Open Food Facts app</a> allows you to quickly get the Eco-Score of products: all you have to do is scan their barcode. If you have already installed the Open Food Facts app, please update it to get the new version!</p>
    <img src="https://static.openfoodfacts.org/images/misc/mobileapp/new_openfoodfacts_app_en_light_3_screenshots.png" alt="The Eco-Score on the Open Food Facts app" style="/* max-height: 400px; */">
</div>

<div class="card"><h4 id="packaging"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 6l-2 4v11l1 1h6l1-1V10L8.941 6H5zm-1 6h6v5H4v-5zM5 3h4v2H5zM13 14h8v8h-8v-6.937zM13/sv8zg/"></path></svg>Discover how the Eco-Score is computed</h4>

<a href="/ecoscore" class="buttonbar button" style="top:0;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg> <span class="bt-text">Discover the Eco-Score methodology</span></a></div>

[teolemon]

We could reuse some of the material we're creating for social media (eg the analysis done for world pulse day)