chore: enhancements (#5)

* chore: add more server options

* chore: use vite env in frontend

* feat: optimize org selector ux

* chore: bump versions

.nvmrc

@@ -1 +1 @@
-v18.16.1
+v20.10.0

.yarn/versions/c4749c83.yml

@@ -0,0 +1,3 @@
+releases:
+  "@aoi-js/frontend": patch
+  "@aoi-js/server": patch

apps/frontend/README.md

@@ -1 +1,14 @@
-# `@aoi-js/ui`
+# AOI UI
+
+This is the frontend for the AOI project.
+
+## Configuration
+
+All configuration is done at build time. The following environment variables are available:
+
+| Variable             | Description                 | Default                    |
+| -------------------- | --------------------------- | -------------------------- |
+| `VITE_APP_NAME`      | The name of the application | `AOI`                      |
+| `VITE_GRAVATAR_BASE` | The base URL for Gravatar   | `https://www.gravatar.com` |
+
+To customize the configuration, set the environment variables before building the application.

apps/frontend/env.d.ts

@@ -4,4 +4,3 @@
 declare const __GIT_HASH__: string
 declare const __BUILD_TIME__: string
 declare const __GIT_BRANCH__: string
-declare const __APP_NAME__: string

apps/frontend/src/components/app/AppBar.vue

@@ -41,5 +41,5 @@ import SearchBox from '../homepage/SearchBox.vue'
 const { t } = useI18n()
 const appState = useAppState()
 
-const appName = __APP_NAME__
+const appName = import.meta.env.VITE_APP_NAME ?? 'AOI'
 </script>

apps/frontend/src/components/app/AppNavDrawer.vue

@@ -7,10 +7,12 @@
     <template #append>
       <VDivider />
       <div class="u-flex u-items-center">
-        <VBtn variant="text" class="text-none px-2" color="text" rounded="sm">
+        <VBtn variant="text" class="text-none text-left px-2" color="text" rounded="sm">
           <div>
-            <div class="u-text-sm">AoiUI v{{ appBuildInfo.version }}</div>
-            <div class="u-text-xs u-font-mono u-text-blue-900">
+            <div class="u-text-sm u-font-mono u-tracking-tighter">
+              AOI-UI v{{ appBuildInfo.version }}
+            </div>
+            <div class="u-text-xs u-font-mono u-tracking-tighter u-text-blue-900">
               {{ appBuildInfo.hash }}@{{ appBuildInfo.branch }}
             </div>
           </div>

apps/frontend/src/components/app/AppNavOrgSelector.vue

@@ -68,6 +68,7 @@ const joinedOrgs = useAsyncState(async () => {
       }
     }>
   >()
+  // TODO: optimize UX here
   const jmp = async () => {
     await router.isReady() // wait for router to be ready, FINE
     if (orgArr.length > 0 && router.currentRoute.value.path === '/') {

apps/frontend/src/stores/app.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useAsyncState, useLocalStorage, useTitle, watchDebounced } from '@vueuse/core'
 import { http, isLoggedIn, userId } from '@/utils/http'
 import { useRoute } from 'vue-router'
@@ -18,7 +18,11 @@ export const useAppState = defineStore('app_state', () => {
   }, null)
   watchDebounced(userId, () => user.execute(), { immediate: true })
 
-  const orgId = computed(() => '' + (route.params.orgId ?? ''))
+  const orgId = ref((route.params.orgId as string) ?? '')
+  watch(
+    () => route.params.orgId,
+    (val) => val && (orgId.value = val as string)
+  )
   const orgProfile = useAsyncState(
     async () => {
       if (!orgId.value) return null

apps/frontend/src/utils/avatar.ts

@@ -4,5 +4,5 @@ const GRAVATAR_BASE = import.meta.env.VITE_GRAVATAR_BASE ?? `https://www.gravata
 
 export function getAvatarUrl(mailOrHash: string) {
   mailOrHash = mailOrHash.includes('@') ? md5(mailOrHash) : mailOrHash
-  return `${GRAVATAR_BASE}/avatar/${mailOrHash}?d=identicon`
+  return `${GRAVATAR_BASE}/avatar/${mailOrHash}?d=mp`
 }

apps/frontend/vite.config.ts

@@ -35,8 +35,7 @@ export default defineConfig({
     'process.env': {},
     __GIT_HASH__: JSON.stringify(gitHash),
     __GIT_BRANCH__: JSON.stringify(gitBranch),
-    __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
-    __APP_NAME__: JSON.stringify(process.env.AOI_APP_NAME ?? 'AOI')
+    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
   },
   resolve: {
     alias: {

apps/server/README.md

@@ -1 +1,12 @@
-# Aoi Server
+# AOI Server
+
+## Configuration
+
+Configuration is done via environment variables.
+
+| Env variable name | Type     | Default                     | Description            |
+| ----------------- | -------- | --------------------------- | ---------------------- |
+| `AOI_MONGO_URL`   | `string` | `mongodb://localhost:27017` | MongoDB connection URL |
+| `AOI_JWT_SECRET`  | `string` | required                    | JWT Secret             |
+| `TRUST_PROXY`     | `any`    | `false`                     | Trust proxy            |
+| `LOG_LEVEL`       | `string` | `info`                      | Log level              |

apps/server/src/server/index.ts

@@ -4,8 +4,18 @@ import { apiRoutes } from '../routes/index.js'
 import { logger } from '../utils/logger.js'
 import { schemaRoutes } from './schemas.js'
 import { hasModule } from '../utils/module.js'
+import { loadEnv } from '../index.js'
 
-const server = fastify({ logger })
+const trustProxy = loadEnv('TRUST_PROXY', JSON.parse, false)
+
+if (trustProxy) {
+  logger.warn('Trust proxy is enabled')
+}
+
+const server = fastify({
+  logger,
+  trustProxy
+})
 
 await server.register(fastifySensible)
 

apps/server/src/utils/logger.ts

@@ -1,3 +1,6 @@
 import { pino } from 'pino'
+import { loadEnv } from './config.js'
 
-export const logger = pino()
+export const logger = pino({
+  level: loadEnv('LOG_LEVEL', String, 'info')
+})

docker/dockerfiles/server.dockerfile

@@ -1,11 +1,12 @@
-FROM node:18-alpine
+FROM node:20-alpine
 
-RUN corepack enable
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
 WORKDIR /opt
 COPY apps/server/package.tgz /opt/package.tgz
 RUN tar -xzf package.tgz && rm package.tgz && mv package aoi-server
 WORKDIR /opt/aoi-server
-RUN npm install --omit=dev --omit=optional
+RUN npm install --omit=dev --omit=optional && npm cache clean --force
 
 USER node