cnumr / ecoindex Goto Github PK

Intégration de la page analyse avec loader sans les cartes "infos utiles" pour le moment.
Post request vers l'api pour faire une analyse

CSS only needed on some pages should probably not be loaded everywhere.
Ex: .deco-container

• Contenu éditable en markdown (paramètres frontmatter)
• Partie anglaise de la page /result à mettre à jour avec le markdown
• Corrections sur mobile sur des calages d'éléments
• Carrés de couleurs correspondant aux résultats de page dans appreciations

We want to have a demo with github Page, We must to activate githubPage on this repository and test hugo initialisation with it.

Ajouter des callbacks visuels simples au hover et focus des boutons et liens

Count HTTP Requests errors // there is a bug on http https redirect on counting requests on Ecoindex.

in french

Pour cette question de test qui affiche 0 ou 1 requête j'ai souvent le soucis lorsqu'il y a une redirection (adresse http renseignée au lieu de https par exemple), l'extension navigateur est généralement plus fiable si on répète les mêmes conditions de test (et je suppose que ça évite aussi de trop surcharger le serveur d'ecoindex.fr si nous n'avons pas besoin de diffuser les résultats).

Wowchemy utilise du JS pour vérifier que le html ne contient pas de code malveillant.
Est-ce qu'on veut reprendre ce code pour ecoindex ?

(question posée par @Rdulieu)

Fix accessibility issues throughout the whole website

• the component giving the EcoIndex grade (A to G) is not accessible. Current letter element must use a aria-current attribute.
• …

Hi there,

Currently, this tool provides an estimate of the Environmental Footprint.
But without taking into account some of the most important points.

• Interpretation of the JavaScript for its execution
• Load generated by the execution of the JavaScript
• The type of server, dirty like AWS or optimized like Infomaniak
• How it is generated, CMS like WordPress or Static like with Hugo

This leads to improbable results like:

SCORE: A 88 / 100
SERVER: CLOUDFLARENET
NOTE: Heavy CPU load
URL: https://webglsamples.org/google-io/2011/40000-objects.html

SCORE: A 79 / 100
SERVER: OVH SAS
NOTE: Hosting without compensation, Multiple JS scripts, WordPress CMS
URL: https://www.centredartpontmain.fr/

SCORE: B 75 / 100
SERVER: O2Switch
NOTE: No JS or Cookies, Static Generation, One page, Hosting with compensation
URL: https://iglou.eu

SCORE: C 62 / 100
SERVER: POSITIVE-USA
NOTE: Almost exclusively text, no JavaScript or cookies, low-tech
URL: https://stallman.org/

SCORE: C 53 / 100
SERVER: FACEBOOK
NOTE: A Lot of JS loaded, tracking, cookies, facebook ...
URL: https://www.instagram.com/p/CeT0ebXKeoF/

To me, these are biases, which give a false image of an online resource.
The calculation of "complexity" seems to be a strong bias in the result, which considers text as "complexity".

What do you think?

This module will first include the ToggleSection component (see Collapsible Sections)

Adding content in folder fr/ following content specification

White text on yellow background has a bad contrast.

The english version shows english AND french content (duplicate > see menu).
The french version is working good.

Obtenir

• nombre éléments du DOM
• nombre de requêtes
• taille des requêtes

Actuellement c'est un peu bancal :

• le retour à la page d'accueil via le logo ne fonctionne pas vraiment
  • /fr/ pour le français, alors que ça devrait être /
  • / pour l'anglais alors que ça devrait être /en/
• de nombreux liens sont incorrects

It will be useful for anchors.
Use urlize (?)

The goal is to be able to publish statistics.
Maybe an API?

First draft by @AwebsomeFr and @DocRoms :

<IfModule mod_expires.c>
    # Sets or disables the cache.
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
    # Sets or disables the cache.
    <filesMatch "\.(jpe?g|png|svg|css|js)$">
        Header set Cache-Control "max-age=31536000, public"
    </filesMatch>
</IfModule>

All developers wants to have an access to the current EcoIndex code.

We must to load the current code zip to our drive.

Create the navigation structure of the site based on the specification.
We need a french and an english page for every accessible page.

Create widgets with basic elements following the specification

Le bleu foncé sur vert n'est pas assez contrasté (par ex. "Si légère", "1.12 Mo", "Peu de requêtes", etc.

Adding content in folder en/ following content specification

https://www.sitespeed.io/

Obtenir

• nombre éléments du DOM
• nombre de requêtes
• taille des requêtes

Est-ce complètement standalone ?

Est-ce pérenne ?

Look inside :

• Widget result-appreciation
• Widget result-detail-score
• Widget result-empreinte
• Widget result-intro
  …and maybe more

You will find strings that should be inside i18n folder in order to be translated.

@todo init hugo

• (done, pr coming) It should not be possible for the user to submit a empty url (currently possible, inits an infinite loading / client-side and-server side checking required).
• It should be possible for the user to submit an url without have to tip HTTP(s) protocol (currently impossible). Two options. 1. Accept all value and complete on submit. 2. Use pattern attribute to require a complete URL (using regex : it should be specified on UI). In both case, url must be at least a valid domain.

Intégration :

• du composant "Collapsible Section"
• des liens vers les ancres (grace aux ids de titre)

