green-code-initiative · AMorgaut · Jul 22, 2025 · Jul 24, 2025 · Jul 24, 2025 · Jul 24, 2025
diff --git a/apps/chrome-extension/README.md b/apps/chrome-extension/README.md
@@ -0,0 +1,5 @@
+# Chrome Extension sandbox
+
+temporary test extension app
+
+Sould be replaced by the cross-browser `web-estension` app
diff --git a/apps/chrome-extension/hello.html b/apps/chrome-extension/hello.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <h1>Hello Extensions</h1>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/apps/chrome-extension/manifest.json b/apps/chrome-extension/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "Hello Extensions",
+  "description": "Base Level Extension",
+  "version": "1.0",
+  "manifest_version": 3,
+  "action": {
+    "default_popup": "hello.html"
+  }
+}
diff --git a/apps/chrome-extension/popup.js b/apps/chrome-extension/popup.js
@@ -0,0 +1,2 @@
+
+console.log('This is a popup!');
diff --git a/apps/sonar-plugin/src/main/js/index.js b/apps/sonar-plugin/src/main/js/index.js
@@ -5,9 +5,9 @@ import "@creedengo/vue-dashboard/script"
 import "@creedengo/vue-dashboard/stylesheet"
 
 function start(options) {
-    const rootNode = options.el;
-    rootNode.innerHTML = `
-        <div id="app"</div>
+    const { el, component, branchLike } = options;
+    el.innerHTML = `
+        <div id="app" project="${component}" branch="${branchLike}"></div>
     `;
     return () => stop(rootNode)
 }

diff --git a/apps/vue-app/package.json b/apps/vue-app/package.json
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@creedengo/core-services": "workspace: *",
     "@creedengo/sonar-services": "workspace: *",
     "@creedengo/vue-ui": "workspace: *",
     "@creedengo/eslint-config": "workspace: *",

diff --git a/apps/vue-app/src/App.spec.js b/apps/vue-app/src/App.spec.js
@@ -2,27 +2,24 @@ import { vi, beforeAll, describe, it, expect } from 'vitest'
 
 import { mount } from '@vue/test-utils'
 
-import { getIssuesFacet } from '@/api/sonar/issues/sonar.issues.search.api'
-import { getNumberOfLineOfCode } from '@/api/sonar/measures/sonar.measures.component.api';
+import core from '@creedengo/core-services'
 
 import App from './App.vue'
 
-vi.mock('@/api/sonar/issues/sonar.issues.search.api')
-vi.mock('@/api/sonar/measures/sonar.measures.component.api');
+vi.mock('@creedengo/core-services')
 
 beforeAll(() => {
   // Mock the API calls
-  vi.mocked(getIssuesFacet).mockResolvedValue({ minor: 25 });
-  vi.mocked(getNumberOfLineOfCode).mockResolvedValue(100);
+  vi.mocked(core.calculateProjectScore).mockResolvedValue('D');
 });
 
 
 describe('App', () => {
 
     it('App renders properly by default', () => {
-        const wrapper = mount(App) 
+        const wrapper = mount(App, { props: { project: 'my-project', branch: 'master' }}) 
         expect(wrapper.exists()).toBeTruthy()
-        expect(wrapper.html()).toContain('You did it!')
+        expect(wrapper.find('h1').text()).toEqual('Creedengo Dashboard')
     })
 
 })

diff --git a/apps/vue-app/src/App.vue b/apps/vue-app/src/App.vue
@@ -1,21 +1,47 @@
 <script setup>
-import ScoreWidget from './components/Widgets/Score/ScoreWidget.vue';
+import { ref, computed } from 'vue'
+import Configuration from './components/pages/Settings.vue';
+import Dashboard from './components/pages/Dashboard.vue';
+import NotFound from './components/pages/NotFound.vue';
+
+const props = defineProps({
+  project: {
+    type: String,
+    required: true,
+  },
+  branch: {
+    type: String,
+    required: true,
+  }
+})
+
+const routes = {
+  '/': Dashboard,
+  '/settings': Configuration
+}
+
+const currentPath = ref(window.location.hash)
+
+window.addEventListener('hashchange', () => {
+  currentPath.value = window.location.hash
+})
+
+const currentView = computed(() => {
+  return routes[currentPath.value.slice(1) || '/'] || NotFound
+})
+
 </script>
 
 <template>
-  <header>
-    <h1>You did it!</h1>
-  </header>
-  <main>
-    <p>
-      You have successfully installed the Creedengo Dashboard plugin. This plugin is designed to help you
-      monitor and improve the sustainability of your codebase.
-    </p>
-    <ScoreWidget
-      project-key="my-project-key"
-      branch="main"
-    />
-  </main>
+  <component
+    :is="currentView"
+    :project="props.project"
+    :branch="props.branch"
+  />
+  <aside>
+    <a href="#/">Dashboard</a> |
+    <a href="#/settings">Settings</a>
+  </aside>
 </template>
 
 <style scoped>

diff --git a/apps/vue-app/src/api/mocks/handlers.js b/apps/vue-app/src/api/mocks/handlers.js
@@ -1,3 +1,3 @@
-import { sonarMswHandler } from '@creedengo/sonar-services'
+import sonar from '@creedengo/sonar-services'
 
-export const handlers = [...sonarMswHandler]
+export const handlers = [...sonar.handlers]
diff --git a/apps/vue-app/src/api/settings.js b/apps/vue-app/src/api/settings.js
@@ -0,0 +1,31 @@
+
+const nullStore = { get() {}, set() {} };
+
+const defaultStore = {
+    get(key){
+        return localStorage.getItem(key)
+    },
+    set(key, value){
+        return localStorage.setItem(key, value)
+    }
+}
+
+export default  {
+    get storageReady() {
+        return Boolean(this.get && (this.get !== nullStore.get))
+    },
+    get servicesReady() {
+        return Boolean(this.services)
+    },
+    reset() {
+        delete this.services
+        Object.assign(this, nullStore)
+    },
+    initStorage(store = defaultStore) {
+        this.get = key => store.get(key);
+        this.set = (key, value) => store.set(key, value);
+    },
+    initServices(services) {
+        this.services = services;
+    }
+}
diff --git a/apps/vue-app/src/components/Widgets/Score/ScoreWidget.spec.js b/apps/vue-app/src/components/Widgets/Score/ScoreWidget.spec.js
@@ -1,16 +1,26 @@
 import { vi, describe, it, expect } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 
-import { calculateProjectScore } from './score.service';
+import SonarAPI from '@creedengo/sonar-services'
+import core from '@creedengo/core-services';
 import ScoreWidget from './ScoreWidget.vue'
 
-vi.mock('./score.service')
+vi.mock('@creedengo/core-services', () => ({ default: {
+  api: { init: vi.fn() },
+  calculateProjectScore: vi.fn()
+}}))
 
 describe('ScoreWidget', () => {
+  it('Init the SonarAPI', async () => {
+    mount(ScoreWidget, { props: { project: 'my-project-key', branch: 'main' } })
+    await flushPromises()
+    expect(core.api.init).toHaveBeenCalledWith(SonarAPI)
+  })
   it('renders properly', async () => {
-    vi.mocked(calculateProjectScore).mockResolvedValue('D');
-    const wrapper = mount(ScoreWidget, { props: { projectKey: 'my-project-key', branch: 'main' } })
+    core.calculateProjectScore.mockResolvedValue('D');
+    const wrapper = mount(ScoreWidget, { props: { project: 'my-project-key', branch: 'main' } })
     await flushPromises()
+    expect(core.calculateProjectScore).toHaveBeenCalledWith({ project: 'my-project-key', branch: 'main' })
     expect(wrapper.text()).toContain('DABCDE') // Assuming the score is D based on the mock data
   })
 })
diff --git a/apps/vue-app/src/components/Widgets/Score/ScoreWidget.vue b/apps/vue-app/src/components/Widgets/Score/ScoreWidget.vue
@@ -17,10 +17,15 @@ import { onMounted, reactive } from 'vue';
 
 import { AbcdeScore } from '@creedengo/vue-ui'
 
-import { calculateProjectScore } from './score.service';
+import SonarAPI from '@creedengo/sonar-services'
+import core from '@creedengo/core-services';
+
+const { api, calculateProjectScore } = core;
+
+api.init(SonarAPI)
 
 const props = defineProps({
-  projectKey: {
+  project: {
     type: String,
     required: true,
   },
@@ -34,7 +39,7 @@ const state = reactive({ score: '', error: null });
 
 onMounted(async () => {
   try {
-    state.score = await calculateProjectScore(props.projectKey, props.branch);
+    state.score = await calculateProjectScore({ ...props });
   } catch (error) {
     state.score = 'N/A';
     console.error('Error fetching score:', error);

diff --git a/...omponents/dashboards/About Dashboards.mdx → ...src/components/pages/About Dashboards.mdx b/...omponents/dashboards/About Dashboards.mdx → ...src/components/pages/About Dashboards.mdx
diff --git a/apps/vue-app/src/components/pages/Dashboard.vue b/apps/vue-app/src/components/pages/Dashboard.vue
@@ -0,0 +1,26 @@
+<script setup>
+import ScoreWidget from '../Widgets/Score/ScoreWidget.vue';
+
+const props = defineProps({
+  project: {
+    type: String,
+    required: true,
+  },
+  branch: {
+    type: String,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <header>
+    <h1>Creedengo Dashboard</h1>
+  </header>
+  <main>
+    <ScoreWidget
+      :project="props.project"
+      :branch="props.branch"
+    />
+  </main>
+</template>
diff --git a/apps/vue-app/src/components/pages/NotFound.vue b/apps/vue-app/src/components/pages/NotFound.vue
@@ -0,0 +1,8 @@
+<template>
+  <header>
+    <h1>Wrong URL</h1>
+  </header>
+  <main>
+    Page not Found
+  </main>
+</template>
diff --git a/...e-app/src/components/dashboards/README.md → apps/vue-app/src/components/pages/README.md b/...e-app/src/components/dashboards/README.md → apps/vue-app/src/components/pages/README.md
@@ -1,4 +1,4 @@
-## Creedengo Dashboards
+## Creedengo Pages & Dashboards
 
 Creedengo Dashboards are "ready-to-use" dashboards that can be integgrated into one or more solutions.
 

diff --git a/apps/vue-app/src/components/pages/Settings.vue b/apps/vue-app/src/components/pages/Settings.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { SettingsForm } from '@creedengo/vue-ui'
+import settings from '../../api/settings';
+
+if (!settings.storageReady) {
+  settings.initStorage() // defaults to the Browser localStorage
+}
+</script>
+
+<template>
+  <header>
+    <h1>Creedengo Settings</h1>
+  </header>
+  <div>&nbsp;</div>
+  <main>
+    <settings-form :storage="settings" />
+  </main>
+</template>
diff --git a/apps/vue-app/vite.config.js b/apps/vue-app/vite.config.js
@@ -4,11 +4,16 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevTools from 'vite-plugin-vue-devtools'
 
-// https://vitejs.dev/config/
+/**
+ * 
+ * @see https://vitejs.dev/config/
+ * @see https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/#specifications
+ * @see https://w3c.github.io/sustainableweb-wsg/#visitor-constraints
+ */
 export default defineConfig({
   plugins: [vue(), VueDevTools()],
   build: {
-    target: 'esnext',
+    target: 'es2015', // Compliance with RGESN 2.4, WSG 2.2
     rollupOptions: {
       external: [],
       output: {

diff --git a/apps/web-extension/.gitignore b/apps/web-extension/.gitignore
@@ -0,0 +1,4 @@
+.turbo/
+dist/
+node_modules/
+web-ext-artifacts/
diff --git a/apps/web-extension/README.md b/apps/web-extension/README.md
@@ -0,0 +1,22 @@
+# CREEDENGO
+
+_creedengo_ is a collective project aiming to reduce environmental footprint of software at the code level. The goal of the project is to provide a list of static code analyzers to highlight code structures that may have a negative ecological impact: energy and resources over-consumption, "fatware", shortening terminals' lifespan, etc.
+
+## Configuration
+
+Open the application **options** to setup the Creedengo configuration. It will be stored in the web extension storage.
+
+### Configuration fields
+
+#### Sonar Authentication Token `string` (mandatory)
+
+This token is mandatory to authenticate to the sonar server with a role allowing to access to your projects data.
+
+#### Project key `string`
+
+The Project Key is necessary to get a sustainability score and priority rules to fix related to a project
+
+#### Server URL `string`
+
+The server URL is used to retrieve the project issues from the server HTTP API. It defaults to the Sonarcloud URL if no dedicated SonarQube URL is provided.
+
diff --git a/apps/web-extension/compat/browser-polyfill.js b/apps/web-extension/compat/browser-polyfill.js
@@ -0,0 +1,7 @@
+import polyfill from 'webextension-polyfill/dist/browser-polyfill.min.js'
+
+polyfill();
+
+if (!browserAction.sidebarAction) {
+    browserAction.sidebarAction = browser.sidePanel;
+}
diff --git a/apps/web-extension/index.html b/apps/web-extension/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Creedengo</title>
+  </head>
+  <body>
+    <div id="app"> bla bla </div>
+    <script type="module">
+      import "./compat/browser-polyfill.js"
+      import "@creedengo/vue-dashboard/script"
+      import "@creedengo/vue-dashboard/stylesheet"
+    </script>
+  </body>
+</html>