introduce eslint and prettier and GHA checks (#21)

* introduce eslint and prettier

* add GHA CI

* run prettier again

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+name: Generate Check
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run Generate
+        run: yarn generate

.github/workflows/deploy.yml

@@ -28,8 +28,8 @@ jobs:
     needs: build
     # 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:
       name: github_pages

.github/workflows/prettier.yml

@@ -0,0 +1,24 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run Prettier
+        run: yarn prettier --check .

README.md

@@ -3,8 +3,9 @@
 Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
 ## Note
-The `@encointer/worker-api` uses the browser's built-in `webcrypto` api. This library is only available in secure 
-secure contexts. Hence, in local development you must use `localhost`. `webcrypto` is undefined on `127.0.0.1` and 
+
+The `@encointer/worker-api` uses the browser's built-in `webcrypto` api. This library is only available in secure
+secure contexts. Hence, in local development you must use `localhost`. `webcrypto` is undefined on `127.0.0.1` and
 `0.0.0.0`.
 
 ## Setup

app.config.ts

@@ -1,10 +1,10 @@
-import { defineAppConfig } from '#imports'
+import { defineAppConfig } from "#imports";
 
 export default defineAppConfig({
-  title: 'Integritee',
+  title: "Integritee",
   theme: {
     colors: {
-      primary: '#ff0000',
+      primary: "#ff0000",
     },
   },
-})
+});

app.vue

@@ -1,10 +1,11 @@
-git<script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-import { useAsyncData } from '#imports'
-import Footer from '@/components/Footer'
-
-var exports = {};
-const Header = defineAsyncComponent(() => import('@/components/Header'))
+git
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+import { useAsyncData } from "#imports";
+import Footer from "@/components/Footer";
+
+const exports = {};
+const Header = defineAsyncComponent(() => import("@/components/Header"));
 </script>
 
 <template>
@@ -51,11 +52,11 @@ const Header = defineAsyncComponent(() => import('@/components/Header'))
 
 .top-lines {
   position: absolute;
-    right: -152px;
-    top: 436px;
-    width: 1061px;
-    transform: rotate(-159.84deg);
-    z-index: -1;
+  right: -152px;
+  top: 436px;
+  width: 1061px;
+  transform: rotate(-159.84deg);
+  z-index: -1;
 
   @include lg {
     width: 1417px;
@@ -87,11 +88,11 @@ const Header = defineAsyncComponent(() => import('@/components/Header'))
 
 .bottom-lines {
   position: absolute;
-    left: -198px;
-    top: -1858px;
-    width: 936px;
-    transform: rotate(159.84deg) scale(-1, 1);
-    z-index: -1;
+  left: -198px;
+  top: -1858px;
+  width: 936px;
+  transform: rotate(159.84deg) scale(-1, 1);
+  z-index: -1;
 
   @include lg {
     width: 1023px;
@@ -113,7 +114,7 @@ const Header = defineAsyncComponent(() => import('@/components/Header'))
 }
 
 .cookie-wrapper {
-  font-family: 'Inter';
+  font-family: "Inter";
   .cookieControl__BarContainer {
     border-radius: 24px;
     background: rgba(81, 81, 81, 0.25);

assets/css/main.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

assets/scss/_fonts.scss

@@ -1,24 +1,26 @@
 @font-face {
-    font-family: 'Inter';
-    src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'),
-        url('@/assets/fonts/Inter-Regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
+  font-family: "Inter";
+  src:
+    url("@/assets/fonts/Inter-Regular.woff2") format("woff2"),
+    url("@/assets/fonts/Inter-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Inter';
-    src: url('@/assets/fonts/Inter-Medium.woff2') format('woff2'),
-        url('@/assets/fonts/Inter-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
+  font-family: "Inter";
+  src:
+    url("@/assets/fonts/Inter-Medium.woff2") format("woff2"),
+    url("@/assets/fonts/Inter-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
 }
 
-
 @font-face {
-    font-family: 'WhyteInktrap';
-    src: url('@/assets/fonts/WhyteInktrap-Medium.woff2') format('woff2'),
-        url('@/assets/fonts/WhyteInktrap-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}
+  font-family: "WhyteInktrap";
+  src:
+    url("@/assets/fonts/WhyteInktrap-Medium.woff2") format("woff2"),
+    url("@/assets/fonts/WhyteInktrap-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}

assets/scss/_variables.scss

@@ -8,7 +8,7 @@ $sm_pSm: 0.875em;
 // Default Paragraph .paragraph_medium
 $pDef: 1.125em;
 $md_pDef: 1em;
-$sm_pDef: .875em;
+$sm_pDef: 0.875em;
 
 // Large paragraph .paragraph_large
 $pLg: 1.5em;
@@ -28,10 +28,10 @@ $tLg: 4.5em;
 $md_tLg: 3.375em;
 $sm_tLg: 2.5em;
 
-$ltBlue: #5B92FF;
-$gray: #88888C;
+$ltBlue: #5b92ff;
+$gray: #88888c;
 $alphaGray: rgba(255, 255, 255, 0.2);
-$darkBlue: #11111A;
+$darkBlue: #11111a;
 
 // Breakpoints
 $lg: 1366px;
@@ -41,32 +41,31 @@ $sm: 840px;
 $xsm: 420px;
 
 @mixin lg {
-    @media screen and (max-width: $lg) {
-        @content;
-    }
+  @media screen and (max-width: $lg) {
+    @content;
+  }
 }
 
 @mixin slg {
-    @media screen and (max-width: $slg) {
-        @content;
-    }
+  @media screen and (max-width: $slg) {
+    @content;
+  }
 }
 
 @mixin md {
-    @media screen and (max-width: $md) {
-        @content;
-    }
+  @media screen and (max-width: $md) {
+    @content;
+  }
 }
 
-
 @mixin sm {
-    @media screen and (max-width: $sm) {
-        @content;
-    }
+  @media screen and (max-width: $sm) {
+    @content;
+  }
 }
 
 @mixin xsm {
-    @media screen and (max-width: $xsm) {
-        @content;
-    }
-}
+  @media screen and (max-width: $xsm) {
+    @content;
+  }
+}