First iteration of rule repository on the website

.env.example

@@ -0,0 +1 @@
+VITE_RULES_URL=

.github/workflows/build-and-deploy.yml

@@ -4,38 +4,39 @@
 name: Build and deploy
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
+
+env:
+  VITE_RULES_URL: https://utarwyn.github.io/ecoCode/rules.json # only for testing purposes
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-
-    - name: Use Node.js 18.X
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18.X
-        cache: 'npm'
+      - uses: actions/checkout@v3
 
-    - name: Install dependencies
-      run: npm install
+      - name: Use Node.js 18.X
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.X
+          cache: "npm"
 
-    - name: Lint
-      run: npm run lint
+      - name: Install dependencies
+        run: npm install
 
-    - name: Build
-      run: npm run build
+      - name: Lint
+        run: npm run lint
 
-    - name: Replace symlinks by the targeted file
-      run: find ./dist -type l -exec sh -c 'cp --remove-destination "$(readlink "{}")" "{}"' \;
-    - name: Archive production artifacts
-      uses: actions/upload-pages-artifact@v2
-      with:
-        path: ./dist
+      - name: Build
+        run: npm run build
 
+      - name: Replace symlinks by the targeted file
+        run: find ./dist -type l -exec sh -c 'cp --remove-destination "$(readlink "{}")" "{}"' \;
+      - name: Archive production artifacts
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist
 
   # Deploy job
   deploy:
@@ -44,8 +45,8 @@ jobs:
 
     # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
     permissions:
-      pages: write      # to deploy to Pages
-      id-token: write   # to verify the deployment originates from an appropriate source
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
 
     # Deploy to the github-pages environment
     environment:

src/App.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
-import Header from '@/components/shared/layout/AppHeader.vue';
-import Footer from '@/components/shared/layout/AppFooter.vue';
+import { RouterView } from "vue-router";
+import Header from "@/components/shared/layout/AppHeader.vue";
+import Footer from "@/components/shared/layout/AppFooter.vue";
 </script>
 
 <template>
   <Header />
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <template v-if="Component">
+      <Suspense>
+        <component :is="Component" />
+      </Suspense>
+    </template>
+  </RouterView>
   <Footer />
 </template>

src/assets/variables.css

@@ -1,7 +1,9 @@
 :root {
     /* Colors */
     --color-primary: #355086;
+    --color-primary-new: #035c25;
     --color-on-primary: #ffffff;
+    --color-primary-container: hsl(220 43% 37% / 5%);
     --color-primary-lighter: hsl(220, 43%, 65%);
     --color-primary-focus-ring: hsl(220, 43%, 37%, 20%);
     --color-secondary: #57c18b;
@@ -12,9 +14,12 @@
     --color-on-quaternary: #ffffff;
     --color-additionnal-1: hsl(40, 100%, 89%);
     --color-additionnal-1-hover: hsl(40, 100%, 81%);
+    --color-warning-container: rgba(255, 206, 133, 50%);
+    --color-on-warning-container: #97743f;
 
     --color-surface: white;
     --color-on-surface: #022826;
+    --color-on-surface-bright: #59646A;
 
     /* Shadows */
     --shadow-small: 0px 2px 2px rgba(0, 0, 0, .04);

src/components/rules/RuleCard.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import AppBadge from "@/components/shared/AppBadge.vue";
+import RuleSeverity from "@/components/rules/RuleSeverity.vue";
+import { computed } from "vue";
+
+const { rule } = defineProps<{ rule: Rule }>();
+const isDeprecated = computed(() => rule.status === "DEPRECATED");
+</script>
+
+<template>
+  <div class="rule-card">
+    <div class="rule-info" :class="isDeprecated ? 'deprecated' : ''">
+      <span class="rule-name">{{ rule.name }}</span>
+      <span class="rule-id">{{ rule.id }}</span>
+    </div>
+    <div class="rule-badges">
+      <RuleSeverity :severity="rule.severity" />
+      <AppBadge v-for="tech in rule.technologies" :key="tech" :text="tech" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rule-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: var(--shadow-border-small);
+  border-radius: 0.5rem;
+  padding: 1rem;
+
+  .rule-info {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &.deprecated {
+      color: var(--color-on-surface-bright);
+      text-decoration: line-through;
+    }
+
+    .rule-name {
+      font-weight: bold;
+    }
+
+    .rule-id {
+      color: var(--color-on-surface-bright);
+    }
+  }
+
+  .rule-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}
+</style>

src/components/rules/RuleFilterItem.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+const isChecked = defineModel<boolean>();
+defineProps<{ id: string; label: string }>();
+</script>
+
+<template>
+  <div class="filter-item">
+    <input :id="id" type="checkbox" v-model="isChecked" />
+    <label :for="id">
+      {{ label.charAt(0).toUpperCase() + label.slice(1).toLowerCase() }}
+    </label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.filter-item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  background-color: hsl(0 0% 91% / 50%);
+  padding: 0.5rem 1rem;
+
+  &:hover {
+    background-color: hsl(0 0% 91%);
+  }
+
+  input[type="checkbox"] {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-surface);
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px #979797;
+    outline-color: #022826;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    &::before {
+      position: absolute;
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      opacity: 0;
+      transition: 50ms opacity ease-in-out;
+      background-color: var(--color-primary-new);
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      width: 0.6rem;
+      height: 0.6rem;
+      margin: 0.2rem;
+      opacity: 0;
+      transition: 40ms opacity ease-in-out;
+      background-color: var(--color-on-primary);
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+
+    &:checked {
+      border-color: var(--color-primary-new);
+    }
+
+    &:checked::before,
+    &:checked::after {
+      opacity: 1;
+    }
+  }
+
+  label {
+    font-weight: bold;
+    flex-basis: 100%;
+    user-select: none;
+
+    &::before {
+      position: absolute;
+      content: "";
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/rules/RuleSeverity.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import CircleChevronDownIcon from "@/assets/icons/circle_chevron_down.svg?component";
+import CircleChevronUpIcon from "@/assets/icons/circle_chevron_up.svg?component";
+import InfoIcon from "@/assets/icons/info.svg?component";
+import { type Component, computed } from "vue";
+
+const icons: Record<Rule["severity"], Component> = {
+  INFO: InfoIcon,
+  MINOR: CircleChevronDownIcon,
+  MAJOR: CircleChevronUpIcon,
+  CRITICAL: CircleChevronUpIcon,
+} as const;
+
+const props = defineProps<{ severity: Rule["severity"] }>();
+const icon = computed(() => icons[props.severity]);
+</script>
+
+<template>
+  <div class="rule-severity" :class="severity.toLowerCase()">
+    {{ severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase() }}
+    <component :is="icon" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rule-severity {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  background-color: rgba(var(--background-color), 0.5);
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: rgb(var(--icon-color));
+  }
+
+  &.info,
+  &.minor {
+    --background-color: 133, 218, 255;
+    --icon-color: 57, 98, 115;
+  }
+
+  &.major {
+    --background-color: 255, 206, 133;
+    --icon-color: 151, 116, 63;
+  }
+
+  &.critical {
+    --background-color: 255, 133, 133;
+    --icon-color: 151, 68, 63;
+  }
+}
+</style>