Git Product home page Git Product logo

ecoindex's Introduction

Image of CnumR

EcoIndex

(English version below)

EcoIndex est un outil du Collectif Conception Numérique Responsable

Contribuer

La contribution à l’ensemble de nos outils est ouvert à tout le monde, après s’être fait connaitre du collectif,

Nous recherchons des personnes ayant des connaissances dans la tech, et dans le domaine de la traduction.

Pour faciliter les échanges, un channel #ecoIndex est dédié au projet sur le Mattermost de l'association GreenIt

Le Projet

La nouvelle version d’EcoIndex (V3) est réalisée avec Hugo.

Le projet se base sur le module Hugo base-structure.

Installation

  1. Téléchargez et installez la dernière version extented disponible de Hugo (procédure d'installation de Hugo, en anglais).
  2. Téléchargez et installez la version 18 de Node.js (page de téléchargement de Node.js, en anglais).
  3. Depuis un terminal :
    1. Clonez ce dépôt avec la commande git clone https://github.com/cnumr/EcoIndex.git ou avec git clone [email protected]:cnumr/EcoIndex.git si vous utilisez SSH.
    2. Installez les dépendances avec la commmande npm install.
    3. Démarrez le serveur Hugo avec la commande hugo server.
  4. Rendez-vous à l'adresse http://localhost:1313 avec votre navigateur web.

Astuces pour les développeurs

Tester le build de prod en local

$ hugo serve --environment production

Tester le projet en local avec des clones locaux de modules utilisés dans le projet (ex. Good Impact Base Structure et Every Layout Pure CSS)

$ env HUGO_MODULE_REPLACEMENTS="gitlab.com/goodimpact/goodimpact-hugo/modules/base-structure -> ~/workspace/modules/base-structure,gitlab.com/goodimpact/every-layout-css -> ~/workspace/every-layout-css" hugo serve

(Cet exemple suppose que le code des modules se trouve dans ~/workspace)

Pour plus de praticité, on peut écrire un script :

~/dev.sh

#!/bin/bash
cmd="";
for cmdPart in "$@"
do
    cmd+=$cmdPart;
		cmd+=" "
done

res="env HUGO_MODULE_REPLACEMENTS=\"gitlab.com/goodimpact/goodimpact-hugo/modules/base-structure -> ~/workspace/modules/base-structure,gitlab.com/goodimpact/every-layout-css -> ~/workspace/every-layout-css"\" "

res+=$cmd

echo $res

bash -c "$res"

et l'utiliser ainsi :

$ ~/dev.sh hugo serve

ou par exemple :

$ ~/dev.sh hugo serve --environment production

Déploiement

Déploiement automatique grace aux Github Actions (WIP)

Licence

Le site internet www.ecoindex.fr, ainsi que les règles d'analyses et de calcul de l'ecoindex sont publiés sous licence Creative Commons BY-NC-ND. Cela signifie que vous pouvez l'utiliser librement pour des utilisations non commerciales, à la condition de maintenir la paternité du contenu, via un lien vers http://www.ecoindex.fr


Image of CnumR

EcoIndex

EcoIndex is a tool from the french Collectif Conception Numérique Responsable

Contribute

All of our tools are open to contributions from everybody, after having contacted the collective.

We seek people with technical skills, and people able to make translations and localizations.

There’s a dedicated Mattermost channel for the project.

The project

The new version of EcoIndex is built with Hugo.

The project is based on the Hugo module base-structure.

Setup

  1. Download and install the latest extented version available of Hugo (Hugo installation procedure).
  2. Download and install version 18 of Node.js (Node.js download page).
  3. From a terminal:
    1. Clone this repository with the command git clone https://github.com/cnumr/EcoIndex.git or with git clone [email protected]:cnumr/EcoIndex.git if you prefer to use SSH.
    2. Install the dependencies with the command npm install.
    3. Start the Hugo server with the command hugo server.
  4. Go to http://localhost:1313 with your web browser.

Tips for developers

Testing production build on dev environment

$ hugo serve --environment production

Testing on dev environment with local checkouts of the modules used in the project (ex. Good Impact Base Structure et Every Layout Pure CSS)

$ env HUGO_MODULE_REPLACEMENTS="gitlab.com/goodimpact/goodimpact-hugo/modules/base-structure -> ~/workspace/modules/base-structure,gitlab.com/goodimpact/every-layout-css -> ~/workspace/every-layout-css" hugo serve

(this example assumes you have cloned the modules in ~/workspace)

For more convenience, you can write a script:

~/dev.sh

#!/bin/bash
cmd="";
for cmdPart in "$@"
do
    cmd+=$cmdPart;
		cmd+=" "
done

res="env HUGO_MODULE_REPLACEMENTS=\"gitlab.com/goodimpact/goodimpact-hugo/modules/base-structure -> ~/workspace/modules/base-structure,gitlab.com/goodimpact/every-layout-css -> ~/workspace/every-layout-css"\" "

res+=$cmd

echo $res

bash -c "$res"

and use it like this:

$ ~/dev.sh hugo serve

ou for example:

$ ~/dev.sh hugo serve --environment production

Deployment

Automatic deploys thanks to Github Actions (WIP)

License

The website www.ecoindex.fr, as well as the ecoindex analysis and calculation rules are published under Creative Commons BY-NC-ND license. This means that you can use it freely for non-commercial uses, on condition that you maintain the authorship of the content, via a link to http://www.ecoindex.fr

ecoindex's People

Contributors

alpha14 avatar aureliebaton avatar bastou avatar bgatellier avatar dependabot[bot] avatar docroms avatar julienwilhelm avatar margaux-e avatar paulphpe avatar rdulieu avatar rlemaire avatar thomaserhel avatar vvatelot avatar yaaax avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ecoindex's Issues

GitHubPage Configuration

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

Find the good path for make EcoIndex request

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.

Parcours analyse depuis la page d'accueil

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

Proposal to improve the score calculation

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?

Create site structure

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

Problème de contraste

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

Duplicate content with i18n

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

How to request the ecoindex analysis from front-end? (detailed sequence)

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

Pros

Cons

  • Cancelling the request is easy: request.abort() + close the modal screen (test page URL stays in the input field)

  • Result page is a real result page, no analysis is requested from this URL

  • JS-disabled alternative:

    • Home: there won't be a modal screen, the request will be done from an html <form method="post">. The button to cancel the request will need to be next to the submit button
    • Result: we'll need to find a way to generate static result pages (github hook?)
  • "Automatic analysis link": this URL will need to be redirected to homepage with a GET parameter like:
    https://ecoindex.fr/analyse/https%3A%2F%2Fwikipedia.org --> https://ecoindex.fr/?autoanalysis=1&url=https%3A%2F%2Fwikipedia.org and then:

    • if JS is enabled, analysis could be done automatically on page load

    • if JS is disabled, user will need to activate the button to submit the URL
      Note: do we really need an "auto-analysis link"?

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

Pros

Cons

  • Cancelling the request is easy: request.abort() + go back in browser history (test page URL may still be in the input field)

  • Result page is a real result page, no analysis is requested from this URL

  • "Automatic analysis link" is straightforward: https://ecoindex.fr/analyse/https%3A%2F%2Fwikipedia.org (only when JS is enabled)

  • JS-disabled alternative:
    • Home: we'll need to switch to the behaviour of the "auto-analysis link" with no JS (see A)
    • Analysis page: not existing. Only exists for JS-enabled browsers.
    • Result: (Same as A) we'll need to find a way to generate static result pages on the fly (github hook?)
    • "Automatic analysis link": not working. Server side rendering (ex. PHP…) or "static site generation on-the-fly" needed here.

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

Pros

Cons

  • Cancelling the request is easy: request.abort() + go back in browser history (test page URL may still be in the input field)
  • Result page is a both an analysis page and a result page

  • "Automatic analysis link" : URL https://ecoindex.fr/resultat/?url=https%3A%2F%2Fwikipedia.org is weird so we'll need a redirection as in A

  • JS-disabled alternative:

    • Home: we'll need to switch to the behaviour of the "auto-analysis link" with no JS (see A)
    • Result: (Same as A) we'll need to find a way to generate static result pages on the fly (github hook?)
    • URL cannot be changed.
    • "Automatic analysis link": Same as A, we'll need a redirection

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…

URL form submission required improvements

  • (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.

Problème d'encodage d'un texte sur les pages de résultats

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

Sur le texte apparaissant lorsqu'un site obtient un grade F, le texte suivant apparait :
On ne va pas se le cacher&nbsp;: ç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 !

Screenshot_20220909_200336_edit_411295271273698

Config files type

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

Count HTTP Requests errors

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).

Nettoyer la gestion des traductions

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

Get current EcoIndex login

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

Handle cache in .htaccess

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>

Page Analyse - Intégration

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

Problème sur les URLs ayant une majuscule dans le protocole.

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();

Fix accessibility issues

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.

Page Résultat - Fine tuning

  • 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.