Update Development Enviorment with new Packages and Config (#37)

* chore: add and update dependecies add husky for pre commit hooks add tailwind css with postcss-nested plugin too add eslint vue accessibility and update prettier config update tsconfig and other dependecies as well use nuxt instead of nuxt-ts with modern and analyze on Signed-off-by: Lakshya Singh <[email protected]> * style: format and lint Signed-off-by: Lakshya Singh <[email protected]> * feat: tailwind jit config added Signed-off-by: Lakshya Singh <[email protected]> * chore: nodejs 10 deprecated update ci Signed-off-by: Lakshya Singh <[email protected]> * fix: jit enable in tailwind config add purge icons deprecate @mdi/js with vuetify for purge icons enable jit in tailwind and remove dark mode from vuetify Signed-off-by: Lakshya Singh <[email protected]>
COPS-IITBHU · May 13, 2021 · d0bac98 · d0bac98
1 parent cdd6bd5
commit d0bac98
Show file tree

Hide file tree

Showing 27 changed files with 4,575 additions and 3,155 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,20 +5,29 @@ module.exports = {
     node: true,
   },
   extends: [
+    'plugin:vuejs-accessibility/recommended',
     '@nuxtjs/eslint-config-typescript',
-    'prettier',
-    'prettier/vue',
-    'plugin:prettier/recommended',
     'plugin:nuxt/recommended',
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'prettier',
   ],
-  plugins: ['prettier'],
+  plugins: ['vuejs-accessibility', 'prettier'],
   // add your custom rules here
   rules: {
+    'vue/html-self-closing': 0,
+    'vue/singleline-html-element-content-newline': 0,
     'prettier/prettier': [
       'error',
       {
         endOfLine: 'auto',
       },
     ],
   },
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
+  globals: {
+    $nuxt: true,
+  },
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,45 @@
+name: Lint Checks
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14, 15]
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@master
+
+      - name: Setup node env 🏗
+        uses: actions/[email protected]
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Get yarn cache directory path 🛠
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache node_modules 📦
+        uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies 👨🏻‍💻
+        run: yarn
+
+      - name: Run linter 👀
+        run: yarn lint
+
+      - name: Test Build
+        run: yarn generate
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn format && yarn lint
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false
+}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -3,8 +3,7 @@
 // The variables you want to modify
 // $font-size-root: 20px;
 
-
 $timeline-divider-width: 150px;
 $timeline-wedge-size: 50px;
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
 $body-font-family: Roboto !important;
diff --git a/components/CommonTimeline.vue b/components/CommonTimeline.vue
@@ -1,108 +1,110 @@
-<template>
-  <v-container class="container timeline-container">
-    <v-timeline>
-      <v-timeline-item
-        v-for="(item, i) in items"
-        :key="i"
-        :color="item.color"
-        :icon="item.icon"
-        fill-dot
-        small
-      >
-        <template v-slot:opposite>
-          <span
-            v-if="i % 2 == 0"
-            data-aos="zoom-in-left"
-            data-aos-delay="70"
-            data-aos-duration="800"
-            :class="`item-date ${item.color}--text`"
-            v-text="item.year"
-          ></span>
-          <span
-            v-else
-            data-aos="zoom-in-right"
-            data-aos-delay="70"
-            data-aos-duration="800"
-            :class="`item-date ${item.color}--text`"
-            v-text="item.year"
-          ></span>
-        </template>
-
-        <div
-          v-if="i % 2 == 0"
-          data-aos="zoom-in-left"
-          data-aos-delay="80"
-          data-aos-duration="900"
-          class=""
-        >
-          <h2 :class="`mb-4 item-title ${item.color}--text`">
-            {{ item.title }}
-          </h2>
-          <div class="item-content">{{ item.content }}</div>
-          <v-btn
-            v-if="item.button"
-            href="https://www.google.com/"
-            target="_blank"
-            :color="item.color"
-            class="mt-4"
-            outlined
-            >Button</v-btn
-          >
-        </div>
-        <div
-          v-else
-          data-aos="zoom-in-right"
-          data-aos-delay="80"
-          data-aos-duration="900"
-          class=""
-        >
-          <h2 :class="`mb-4 item-title ${item.color}--text`">
-            {{ item.title }}
-          </h2>
-          <div class="item-content">{{ item.content }}</div>
-          <v-btn
-            v-if="item.button"
-            href="https://www.google.com/"
-            target="_blank"
-            :color="item.color"
-            class="mt-4"
-            outlined
-            >Button</v-btn
-          >
-        </div>
-      </v-timeline-item>
-    </v-timeline>
-  </v-container>
-</template>
-
-<script>
-// You can also use <link> for styles
-// ..
-
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => {},
-    },
-  },
-  data() {
-    return {}
-  },
-}
-</script>
-<style scoped>
-.timeline-container {
-  width: 60%;
-}
-.item-title {
-  font-family: 'Neucha', cursive;
-}
-.item-content {
-  font-family: 'Dosis', sans-serif;
-}
-.item-date {
-  font-size: x-large;
-  font-family: 'Neucha', cursive;
-}
-</style>
+<template>
+  <v-container class="container timeline-container">
+    <v-timeline>
+      <v-timeline-item
+        v-for="(item, i) in items"
+        :key="i"
+        :color="item.color"
+        :icon="item.icon"
+        fill-dot
+        small
+      >
+        <template v-slot:opposite>
+          <span
+            v-if="i % 2 == 0"
+            data-aos="zoom-in-left"
+            data-aos-delay="70"
+            data-aos-duration="800"
+            :class="`item-date ${item.color}--text`"
+            v-text="item.year"
+          ></span>
+          <span
+            v-else
+            data-aos="zoom-in-right"
+            data-aos-delay="70"
+            data-aos-duration="800"
+            :class="`item-date ${item.color}--text`"
+            v-text="item.year"
+          ></span>
+        </template>
+
+        <div
+          v-if="i % 2 == 0"
+          data-aos="zoom-in-left"
+          data-aos-delay="80"
+          data-aos-duration="900"
+          class=""
+        >
+          <h2 :class="`mb-4 item-title ${item.color}--text`">
+            {{ item.title }}
+          </h2>
+          <div class="item-content">{{ item.content }}</div>
+          <v-btn
+            v-if="item.button"
+            href="https://www.google.com/"
+            target="_blank"
+            :color="item.color"
+            class="mt-4"
+            outlined
+          >
+            Button
+          </v-btn>
+        </div>
+        <div
+          v-else
+          data-aos="zoom-in-right"
+          data-aos-delay="80"
+          data-aos-duration="900"
+          class=""
+        >
+          <h2 :class="`mb-4 item-title ${item.color}--text`">
+            {{ item.title }}
+          </h2>
+          <div class="item-content">{{ item.content }}</div>
+          <v-btn
+            v-if="item.button"
+            href="https://www.google.com/"
+            target="_blank"
+            :color="item.color"
+            class="mt-4"
+            outlined
+          >
+            Button
+          </v-btn>
+        </div>
+      </v-timeline-item>
+    </v-timeline>
+  </v-container>
+</template>
+
+<script>
+// You can also use <link> for styles
+// ..
+
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+<style scoped>
+.timeline-container {
+  width: 60%;
+}
+.item-title {
+  font-family: 'Neucha', cursive;
+}
+.item-content {
+  font-family: 'Dosis', sans-serif;
+}
+.item-date {
+  font-size: x-large;
+  font-family: 'Neucha', cursive;
+}
+</style>