Beds 128/add formatting

frontend/.gitignore

@@ -1,3 +1,6 @@
+# Dev Environment
+!.vscode/
+
 # Nuxt dev/build outputs
 .output
 .data

frontend/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "vivaxy.vscode-conventional-commits",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "usernamehw.errorlens",
+    "nuxtr.nuxt-vscode-extentions",
+    "vue.volar"
+  ]
+}

frontend/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "conventionalCommits.scopes": [
+    "i18n",
+    "vscode",
+    "eslint"
+  ],
+  "editor.rulers": [
+    80,
+    120
+],
+
+}

frontend/README.md

@@ -1,6 +1,7 @@
 # Beaconch.in Good to know
 
 ## Usefull VSC Plugins
+
 - Nuxtr
 - EsLint
 - Prettier -COde Formatter
@@ -20,49 +21,60 @@ Clone the `beaconchain` repository from git.
 On your console, navigate to folder `beaconchain/frontend`.
 
 Type
+
 ```bash
 cp .npmrc-example .npmrc
 ```
 
 In your `.npmrc` file, replace `FA_TOKEN` with an actual key for Font Awesome.
 
 Then type:
+
 ```bash
 cp .env-example .env
 ```
+
 In file `.env`, write the URLs of the API servers and the secret key to access to them.
 The variable evoking the development is used to show/hide features and components that are not ready for production.
 
 Set the following mapping in your `/etc/hosts` file:
+
 ```
 127.0.0.1 local.beaconcha.in
 ```
 
 Create server certificates for locally running on https, by runing these comands in the console (the last two with `sudo`)
+
 ```bash
 openssl genrsa 2048 > server.key
 chmod 400 server.key
 openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
 ```
+
 Add the following env variable (on Ubuntu: in your `~/.profile`) needed to load local mock data:
+
 ```bash
 export NODE_TLS_REJECT_UNAUTHORIZED=0
 ```
 
 Restart.
 
 Navigate to folder `beaconchain/frontend` and run
+
 ```bash
 npm install
 ```
 
 If you prefer to use _pnpm_, _yarn_ or _bun_ instead of _npm_:
+
 ```bash
 sudo npm install -g pnpm
 sudo npm install -g yarn
 sudo npm install -g bun
 ```
+
 then
+
 ```bash
 pnpm install
 yarn install
@@ -79,6 +91,7 @@ pnpm run dev
 yarn dev
 bun run dev
 ```
+
 Now you can browse the front-end at https://local.beaconcha.in:3000/
 
 ## Production
@@ -121,5 +134,3 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 
 We documented our decisions in the [decisions](decisions.md) file.
 The documentation should be inspired by Architecture Decision Records ([ADR](https://adr.github.io/)).
-
-

frontend/app.vue

@@ -3,15 +3,18 @@ import { generateUUID } from '~/utils/misc'
 
 // Used for debugging purposes, might be removed or moved later
 provide('app-uuid', { value: generateUUID() })
-useHead({
-  script: [
-    {
-      key: 'revive',
-      src: '../js/revive.min.js',
-      async: false
-    }
-  ]
-}, { mode: 'client' })
+useHead(
+  {
+    script: [
+      {
+        key: 'revive',
+        src: '../js/revive.min.js',
+        async: false,
+      },
+    ],
+  },
+  { mode: 'client' },
+)
 useWindowSizeProvider()
 useBcToastProvider()
 useDateProvider()
@@ -27,5 +30,4 @@ useDateProvider()
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

frontend/app/router.options.ts

@@ -1,5 +1,9 @@
 export default {
-  scrollBehavior (_to: any, _from: any, savedPosition: { left: number, top: number } | null) {
+  scrollBehavior(
+    _to: any,
+    _from: any,
+    savedPosition: { left: number, top: number } | null,
+  ) {
     return { _to, ...savedPosition }
-  }
+  },
 }

frontend/assets/css/colors.scss

@@ -22,13 +22,13 @@
   --light-black: #2a262c;
   --dark-blue: #2f2e42;
   --purple-blue: #3e4461;
-  --light-purple-blue: #545C7E;
-  --sky-blue:#cde3ee;
+  --light-purple-blue: #545c7e;
+  --sky-blue: #cde3ee;
   --light-blue: #66bce9;
-  --melllow-blue: #7db5eC;
+  --melllow-blue: #7db5ec;
   --blue: #2e82ae;
   --teal-blue: #116897;
-  --mint-green: #D3E4D4;
+  --mint-green: #d3e4d4;
   --flashy-green: #90ed7d;
   --light-green: #4e7451;
   --green: #7dc382;
@@ -37,7 +37,7 @@
   --light-red: #d42127;
   --dark-red: #ce3438;
   --bold-red: #b10b11;
-  --pastel-red: #F1C5C6;
+  --pastel-red: #f1c5c6;
   --yellow: #ffd600;
   --light-yellow: #969100;
   --purple: #9747ff;
@@ -74,7 +74,7 @@
 
   --button-secondary-color: var(--light-black);
   --button-secondary-hover-color: var(--light-grey-6);
-  --button-secondary-background-color--hover: var(--light-grey-4 );
+  --button-secondary-background-color--hover: var(--light-grey-4);
   --button-secondary-background-color: var(--grey-4);
   --button-secondary-border-color: var(--light-grey-7);
 
@@ -84,7 +84,7 @@
   --container-color: var(--light-black);
   --container-border-color: var(--light-grey-3);
   --container-border: 1px solid var(--container-border-color);
-  
+
   --subcontainer-background: var(--light-grey-2);
 
   --input-background: var(--grey-4);
@@ -153,7 +153,6 @@
   --toast-background-error-color: var(--pastel-red);
   --toast-border-error-color: var(--bold-red);
 
-
   &.dark-mode {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
@@ -222,4 +221,4 @@
     --list-hover-background: var(--dark-grey);
     --list-hover-descrete-color: var(--grey);
   }
-}
+}