From homepage, users can request the analysis of a web page by entering the URL and activating the "Test website" button.

How to request the add_ecoindex_analysis_v1_ecoindexes_post endpoint (POST)?
Where from?
Is any redirection needed?

In a quick meeting between @Bastou @vvatelot and myself, we suggested 3 options:

The 3 options

A) POST from homepage, then, on success, redirect to a result page https://ecoindex.fr/resultat/123456

1. launch request on button activation

2. display a modal overlay screen with a spinner while waiting for response (JS needs to be enabled)

3. on request success, redirect to result page with the new result id (https://ecoindex.fr/resultat/123456)

   OPTIM: all important data (EcoIndex, GHG, water, etc.) are retrieved together with result id
   ==> it can be stored in LocalStorage like this:

   "ecoIndexes": {
     …
     "123455": {
       "url": "https://wikipedia.org/",
       "nodes": 346,
       "requests": 12,
       "grade": "A",
       "score": 89,
       "ges": 124,
       "water": 2345,
       "date": "1639681561",
       "page_type": "foo"
     },
     "123456": {
       "url": "https://www.laposte.fr/",
       "nodes": 3460,
       "requests": 120,
       "grade": "D",
       "score": 34,
       "ges": 1240,
       "water": 23450,
       "date": "1639681641",
       "page_type": "bar"
     },
     …
   }

4. result page display data thanks to the id in URL

   • from LocalStorage

   • or by resquesting get_ecoindex_analysis_by_id_v1_ecoindexes__id__get endpoint (and then store data in LocalStorage)

B) Intermediary "analysis page". GET from homepage to analysis page, then, on success, redirect to a result page https://ecoindex.fr/resultat/123456

1. from homepage, button activation simply goes to the analysis page with the entered URL : https://ecoindex.fr/analyse/https%3A%2F%2Fwikipedia.org

2. from there launch the POST request automatically (JS needed) and display a spinner while waiting for response

3. same as A

4. same as A

C) POST from an empty result page (https://ecoindex.fr/resultat/123456), then, on success, hydrate the page with data

1. from homepage, button activation simply goes to the result page with the entered URL : https://ecoindex.fr/resultat/?url=https%3A%2F%2Fwikipedia.org

2. from there launch the POST request automatically (JS needed) and display a modal overlay with a spinner while waiting for response

3. on request success hide the modal and hydrates the DOM with data. + change URL to https://ecoindex.fr/resultat/123456

My 2 cents

I would go for option A.

1. First step: without bothering with JS-disabled browsers
2. Explore static-site generation on-the-fly or server side generation

• using hugo with something like JS-DOM on a Node server for example)
• or sending github hooks to telle hugo to build the new page and "poll it" somehow?
• or using another language on the server side (is it possible to keep some code in common with hugo?!)
• or…

Dans le but d'utiliser les requests de la v2, et de ne pas (pour l'instant) recréer/ améliorer l'existant coté back, nous voulons comprendre et interroger le site actuel. Il faut donc trouver quelle requête est effectuée, quels sont ces paramêtres, et si on peut l'utiliser comme l'on veut actuellement.

Open a modal dialog?

Is historic Median take into account old values ? and shall we consider this has a bug?

www.yahoo.fr tested 2020/01/01
www.yahoo.fr tested 2020/07/01

the total median score use the 2 scores, but shall we use only the last one ?

• idea 1: give the admin the possibility (and right) to ban IPs or domains

Note: Breek manages the server. Engineers working there could probably help us investigate on that subject.

Lorsque l'on teste une URL de type Https://www.euronews.com L'analyse ne s'effectue pas en expliquant que l'URL n'est pas valide.

J'imagine que nous avons un check via une regex avec un http(s) quelque part. Il faudrait minifier les caractère ( en JS on peut faire un toLowerCase() ) avant de vérifier la validité de L'URL.

Ex de l'utilisation d'un toLowerCase() en JS :

const url = "HtTp://EuronEwS.Com";
url.toLowerCase();

Gestion du parcours d'analyse avec :

• post du formulaire avec redirection vers la page analyse
• requête post vers l'api sur la page analyse et récupération du résultat
• redirection vers la page résultat avec les bons éléments en paramètre de l'url

E.g. : https://ecoindex.neutral.hosting/resultat/?id=f636fe4e-82eb-49e5-ad6a-df3d9135ecbe

"Oh oh, dommage…
L'analyse n'a pas pu aboutir.

undefined"

For the next step of Hugo initialisation we must to have the current ecoIndex Login for change few things to the actual code, and get the results with an Ajax request.

Todo :

• Send a Request to Frederic Bordage

Dans les pages de résultats, nous avons un soucis d'encodage sur un espace :  

Sur le texte apparaissant lorsqu'un site obtient un grade F, le texte suivant apparait :
On ne va pas se le cacher : ça fait mal. Il est temps d'agir !
Le texte devrait être :
On ne va pas se le cacher : ça fait mal. Il est temps d'agir !

Configuration files should share the same extension.
Do we keep JSON or TOML ?
(I vote for JSON)

Find a way to put content in front matter or /data and pass it to javascript in a clean way (= not on window global variable)
See resultRelativeTextData in content/fr/result/index.md