feat: tailwind, nuxt ui and guardhouse scaffolding

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    gray: 'stone',
+    primary: 'red',
+  },
+})

components/app/home/membership-card.vue

@@ -20,7 +20,7 @@ const membershipGradient: Record<Exclude<User['memberType'], null>, string> = {
     </div>
 
     <f7Card v-else-if="user" class="m-0!">
-      <f7CardContent class="h-45 rounded-[16px]" valign="top" :class="membershipGradient[user.memberType!]">
+      <f7CardContent class="h-44 rounded-[16px]" valign="top" :class="membershipGradient[user.memberType!]">
         <div class="flex flex-col w-full h-full text-white dark:text-inherit">
           <div class="flex flex-col flex-1">
             <span class="font-bold text-3xl">

components/app/home/page.vue

@@ -4,7 +4,7 @@ import { f7List, f7Page } from 'framework7-vue'
 
 <template>
   <f7Page no-navbar>
-    <f7List inset class="space-y-8">
+    <f7List class="space-y-8">
       <div>
         <AppHomeMembershipCard />
       </div>

nuxt.config.ts

@@ -16,7 +16,7 @@ export default defineNuxtConfig({
 
   modules: [
     'nuxt-vuefire',
-    '@unocss/nuxt',
+    '@nuxt/ui',
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
     '~/modules/build-info',

package.json

@@ -22,13 +22,13 @@
     "@cloudflare/workers-types": "^4.20230914.0",
     "@libsql/client": "^0.3.4",
     "@nuxt/devtools": "latest",
+    "@nuxt/ui": "^2.8.1",
     "@paralleldrive/cuid2": "^2.2.2",
     "@tanstack/query-persist-client-core": "^4.35.3",
     "@tanstack/query-sync-storage-persister": "^4.35.3",
     "@tanstack/vue-query": "^4.35.3",
     "@ts-rest/core": "^3.30.2",
     "@ts-rest/vue-query": "^3.30.2",
-    "@unocss/nuxt": "^0.56.0",
     "@vite-pwa/assets-generator": "^0.0.10",
     "@vite-pwa/nuxt": "^0.1.1",
     "@vueuse/core": "^10.4.1",
@@ -43,14 +43,25 @@
     "framework7": "^8.3.0",
     "framework7-icons": "^5.0.5",
     "framework7-vue": "^8.3.0",
+    "jose": "^4.14.6",
+    "lint-staged": "^14.0.1",
     "material-icons": "^1.13.11",
     "nuxt": "^3.7.3",
     "nuxt-vuefire": "^0.3.0",
     "qrcode": "^1.5.3",
     "simple-git": "^3.20.0",
+    "simple-git-hooks": "^2.9.0",
     "vue-tsc": "^1.8.15",
     "vuefire": "^3.1.17",
     "web-auth-library": "^1.0.3",
     "zod": "^3.22.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,vue,md}": [
+      "eslint --cache --fix"
+    ]
   }
 }

pages/guard/[...slug].vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { f7AccordionContent, f7App, f7Block, f7BlockTitle, f7Button, f7List, f7ListItem, f7Navbar, f7Page, f7SkeletonBlock, f7View } from 'framework7-vue'
+import 'framework7/css/bundle'
+import 'framework7-icons/css/framework7-icons.css'
+import 'material-icons/iconfont/material-icons.css'
+
+// @ts-expect-error Missing types
+import Framework7 from 'framework7/lite-bundle'
+
+// @ts-expect-error Missing types
+import Framework7Vue from 'framework7-vue/bundle'
+
+Framework7.use(Framework7Vue)
+
+const dark = useDark()
+const route = useRoute()
+</script>
+
+<template>
+  <f7App name="SSTAA Guard House Check Point" theme="md" :dark-mode="dark">
+    <f7View
+      main
+      class="safe-areas"
+      :url="route.path"
+      :master-detail-breakpoint="768"
+      ios-swipe-back
+      preload-previous-page
+    >
+      <f7Page>
+        <f7Navbar title="SSTAA Guard House Check Point" />
+      </f7Page>
+    </f7View>
+  </f7App>
+</template>

pages/index.vue

@@ -1,8 +1,27 @@
 <script setup lang="ts">
+import 'tailwindcss/src/css/preflight.css'
 </script>
 
 <template>
   <div>
-    Imagine a landing page here!
+    <header class="border-b border-b-gray-200 dark:border-b-gray-800 p-3">
+      <div class="container mx-auto">
+        <span class="font-semibold">SSTAA</span>
+      </div>
+    </header>
+
+    <div class="p-3">
+      <div class="container mx-auto flex flex-col gap-3">
+        <UButton to="/app" :prefetch="false">
+          Open SSTAA App
+        </UButton>
+        <UButton to="/admin" :prefetch="false">
+          Open SSTAA Admin Portal
+        </UButton>
+        <UButton to="/guard" :prefetch="false">
+          Open SSTAA Guard House Portal
+        </UButton>
+      </div>
+    </div>
   </div>
 </template>