Update eslint and ts setup

README.md

@@ -39,7 +39,13 @@ Make sure your development environment has the necessary prerequisites.
 
 2. [VSCode](https://code.visualstudio.com/) – you could also use another editor, but this helps us guarantee linter/formatter features.
 
-3. [AWS CLI](https://aws.amazon.com/cli/) – create an [AWS profile](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html) named `consensus-networks-dev`.
+3. [Volar VSCode Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) – Vue 3 language support (turn off vetur and ts/js language features if you have problems arising from conflicts).
+
+4. [Eslint VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) – linter and formatter.
+
+*Note: AWS credentials usage is not yet set up, but we will require the AWS CLI when it is.*
+
+*5. [AWS CLI](https://aws.amazon.com/cli/) – create an [AWS profile](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html) named `consensus-networks-dev`.*
 
 ### Install
 

apps/website/package.json

@@ -13,6 +13,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.5.4",
     "vite": "^2.9.9",
     "vite-plugin-pages": "^0.23.0",

apps/website/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

apps/website/src/App.vue

@@ -1,13 +1,24 @@
 <template>
   <Suspense>
-    <Component :is="layout">
+    <component :is="layout">
       <RouterView />
-    </Component>
+    </component>
   </Suspense>
 </template>
 
 <script lang="ts" setup>
-import { ref, markRaw } from 'vue'
+import { useRoute, RouterView } from 'vue-router'
+import { ref, markRaw, watch } from 'vue'
 import DefaultLayout from '@/layouts/default-layout.vue'
+const route = useRoute()
 const layout = ref(markRaw(DefaultLayout))
+
+watch(() => route.path, (value) => {
+    // Alternative blog layout example
+    if (value.includes('/blog')) {
+        // layout.value = markRaw(BlogLayout)
+    } else {
+        layout.value = markRaw(DefaultLayout)
+    }
+})
 </script>

apps/website/src/index.css

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

apps/website/src/pages/index/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <span>Hello, world</span>
+    <section class="mt-6 flex">
+      <span class="m-auto">Hello, world</span>
+    </section>
   </div>
 </template>
 
 <script lang="ts" setup>
-console.log('Hello, Steve')
+console.log('Hello, world')
 </script>

apps/website/tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    content: [
+        './**/*.{vue,ts,js,css}'
+    ],
+    // theme: {
+    //     extend: {
+    //         colors: {}
+    //     }
+    // },
+    plugins: []
+}